Operation Manual

242
CSS
Last updated 11/30/2015
Any changes to the gradients are reflected in the vendor-specific syntaxes too. If you open an existing file containing
vendor-specific syntaxes in Dreamweaver CC, ensure that you choose the required vendor prefixes in Preferences.
Because, by default, Dreamweaver updates only Webkit, and Dreamweaver Live View-related code when you use or
change gradients. So, the other vendor-specific syntaxes in your code do not get updated.
Swap background images and gradients
You can change the order (in which they appear in the code) of the background images and gradients with a single click.
Click adjacent to the url or the gradient property in CSS Designer.
Note: Dreamweaver CC contains a basic implementation of the swap background feature. When you have multiple values
or images, swap may not work as expected. Also, suppose that you have an image, second image, and then a gradient
applied to the background. Swapping the gradient results in the following order: gradient, second image, first image.
CSS3 transition effects
You can create, modify, and delete CSS3 transitions using the CSS Transitions panel.
To create a CSS3 transition, create a transition class by specifying values for the transition properties of the element. If
you select an element before creating a transition class, the transition class is automatically applied to the selected
element.
You can choose to add the generated CSS code to the current document or specify an external CSS file.
Create and apply CSS3 transition effect
1 (Optional) Select an element (paragraph, heading, and so on) to which you want to apply the transition.
Alternatively, you can create a transition and apply it later to an element.
2 Select Window > CSS Transitions.
3 Click .
4 Create a transition class using the options in the New Transition dialog box.
Target Rule Enter a name for the selector. The selector can be any CSS selector such as a tag, a rule, an ID, or a
compound selector. For example, if you want to add transition effects to all <hr> tags, enter hr
Transition On Select a state to which you want to apply the transition. For example, if you want to apply the
transition when the mouse moves over the element, use the hover option.
Use the Same Transition for All Properties Select this option if you want to specify the same Duration, Delay, and
Timing Function for all CSS properties that you want to transition.
Use a Different Transition for Each Property Select this option if you want to specify a different Duration, Delay,
and Timing Function for each of CSS properties that you want to transition.