beautypg.com

Rendering gradients in web browsers – Adobe Dreamweaver CC 2014 v.13 User Manual

Page 151

background image

Note:

Note:

To the top

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

This manual is related to the following products: