CSS Kertas Lipat

CSS Kertas Lipat - Ada banyak yand dapat dilakukan Oleh CSS, CSS emang gk pernah lepas dari blog, tampa bumbu CSS, blog kita terasa Kosong dan Hampa, Setiap Blog/Web, dijamin memiliki CSS, klo gk gk bisa dikatakan Blog. CSS berguna untuk membumbui Blog kita agar terlihat cantik, bahasa singkatnya sih Biar Blog Kita Stylish and Elegant hahayyyy ..
Banyak yang bisa dilakukan CSS, tapi disini kita awali Tutorial CSS Pertama saya dengan bacaan Basmalah, Bismillahirrohmanirrohim ...
Langsung aja yuk sob GPL.

1. Login pada blog kalian.
2. Rancangan --> Edit HTML (upss .. maaf ya, tampilan Blogger saya belum di perbarui)
3. Cari Tag ]]></b:skin>
4. Pasang Code CSS di Bawah ini di Bawah Kode Tag di atas

.note {
  position:relative;
  width:30%;
  padding:1em 1.5em;
  margin:2em auto;
  color:#fff;
  background:#97C02F;
  overflow:hidden;
}

.note:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  border-width:0 16px 16px 0;
  border-style:solid;
  border-color:#fff #fff #658E15 #658E15;
  background:#658E15;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  display:block; width:0; /* Firefox 3.0 damage limitation */
}

/*
--------------------------
Opsi untuk memberikan efek rounded corner
dengan menambahkan class "rounded"
--------------------------
*/

.note.rounded {
  -webkit-border-radius:5px 0 5px 5px;
  -moz-border-radius:5px 0 5px 5px;
  border-radius:5px 0 5px 5px;
}

.note.rounded:before {
  border-width:8px;
  border-color:#fff #fff transparent transparent;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px;
}

5. Simpan Template.

Code HTML untuk Memanggil CSS Di Atas, kalian bisa memasang HTML ini di mana aja.

<div class='note'>
     Tulisan Anda
</div>

<div class='note rounded'>
     Tulisan anda
</div> 

DEMO

Tulisanku

Tulisan ku

REPOST : http://forbiden-403.blogspot.com