Tutorial CSS Code [Edisi Collection Part 1]

Berkesperimen dengan CSS memang sangat menyenangkan bagi designer web.apa lagi CSS sekarang sudah dalam versi CSS 3.efeknya terlihat simple,elegant,dan menarik.bagi yang suka design web,patut mencoba code CSS 3 ini untuk mempercantik web/blog anda.
Script Codenya tergolong sederhana,simple,dan efek diweb browser terlihat sangat menarik.berikut ini saya sediakan beberapa koleksi kode CSS yang mungkin membuat tampilan design web/blog anda lebih terlihat menarik.sayangnya,tidak semua browser bisa membaca kode CSS ini.dalam hal ini saya rekomendasikan web browser mozilla firefox 3 dan versi yang terbaru.

Membuat Tulisan berbayang dengan CSS :

<div style=”z-index: 2; position: relative; font-size: 40px;”>Fajar 1</div>
<div style=”z-index: 1; position: relative; color: red; font-size: 60px;”>Fajar 2</div>.dan hasilnya :

Fajar 1

Fajar 2

Membuat Gambar Berbayang dengan CSS :

<div style=”position: relative;”><img src=”http://fjr1.files.wordpress.com/2011/08/36_7_13.gif&#8221; alt=”" /></div>
<div style=”position: relative; margin-top: -20px; margin-left: 20px;”><img src=”http://fjr1.files.wordpress.com/2011/08/36_7_13.gif&#8221; alt=”" /></div>

Membuat Gambar Berbayar dengan CSS bag 2 :

<div style=”position:relative”><img src=”http://fjr1.files.wordpress.com/2011/08/adsby2.jpg&#8221; /></div><div style=”position:relative; filter:alpha(opacity=20); margin-top:-10px; -moz-opacity:0.20; opacity:0.2; -khtml-opacity:0.2″><img src=”http://fjr1.files.wordpress.com/2011/08/adsby2.jpg&#8221; /></div>

Membuat Boder/garis tepi :

<div style=”border:5px dotted #08088A; background:#FFF; width:100%; padding:20px”>Boder dotted dotted dotted dotted dotted </div>

Boder dotted dotted dotted dotted dotted

Membuat Boder/Garis Tepi bag 2 :

<div style=”border:5px solid #08088A; background:#FFF; width:100%; padding:20px”>Border solid solid solid solid solid</div>

Border solid solid solid solid solid

Membuat Border/Garis Tepi bag 3 :

<div style=”border:5px dashed #000000; background:#FFF; width:100%; padding:20px”>Border dashed dashed dashed dashed dashed</div>

Border dashed dashed dashed dashed dashed

Membuat Border/Garis Tepi bag 4 :

<div style=”border:5px groove #08088A; background:#FFF; width:100%; padding:20px”>Border groove groove groove groove groove
    </div>

Border groove groove groove groove groove

Membuat Border bag 5 :

<div style=”border:5px double #08088A; background:#FFF; width:100%; padding:20px”>Border double double double double double
    </div>

Border double double double double double

Membuat Border bag 6 :

<div style=”border:5px inset #08088A; background:#FFF; width:100%; padding:20px”>Border Inset </div>

Border Inset

Membuat Border bagian 7 :

<div style=”border:5px outset #08088A; background:#FFF; width:100%; padding:20px”>Border outset outset </div>

Border outset outset

Membuat Border Bag 8 :

<div style=”border:5px ridge #08088A; background:#FFF; width:100%; padding:20px”>Border ridge ridge </div>

Border ridge ridge

Membuat Border Bag 9 :

<div style=”border-style: dotted  dashed double outset; border-color: silver orange yellow violet; border-width: 5px; background: #FFF; width: 100%; padding: 20px;”>Gado2 : dotted dashed double outset</div>

Gado2 : dotted dashed double outset

Keterangan :

• Border : Garis tepi
• width : Lebar
• Padding : Jarak
• background : latar/bisa disesuaikan dengan keinginan.misal : #fff = putih atau <img src=’http://alamatblog.wordpress.com/2011/08/namagambar.jpg’></a&gt;
• Selamat Berkerasi…

Jika ada yang kurang jelas,jangan sungkan untuk bertanya dengan cara berkomentar dibawah postingan ini.Insya allah saya akan merespon secepatnya  .    ===   Selamat Berpuasa===

 

About these ads