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.

Create a Silkscreen Effect For Web Images With CSS3

css / gradients

Estimated reading time: 2 minutes

Creating the visual effect of silkscreening - forming an image out of tiny dots of color - is easy to achieve in a web page with . The technique shown here uses multiple backgrounds in a div element: one repeating radial gradient that is closely related to the polka-dot effect in my Pop-Art CSS3 Effects Article, just at a smaller cell size, combined with a greyscale filter to desaturate the colors in the image.

I’ve also placed a full-size version of the same image (supplied by P Lam Khun) in the background of the <div>, set to a width of 100% to create a fluid, . I’ve also added a transition effect.

The Markup

The markup includes an inline SVG filter for Firefox. The <div> is empty, but will be propped open by using padding-bottom, in a method similar to that used to make YouTube videos responsive:

<div id="silkscreen"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0      0      0      1 0"/>
</filter>
</svg>

The CSS

The stylesheet sets multiple background images in the <div> to layer and repeat, while applying :

div#silkscreen {
background: radial-gradient(rgba(0,0,0,0) 45%,
rgba(0,0,0,0.4) 46%),
radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lotus.jpg);
padding-bottom: 60%;
max-width: 800px; width: 80%;
margin: 0 auto;
background-position: 0 0, 2px 2px;
background-size:4px 4px, 4px 4px, 100% 100%;
background-repeat: repeat, repeat, no-repeat;
-webkit-filter: grayscale(1);
filter: url(#greyscale);
filter: grayscale(1);
transition: 1.3s
}
div#silkscreen:hover {
-webkit-filter: grayscale(0); filter: none; 
}

For more details on the filter, read my article on converting an image to black and white.

Check out the code for this effect on CodePen
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.