Adobe Dreamweaver CC 2015 - Manual (Page 240)

233
CSS
Last updated 6/3/2015
Note: The Eye Dropper tool is available in Dreamweaver 13.1 and later.
Let's understand the following code:
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00)
46.63%,rgba(255,0,0,1.00) 100%)
• 57deg: Indicates the angle of the linear gradient
• rgba(255, 255, 255, 1.00): Color for the first color stop
• 0%: Indicates color stop
Note: Only '%' values for color stops are supported in Dreamweaver. If you use other values such as, px or em, Dreamweaver
reads them as 'nil'. Also, Dreamweaver does not support CSS colors and if you specify these colors in the code, such colors
are read as 'nil'.
Rendering gradients in web browsers
When you use gradients as background, you can configure Dreamweaver to render the gradients appropriately on
different web browsers. Dreamweaver adds appropriate vendor prefixes to the code that enables web browsers to display
gradients suitably.
Dreamweaver can write the following vendor prefixes along with w3c format:
• Webkit
• Mozilla
• Opera
• Dreamweaver Live View (old Webkit format)
By default, Dreamweaver writes vendor prefixes for Webkit and Dreamweaver Live View. You can choose the other
required vendors from the Preferences dialog box (Preferences > CSS Styles).
Note: For Box shadow, Webkit and w3c prefixes are always generated irrespective of whether you have selected them in the
Preferences or not.
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.