CSS3 Drop Shadow Text in Dreamweaver

Transform your text and give it some life by adding some a CSS text shadow property to it. Discover how you can create fire and ice text effects or more conventional embossed text shadows using the text shadow propery in CSS.

CSS Drop Shadow Text

Discover how to add amazing CSS generated shadow text styles to your text using only CSS in this Dreamweaver tutorial video. CSS text shadows have been around for a while although it is only now that they will be released on all major browsers along with other CSS3 shadow properties so getting to know how to use them now will put you in good standing for your web design projects.

CSS drop shadow text fortunately does not need the Moz text shadow prefix added for it to work in Firefox and you do not have to add the Webkit text shadow for safari prefix to get the text shadows to work in safari or Google chrome browsers. The text shadow property was originally introduced by safari quite some time ago.

There is no additional html for the text shadow property to work; only a small snippet of code is needed in your CSS to style the drop shadow on the text.

To create a text drop shadow you will need to type the property ‘text-shadow:’ followed by the positioning attributes, the blur radius and the color of the text shadow you want to add.

The positioning attributes for the css text shadow start with the horizontal offset. Positive figures will set the text shadow on the right side of the text you wish to apply the CSS3 shadow to. Negative or minus numbers will set the text shadow to the left of the text.

The vertical offset for the drop shadow on the text is then set and follows the same principal where positive figures will set the css text shadow below the text. And negative numbers send the css3 shadow above the text line.

The blur radius of the shadow text is also set in pixels and adding 1 or 2 pixels will give an embossed effect. The higher the pixel number, the more smudged the css drop shadow text blur radius becomes. Lastly pick the color of the css text shadow. The example above is using hexadecimal color attributes and is set to black.