PROWAREtech
CSS: Page with Lifted Corners
A piece of paper laying flat with lifted, peeled or curled corners with a couple versions to help fit different scenarios.
It is possible to have a corner or, in this example, corners of a page appear to be lifting off the object they are sitting on. Most of the magic happens when the transformation rotate() is applied. Remove the z-index: -1; line when making adjustments.
Hello, World!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curled/Peeled Corners using CSS</title>
<style>
body {
background: #f5f5f5;
}
.page {
position: relative;
background: #fff;
margin: 100px;
padding: 100px;
width: 300px;
box-shadow: 0 25px 25px -35px rgba(0,0,0,0.25); /* this just adds a touch of shadow to the bottom of the page */
}
.page::before,
.page::after {
content: "";
position: absolute;
top: 90%; /* may have to change the top for a taller page */
bottom: 13px; /* may have to change the bottom for a taller page */
box-shadow: 0 10px 15px rgba(0,0,0,0.25); /* this is for the curled page corners */
z-index: -1;
}
/* left bottom corner shadow */
.page::before {
left: 5px;
right: 50px;
transform: rotate(-3deg); /* may have to change the degrees rotated for a wider page */
}
/* right bottom corner shadow */
.page::after {
left: 50px;
right: 5px;
transform: rotate(3deg); /* may have to change the degrees rotated for a wider page */
}
</style>
</head>
<body>
<div class="page"></div>
</body>
</html>
The top, bottom, and degrees of rotation need to be changed when increasing or decreasing the size of .page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curled/Peeled Corners using CSS</title>
<style>
body {
background: #f5f5f5;
}
.page {
position: relative;
background: #fff;
margin: 100px;
width: 1000px;
height: 500px;
box-shadow: 0 25px 25px -35px rgba(0,0,0,0.25); /* this just adds a touch of shadow to the bottom of the page */
}
.page::before,
.page::after {
content: "";
position: absolute;
top: 90%; /* may have to change the top for a taller page */
bottom: 25px; /* may have to change the bottom for a taller page */
box-shadow: 0 10px 15px rgba(0,0,0,0.25); /* this is for the curled page corners */
z-index: -1;
}
/* left bottom corner shadow */
.page::before {
left: 5px;
right: 50px;
transform: rotate(-2deg); /* may have to change the degrees rotated for a wider page */
}
/* right bottom corner shadow */
.page::after {
left: 50px;
right: 5px;
transform: rotate(2deg); /* may have to change the degrees rotated for a wider page */
}
</style>
</head>
<body>
<div class="page"></div>
</body>
</html>
An alternate version which may work better for some applications than the above examples. Notice that this version does not rely upon z-index.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curled/Peeled Corners using CSS</title>
<style>
.table-top {
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
.sheet-1 {
position: relative;
height: 200px;
width: 300px;
}
.sheet-1::before,
.sheet-2::before {
content: "";
position: absolute;
top: 80%;
bottom: 14px;
box-shadow: 0 10px 15px rgba(0,0,0,.3);
}
.sheet-1::before {
left: 10px;
right: 50px;
transform: rotate(-5deg);
}
.sheet-2::before {
left: 50px;
right: 10px;
transform: rotate(5deg);
}
.sheet-2,
.sheet-3 {
position: absolute;
background: #fff;
width: 100%;
height: 100%;
}
.sheet-content {
padding: 7px;
overflow: auto;
height: calc(100% - 14px);
font-size: 13px;
}
</style>
</head>
<body>
<div class="table-top">
<div class="sheet-1"><div class="sheet-2"><div class="sheet-3"><div class="sheet-content">Officiis enim aliquid ad blanditiis voluptas eveniet reiciendis omnis quia dolor, eligendi veritatis, sequi non quas magnam quae eum nobis possimus voluptatum corporis perspiciatis accusamus. Inventore quisquam, officiis quae eum veniam optio nemo consectetur! Aspernatur quia voluptatum, architecto sed sint recusandae voluptas voluptatibus molestias rerum porro tenetur laboriosam ratione doloremque quod at ipsa? Saepe neque tempore, similique eaque aliquid vitae. Labore voluptatum in quasi odit officiis ut?</div></div></div></div>
</div>
</body>
</html>
Comment
