Dreamweaver CS6: Adding Text Shadows with CSS3

In Dreamweaver CS6, you can enhance your designs and give your pages greater depth by adding text shadows with CSS3 rules, the latest in web technology. Adding text shadows makes your words easier to read, especially if your design has a complex background or if your background and text colors lack contrast.

>

>

Credit: Paul Gual, istockphoto.com

Dreamweaver CS6 includes support for CSS3 text shadows when you use the Properties pane in the CSS Styles panel. You can create class or ID styles with text shadows, and you can add text shadows to existing HTML elements by defining a tag style, such as the heading 1 style used in the image.

The CSS3 code that creates that text shadow is

h1 {text-shadow: 2px 2px 3px #000;}

The numbers in the code specify that the text shadow should extend 2 pixels to the right and 2 pixels below the text with a 3-pixel blur. In addition, the shadow is created with the color black, specified by the abbreviated hexadecimal color code #000.

When creating rules for text shadows you can specify up to four values:

• Horizontal and vertical: The first two number values are required and specify the horizontal and vertical offsets — the distance the drop shadow extends below the text (horizontal) and to the right of the text (vertical).

  
  



• Blur radius: The third value specifies the amount of blur in the shadow. If you don't include blur radius, the default is 0, which makes the shadow appear as a solid color.

  
  



• Color: The fourth value specifies the color of the shadow and can be defined using a hexadecimal color code or an RGBa color code.

  
  

You can add a text shadow using the Property pane at the bottom of the CSS Styles panel, as shown in the image. To do so, follow these steps:

1. Click the Add Property link in the left side of the CSS Styles Property pane.

   
   



2. Enter the CSS3 style rule name, text-shadow, or select the style rule from the drop-down list.

   
   

   After the name appears in the left side, a small arrow appears on the right.

   
   



3. Click to select the arrow to the right of text-shadow.

   
   

   A box appears.

   
   



4. Enter the X and Y offsets, blur radius, and color.

   
   

>
dummies

Source:http://www.dummies.com/how-to/content/dreamweaver-cs6-adding-text-shadows-with-css3.html?cid=RSS_DUMMIES2_CONTENT