CSS Rubber Stamp Effect

Here’s a CSS effect to add a rubber stamp type marker over existing content.

It uses the pseudo element :after to add the text content to an element with the appropriate class, in this case, .sample.

A few little points to note:

  • The :after style’s z-index must be higher than the existing content so that it appears on top of it.
  • The position of the content needs to set with top: and left:. With the transform:rotate this may take a bit of trial and error to get right.
  • In IE8 or below the transform:rotate won’t work so the text will just appear horizontally. Keep this in mind when setting the position.
  • text-shadow: and box-shadow: might not work in all browsers but it still looks ok without these enhancements

See the Pen CSS Rubber Stamp style by Chris Smith (@chris22smith) on CodePen

About Chris Smith

Web developer specialising in frontend UI design @chris22smith
This entry was posted in :after, border-radius, box-shadow, css, display, opacity, positioning, rotate, text-shadow, transform and tagged , , , . Bookmark the permalink.