Graphical Text Effects (CSS VS SVG:图像文字效果)

前言

原文来源:这里

作者: Sara Soueidan

译者: 临水照影

正文之前

午睡睡得昏昏沉沉,翻译一下sara女神的文章学点东西并提提神。译文有删减-0-,有些东西我懒得翻译。觉得有影响的可以去看原文-0-

正文

这篇文章是一系列技术探索文章中的第一篇,文中的例子可以同时用css和svg来实现。然后我们将进行对比。由于我偏好于svg,而且这篇文章真的证明了svg在解决某些WEB设计问题上比css更棒,因为它是图像和文档的结合格式。但为了保持一个客观的角度,我们会权衡每种技术的优点和缺点,并找出CSS和SVG可以更好的为设计服务的一面。

在这篇文章中,我们将用CSS和SVG创建一些图形文字效果。

用CSS来创建图形文字效果

老的CSS方法

假设你有一个H1标题而且你希望用令人印象深刻的图形效果来代替文本,这是你将用的CSS:

h1.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url(…);
}

文本缩进确保内容超过了自身的边界并溢出它们。然后隐藏溢出的内容确保超出边界的内容。因此,你最终会得到一个没有文本内容的矩形的区域。

然后这个区域被背景图片填满,你可以用PS来完成吸引人的文本的图片。

用漂亮的图片来代替文本就是你要做的。

新的css方法

最常见的文字效果就是文字内部填充背景。

纹理填充文字

img1

利用css的background-clip属性,我们能够用图片填充文本。这个属性决定一个元素的背景绘图区。

background-clip属性在webkit内核的浏览器下有第四个属性 text,它可以裁剪背景图片到前景文字。然后,通过用-webkit-text-fill-color给文本一个透明色,这个背景图片将贯穿整个文字,完成裁剪效果。

举个例子:

.clippedElement {
  /* background image that will serve as text fill */
  background: url(path/to/your/image.jpg) no-repeat center center;
    /* -webkit-background-clip clips the background of the element to the text */
    -webkit-text-fill-color: transparent; /* overrides the white text color in webkit browsers */
    -webkit-background-clip: text;

  /* general styles */
    background-size: 100% auto;
    color: #fff;
    text-align: center;
    padding: 2em;
}

但不幸的是,这些效果无法在IE和Firefox上显示。

所以,如果我们给之前的H1应用这个类,它不会显示纹理效果。但如果用一个DIV来包含它,并给这个DIV的背景图片应用样式。它会显示对应效果。

Demo Click Here

如果你想用在非webkit内核的浏览器上展现这种效果,你可以用图片来代替。

注意,这里的图像可以是任何图像,甚至是CSS的梯度

纹理文本(带背景混合)

接下来,我们将用css 遮罩来制作下面的效果

img2

当用css遮罩时,我们让文本来采取其遮罩图片的形状,而不是让遮罩图片采取文字的形状。

这个效果用的遮罩图片来自是我之前写的一篇文章.图片用来当做遮罩来遮住文本区域并让它背后的背景通过遮罩显示。如果你选择了合适的纹理和背景,你将获得无缝融合的效果。我们采用的是一张飞溅墨点图,为了简单起见,我们没用任何混合,只是应用这个飞溅图。

img3

当你应用css遮罩到你的文本,这个文本需要在黑色区域中可见,遮罩图像的部分的文本必须是透明的。因为遮罩图像在CSS默认是透明遮罩,而不是亮度遮罩。当我们提供透明遮罩,黑色区域将被定义用来绘制文本。

我们将应用mask-image属性

h1 {
    /* the line that applies the splatter effect */
    mask-image: url(../img/splatter-mask_1.png); 

/* any general styles go here like font family, alignment, etc. */
}

Firefox只支持svg遮罩,webkit浏览器要求webkit前缀而且只支持特殊的两个属性。这是浏览器支持表

这是DEMO

如果你想用梯度遮罩,可以用下面的代码

mask-image: linear-gradient(black, transparent);

用svg,事情好像变得更加好了

图形文字与SVG

Svg超级棒(我不得不说)。现在,为了简单起见,我们将深入代码并解释它。

在SVG中工作时,无论是文本还是其它我们都将在<svg>元素中定义。

文本纹理填充

为了用纹理填充文本,我们需要定纹理,这里我们给svg文本填充颜色。

img4

代码如下:

<svg xmlns=“http://www.w3.org/2000/svg”  viewBox=“0 0 1250 400” width=“1250” height=“400”> 
    <title>Gradient-filled Text</title>
    <!— Source: http://lea.verou.me/2012/05/text-masking-the-standards-way/ —>
    <defs>
       <linearGradient id=“filler” x=“0%” y=“100%”>
           <stop stop-color=“gold” offset=“0%”></stop>
             <stop stop-color=“purple” offset=“20%”></stop>
           <stop stop-color=“deepPink” offset=“40%”></stop>
           <stop stop-color=“orange” offset=“60%”></stop>
           <stop stop-color=“yellow” offset=“80%”></stop>
           <stop stop-color=“skyblue” offset=“100%”></stop>
      </linearGradient>
    </defs>
    <text x=“100” y=“70%” font-size=“205” fill=“url(#filler)”> Radiant Text</text>
</svg>

注意:我们需要给svg元素定义高度和宽度,但为了让svg能够响应式,我们需要用css百分比覆盖默认尺寸。你可以在这里看到相关资料

<defs>中定义我们的纹理为线性填充。

这是demo

这里的纹理也可以是任何图片或者梯度。甚至可以是一个svg图案。

因为svg是一个图形,确保给它一个title让它能被屏幕阅读器识别。title对于svg就像alt属性对于在html页面中的img元素。

文本应用纹理(与背景混合)

与之前的技术类似,混合遮罩和背景。

这是我们想要完成的效果:

img5

这像文字被咬了好几口。

首先我们在图形编辑器中绘制创建一些咬痕遮罩。

之后我们导出为它们为svg形状,并放在<defs>中,像这样:

<svg viewBox=“0 0 900 400”>
  <defs>
    <mask id=“mask”>
      <rect x=“0” y=“0” width=“100%” height=“100%” fill=“#fff”></rect>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…“></path>
            <path fill=“#000” d=“…“></path>
    </mask>
  </defs>

  <text font-size=“230” fill=“#FF481E” mask=“url(#mask)”>
    <tspan x=“0” y=“150”>nom</tspan>
    <tspan y=“280” x=“150”>nom<tspan>
    <tspan y=“400” x=“350”>nom<tspan>
  </text>
</svg>

这是一个很重要的知识点:在SVG中,不像CSS,元素会被默认的在白色区域中绘制,在黑色区域中不绘制。任何在黑白之间的值都会被渲染为半透明,越接近白色,遮罩越不透明,越接近黑色,遮罩越透明。

所以,在示例中,我给咬痕形状黑色填充。

DEMO CLICK HERE

然后你在这个SVG应用任何纹理,因为在<defs>有很多元素选择,你可以创建动态纹理来填充。

SVG中动态文本填充

Svg不仅能够让我们更好的支持模块化,SVG代码更能自然的动画化。

当你在<defs>中填充一个元素,你还可让它动起来。像下面这样:

img6

作为一个简单的例子,你可以用gif动画来填充。

以上的图片中例子都可在这里找到。

注意观察浏览器支持情况。

结尾

Svg比css更适合制作文本特效。

译者

Sara女神的每篇文章都很值得学习,而且干货满满。这篇文章因为太长了,我就精简了一下-0-,觉得不放心可以去看原文。

Table of Contents