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 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.