CSS Untuk Tulisan/Gambar Berbayang

Rasanya sudah lama saya tidak posting di blog ini, konsentrasi saya sedang terpecah mengurus blog-blog saya yang lain, termasuk mybloggerthemes.com yang semakin banyak permintaan dari sahabat yang ingin mempromosikan template mereka di mybloggerthemes.com. Kali ini lagi-lagi saya mencoba memberikan tutorial css buat sobat setia pengunjung blog ini, namanya css layer.

 

Css layer ini semacam tulisan atau gambar yang berbayang yang terdiri dari 2 komponen css sederhana. Untuk membuatnya sangat mudah, hanya menerapkan sedikit kode maka tulisan atau gambar berbayang siap ditampilkan dan mempercantik blog sobat. Berikut beberapa tutorialnya :

 

Layer 1 diatas layer 2
LAYER 1
LAYER 2
<div style="z-index:2; position:relative; font-size:40px">LAYER 1</div><div style="z-index:1; position:relative; color:blue; font-size:60px">LAYER 2</div>

Layer 2 diatas layer 1

LAYER 1
LAYER 2


<div style="z-index:3; position:relative; font-size:40px">LAYER 1</div><div style="z-index:4; position:relative; color:blue; font-size:60px">LAYER 2</div>


Layer Untuk Gambar Variasi 1 


<div style="position:relative"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/TEsn4YFFiQI/AAAAAAAAEXg/TiYA_Obocvo/mybloggerthemes_thumb%5B7%5D.png" /></div><div style="position:relative; margin-top:-20px; margin-left:20px"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/TEsn4YFFiQI/AAAAAAAAEXg/TiYA_Obocvo/mybloggerthemes_thumb%5B7%5D.png" /></div>



Layer Untuk Gambar Variasi 2 


<div style="position:relative"><img src="http://3.bp.blogspot.com/_7Y9pl24WpQY/TGVZE5AgQmI/AAAAAAAAEeU/Ktj7gkUldGQ/S1600-R/miscah.png" /></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://3.bp.blogspot.com/_7Y9pl24WpQY/TGVZE5AgQmI/AAAAAAAAEeU/Ktj7gkUldGQ/S1600-R/miscah.png" /></div>


Untuk tutorial css image yang lain akan saya bahas lain waktu, semoga bermanfaat.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

2 comments

6 Oktober 2010 13.57

wah keren banget gan

17 Juni 2011 22.00

Gimana cara mengganti Tulisannya Om...??
Pada cth :
► Layer Untuk Gambar Variasi 2


Email dunk...
dan juga bagaimana cara memposting pada menu
seperti :

Home| Contact me | Hiburan | dan lain-lain

misalnya artikel saya tertuju pada Hiburan...
Help me ya Om...
Thanks sebelumnya
email ke rasta_la@ymail.com

Poskan Komentar

Reader Community

Recent Comments