Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

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.

visual example of CSS text shadow set up

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.

Related Tutorials:

CSS Text Shadows - Dreamweaver article tutorial

CSS3 Box Shadows - Dreamweaver article tutorial

CSS3 Box Shadows in Dreamweaver - Dreamweaver video Tutorial

CSS3 Rounded Corners - Dreamweaver article tutorial

CSS3 Rounded Corners Dreamweaver - Dreamweaver video Tutorial

blog comments powered by Disqus

Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial

Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials