CSS3 Text Shadows

CSS3 dengan segala kemajuan teknologinya memberikan warna baru dalam kostumisasi style, contohnya seperti yang akan kita bahas kali ini: Memberikan bayangan pada text menggunakan CSS3. Perhatikan contoh dibawah berikut. Bukan, itu bukan Flash. Itu cuma CSS 3 lho 😉

AaEzha.com

Adapun syntax CSS-nya seperti dibawah ini:
[css]text-shadow: <offsetx> <offsety> <blur-radius>* <color>*[/css]

Keterangan:

• offsetx : nilai offset horizontal. apabila diberikan nilai negatif, maka akan memberikan bayangan di kiri text.
• offsety : nilai offset vertikal. apabila diberikan nilai negatif, maka akan memberikan bayangan di atas text.
• blur-radius : atribut untuk nilai blur-nya. defaultnya harus bernilai 0 jika tidak digunakan.
• color : atribut untuk memberikan warna.

Berikut contoh-contohnya:
Basic Shadow:

AaEzha.com

Blurred Shadow:

AaEzha.com

[css]text-shadow: 5px 5px 7px #959595;[/css]

Shadow with text color set to match closely the document’s background
color:
text-shadow: 5px 5px 3px #414141;[/css]

Inset (aka Letterpress) Text Shadow:

AaEzha.com

[css].inset{
text-shadow: 0 -2px 1px #8a8a8a;
}[/css]

AaEzha.com

[css]background:#494949;
color:black;
text-shadow: 0 1px 2px #8a8a8a;[/css]

Multiple, Simultaneous text Shadows

AaEzha.com

[css]text-shadow: 5px 5px 0 red, -5px -5px 0 orange;[/css]

3D looking Text Shadow:

AaEzha.com

[css]color: #12c911text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;[/css]

Glowing Text Shadow:

AaEzha.com

[css]background:black;
text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px
#FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700;[/css]