Make Background Buku Tulis & Efek Isolasi with CSS

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/