CSS 3 Drop Shadow Text

Written by Tony Lea on Jul 18th, 2010 Views Report Post

In CSS3 you can use drop shadow around divs or tables (if you still use tables). You can use these drop shadows to add a nice aesthetic look around blocks in your web interface. Check out the article on CSS 3 Drop Shadow Here. A very cool thing about CSS3 is that you can also add drop shadow effects to your text. To add a drop shadow effect to your text add the following code to your stylesheet:

.dropshadow_text
{

     text-shadow: rgba(0,0,0,.8) 0 2px 0;
     font-size:28px;
     color:#cccccc;

}

And add the following to your HTML file

<p class='dropshadow_text'>This text has a drop shadow effect!</p>

And that's it :)

Comments (0)