Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Create a Media Query in Dreamweaver
Create a New Style Sheet in the CSS Styles Panel

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
CSS Code Hinting in Dreamweaver
HTML, CSS, and JavaScript Code Hints
How to Create a Border around an Image in CSS3
Basics of CSS3 Style Inheritance
Basics of the CSS3 Script Categories
Advertisement

Inside Dummies.com