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

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

 2016-10-06 14:21    网页设计   标签：css   1223    发表评论

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

做之前给大家先推荐一个比较好用的测试工具：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;

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