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.

Create a Silkscreen Effect For Web Images With CSS3

css / gradients

Estimated reading time: 1 minute, 24 seconds

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 div, set to a max-width of 100% to create a fluid, responsive design, but hidden the image by setting opacity to 0 so that the user can only see the background: the invisible image helps set the size of the div, without taking any extra load time or HTTP requests, since it is a duplicate of the background. I’ve also added a transition effect on mouse rollover for Webkit.

div#silkscreen {
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
background: -moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
-moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
background-position: 0 0, 2px 2px;
background-size:4px 4px, 4px 4px, cover;
-webkit-filter: grayscale(1); filter: url(desaturate.svg#greyscale); filter: grayscale(1);
transition: 1.3s;
div#silkscreen:hover { -webkit-filter: grayscale(0); filter: none; }
div#silkscreen img { max-width: 100%; opacity: 0; }}
div#silkscreen:hover { -webkit-filter: grayscale(0); }
div#silkscreen img { max-width: 100%; opacity: 0; }
<div id=silkscreen>
<img src=lotus.jpg alt="">

To keep the code size low, I’ve included just the gradient for Webkit and Mozilla. For details on the referenced , read my article on converting an image to black and white.

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.