灵武定制网站建设:如何使用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和它的侏罗纪版本等旧浏览器上得到支持。