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 ..

18 ... Skip ke Kotak Komentar

26 Januari 2012 22.15

bisa dicoba nih..

sip gan
nice share

26 Januari 2012 22.22

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

27 Januari 2012 15.33

wah kapan" bisa dicoba ni sob :D

27 Januari 2012 17.37

tips keren sob...
tapi sobat ndiri gak makek yah... >,<

Maaf sob baru foll back...

ShadowZ Space

27 Januari 2012 18.01

Ko kk ga di pake

27 Januari 2012 21.06

mantabb broo :D

28 Januari 2012 16.21

mantab...

28 Januari 2012 17.23

@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 ?

28 Januari 2012 17.32

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

28 Januari 2012 17.46

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

28 Januari 2012 18.43

keren sob.. :)

pertamaxxx

28 Januari 2012 20.43

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

29 Januari 2012 18.06

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

29 Januari 2012 19.43

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

30 Januari 2012 07.07

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

30 Januari 2012 17.09

@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

4 Februari 2012 18.12

Siipp... coba ah..mga berhasil...

5 Februari 2012 12.58

Silahkan sob :D

Tambahkan Komentar Anda

Peraturan :
1. Dilarang berkomentar dengan kata-kata yang kotor, Pornografi, SARA
2. Dilarang Poskan Spam
3. Dilarang poskan URL yang tidak perlu
Sekian Pemberitahuan Dari Saya
Hati-hati dengan Komentar Anda, anda Komentar Bukan Spam, Saya Pasti akan Follow anda, This Blog Dofollow

 
Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
Original Template By Belajar SEO Blogspot - Himajiesized By Dayz Hidayat - Converted By [./Forbiden-403]