CSS效果以“橡胶图章”效果呈现字体 [英] CSS effect to render a font with “rubber stamp” effect

问题描述

CSS中是否有任何有效的方法来呈现具有看起来像橡皮图章的效果的字体？仿佛橡皮图章上的墨水被放在印刷材料上一样？

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

更好的做法是将相同的效果应用于边框，就像边框是边框的一部分一样橡皮戳。像这样：

Even better would be for the same effect to be applied to a border, as if the border were part of the rubber stamp. Like this:

推荐答案

这与您要查找的内容很接近-它使用覆盖伪元素以及 mix-blend-mode 来创建真正的橡皮图章外观。除了橡皮图章本身之外，其他所有操作都在CSS中完成。

This is close to what you're looking for - it uses an overlay pseudoelement along with mix-blend-mode to create that genuine rubber-stamp look. Everything is done in CSS except for the rubber stamp texture itself.

屏幕截图：

实时演示（现在也可以在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>

这篇关于CSS效果以“橡胶图章”效果呈现字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！