Mnjelajah fitur ol/ul ternyata tidak ada habisnya juga!
Membuat ordered list full stylish dimana menghasilkan satu kreasi cuantik seputaran tag
<ol> Pada postingan sebelumnya Koben pernah berbagi
membuat latar belakang seperti buku tulis! Tentunya trik² tersebut murni menggunakan sentuhan jurus² maut dari CSS3 :D Satu kunci sukses dari cikal bakal menjadi seorang master CSS 3 tidak lain harus rajin² bermain & berpraktek dengan bahasa
Cascading Style Sheets. Tidak tahu dapat inspirasi dari mana, postingan master Madalin Tudose menerangkan tentang
how to create a paper sticky note using only css3, teringat kembali pada
image post with effect isolasi. Diperhatikan dari ke dua artikel tersebut, sekarang bagaimana cara membuat sticky note berlatar belakang buku tulis dibubuhi efek isolasi pure memakai attribute CSS :-"
Ternyata tetap membingungkan walau resource telah tersedia digabung-gabung dengan ini-itunya lumayan bikin kepala nyut-nyut :)) Title webnya saja sudah begini 2expertsdesign ;)) Repot mengakali atribut posisi relative sama absolute!!!
Kode CSS Efek Isolasi, Background Buku Tulis
.paper {
position: relative;
width: 300px;
height: 180px;
background-color: #ffb;
border: 1px solid #eee;
margin: 30px auto;
padding-right: 40px;
}
ul#lines li {
height: 28px;
line-height: 28px;
color: #555;
font-style: italic;
font-size: 16px;
width: auto;
list-style-type: none;
border-top: 1px solid #999;
}
.tape {
position: absolute;
top: -15px;
right: 90px;
width: 130px;
height: 35px;
background: rgba(255,255,255,.5);
border-left: 1px dashed rgba(0, 0, 0, .3);
border-right: 1px dashed rgba(0, 0, 0, .3);
-webkit-transform: rotate(-3deg) skew(0,0) translate(0%,-5px);
-moz-transform: rotate(-3deg) skew(0,0) translate(0%,-5px);
-o-transform: rotate(-3deg) skew(0,0) translate(0%,-5px);
transform: rotate(-3deg) skew(0,0) translate(0%,-5px);
}
.effect:before, .effect:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 13px;
left: 5px;
width: 50%;
top: 80%;
background: #555;
-webkit-box-shadow: 0 15px 10px #555;
-moz-box-shadow: 0 15px 10px #555;
box-shadow: 0 15px 10px #555;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
Markup HTML
<div class="paper effect">
<div class="tape"></div>
<ul id="lines">
<li></li>
<li>Blah bleh bloh1</li>
<li>Blah bleh bloh2</li>
<li></li>
<li>Blah bleh bloh3</li>
<li></li>
</ul>
</div>
Hal yang perlu diperhatikan! Apabila pada template sobat sudah memakai reset padding & margin
* {
margin: 0;
padding: 0;
}Pada variable
.paper hilangkan atribut
padding-right: 40px; Masih pada variabel yg sama, bila ingin merubah
width: 300px; maka rubah juga posisi efek isolasi di variabel
tape dengan kode
right: 90px;Begitu saja kira² cerita gabungan trick membuat background buku tulis dan efek isolasi :D Good luck :)
DEMO...
http://jsbin.com/awiwoq
Happy coding \m/
Kabar terakhir datang khusus bagi moziller tentang CSS 3D transform Dev Derby. Here video version CSS 3D cube transformation.
Sekarang bandingkan kreasi master @netastica dalam tutorial 
Bila tangan² seni developer sudah bermain, selalu saja ada yg full stylish :P Satu lagi tidak akan mengecewakan deh sob :">
