Home > Uncategorized > CSS3 Text Shadows

CSS3 Text Shadows

CSS 3CSS3 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]

Categories: Uncategorized
  1. 20 March 2011 at 09:57

    lumayan dapat panduan css3 lagi,,, itung-itung bisa buat mempercantik header blog qw..

    • AaEzha
      20 March 2011 at 10:04

      seep deh klo gitu 😉

  2. Amirul19
    20 March 2011 at 21:05

    thanks aa ,
    Mayan dahh Nambah ILMU

    visit jg ya : http://amirul19.tk/blog/ :
    hehe

  3. 23 March 2011 at 09:18

    mangtapsss… jangan sampe lupa untuk tips cross browsingnya zha, suport kemana ja… soale CSS3 ini kudu dibikin bener2 teliti… beda browser entah itu ngdukung atau bia beda script CSS nya… 😉

    LANJUT GAN

    • AaEzha
      23 March 2011 at 23:02

      yoi mas begenk :-*

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: