欢迎光临
我们一直在努力

微信小程序——字体效果之凸版印刷效果

        在网页中,对文字进行艺术加工已经变得非常普遍了,比如凸版印刷效
果,当鼠标悬停时的模糊效果,浮雕(伪3D)效果,等等。要达成这些效
果,我们往往会用到一系列精心排列的文本投影,并且需要明白我们的眼睛
是如何工作的,因为这些手段往往建立在视错觉的基础上。一旦你掌握了其
中的窍门,就可以很容易地把这些效果画出来,不过用开发工具把它们写出
来可就没那么容易了。
        本篇攻略将专门讲解如何创建上述效果,你再也不需要一边挠头一边
问:“这个效果到底是怎么做出来的?”

一、凸版印刷效果

        让我们以下图中用到的两种颜色作为起点。图中文字的颜色是hsl(210, 13%, 30%),而背景色是hsl(210, 13%, 60%)。

.text1 {
  background: hsl(210, 13%, 60%);
  color: hsl(210, 13%, 30%);
  padding: 30rpx;
}

        当我们在浅色背景上使用深色文字时(比如眼前的这个例子),在底部加上浅色投影通常效果最佳。到底要多浅,取决于你用的是什么颜色,以及你期望最终效果有多明显,因此需要反复尝试其透明度以达到满意效果。在这个例子中,我们最终敲定为80% 不透明度的白色;当然你也可以尝试其他数值:

.text1 {
  background: hsl(210, 13%, 60%);
  color: hsl(210, 13%, 30%);
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.8);
  padding: 30rpx;
}

如果把文字和背景的颜色深度对调,样式看起来又会如何呢?

.text1 {
  background: hsl(210, 13%, 40%);
  color: hsl(210, 13%, 75%);
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.8);
  padding: 30rpx;
}

        在深色底、浅色文字的情况下(参见上图),直接套用上述投影样式看起来会非常奇怪,会让文字显得模糊,在这种情况下,给文字顶部加深色投影是最佳方案。

.text1 {
  background: hsl(210, 13%, 40%);
  color: hsl(210, 13%, 75%);
  text-shadow: 0 -1px 1px black;
  padding: 30rpx;
}
赞(0)
未经允许不得转载:程序员部落阁 » 微信小程序——字体效果之凸版印刷效果
分享到: 更多 (0)

相关推荐

  • 暂无文章

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址