使用CSS和SVG制作带纹理文本的三个技巧

编辑推荐:3月31日前,点击注册激活 Coding.net 立赠30天付费会员 ,体验极速代码托管服务!

你也许能够熟练的使用PS对文本进行图像掩埋;一个比较好的方法是在文字上添加一些纹理或者是一个背景图片。然后把这个文本存储为图像,你就可以在你的网站上使用;但是如果可以只使用HTML和CSS来产生相同的效果不是更好吗?好消息是,确实可以!

CSS介绍了background-clipmask-image的属性,或许你可以使用他们来创造相似的效果,就像你用PS创造出来的那样。最重要的是,你也可以使用SVG来进行文本图像剪辑。

在本文中,我们将会研究一下这些方案,甚至会尝试做一些简单的动画效果。如果你想查看详细的源代码,请点击下载这个文件

浏览器支持

可以预见,我们使用的一些性能并不是被浏览器普遍支持的,这意味着他们将在浏览器中失败,就像IE和火狐。好消息是这些性能将默默地衰退,意味着这些技术正在渐进增强,并且适用于网站。

使用BACKGROUND-CLIP来裁剪文本

我们第一个要研究的方法是 background-clip属性,这个属性将定义背景是否将被延伸到边界。可允许文本在图片上做截取。

HTML

我们的标记是一个简单的包含bgClip类的h1标签。

<h1 class="bgClip">Clip Text</h1>

现在,让我们用CSS添加魔法吧...

CSS

我们用夜空的图片来给文本添加效果,使用font-smoothing使文本渲染流畅。请注意使用这种方法的时候文本的颜色必须是透明的,所以我们同时也得使用text-fill-color:transparent.

.bgClip {
    background:url('../images/clouds.jpg');
    background-repeat:repeat-x;
    background-position:0 0;
    font-size:200px;
    text-transform:uppercase;
    text-align:center;
    font-family:'Luckiest Guy';
    color:transparent;
    -webkit-font-smoothing:antialiased;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:0;

现在我们只要添加一点点的动画效果,让背景更加诱人:

    -webkit-animation:BackgroundAnimated 15s linear infinite;
    -moz-animation:BackgroundAnimated 15s linear infinite;
    -ms-animation:BackgroundAnimated 15s linear infinite;
    -o-animation:BackgroundAnimated 15s linear infinite;
    animation:BackgroundAnimated 15s linear infinite;
}
@keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
@-webkit-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
@-ms-keyframes BackgroundAnimated {    
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
@-moz-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
`

结果如下:

使用SVG剪切文本

我们将研究的下一个技术是,SVG的剪切。类似上述的CSS方法,SVG也允许通过使用clipPath属性令文本在图片上做截取。

虽然clipPath包含的图形属性一般是圆形或者方形的,但是你也可以使用文本来剪切。

SVG

你将看见我使用HTML的<img>元素来剪切图像.

<img class="svg-clip" src="images/green.jpg"/>
<svg height="0" width="0">
    <defs>
        <clippath id="svgPath">
            <text x="175" y="420" textLength="1000"  lengthAdjust="spacing" font-family="Lemon" font-size="240px"> SVG Text </text>
        </clippath>
    </defs>
</svg>

虽然我在这里使用了.jpg格式的图,但是你也可以使用其他格式的图,甚至是视频。

CSS

现在,我们所有人不得不使用clip-path属性作为图像的剪切路径:

.svg-clip {
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
    margin:0 auto;
}

结果如下:

使用mask-image掩盖文本

我们将研究的最后一个技术是用mask-image使文本变形。这个属性的基础功能是对于文本外的不可见的区域进行剪切。

HTML

我们需要一个包裹在div元素里的h1元素:

<div id="maskText">
    <h1>Mask Text</h1>
</div>

CSS

为了用图像掩盖文本,我们将使用-webkit-mask-image指定图片,同时我们也可以添加一个text-shadow来添加阴影。

最后,我想添加一些效果,当鼠标悬停的时候将显示平滑的全文。

#mask-text h1 {
    font-size: 200px;
    font-family: 'Lilita One', sans-serif;
    color: #ffe400;
    text-shadow: 7px 7px 0px #34495e;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url('../images/texture.png');
    -webkit-transition:all 2s ease;
    -moz-transition:all 2s ease;
    -o-transition:all 2s ease;
    transition:all 2s ease;
}
#mask-text h1:hover{
    -webkit-mask-image: url('../images/texture-hover.png');
    cursor: pointer;
    color: #ffe400;
}

结果如下:

结论

棒极了!虽然你只是学习了怎样用不同的方法剪切文本,但是这些属性将节省你很多时间并且让你无需使用PS。更重要的是他们是动态的。

CSS和SVG已经走了很长的路,在接下来的几年里,随着浏览器的升级,类似这样的技术将成为标准。

本文根据@SAMUEL NORTON的《3 TRICKS FOR ADDING TEXTURE TO YOUR TEXT WITH CSS AND SVG》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.webdesignerdepot.com/2014/12/3-tricks-for-adding-texture-to-your-text-with-css-and-svg/

栗子酱

在校学生,本科软件工程专业,重度拖延症患者QAQ ,热爱前端,喜欢设计,正朝着成为一名优秀的前端工程师努力中。微博@_栗子酱。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/3-tricks-for-adding-texture-to-your-text-with-css-and-svg.html

返回顶部