跳到主要内容

使用CSS的Texturise Web类型

  • 知识需要:基本的CSS和HTML
  • 需要:文本编辑器和WebKit浏览器(Chrome或Safari)
  • 项目时间:30分钟
  • 下载源文件

本文首次出现在.net杂志的第221期 - 这是世界上最畅销的网页设计师和开发者杂志。

由于越来越多的人接受了WOFF和Typekit,Fontdeck,Font Squirrel和Fontspring等服务,网络字体无处不在。既然网页设计师可以访问更多类型的选择,他们需要对打印设计师所拥有的字体进行相同级别的控制。虽然使用Web安全字体和核心CSS属性(如font-weight或letter-spacing)可以实现很多功能,但现在可以使用许多CSS3属性来提供更好的控制。 WebKit浏览器有一个鲜为人知但很棒的属性,可以应用于被调用的文本掩码图像

掩码图像可用于删除标题文本的小纹理片段。将这种技术与段落文本一起使用会损害可读性,但是当应用于大型显示字体时,它可以创建一个微妙的兴趣点。虽然它目前只是一个WebKit安全(Safari和Chrome)属性,但它通过向不支持的浏览器显示没有纹理而优雅地降级。

在本教程中,我们将从头开始介绍texturising类型 - 从基本HTML和CSS开始,然后在Photoshop中创建半透明纹理并在网页中的某些标题文本上实现它。我们将通过添加一些额外的CSS和JavaScript来完成它。

这个页面的设计灵感来自20世纪70年代美国肌肉车的颜色和类型,特别是Boss 302 Mustang。

第1步:使用HTML和CSS进行设置

让我们首先设置一个带有以下标记的极其简单的index.html页面:

  1. <HTML郎= “EN”>
  2. <>
  3. <字符集= “UTF-8”/>
  4. <标题> Netmag / Mask-Image 标题>
  5. <链接rel =“stylesheet”href =“style.css”type =“text / css”/>
  6. 头>
  7. <身体>
  8. <H1> Netmag H1>
  9. 身体>
  10. HTML>

从那里,我们将开始通过添加基本样式和布局Style.css文件我们正在加载的样式表:

  1. 身体 {
  2. Background-color:#d8411f;
  3. 颜色:#222;
  4. 字体:2em / 1 Sans-serif;
  5. Text-align:center;
  6. }
  7. 标头{
  8. 保证金:15%自动;
  9. 宽度:700px;
  10. }

现在,我们坐在橙色背景上的一些深灰色(#222)文字。在这种情况下,任何ol'sans-serif字体都不会削减它,因此我们将加入League Gothic,礼貌Theleagueofmoveabletype.com。这是身体的更新CSS,h1和字体松鼠生成的@ Font-face:

  1. / *由Font Squirrel生成(http://www.fontsquirrel.com)2011年7月5日* /
  2. @ Font-face {
  3. Font-family:'LeagueGothicRegular';
  4. src:url('/ fonts / league_gothic-webfont.eot');
  5. src:url('/ fonts / league_gothic-webfont.eot?#iefix')格式('embedded-opentype'),
  6. url('/ fonts / league_gothic-webfont.woff')格式('woff'),
  7. url('/ fonts / league_gothic-webfont.ttf')格式('truetype'),
  8. url('/ fonts / league_gothic-webfont.svg#LeagueGothicRegular')格式('svg');
  9. Font-weight:normal;
  10. Font-style:normal;
  11. }
  12. 身体 {
  13. Background-color:#d8411f;
  14. 颜色:#222;
  15. 字体:2em / 1'LeagueGothicRegular',sans-serif;
  16. Text-align:center;
  17. }
  18. H1 {
  19. 边界:.12em Solid#222;
  20. Font-size:8em;
  21. Line-height:1;
  22. 填充:.08em .08em 0;
  23. Text-transform:大写;
  24. }

Note: the padding specified for the h1 simply helps to center the League Gothic set text within the border

注意:为h1指定的填充只是帮助将联盟哥特式文本集中在边框内

第2步:通过蒙版图像添加纹理

让我们首先打开Photoshop来创建一个半透明的.png纹理来掩盖文本。重要的是要记住,当使用CSS屏蔽图像时,只要有透明度,文本就会被删除或删除。在这种情况下,我们只希望有微妙的纹理,以确保文本保持清晰。

看一下发现的三层Knockout.psd。以下是我从底层开始做的一步一步:

背景图层只是橙色填充。我用了纹理 - 前淘汰赛图层添加一些垃圾,一次刷几个笔画。虽然此图层未在导出中使用,但它包含在内以帮助跟踪进度。

接下来,我复制了纹理 - 前淘汰赛图层并重命名纹理 - 使用。在Photoshop图层样式面板中,我将“填充不透明度”设置为0%和淘汰赛获得透明度。

导出/保存Web时,请务必将图像导出为PNG-24,并选中透明度复选框。

呼!回到代码。这部分神奇地简单 - 只需扩展h1的代码以包含掩码图像代码:

  1. H1 {
  2. 边界:.12em Solid#222;
  3. Font-size:8em;
  4. Line-height:1;
  5. 填充:.08em .08em 0;
  6. Text-transform:大写;
  7. -webkit-mask-image:url(/img/knockout.png);
  8. -o-mask-image:url(/img/knockout.png);
  9. -moz-mask-image:url(/img/knockout.png);
  10. -ms-mask-image:url(/img/knockout.png);
  11. mask-image:url(/img/knockout.png);
  12. }

并且presto!盒子里那扁平而无聊的文字现在有纹理。并且永远不要担心文本占用的空间比导出的图像多,因为它会自动重复。正如我之前所说,这仅适用于WebKit,但我已经添加了所有其他供应商前缀,并希望该物业很快获得认可。

我想说今天在客户端站点上使用此属性是合适的,因为回退是完全可以接受的。在这种特殊情况下,它只会呈现为没有纹理的黑色文本。没有伤害,没有犯规。尽管这一切令人兴奋,但我想把事情变成一个而不是两个
更多缺口!

第3步:使用CSS3使其倾斜

CSS Transforms在包括IE9 +,Safari 5,Firefox 4,Opera 11.1和Google Chrome在内的浏览器中迅速获得支持,所以让我们在这里使用它们:

  1. H1 {
  2. 边界:.12em Solid#222;
  3. Font-size:8em;
  4. Line-height:1;
  5. 填充:.08em .08em 0;
  6. Text-transform:大写;
  7. -webkit-mask-image:url(/img/knockout.png);
  8. -o-mask-image:url(/img/knockout.png);
  9. -moz-mask-image:url(/img/knockout.png);
  10. -ms-mask-image:url(/img/knockout.png);
  11. mask-image:url(/img/knockout.png);
  12. -webkit-transform:skewY(-7deg);
  13. -o-变换:skewY(-7deg);
  14. -moz-transform:skewY(-7deg);
  15. -ms-transform:skewY(-7deg);
  16. 变换:skewY(-7deg);
  17. }

瞧!这是很多样式,没有任何额外的HTML,并且不难想象如何使用这些步骤中的一个或所有步骤来改善你今天的工作。也就是说,除非您负责构建自适应或响应式布局。所有这些按像素推动的爱情如何转化为流畅,灵活和/或媒体查询的布局而不会分崩离析?

第4步:通过FitText使其可扩展

在重新设计的同时我的博客去年春天,当我意识到在不希望文本包装的情况下扩展大型标题标题是多么困难时,我遇到了一个重大的障碍。我需要一种方法来实现填充父元素宽度的可扩展标题。值得庆幸的是,我的Paravel队列戴夫鲁珀特通过创造回应了挑战FitText

让我们通过这种设计进行测试,并使其从全宽度桌面视图到移动设备完全可扩展。

首先,让我们调整CSS中标题的宽度:

  1. 标头{
  2. 保证金:20%自动;
  3. 宽度:80%;
  4. }

现在宽度将是我们浏览器窗口的80%,让我们按顺序加载jQuery和FitText的index.html

  1. <身体>
  2. <H1> Netmag H1>
  3. <脚本SRC = “http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”> 脚本>
  4. <脚本SRC = “JS / jquery.fittext.js”> 脚本>
  5. 身体>

FitText需要我们设置压缩。数字越大,对字体大小的压缩越多。这是包含14-18行所有FitText JavaScript的最终HTML:

  1. <HTML郎= “EN”>
  2. <>
  3. <Charset =“utf-8”/>
  4. <标题> Netmag / Mask-Image 标题>
  5. <链接rel =“stylesheet”href =“style.css”type =“text / css”/>
  6. 头>
  7. <身体>
  8. <H1> Netmag H1>
  9. <脚本SRC = “http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”> 脚本>
  10. <脚本SRC = “JS / jquery.fittext.js”> 脚本>
  11. <脚本类型= “文本/ JavaScript的”>
  12. $( “H1”)fitText(0.24)。
  13. 脚本>
  14. 身体>
  15. HTML>

令人兴奋的是,我们能够在灵活的基础上构建我们想要输入的所有微调并使其可扩展!



翻译字数超限