Apps

CSS3 Gradients: Setting color stops

Ryan Boudreaux shows you how to use CSS3 code to set color stops with both linear and radial gradients.

In our previous segment on CSS3 Gradients we reviewed linear gradients, both top to down and top-left to bottom-right; in addition, we reviewed radial gradients including several sizes. In this segment we will review setting arbitrary color stops, and setting even color stops.

Setting arbitrary color stops

Setting positions and color stops as percentages in the syntax lets you define which colors begin and end for the gradient, along with any intermediary colors you wish to set. In addition, you also have the option to add positions for each color. Here is an example with five colors placed starting at the left, and then with specific intervals using percentages:

.radial-arbitrary-stops-left {
background: -moz-radial-gradient(left, #2F2727, #1a82f7 10%, #2F2727, #1a82f7 90%, #2F2727);
background: -webkit-radial-gradient(left, #2F2727, #1a82f7 10%, #2F2727, #1a82f7 90%, #2F2727);
background: -o-radial-gradient(left, #2F2727, #1a82f7 10%, #2F2727, #1a82f7 90%, #2F2727);
height: 200px;
width:400px;
padding: 5px;
margin-left:5px;
}

Here is the gradient as rendered in Chrome 15.0.874:

Figure A

This variation on arbitrary color stops updates the position size to farthest-corner as shown in the example code below:

.radial-arbitrary-stops-farthest-corner {
background: -moz-radial-gradient(50px 50px, circle farthest-corner, #2F2727, #1a82f7 10%, #2F2727, #1a82f7 90%, #2F2727);
background: -webkit-radial-gradient(50px 50px, circle farthest-corner, #2F2727, #1a82f7 10%, #2F2727, #1a82f7 90%, #2F2727);
background: -o-radial-gradient(50px 50px, circle farthest-corner, #2F2727, #1a82f7 10%, #2F2727, #1a82f7 90%, #2F2727);
height: 200px;
width:400px;
padding: 5px;
margin-left:5px;
}

This example is rendered in Chrome 15.0.874:

Figure B

In this final example using arbitrary color stops we update the position to center center and also utilized a different color scheme of blue, green, yellow, purple, and grey:

.radial-arbitrary-stops-center {
      background-image: -webkit-radial-gradient(center center, 100px 100px, blue 10%, green 50%, yellow 65%, purple 85%, grey 100%);
      background-image: -moz-radial-gradient(center center, 100px 100px, blue 10%, green 50%, yellow 65%, purple 85%, grey 100%);
      height: 200px;
      width:400px;
      padding: 5px;
      margin-left:5px;
}

Here is the result as rendered in Chrome 15.0.874:

Figure C

Of course, arbitrary stops can also be applied to linear gradients as well. In this example we update the style from radial to linear and remove the position value, then update a few percentages and we have the following code:

.linear-arbitrary-stops {
      background-image: -webkit-linear-gradient( blue 10%, green 40%, yellow 65%, purple 75%, grey 100%);
      background-image: -moz-linear-gradient( blue 10%, green 40%, yellow 65%, purple 75%, grey 100%);
      height: 200px;
      width:400px;
      padding: 5px;
      margin-left:5px;
}

This results in the following as rendered in Chrome 15.0.874:

Figure D

Setting even color stops

Setting even stops is just a matter of specifying the position and then the colors for the gradient, any number of colors can be added, and they will be distributed evenly throughout the gradient. Two examples below demonstrate the even color stops for linear gradient set to the left.

.even-stops-linear-left {
background-image: -moz-linear-gradient(left, black, blue, black, green, blue, green, black, blue, black);
background-image: -webkit-linear-gradient(left, black, blue, black, green, blue, green, black, blue, black);
background-image: -o-linear-gradient(left, black, blue, black, green, blue, green, black, blue, black);
padding: 5px;
margin-left:5px
}

Here is the first example as displayed in Chrome 15.0.874:

Figure E

And this example demonstrates even colors stops for a radial left position gradient.

.even-stops-radial-left {
background-image: -moz-radial-gradient(left, black, blue, black, green, blue, green, black, blue, black);
background-image: -webkit-radial-gradient(left, black, blue, black, green, blue, green, black, blue, black);
background-image: -o-radial-gradient(left, black, blue, black, green, blue, green, black, blue, black);
padding: 5px;
margin-left:5px
}

Figure F

As you can see there are many ways of representing gradient displayed as images utilizing the power of CSS3. The primary benefit for your website is the reduction in HTTP calls which will help to improve your websites response and load times, and also it reduces the amount of development time it takes for web graphic designers to generate gradient images from various graphic software applications.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

1 comments