CSS Membuat Text Shadow

CSS Membuat Text Shadow - Habis jumatan ngenes liat blogku ini, udah sebulan ini gag keurus dan cukup tragis melihat template ku yang semrawut, dan akhirnya kuputuskan untuk merubah templatenya. Walau dengan segala resiko yang ada.

Oke langsung kembali kemateri awal, untuk posting pertama di template baru ini aku coba share untuk membuat CSS dengan Text Shadow.

CSS Membuat Text Shadow

Code :

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

INI CONTOHNYA YA INI CONTOHNYA

Masih bingung dengan hasilnya, kurang lebih tulisan akan menjadi seperti ini jika anda ingin memberikan shadow pada artikel anda, cukup baguskan untuk dibuat dalam sebuah postingan. Pastikan saja jika kamu membuat ini di postingan tertentu dengan mengeditnya di HTML postingan kamu.

CSS Membuat Text Shadow NEON

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

Oke lanjut ke Variasi Text Shadow lainnya.

CSS Membuat Text Shadow Inset

Code :

text-shadow: 0px 2px 3px #666;

Coba juga versi lainnya untuk pembeda dan experimen :
Code : 
color: #000;
background: #fff;
text-shadow: 2px 2px #000;


Hasilnya :

DEMO TEXT SHADOW

Text Efek Shadow Glow :

color: #fff;
background: #000;
text-shadow: 1px 1px 6px #fff;

Glow Versi 2 :

color: #fff;
background: #666;
text-shadow: 0px 0px 3px #fff;

Text Efek Multiple Shadow :

color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Anda bisa memodifikasinya lebih bagus lagi...

Share this

Share on FacebookPlus on Google+