CSS Effect to Render a Font with "Rubber Stamp" Effect

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

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)

Letter Press Effect

Why don't you just do less of a blur on the text-shadow?

You're using:

color: #222;
text-shadow: 1px 1px 1px #FFF;

Use less of a blur and your text-shadow becomes more prevalent:

color: #222;
text-shadow: 1px 1px 0px #FFF;

Blur is the third parameter in this case, which you should have a value of 0px rather than 1px for a more letter-press-like effect.

How can I create a postage stamp border?

You can look at the code here, it does exactly what you want: http://codepen.io/orhanveli/pen/tbGJL

The code from the website:

HTML

<!-- Lets create a CSS3 stamp -->
<div class="stamp">
    <!-- the image -->
    <img src="http://thecodeplayer.com/uploads/media/css3logo.png" />
</div>

CSS

*{margin: 0; padding: 0;}

body {
    background: #B1d202;
    padding: 100px;
    text-align: center;
}

.stamp {
    width: 280px;
    height: 180px;
    display: inline-block;
    padding: 10px;
    background: white;
    position: relative;
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
    /*The stamp cutout will be created using crisp radial gradients*/
    background: radial-gradient(
        transparent 0px, 
        transparent 4px, 
        white 4px,
        white
    );

    /*reducing the gradient size*/
    background-size: 20px 20px;
    /*Offset to move the holes to the edge*/
    background-position: -10px -10px;
}
.stamp:after {
    content: '';
    position: absolute;
    /*We can shrink the pseudo element here to hide the shadow edges*/
    left: 5px; top: 5px; right: 5px; bottom: 5px;
    /*Shadow - doesn't look good because of the stamp cutout. We can still move this into another pseudo element behind the .stamp main element*/

  /*box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);*/
    /*pushing it back*/
    z-index: -1;
}
/*Some text*/
.stamp:before {
    content: 'CSS3';
    position: absolute;
    bottom: 0; left: 0;
    font: bold 24px arial;
    color: white;
    opacity: 0.75;
    line-height: 100%;
    padding: 20px;
}
.stamp img {

}

File too big to open in R?

That is just a warning telling you that not all the data was displayed. It's still probably loading. You get the same when trying to display large matrices or data frames. For example you will get the same warning if you try matrix(nrow=10000000)

---

Related Topics