CSS Untuk Tulisan/Gambar Efek Berbayang

CSS Untuk Tulisan/Gambar Efek Berbayang, 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 css 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrFjRrLw2GoW3XFKGF3tWocuO72UFcVu2pEx0w3GY-_cQbMnbB2-gNF63Cg615z5RO1OVzKB59KRyQ8BGIdzleKMUiP0_4At8O8zC8IiXhJh0c1DA4I_jxvsb-mboYoyl2jFwgS9HzUdQ/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/AVvXsEjrFjRrLw2GoW3XFKGF3tWocuO72UFcVu2pEx0w3GY-_cQbMnbB2-gNF63Cg615z5RO1OVzKB59KRyQ8BGIdzleKMUiP0_4At8O8zC8IiXhJh0c1DA4I_jxvsb-mboYoyl2jFwgS9HzUdQ/s1600-r/miscah.png" /></div>

Sekian dulu informasi artikel sayafafan tentang  CSS Untuk Tulisan/Gambar Efek Berbayang