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 cssmaka 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjlINhjmszkib7kXxotDnTJr9Nsv_R9G_9MEA_VwDznCUvXSxKrIX1oJY2phJEqQ0UbgTl4C6DD_Yeb9dIqvLQd_Z0oA2D4W2Kmm1943IotO-5qKERxgdlwSoyMv1yp-8txfVoXOtMmz4/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjlINhjmszkib7kXxotDnTJr9Nsv_R9G_9MEA_VwDznCUvXSxKrIX1oJY2phJEqQ0UbgTl4C6DD_Yeb9dIqvLQd_Z0oA2D4W2Kmm1943IotO-5qKERxgdlwSoyMv1yp-8txfVoXOtMmz4/s1600-r/miscah.png" /></div>

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

Dengan memasukan alamat email dibawah ini, berarti sobat akan dapat kiriman artikel terbaru dari saya di inbox sobat :

Artikel Terkait: