Gradients
Syntax details:
http://dev.w3.org/csswg/css3-images/#gradients (w3c - currently Unofficial/Note)
http://webkit.org/blog/175/introducing-css-gradients/ (uses completely different syntax from current w3c document)
https://developer.mozilla.org/en/CSS/-moz-radial-gradient (adds proprietary prefix to w3c current document)
Linear gradient
-
Linear 1: a simple left-right gradient change between two colours
- linear-gradient (left, green, yellow);
- -moz-linear-gradient (left, green, yellow);
- -webkit-gradient (linear, left center, right center, from(green), to(yellow));
-
Linear 2: a diagonal gradient from the bottom left corner
- linear-gradient(45deg, green, yellow);
- -moz-linear-gradient(45deg, green, yellow);
- -webkit-gradient(linear, left bottom, right top, from(green), to(yellow));
-
Linear 3: a bottom-top gradient with an extra colour
- linear-gradient(90deg, green, yellow, blue);
- -moz-linear-gradient(90deg, green, yellow, blue);
- -webkit-gradient(linear, center bottom, center top, from(green), color-stop(50%,yellow), to(blue));
Mozilla distributes the three colours proportionally, whereas WebKit’s color-stop function requires that I set a stop point — I’ve used 0.5 here, although I could have used 50%.
-
Linear 4: uneven color distribution
- linear-gradient(90deg, green, yellow 25%, blue);
- -moz-linear-gradient(90deg, green, yellow 25%, blue);
- -webkit-gradient(linear, center bottom, center top, from(green), color-stop(25%,yellow), to(blue));
I don’t have to distribute the colours evenly, however; by changing the value in the colour stop I can choose my own ratio. In the final example I’ve set the yellow to begin 25% along the length of the gradient
Radial gradient
In Mozilla’s case set only start and end color-stops; for WebKit specify a position (50%
50% or center center) and radius (0) for the start point, and a position (50% 50%) and
radius (70.5) for the end point, as well as the color-stops.
The radius value has to be a value in pixels, so in order for the end radius to be the diagonal
of the square (where Mozilla defaults to) you need to use the calculation (side)(sqrt(2)) — or
use this online
calculator.
-
Radial 1: a simple two-colour radial gradient
- radial-gradient(green, yellow);
- -moz-radial-gradient(green, yellow);
- -webkit-gradient(radial, center center, 0, center center, 70.5, from(green), to(yellow));
-
Radial 2: offset the center of the gradient and set it to end at the furthest edge of the
containing box
- radial-gradient(40% 40%, farthest-side, green, yellow);
- -moz-radial-gradient(40% 40%, farthest-side, green, yellow);
- -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(green), to(yellow));
-
Radial 3: the same center offset but constrained the radius to the distance of the nearest
wall
- radial-gradient(40% 40%, closest-side, green, yellow);
- -moz-radial-gradient(40% 40%, closest-side, green, yellow);
- -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 40, from(green), to(yellow));
-
Radial 4: set the center of the gradient to the top-right corner, using three colours equally
distributed
- radial-gradient(right top, green, yellow, blue);
- -moz-radial-gradient(right top, green, yellow, blue);
- -webkit-gradient(radial, right top, 0, right top, 141, from(green), color-stop(50%, yellow), to(blue));
-
Radial 5
- radial-gradient(60% 60%,circle contain,yellow,green 75%,rgba(255,255,255,0));
- -moz-radial-gradient(60% 60%,circle contain,yellow,green 75%,rgba(255,255,255,0));
- -webkit-gradient(radial,45% 45%,5,60% 60%,40,from(yellow),color-stop(75%, green),to(rgba(255,255,255,0)));
WebKit’s syntax which allows for more flexibility in a gradient is the start point and end point; by providing two separate values you can set the start gradient at a different point to the end gradient, as well as providing different radius values, allowing for effects that Mozilla can’t easily replicate
Generator Tool:
http://gradients.glrzad.com/
Tutorials:
Based on http://www.broken-links.com/2009/11/26/css-gradient-syntax-comparison-of-mozilla-and-webkit/
Mozilla
tutorial: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
More on webkit:
http://webkit.org/blog/175/introducing-css-gradients/
Example
of aqua button without image and
button tutorial
Create gradient code tool at WestCiv