网页设计中常用的四种文字处理特效

 2016-10-06 14:21

在网页中,对文字进行艺术加工已经变得非常普通了。比如凸板印刷效果,悬停时的模糊效果,浮雕效果等等。要达成这些效果,我们往往会用一系列精心排版的文字投影,而且需要明白我们的眼睛是如何工作的,因为这些手段往往建立在视觉错误的基础上。一旦你掌握了其中的窍门,就可以很容易把这些效果做出来。

做之前给大家先推荐一个比较好用的测试工具:http://leaverou.github.io/contrast-ratio。它可以测试出文字的可阅读性。

测试工具

凸版印刷效果

这种效果是最流行的文字美化手法之一,尤其适合用于中等亮度配上深色文字的场景,也可以用于深底色、浅色字的场景,只要文字不是黑色并且背景不是纯黑或者纯白就行。

实际上,最早的图形界面中,为按钮按下或浮起效果就用到类似原理:出现在底部的浅色投影(或者出现在顶部的暗色投影)会让人产生物体是凹进平面内的错觉。同理,出现在底部的暗色投影(或者出现在顶部的浅色投影)会让人产生物体从平面上凸起的错觉。这种方法之所以奏效,是因为我们在现实世界中早已习惯了光源总是悬在头顶的环境。

这是一行测试文字。用来测试字体效果。

我们以上图作为效果开始做起来:

background:hsl(210,13%,60%);
color:hsl(210,13%,30%);

当我们在浅色背景上使用深色文字时,在底部加上浅色投影通常效果最佳。到底要多浅,取决于你用的是什么颜色,以及你期望最终效果有多明显,因此需要反复尝试其透明度以达到满意效果。这里我们用了80%不透明的白色:

background:hsl(210,13%,60%);
color:hsl(210,13%,30%);
text-shadow:0 1px 1px hsla(0,0%,100%,.8);

这是一行测试文字。用来测试字体效果。

这里我们直接用了像素,如果你需要处理的文字字号跨度非常大,那么用em单位可能更合适。

text-shadow:0 0.03em 0.03em hsla(0,0%,100%,.8);

如果把文字和背景的颜色深度对调,样式看起来又会如何呢?在深色底、浅色文字的情况下,直接套用上述投影样式看起来会非常奇怪,为什么会变模糊。这是不是我们应该调整方法?

在这种情况下,给文字顶部加深色投影是最佳方案:

这是一行测试文字。是把第一个图中文字和背景色进行的对调。

这是一行测试文字。是在文字的顶部加深色投影。

background:hsl(210,13%,40%);
color:hsl(210,13%,75%);
text-shadow:0 -1px 1px black;

空心字效果

在未来,实体文字描边或者空心字的效果会非常容易,因为我只需使用text-shadow属性的扩张参数就可以让投影变化,看起来就像给文字勾边了一样。不过遗憾的是,目前浏览器对这个参数的支持极为有限,因此我们不得不另寻其他方法来模拟文字描边。

流传最广的方法就是使用多个text-shadow,分别为这些投影加上不同方向的少量偏移,就像这样:

background:yellowgreen;
color:white;
text-shadow:1px 1px black,-1px -1px black,
        1px -1px black,-1px 1px black;

这是一行测试文字。用来测试文字的空心字效果。

除此之外,还可以重叠多层轻微模糊投影来模拟描边,这种方法不需要设置偏移量:

text-shadow:0 0 1px black,0 0 1px black,
        0 0 1px black,0 0 1px black,
        0 0 1px black,0 0 1px black;

不过,这种方法并不总是可以得到完美的效果,而且消耗较高,因为它用了模糊算法。不幸的是,我们需要的描边越粗,上述两种方案产生的效果就越差。不过我们还有SVG这个终极方案,可惜它需要在结构代码中插入乱七八糟的东西,具体大家自行研究下吧。

文字外发光效果

在某些类型的网站中,文字外发光效果常常用于凸显标题,或给链接增加鼠标悬停效果。它是最容易生成文字美化的效果之一。这种方法有一个最简单的版本:你只需要准备基层重叠的text-shadow即可,不需要考虑偏移量,颜色也只需要和文字保持一致:

background:#203;
color:#ffc;
text-shadow:0 0 .1em,0 0 .3em;

这是一行测试文字。用来测试文字外发光效果。

如果是为鼠标悬停状态增加这种效果,加上一个过渡效果就更好了:

a{
    background:#203;
    color:#ffc;
    transition:1s;
}
a:hover{
    text-shadow:0 0 .1em,0 0 .3em;
}

这个效果还可以做得更炫,如果你在:hover状态下把文字透明化,它看起来真的就像在变模糊:

a{
    background:#203;
    color:#ffc;
    transition:1s;
}
a:hover{
    color:transparent;
    text-shadow:0 0 .1em white,0 0 .3em white;
}

这是一行测试文字。鼠标移动上来看看效果。

不过要牢记一点,依赖text-shadow来实现文字显示的做法无法实现平稳退化,如果浏览器不支持text-shadow,那就什么字也看不见了。因此,需要确保只在支持的环境中运用上述效果。当然换个思路,我们也可以用CSS滤镜来实现文字变模糊的效果。这样就算不支持它也可以安全退化。

a:hover{
    filter:blur(.1em);
}

文字凸起效果

文字凸起效果主要思路就是使用一长串累加的投影,不设置模糊并以1px的跨度逐渐错开,让颜色逐渐变暗,然后在底部加一层强烈模糊的暗投影,从而模拟完整的立体效果。

background:#58a;
color:white;
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 black;

这是一行测试文字。测试文字凸起效果。

这种效果还有很多变种,比如把所有投影都设置为黑色,并却掉最底层的投影,就可以模拟出一种复古标志牌中常见的文字效果了:

background:hsl(0,50%,45%);
color:white;
text-shadow:1px 1px black,2px 2px black,
            3px 3px black,4px 4px black,
            5px 5px black,6px 6px black,
            7px 7px black,8px 8px black;

这是一行测试文字。测试文字凸起效果。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: