Peel, Flip, or Curl is Same Effect

Ternyata trick satu ini belum tuntas juga, masih ada yang membuatnya ;)) Trik bikin page peel effect hanya memakai atribut CSS3 Sebelum memulai cara dan bumbu membuat page curl effect, ada baiknya sobat melihat koleksi beberapa trik serupa yg ada di blog keren ini :D flip the page or peel efek. Kesemua koleksi tutorial itu dibuat memakai atribut CSS saja. Ada yg pakai gambar, box-shadow, zooming untuk membuat efek mengelupas atau mengkerut!

.curl {
width:99px;
height:99px;
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;
overflow: hidden;
}
.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);
}

Markup HTML<a class="curl" href="ADD LINK HERE" target="top" title="WRITE TITLE HERE"></a>

Jika sobat kepengen ada konten di balik daerah curl, ya silahkan baca di sini pell/flip page efek!

• tilt
• do a barrel roll
• Google Tanpa Navbar
• YouTube's Harlem Shake Easter Egg

THE END
Happy curl \m/