CSS effect for rendering a rubber stamp font

Question

Is there any effective way in CSS to render a font with an effect that makes it look like a stamp? As if ink from a rubber stamp was superimposed on a printed material?

It would be even better to apply the same effect to the border, as if the border were part of a stamp. Like this:

Answer 1

This is close to what you are looking for - it uses a pseudo-element overlay along with mix-blend-modeto create this genuine kind of rubber marking. Everything is done in CSS, with the exception of the stamp texture itself.

Screenshot:

Live Demo (now works in Firefox):

* {
  box-sizing: border-box;
}

h1 {
  position: relative;
  display: inline-block;
  color: blue;
  padding: 15px;
  background-color: white;
  box-shadow:inset 0px 0px 0px 10px blue;
}

h1:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("http://i.imgur.com/5O74VI6.jpg");
  mix-blend-mode: lighten;
}

<h1>
Example Text
</h1>

Run codeHide result

Answer 2

: https://codepen.io/chris22smith/pen/kDtiE

div.box
{
  width:200px;
  height:200px;
  border:solid 1px #333;
  display:inline-block;
  vertical-align:top;
  box-sizing:border-box;
  padding:10px;
  color:#999;
  position:relative;
}

div.box.sample:after
{
    content:"SAMPLE";
    position:absolute;
    top:70px;
    left:10px;
    z-index:1;
    font-family:Arial,sans-serif;
    -webkit-transform: rotate(-45deg); /* Safari */
    -moz-transform: rotate(-45deg); /* Firefox */
    -ms-transform: rotate(-45deg); /* IE */
    -o-transform: rotate(-45deg); /* Opera */
    transform: rotate(-45deg);
    font-size:40px;
    color:#c00;
    background:#fff;
    border:solid 4px #c00;
    padding:5px;
    border-radius:5px;
    zoom:1;
    filter:alpha(opacity=20);
    opacity:0.2;
    -webkit-text-shadow: 0 0 2px #c00;
    text-shadow: 0 0 2px #c00;
    box-shadow: 0 0 2px #c00;
}

HTML:

<div class="box">
  Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
</div>
<div class="box sample">

</div>
<div class="box sample">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.
</div>

Answer 3

CSS.

, , .

, / .

, CSS.

, , , ( , Google), -, ...

.rubber {
  box-shadow: 0 0 0 3px blue, 0 0 0 2px blue inset;  
  border: 2px solid transparent;
  border-radius: 4px;
  display: inline-block;
  padding: 5px 2px;
  line-height: 22px;
  color: blue;
  font-size: 24px;
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.4;
  width: 155px;
  transform: rotate(-5deg);
}

<link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>

<div class="rubber">
  Early bird discount
</div>

Hide result

Answer 4

A specific font color,, a noisy image (or gradient pattern) and mix-blend-mode:overlay;can do this (similar, but different from Maximilien, tested as in FF / Chrome).

I use the gradient to demonstrate (from transparent white to transparent), change it or replace it with any noise image of your choice.

p {
  background: linear-gradient(to left, transparent 50%, rgba(255, 255, 255, 0.3) 50%), linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.3)50%);
  background-size: 2px 4px, 4px 2px;
  font-family: "black ops one", cursive;
  display: inline-block;
  margin:0 1em 1em;
  font-size: 40px;
  letter-spacing: 8px;
  color: #0E5AD2;
  transform: rotate(-5deg);
}
p span {
  font-family: 'Fredericka the Great', cursive;
  width: 7.3em;
  letter-spacing: 10px;
  display: inline-block;
  padding: 0.5em;
  border-radius: 15px;
  box-shadow: 0 0 0 5px, inset 0 0 0 5px white, inset 0 0 0 8px, inset 0 0 0 400px white;
  mix-blend-mode: overlay;
  outline-offset: -1px;
  outline: solid 8px;
  margin: 8px;
}
p span:first-line,
p:first-line {
  letter-spacing: 0;
}
p+p span {
  border-radius: 15px;
  padding: 0.25em 1em;
  font-family: "black ops one", cursive;
  display: inline-block;
  margin: 1em 2em;
  font-size: 40px;
  letter-spacing: 8px;
  width: 7em;
}
code {
  font-family: 'Fredericka the Great', cursive;
}
div span {
  font-family: "black ops one", cursive;
}

<link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>

<p><span>EARLY BIRDS DISCOUNT</span>
</p>


<p><span>EARLY BIRDS DISCOUNT</span>
</p>
<div>font used : <span>black ops one </span>and <code>frederika the great</code>
</div>

Run codeHide result

Answer 5

Here is an example of using -webkit-background-clip, just change the image to your preference.

*,
:before,
:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-color: #000;
}
.wrapper {
  text-align: center;
  border: 5px solid #ffffff;
  padding: 0.3em;
  display: inline-block;
  border-radius: 4px;
  max-width: 650px;
  transform: rotate(-5deg);
}
.clip-text {
  font-size: 6em;
  line-height: 1;
  font-weight: bold;
  position: relative;
  display: inline-block;
  text-align: center;
  color: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.clip-text:before,
.clip-text:after {
  position: absolute;
  content: '';
}
.clip-text:before {
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: inherit;
}
.clip-text:after {
  position: absolute;
  z-index: -1;
  top: .025em;
  right: .025em;
  bottom: .025em;
  left: .025em;
  background-color: #000;
}
.clip-text_background {
  background-image: url(http://w.mawebcenters.com/static/ecommerce/110/110341/media/catalog/product/cache/1/image/5e06319eda06f020e43594a9c230972d/K/9/K94_13.jpg);
}

<div class="wrapper">
  <div class="clip-text clip-text_background">
    EARLY BIRD DISCOUNT
  </div>
</div>

Run codeHide result