I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS3 Stripes, Plaids and Checks examples

Forever Plaid: Stripes, Tartans and Crosses With CSS3 Gradients

css / gradients

Estimated reading time: 2 minutes, 39 seconds

Designers tend to think of gradients as smooth distributions of color between two or more hues: black to white with shades of grey between.  But by using color stops that are very close to each other, we can make these transitions far more abrupt in CSS, and provide an easier, more dynamic, smaller (in terms of file size) and faster method for creating backgrounds without images.

body { background: linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); }

Simple CSS background gradientThe CSS above produces the effect shown to the right. There are, however, two problems. Because the background does not have a set size and we have not specified that it repeats, the gradient will default to repeating at intervals of however high the body content is. Even with the body set to min-height: 100%,you would only see the background gradient once. Also, the transition between colours on the edges of the gradient is a little smooth: we want a sharp discontinuity. The solution for the first problem is simple: set a background-size of however large you want a single “tile” of the gradient to be:

body {
background: linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background-size: 100px 100px; }

CSS3 striped gradient backgroundThe second is to place the points at which the colours in the gradient transition directly on top of each other. Here I’ll use shades of red as contrasting colours, while reducing the size of the tiles:

body { background: linear-gradient(to bottom, #500 0%, #500 50%, #300 50%, #300 100%);
background-size: 50px 50px; }

CSS3 plaid gradient backgroundCreating a plaid pattern is simply a case of using multiple backgrounds: placing one gradient horizontal and the other vertical, and using rgba values and transparency to allow parts of the first background to show through the second:

body { background-color: #800;
background-image: linear-gradient(rgba(253, 153, 0, 0.5) 0%,
rgba(253, 153, 0, 0.5) 50%, rgba(253, 153, 0, 0.7) 50%,
rgba(253, 153, 0, 0.7) 100%),
linear-gradient(left, rgba(253, 153, 0, 0.5) 0%, rgba(253, 153, 0, 0.5) 50%,
rgba(253, 153, 0, 0.7) 50%, rgba(253, 153, 0, 0.7) 100%);
background-size: 100px 100px; }

Unlike images, gradients can be placed on an angle in a background with CSS:

body {  background-color: #800; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);

CSS3 diagonal gradient backgroundDue to the lack of background-size, we’re seeing an enormous single “tile” of red and dark red at a 45deg angle. Try adding the background-size property to the declaration: it will not lead to the result you might expect.

To make it clearer, we’ll explicitly tell the browser that we are repeating the background gradient:

body { background-color: #800;
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5) 12px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0) 15px); 
background-size: 22px 22px;

CSS3 diagonal gradient backgroundPlaying around with these values can produce unique and unexpected results, some of which we'll cover in the next entry.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.