CSS3Sebelum 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 HTMLwidth: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);
}
<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!THE END
Happy curl \m/
Happy curl \m/
Kalau browser lain gue kurang tahu dimana keberadaannya :D Dari tadi ngomongin editor, sebenarnya AA mau berbagi trik dan tips bagaimana menjadikan browsingan menjadi sebuah teks kode editor sederhana! Apakah dengan teknik menanamkan Add-Ons for browse? Itu teknik kecanggihan bagi kita user awam :P 
Browsingan google chrome minimalis yang terbuat dari CSS3 karya Master Taufik ini merupakan tampilan dari single windows chrome secara minimalis. Yang namanya minimalis sudah pasti sederhana ;))
Layout akhir chrome browser window karya designrshub mungkin ada sedikit kode yang hilang! Sehingga screenshot dan demo sedikit berbeda ;)) Tapi tetap keren lah :P
Bisa jadi CSShrome merupakan kreasi terbaik di antara ke dua kreasi sebelumnya :"> Dengan diikutsertakan penanaman script 
