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. 1.5K 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 Pop Art Examples

Pop-Art Web Page Backgrounds via CSS Gradients Merged With Images

css / gradients

Estimated reading time: 2 minutes, 9 seconds

In previous articles I’ve shown how to make gradient backgrounds with CSS3, no images required. I’ve also demonstrated how to make more complex visual effects by using CSS3’s multiple backgrounds feature to layer gradients on top of each other.

Today, I’m going to take things a step further: if we add images to a background, and if the gradients we add have areas of transparency or opacity, we’ll see portions of the image through the gradient, producing a "pop-art" effect.CSS3 Pop Art Process

The most important point in writing the style rules is that the image must be added last: remember, in CSS3 background layers are added in reverse order, so when we specify our image at the end of the background effects, it appears to be on the bottom, with the gradients layered on top.

Checkerboard

For example, to create a checkerboard gradient effect, the CSS would be:

html, body { min-height: 100%; margin: 0; } 
body { background-image: linear-gradient(45deg, #000 25%, transparent 25%),
linear-gradient(-45deg, #000 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #000 75%),
linear-gradient(-45deg, transparent 75%, #000 75%),
url(grace-kelly.jpg);
background-size:200px 200px, 200px 200px, 200px 200px, 200px 200px, cover;
background-position: 0 0, 100px 0, 99px -101px, 0 100px, 0 0;
}

Note that if we add a feature of a different size, we must repeat background-size for all elements. Also note that there is currently a known rendering bug in Safari, Chrome and Firefox that leaves a very faint diagonal mark in some boxes. The slightly-off values in background-position above are an attempt to minimize that, but they may still appear.

Hypnotic Circles

We could also create a repeating radial gradient layered on top of a background image:

html, body { min-height: 100%; margin: 0; }
body { background: repeating-radial-gradient(rgba(0,0,0,0.3), 
rgba(0,0,0,0.3) 5%, transparent 5%, transparent 10%),
url(ava-gardner.jpg);
background-position: -20px 20px, 0 0;
background-repeat: no-repeat, no-repeat;
background-size: cover;
}

Polka Dot Pop Art

We could also create a repeating radial gradient layered on top of a background image:

body {
background:
radial-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.3) 46%),
radial-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.3) 46%), url(gilda.jpg);
background-position: 0 0, 80px 80px;
background-size:160px 160px, 160px 160px, cover;
}
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.