Background patterns with CSS3

Did you know that CSS3 comes with the possibility of creating your own background pattern and, thus, forgetting about Photoshop editing for that matter?

The whole point of those patterns is to make page loading faster by reducing file size and HTTP requests without the unreadable gibberish that data URIs add in our stylesheets.

Lea Verou has explained a few examples on how to manage patterns solely with CSS3 here: CSS3 Patterns Gallery. You can actually submit one and if it’s good enough she will publish it.

To inspire the interested folks, here are some examples of what’s already done.

CSS3 has still compatibility issues to overcome (not to say CSS4!). But it’s new features feel like candy on web designers’ hands, impossible to resist temptation of trying out all the new stuff! In general, the patterns are well displayed on the IE 10, Firefox 3.6 +, Opera 11.10, and other modern browsers, however, sometimes some details may not display correctly. On older browsers (eg, Firefox 3.6 and below) the likelihood of problems a little higher.

Some instructions used to generate these patterns, which you can use in yours are:

linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,

The linear gradient syntax is:

<linear-gradient> = linear-gradient( [ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+ )

<side-or-corner>= [left | right] || [top | bottom]  (Default: bottom)

Using angles: ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point toward the right.

Using keywords: If the argument is ‘to top’, ‘to right’, ‘to bottom’, or ‘to left’, the angle of the gradient line is ‘0deg’, ‘90deg’, ‘180deg’, or ‘270deg’, respectively.

radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,

The radial gradient syntax is:

<radial-gradient> = radial-gradient( [ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )

<position>: Determines the center of the gradient.

<shape>: Can be either ‘circle’ or ‘ellipse’. Defaults to ‘circle’ if size is a single length. defaults to ‘ellipse’ otherwise.

<size>: Determines the size of the gradient’s ending shape. If omitted it defaults to ‘farthest-corner’. It can be given explicitly or by keyword:

‘closest-side’: The ending shape is sized so that that it exactly meets the side of the gradient box closest to the gradient’s center.
‘farthest-side’: Same as ‘closest-side’, except the ending shape is sized based on the farthest side(s).
‘closest-corner’: The ending shape is sized so that that it passes through the corner of the gradient box closest to the gradient’s center.
‘farthest-corner’: Same as ‘closest-corner’, except the ending shape is sized based on the farthest corner.

If <shape> is specified as ‘circle’ or is omitted, themay be given explicitly as:

<length>: Gives the radius of the circle explicitly. Negative values are invalid.

repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),

radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%),

More information on gradients fro the W3C Editor’s Draft.

Author: Bea Cabrera

Freelance Filmmaker with a passion for big cities, snowboard, cinema and a weakness for the smell of freshly ground coffee. Engineer & Graphic Designer in a previous life, loving and living both: art and technology.  

One Reply to “Background patterns with CSS3”

  1. Awesome CSS3 coded iPhone | Bea Cabrera says: November 15, 2012 at 11:04 pm

    […] without even using any images or graphics of any kind, just CSS3. The background CSS3 patterns from my other post are just nonesense beside […]

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.