Saturday, July 7, 2012

Membuat Text Shadow Dengan CSS

Posted by dav On 9:18 AM
Tutorial Membuat Text Shadow menggunakan CSS
Tutorial Membuat Text Shadow menggunakan CSS 
Cara Membuat Text Shadow Dengan CSS ~ Tutorial Membuat Text Shadow menggunakan CSS lanjutan tutorial sebelumnya tentang text shadow, Kali ini untuk text shadow lanjutan untuk tambahan koleksi text shadow yang saya punya dan saya share saja agar temen-temen tahu bagi yang belum tahu dan yang sudah tahu harap di buat baca-baca saja, hee..

Tutorial Membuat Text Shadow menggunakan CSS ini saya adopsi dari tutorial dari website luar negeri yang menurut saya perlu saya share untuk pengetahuan kita semua.

Sekarang ayo kita lihat beberapa demonya :



CSS :
.shadow  { position:relative; display:block; color:#fff; }
.shadow span { position:absolute; display:block; top:0px;  }
.shadow:before { display:block; padding:1px; content: attr(title); color:#666;  } 
 HTML :
<p class="shadow" title="This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow."><span>This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow.</span></p>
Diatas hanya untuk contoh saja.

Sekarang Kita Belajar Membuat text Shadow Dengan CSS


1. Double Text
Belajar Membuat text Shadow Dengan CSS
Double Text Shadow
Script : text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);










2. Close and Heavy
Membuat Text Shadow Dengan CSS
Text Shadow  Close and Heavy
Script : text-shadow: 0px 4px 3px rgba(0,0,0,0.4),             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);









3. Text Shadow 3D
Membuat Text Shadow Dengan CSS 3d
Text shadow 3 dimensi (3D)
Script : text-shadow: 0 1px 0 #ccc,   0 2px 0 #c9c9c9,  0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa,  0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),  0 3px 5px rgba(0,0,0,.2),   0 5px 10px rgba(0,0,0,.25),  0 10px 10px rgba(0,0,0,.2),  0 20px 20px rgba(0,0,0,.15);




4. Text Shadow Glowing
Membuat Text Shadow Dengan CSS
Text Shadow Glowing
Script : text-shadow: 0px 0px 6px rgba(255,255,255,0.7);











5. Text Soft Embos
Membuat Text Shadow Dengan CSS emboss
Membuat Text Shadow Dengan CSS
Script : color: rgba(0,0,0,0.6);
            text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
            0px -5px 35px rgba(255,255,255,0.3);









6. Text Shadow Down
Membuat Text Shadow Dengan CSS
Shadow and down
Script : text-shadow: 0px 3px 0px #b2a98f,
                 0px 14px 10px rgba(0,0,0,0.15),
                 0px 24px 2px rgba(0,0,0,0.1),
                 0px 34px 30px rgba(0,0,0,0.1);



Oke kawand, diatas 6 tutorial CSS untuk membuat efek shadow dan masih bisa kamu modifikasi lagi. Tutorial sejenis akan saya lanjutkan ditutorial part ke-2.
Coming Soon...