6

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.

  • Possibly, I'm leaving open the possibility that it'll be too much. Also, I don't plan on using such garish colors. But the thing is, the project I'm working on is designed to emulate a "paper-based" work flow that users are already familiar with, and where "stamps" have a semantic meaning. If I can emulate that, it will help users. –  Jun 02 '11 at 06:08

5 Answers5

2

You could use a font face for the font, but you'd still need an image for the borders. I would suggest saving yourself the hassle of cross browser debugging and using a transparent .png if possible.

Babiker
  • 18,300
  • 28
  • 78
  • 125
1

this one looks promising now: http://codepen.io/c3f3l0/pen/Fwzoc

use goole fonts

<link href='http://fonts.googleapis.com/css?family=Black+Ops+One|Luckiest+Guy|Sonsie+One|Shojumaru&effect=3d|3d-float|anaglyph|brick-sign|canvas-print|
        crackle|decaying|destruction|distressed|distressed-wood|emboss|fire|fire-animation|fragile|grass|ice|mitosis|neon|outline|putting-green|
        scuffed-steel|shadow-multiple|splintered|static|stonewash|vintage|wallpaper' 
        rel='stylesheet' type='text/css'>
patrick
  • 11
  • 1
  • 1
    Hi Patrick - you've got the beginning of an answer... if you can provide a little more detail of what the OP can do with google fonts (rather than just pointing at the link) then it';ll count as a "real" answer for our purposes :) – Taryn East Oct 08 '14 at 01:29
1

You can use CSS to apply a grunge effect on text. As far as support goes all I can say is that I've tested it in latest Chrome, Firefox, IE, Opera, Safari as well as various mobile browsers and and diferent OS and it works in all of the ones I've tested on.

CSS

h1 {
    position:relative;
    color:#fff;
    font-family: Georgia;
    font-size: 50px;
}

h1 span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:url('your image url goes here');
}

HTML

<h1>YOUR TITLE GOES HERE<span>&nbsp;</span></h1>

Here's a fiddle

jfountain
  • 3,715
  • 2
  • 24
  • 22
David Martins
  • 1,830
  • 6
  • 22
  • 30
1

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)

DA.
  • 39,848
  • 49
  • 150
  • 213
  • Oh, "grunge" -- that's the word I couldn't remember when I was researching this! Searching for "grunge text CSS" turned up this: http://www.jankoatwarpspeed.com/post/2008/08/09/Add-grunge-effect-to-text-using-simple-CSS.aspx which is a helpful start... –  Jun 02 '11 at 06:09
  • Yea, that technique is basically the 'image on top of the type' option. Not a pure CSS solution but still useful. – DA. Jun 02 '11 at 06:33
  • Actually you can apply a grunge effect to text using CSS. It's quite simple too: http://www.jankoatwarpspeed.com/add-grunge-effect-to-text-using-simple-css/ – David Martins Jan 25 '16 at 13:48
  • @DavidMartins that is *also* using the "image on top of the type" method. – DA. Jan 25 '16 at 16:56
0

You can achieve the distressed font effect by importing (http://www.font-face.com/) a font similar to http://www.fontspace.com/category/stamp.

I am not sure if you can do the border with plain CSS. You can add a distressed transparent overlay over your stamp which will make it look good, and will not require the custom font.

CSS can be used to create the double stamp border with CSS double border + outline. You need to make the outer border color white, and the inner and outline colors the same. The outline should be thicker than the border.

Emil
  • 8,449
  • 3
  • 27
  • 44