How to Apply CSS3 Effects and Transforms in Dreamweaver - dummies

How to Apply CSS3 Effects and Transforms in Dreamweaver

By David Karlins, Doug Sahlin

The CSS3 effects and transforms can be defined in the CSS Styles panel. Creating a CSS3 effect takes some typing on your part. To add a CSS3 effect or transform to a style definition, follow these steps:

1From the All tab of the CSS Styles panel, select the style and then click the Add Property link.

A new row becomes active at the bottom of the panel.

2Choose either an effect from the drop-down list in the first (left) row of the new column or type Transform.

To apply an effect, such as border-radius, choose that effect from the menu.

To apply a transition, such as rotate, choose Transform from the menu. A second drop-down list then appears in the right column from which you can choose specific transforms (such as rotate, scale, skew, or translate).

3Enter a value(s) for the transition or effect in the second column.

The amount of help you get varies. For example, if you define a border-radius effect, a handy dialog box pops up when you click the second column in the CSS Styles panel. Then click outside the popup dialog to apply the settings you selected.

4When you finish defining effects and transitions, choose File→Save All to save both your open HTML document and the linked style sheet.

You can see the impact of your effects and transitions by previewing your page in a browser (choose File→Preview in Browser).