The property text-shadow add one or more shadow to a text .It’s included into Css3 text module .

Syntax

• The vertical and horizontal distance can have + or – values . They also can have the value 0.
• Blur radius : Represents the size of the blur effect if the value is zero or it wasn’t represented then the shadow won’t be blurred .
• Color:is the Shadow color . If it is not represented then the shadow color will use the text color instead .

Browser Support :

• Opera 9.5+( Although I’ve noticed that color: transparent was not supported )
• Firefox 3.5+
• Safari 1.0+
• Google Chrome

Demo

You can see a demo of all the effects below on the Demo page … enjoy

1. Glow and extra glow

To achieve the glow effect

Try experimenting …change the radius value to get different effects .

Using the previous cc will add some glow but not as intense as sometimes you might need the solution is to add multiple shadows with different radius values .

We’ve added 2 shadows with 30 and 70 radius values with the same yellow color .

2. Apple style

Pretty simple .. That’s why I love css3

3. Photoshop Emboss

I used multiple shadows here to achieve the effect one to the top/right other to the bottom/left .One down side to this is that if the browser doesn’t support text-shadow (you know what and who I’m talking about ?! ) then you’ll end up with unreadable text .

4. Photoshop Pillow emboss

Again multiple shadows used here .

5. Blurry text

I found this at Simurai Website. Which is a cleaver trick to make the text color transparent and add a blurred shadow to achieve a blurred text effect.Changing the radius value will change the blur value the higher the value the more blurred text you’ll get.

6. Inset text

I found this trick at StylizedWeb .This a very light and elegant effect it adds a nice touch to the text .

The shadow color and the background color are the same .

7. Stroke text

I will admit this is not a very neat effect and needs little improvement to have “realistic” look stroke ..but thought I’ll add it any way .

By adding 2 shadows in the opposite directions you can have what looks like a stroked text.

8.  3D effect

I love this .. I can’t think of much uses for it but I still love it .Found this on Css-trick and thought it’s really cool .By adding multiple shadows with the same color you can achieve what looks like a 3d text .

I added 5 shadows but try experimenting , be creative and have fun .

Green Stars resistor earrings

Ctrl – Alt – Del Three Pillow Set- Geeks Need Pillows Too

Wise Robots T-Shirt

Floppy Disk Coasters – Funky Colors -

Recycled FLOPPY DISK made into a Geek Gear Notebook ORANGE

OMG LOL Speech Bubble- Geeky Asymetrical Hoop Earrings – Blue

Mac Geek Moleskine Cahier

PACMAN BIG SET of stickers for laptops

Windows 98 Logo Fan Art

LOOMLAB Binary Code Square Scarf

8-Bit Click Nerdy Nerd Onesie

Baby Inside- Geek Love Maternity T-Shirt

Step 1

Add your text ..

Step 2

double click the text layer and add the following effects

If you can’t see the “Gloss Contour ” I’m using .Click on the contour list and do the following to add them .

2- Gold .. Gold

Step 1

Add your text

Step 2

Add the following effect

3- Metallic text

Step 1

Add your text choose (#c1bfbf) as you foreground color .

Step 2

Add the following effects