5

我对渲染一个看起来像其中之一的跨度的方法很感兴趣：

一些随机的邮票图像

以下是我计划使用的技巧：

  • @font-face
  • -{moz/webkit/o}-transform:rotate

这是一个个人项目，所以假设最现代的 CSS 支持很好。也许边界图像可以帮助？我想避免到处都是图像拼接——如果真的归结为这样，我会一起跳过边框并依靠字体来显示。

我只是好奇这里的 CSS 大师会如何处理这个问题。

更新

现在有一个 CSS 属性，mask-image. 更多在这里。

4

5 回答 5

2

您可以使用字体作为字体，但您仍然需要图像作为边框。我建议您省去跨浏览器调试的麻烦，并尽可能使用透明的 .png。

于 2011-06-02T06:02:24.263 回答
1

没有针对 grunge 外观的特定 css 解决方案。为此，您必须依赖字体或图像（例如与字体顶部的背景颜色匹配的某种“蹩脚的”斑点图案）。

唯一可能适用的其他 CSS 是使用设置为 80% 或 90% 不透明度的 RGBA 颜色，以允许您可能使用的任何背景图案渗透，就像使用真正的墨水印章一样。

我喜欢尽可能多地使用 CSS，但对于特定的外观，我会坚持使用图像。图像仍然是有目的的。;o)

于 2011-06-02T05:58:37.820 回答
1

这个现在看起来很有希望：http: //codepen.io/c3f3l0/pen/Fwzoc

使用古尔字体

<link href='http://fonts.googleapis.com/css?family=Black+Ops+One|Luckiest+Guy|Sonsie+One|Shojumaru&effect=3d|3d-float|anaglyph|brick-sign|canvas-print|
        crackle|decaying|destruction|distressed|distressed-wood|emboss|fire|fire-animation|fragile|grass|ice|mitosis|neon|outline|putting-green|
        scuffed-steel|shadow-multiple|splintered|static|stonewash|vintage|wallpaper' 
        rel='stylesheet' type='text/css'>
于 2014-10-07T20:48:13.650 回答
0

可以通过导入（http://www.font-face.com/）类似http://www.fontspace.com/category/stamp的字体来实现仿旧字体效果。

我不确定你是否可以用纯 CSS 做边框。您可以在您的图章上添加一个做旧的透明覆盖，这将使它看起来不错，并且不需要自定义字体。

CSS 可用于创建带有 CSS 双边框 + 轮廓的双图章边框。您需要使外边框颜色为白色，内边框颜色相同。轮廓应该比边框厚。

于 2011-06-02T06:12:48.370 回答
0

您可以使用 CSS 对文本应用垃圾效果。就支持而言，我只能说我已经在最新的 Chrome、Firefox、IE、Opera、Safari 以及各种移动浏览器和不同的操作系统中对其进行了测试，并且它适用于我测试过的所有操作系统.

CSS

h1 {
    position:relative;
    color:#fff;
    font-family: Georgia;
    font-size: 50px;
}

h1 span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:url('your image url goes here');
}

HTML 

<h1>YOUR TITLE GOES HERE<span>&nbsp;</span></h1>

这是一个小提琴

我从http://www.jankoatwarpspeed.com/add-grunge-effect-to-text-using-simple-css/得到这个

于 2016-01-25T15:35:45.133 回答