demosthenes.info

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 projects

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

More Background Patterns With CSS3 Gradients

css / gradients

Estimated reading time: 1 minute, 30 seconds

There are many variants on the CSS3 gradient technique that we discussed in the previous article. At the simplest level, you could overlay a gradient with the "fade" effect of another gradient on top:

45° Stripe With Fade

body { margin: 0; background-color: #000;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 50%),
repeating-linear-gradient(45deg, rgba(0, 238, 170, 0.5), 
rgba(0, 238, 170, 0.5) 12px, rgba(0, 0, 0, 0) 12px,
rgba(0, 0, 0, 0) 15px);
background-size: cover, 22px 22px; }

By playing around with angles, background size, position and stops, it's possible to produce a wide variety of patterns:

Sawtooth

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

Blueprint

body { background-color:#269;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(0, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
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.