Question

CSS中是否有任何有效的方法来渲染具有使其看起来像橡皮图章的效果的字体？好像橡皮图章上的墨水覆盖在印刷品上？

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

Answer 1

这与您正在寻找的内容很接近 - 它使用叠加伪元素和mix-blend-mode来创建真正的橡皮图章外观。除了橡皮图章纹理本身外，一切都在CSS中完成。

<强>截图：

现场演示（现在也适用于Firefox）：

＆＃13;

* {
  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;
}

＆＃13;

<h1>
Example Text
</h1>

＆＃13;

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供应商前缀相比较少。

一个简单的例子

所以基本上使用任何看起来像橡皮图章的字体（你可以找到一些非常漂亮的免费字体，只有谷歌）你可以做一些看起来很接近你的照片......

.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>

Answer 4

特定字体，color，嘈杂图像（或渐变图案）和mix-blend-mode:overlay;可以做到（与FF / Chrome中测试的Maximilien相似但不同）。

我使用渐变进行演示（从透明白色到透明），修改它或用您选择的任何嘈杂图像替换它。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 5

以下是使用-webkit-background-clip的示例，只需将图片更改为您的偏好。

＆＃13;

2/3/2015
7/5/2015
1/21/2016
2/19/2016
7/1/2016

＆＃13;

*,
: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);
}

＆＃13;

CSS效果渲染具有“橡皮图章”效果的字体

5 个答案:

可怕的事实

替代方案

建议的解决方案

一个简单的例子