. This is my blog, where I talk about web design and development with 
Pro CSS3 Animation, Apress, 2013
Creating the visual effect of silkscreening - forming an image out of tiny dots of color - is easy to achieve in a web page with CSS3. 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 {background:-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%), url(lotus.jpg);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%), url(lotus.jpg);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=""></div>To keep the code size low, I’ve included just the gradient for Webkit and Mozilla. For details on the referenced SVG, read my article on converting an image to black and white.
