How to Apply CSS3 Effects and Transforms in Dreamweaver

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:

1

From 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.

2

Choose 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).

3

Enter 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.

4

When 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).

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.