灵武定制网站建设:如何使用CSS 3和HTML 5创建纹理文本效果

你还记得以前你刚开始使用Photoshop的时候吗？你设计了一个基于图像的文本然后把它上传到你的网站上？

除此之外，您还可以使用掩码图像CSS属性进行几乎相同的效果；但是，该属性根据掩码图像的透明度剪辑元素的可见部分。

在今天的教程中，您将学习如何应用这些效果，并使用CSS 3和HTML 5创建一个很酷的纹理文本。

本css文本效果教程的参考资料

• 任何背景图像
• 任何纹理图像(PNG文件)
• Lato(谷歌字体)
• Oswald(谷歌字体)

我们要建什么

下载源文件或灵武定制网站建设查看演示。

使用webkit背景剪辑进行文本处理

对于本教程的这一部分，您将使用webkit背景剪辑属性来应用带有h灵武定制网站建设1标记的酷狮和丛林文本效果。

HTML

对于标记，我们的第一个h1标记用剪贴画的标题1包装，剪裁的标题2用我们的第二个h1标签包装。

   
THE LION



   
King of the Jungle

CSS

现在，对于我们的css，您将使用背景剪辑属性将图像剪辑到文本中。默认情况下，背景扩展到边框的外部边缘。

在下面的CSS中，使用了不同的背景图像。第一个是狮子背景图像，第二个是丛林背景图像。注意，webkit文本填充颜色被设置为透明，以确保图像颜色将显示在文本上。

#clipped-title1 {
	background: url(../images/lion.jpg) no-repeat center center;
	background-size: cover;
	color: #fff;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

#clipped-title2 {
	background: url(../images/jungle.jpg)no-repeat top center;
	background-size: cover;
	color: #fff;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	cursor: pointer;
}

#clipped-title1 h1 {
	font-size: 200px;
	font-family: Anton, sans-serif;
	text-align: center;
	-webkit-transition: text-shadow 1s ease;
	text-shadow: 0 0 1px rgba(0,0,0,.1);
	margin: 0;
	padding: 0;
}

#clipped-title2 h1 {
	font-size: 110px;
	font-family: Pacifico, sans-serif;
	text-align: center;
	-webkit-transition: text-shadow 1s ease;
	text-shadow: 0 0 1px rgba(0,0,0,.1);
	margin-top: -75px;
	padding: 0;
}

使用Webkit蒙版-图像文本

通过使用-webkit-掩码-图像css属性，您可以在文本中设置图像。这几乎与背景剪辑相同，只是掩码图像根据图像掩码透明度剪辑元素的可见部分。

HTML

对于标记，您将简单地将h1标记包装到ID蒙面图像。

     
CERTIFIED ROUGH
TEXTURED TEXT

CSS

对于CSS，只需简单地为颜色和字体类型等提供基本样式。此外，您还将使用-webkit-掩码-图像属性将粗略的图像背景剪辑到文本中。使用Transform属性旋转文本-4度。

#masked-image {
    font-family: Oswald, sans-serif;
    font-size: 100px;
    color: #fff;
    text-transform: uppercase;
    border: 14px solid #fff;
    border-radius: .2em;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url(../images/rough-texture.png);
    -webkit-transform: rotate(-4deg);
    -moz-mask-image: url(../images/rough-texture.png);
    -moz-transform: rotate(-4deg);
    -o-mask-image: url(../images/rough-texture.png);
    -o-transform: rotate(-4deg);
    mask-image: url(../images/rough-texture.png);
    transform: rotate(-4deg);
}

包起来

给你！使用背景剪辑和掩码图像CSS属性创建纹理图像是多么容易。

虽然这可能是Photoshop工作流灵武定制网站建设的一个很好的替代品，但在撰写本文的这个时候，它还没有在InternetExplorer 8和它的侏罗纪版本等旧浏览器上得到支持。