Membuat Text Shadow Dengan 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

Double Text Shadow

Script : text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

2. Close and Heavy

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

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

Text Shadow Glowing

Script : text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

5. Text Soft Embos

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

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...

Membuat Text Shadow Dengan CSS

Share this