How I create this CSS3 page curl effect? - html

Question

I am trying to create a page curl effect using CSS3. That effect should be something similar to this -
I tried to get it to work but couldn't figure it out.
This is my code sofar
.nav {
width: 200px;
background: #353942;
height: 50px;
position: relative;
}
.curl {
width:70px;
height:50px;
position: absolute;
top:0;
right:0;
background: linear-gradient(
25deg,
#4c4c4c 0%,
#474747 39%,
#2c2c2c 50%,
#000000 51%,
#111111 60%,
#2b2b2b 76%,
#1c1c1c 91%,
#131313 100%);
box-shadow : 0 0 10px rgba(0,0,0,0.5);
transition: all .5s ease;
}
.curl:before,
.curl:after {
content: '';
position: absolute;
z-index: -1;
left: 12.5%;
bottom: 5.8%;
width: 70%;
max-width: 300px;
max-height: 100px;
height: 55%;
box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3);
transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
left: auto;
right: 5.8%;
bottom: auto;
top: 14.16%;
transform: skew(-25deg) rotate(-84deg);
}
.curl:hover {
width: 120px;
height: 50px;
}
.curl:hover:before,
.curl:hover:after {
box-shadow: 0 24px 30px rgba(0, 0, 0, 0.3);
}
This is JS BIN
Can anybody tell me how I figure this out?
Any ideas would be greatly appreciated.
Thank you.

Answer 1

check this out.
.nav {
width: 200px;
background: #353942;
height: 50px;
position: relative;
}
.curl {
width:120px;
height:120px;
position: absolute;
top:0;
left:0;
background :
linear-gradient(
135deg,
#fff,
#f3f3f3 45%,
#ddd 50%,
#aaa 50%,
#bbb 56%,
#ccc 62%,
#f3f3f3 80%,
#fff 100%
);
box-shadow : 0 0 10px rgba(0, 0, 0, .5);
transition: all .5s ease;
}
.curl:before,
.curl:after {
content: '';
position: absolute;
z-index: -1;
left: 12.5%;
bottom: 5.8%;
width: 70%;
max-width: 300px;
max-height: 100px;
height: 55%;
box-shadow: 0 12px 15px rgba(0, 0, 0, .3);
transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
left: auto;
right: 5.8%;
bottom: auto;
top: 14.16%;
transform: skew(-15deg) rotate(-84deg);
}
.curl:hover {
width: 240px;
height: 240px;
}
.curl:hover:before,
.curl:hover:after {
box-shadow: 0 24px 30px rgba(0, 0, 0, .3);
}