Rendering gradients in web browsers – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 151
Note:
Note:
Note:
Gradient dialog box
A. Color stop B. Gradient swatch C. Add gradient swatch D. Linear repeating E. Color models F. Eye Dropper G. Color slider H. Lightness slider I.
Opacity slider J. Add color swatch K. Color swatch L. Original color M. Selected color N. Angle for linear gradient
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
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).
For Box shadow generates, 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.
144