Search code examples
csstext-styling

Any ideas about how to use CSS to emulate a messy stamp?


I'm interested in ways to render a span that to look something like one of these:

some random images of stamps

Here are the tricks I plan on using:

  • @font-face
  • -{moz/webkit/o}-transform:rotate

It's for a personal project so assuming the most modern CSS support is fine. Maybe border-images could help? I'd like to avoid image splicing all over the place -- if it really comes down to that I'll just skip the border all together and rely on a font for the look.

I'm just curious how the CSS gurus around here would approach this.

UPDATE

There is now a CSS property for this, mask-image. More here.


Solution

  • There is no specific css solution for the grunge look. You'll have to rely on a typeface for that, or an image (such as some sort of 'grungy' splotch pattern that matches the background color on top of the type).

    The only other CSS that might be applicable is to use an RGBA color set to perhaps 80 or 90% opacity to allow a bit of whatever background pattern you might use seep through as would be the case with a real ink stamp.

    I love doing as much as I can with CSS, but for that specific look, I'd stick with an image. Images still serve a purpose. ;o)