CSS Efek Kertas Lipat

http://www.blogsdna.com/wp-content/uploads/2008/10/css-logo.png
Assalamu'alaikum ..
sobat Bloggers .. kali ini saya mau kasih tau cara bikin Kertas kelipet pinggiranya Pake CSS ..
lansung aja ya gk usah pake penjelasan, soalnya dah Ngantuk sob ..

1. Biasa lah login Blog dulu
2. Rancangan --> Edit HTML
3. Cari Elemen ]]></b:skin> 
4. Masukan CSS berikut di atas code Elemen tadi

/*
--------------------------
Standar tampilan
--------------------------
*/

.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
6. Untuk memanggil CSS di atas di butuhkan Code HTML, Di bawah ini adalah Code HTMLnya

<div class='note'>
Tulisan Loe Disini
</div>

<div class='note rounded'>
Tulisan Loe Disini ..
</div>


DEMO :

Lorem Ipsum bla bla bla ..

Lorem Ipsum Bla bla bla ..

14 komentar:

Royan Sableng mengatakan...

bisa dicoba nih..

sip gan
nice share

[./Forbiden-403] mengatakan...

Silahkan di coba sob ..
saya jamin gk nyesel hehehe .. :D

Pendelz mengatakan...

wah kapan" bisa dicoba ni sob :D

Afterlife mengatakan...

Ko kk ga di pake

Indramayu Cyber Team mengatakan...

mantabb broo :D

[./Forbiden-403] mengatakan...

@Pendelz : monggo di coba sob :D
@JeQ : wakaka, Kapan2 tak pake lah ..
@Afterlife : ya biar ..
@Indramayu : apa iya sob ? hahahahahayyyyy ..
@w_hack : apa Iya sob ?

Kang Farhan mengatakan...

wahhh...abang jago script ya...postingannya script... bisa jadi tempat belajar saya nih....tenkyu tutornya bang

[./Forbiden-403] mengatakan...

gk jago kok Kang ..
saya cuma Share yang saya Bisa aja ..
Waduh langsung Follow saya, Saya akan segera Follbek kang ..

ubaybingokil.com mengatakan...

keren sob.. :)

pertamaxxx

[./Forbiden-403] mengatakan...

wkwkwkwkw .. :D =))
kang Ubay klo klo Comment PertamaxxX
wkwkwkwwk .. :D =))

ICAH BANJARMASIN mengatakan...

Izin ya bang mau aku bantai dulu...hahahyyyy.

Bayu Rifai mengatakan...

Nice Share Sob, saya masih belum terlalu paham di bagian CSS akayk beginian, masih harus banyak belajar :D

Nando Firmansyah mengatakan...

wah jago baget ni maen css, ane coba praktekin ya sob :D

[./Forbiden-403] mengatakan...

@Icah : ampun mas jangan di Bantai hahahahayyyy :D
@Bayu : CSS cuma buat Style aja kok sob, Mudah di Pelajari sob ..
@Nando : waduh,kalo di bilang Jago nggk kok sob, Saya cuma Share yang Saya bisa aja .. :D

Posting Komentar