CSS 揭秘 - 读书笔记(其四)

发表于: 2016-09-04分类于:CSS

连字符断行

在英文排版中,行末的单词如果太长或者不能折行,行末的单词就会被放到第二行显示,这样在该行的末尾就会留下大块的空白,这个时候我们希望将单词使用连字符(-)进行连接,然后将单词分开在两行显示,这样每行文子的末尾都显得很整齐。

在以前这很不容易做到,不过现在好了,CSS3文本引入了一个属性 hypens 来解决这个问题。该属性可以帮助开发者在单词合适的地方插入连字符来折断单词。它可以取 none,manual 和 auto 这三个值。不过该属性目前的支持程度还比较低。

插入换行

在网页排版的时候,常需要在某些标签后面断行,比如下面 HTML 代码中,需要在每个 span 标签后面插入换行(这里用作例子,但实际中可以有其他解决方法)。

<p class="ex-br"><span>举杯邀明月,</span><span>对影成三人。</span></p>

可以在 span 元素后面添加 <br /> 来完成换行,但是破坏了 DOM 结构,另外一种可行的方法是在 span 标签的后面添加换行符,换行符的编码是 0x000A ,这里可以使用 spanafter 伪元素来添加这个换行符。

span::after{
    content:"\A";
}
p{
    white-space: pre;
}

效果如下:

举杯邀明月,对影成三人。

文本行的斑马条纹

在列表中可以使用 :nth-child(even) 很方便地添加斑马线,但是如果想给 pre 中的代码块添加上斑马线,该怎么弄呢?

这里需要用到渐变背景,使用线性渐变可以给元素添加上条纹背景,这里可以给 pre 标签设置条纹背景,如此以来,代码块就有了条纹背景,这不正是我们苦苦追求的效果吗?

花间一壶酒,独酌无相亲。
举杯邀明月,对影成三人。
月既不解饮,影徒随我身。
暂伴月将影,行乐须及春。
我歌月徘徊,我舞影零乱。
醒时相交欢,醉后各分散。
永结无情游,相期邈云汉。

实现代码如下:

line-height: 1.5em;
background: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
background-size: auto 3em;
background-origin: content-box;
background-clip: content-box;

这里使用将 background-size 中高度设置为行高的二倍,确保条纹与内容不会错开。另外,如果元素有内边距,那么渐变是不是从内容区域开始的,这个时候需要使用 background-origin 来将渐变背景的参考点移动至内容区域。另外条纹背景的区域还会延伸至内边距区域,这里需要设置 background-clip: content-box 来将条纹背景限制在内容区域。

调整 tab 的宽度

在网页上常常会包含代码,而代码中往往使用了 tab 来控制缩进,在网页上一个 tab 来显示多宽呢?4 个或是 2 个?在不同的浏览器上可能不同,在不同的编辑器上一个tab 显示多宽也是不同的,所以人们推荐使用空格来代替 tab 进行缩进。

但是现在好了,有了一个叫做 tab-size 的属性来控制 tab 的宽度。

这是 tab-size 为 4 的情况:

void strcpy(char *s, char *d){
	while(*d++ = *s++);
}

这是 tab-size 为 8 的情况:

void strcpy(char *s, char *d){
	while(*d++ = *s++);
}

自定义下划线

好像浏览器默认的东西都是人们嫌弃的一样,我们总是不满 text-decoration 给添加的下划线的效果。于是人们开始使用 border-bottom 来个元素添加下划线效果。但是使用 border-bottom 添加的下划线往往距离元素较远,这是因为我们是在使用下边框来模拟下划线,为了调整距离,不得不调整 padding-bottom 的值,而这又会影响到布局。

解决方案是使用 background-image 相关属性,使用渐变得到一条细线,将其放置在文本的下方:

background: linear-gradient(#333,#333) no-repeat;
background-size: 100% 1px;
background-position: 0 1.11em;

这里通过调整渐变的颜色可以改变下划线的颜色,调整 background-size 中第二个值(高度)可以改变下划线的宽度,调整 background-position 的第二个值可以改变下划线的位置。改变渐变得到的那条线的样式就可以改变下划线的样式。

需要注意的是要保证使用背景添加的那条线在背景区域范围内,如果下划线太偏下,可能偏移出了该元素所在的盒子,这样这条线就看不见了。

this is a simple example.

但是使用这个方法还是略显 hack,以后的 CSS 可能会扩展 text-decoration 得到以下属性以方便开发者灵活地改变下划线的距离、宽度、线形和颜色等。

  • text-decoration-color
  • text-decoration-style
  • text-decoration-skip
  • text-underline-position

目前 firefox 已经实现了部分属性,chrome 还不支持。

现实中的文字效果

凸版印刷效果

因为在现实生活中,人们已经习惯了光源在头顶的环境,所以在图形界面中,底部有暗阴影或者顶部有亮阴影会让人觉得它是凸起的,如果底部有亮阴影而底部有暗阴影会让人觉得它是凹下去的。

凸起凹下

空心字效果

给文字进行描边,就可以得到下面这样的字体,使用 text-shadow 可以较容易地实现,只需要在四个方向上给文字添加阴影就好了。

CSS 空心字效果

实现代码:

text-shadow: 0px 2px #fff,0px -2px #fff,-2px 0px #fff,2px 0px #fff;

这个方法还是略显麻烦,且当文字比较复杂的时候,为了能让所有边缘都描上边,我们需要在更多方向上添加文字阴影,比如上面汉字的例子,4个方向的描边效果就不好。但在未来,我们可以向 box-shadow 那样指定一个扩张半径,文字描边就更加容易实现了。

文字发光效果

给文字添加不带偏移,只有模糊,连颜色都不用指定的 text-shadow 就可以实现文字发光效果,为了让发光更加明显,可以叠加多个 text-shadow

text-shadow: 0px 0px .1em, 0px 0px .3em;

文字发光效果

文字凸起效果

只需要给文字下方添加一系列渐渐加深的阴影就可以实现凸起的文字的效果。

文字凸起效果

color: #fff;
text-shadow: 0 1px hsl(0,0%,85%),
    0 2px hsl(0,0%,80%),
    0 3px hsl(0,0%,75%),
    0 4px hsl(0,0%,70%),
    0 5px hsl(0,0%,65%),
    0 5px 10px #000;

最后加一个纯黑色的模糊投影,可以让效果更加真实。