[Solved] How to create a dotted shadowy effect on an image with CSS?

Question

Mikel, you can’t achieve a silk-screen effect using CSS and a single image.
It’s not going to happen any time soon, in any cross-browser compatible way.

Maybe, eventually, when you can custom-program CSS filters using HLSL or similar…
But for the time-being, even with near-ish-future CSS-filters, I don’t think that they’re going to offer silk-screen, and THEN, you’d need to worry about that, along with the transition effects, and THEN you’d need to worry about browser support, with 2-image fallbacks for other browsers…

ie: you’d have to create the 2nd image and write the 2-image fallback which you were hoping there was a CSS filter for, to avoid making the 2nd image, in the first place.

Accepted Answer

Mikel, you can’t achieve a silk-screen effect using CSS and a single image.
It’s not going to happen any time soon, in any cross-browser compatible way.

Maybe, eventually, when you can custom-program CSS filters using HLSL or similar…
But for the time-being, even with near-ish-future CSS-filters, I don’t think that they’re going to offer silk-screen, and THEN, you’d need to worry about that, along with the transition effects, and THEN you’d need to worry about browser support, with 2-image fallbacks for other browsers…

ie: you’d have to create the 2nd image and write the 2-image fallback which you were hoping there was a CSS filter for, to avoid making the 2nd image, in the first place.