美文网首页
27、现实中的文字效果

27、现实中的文字效果

作者: Elevens_regret | 来源:发表于2017-04-20 17:22 被阅读0次

1、凸版印刷效果

当文字为浅色背景配上深色文字时,在文字的底部加上浅色投影效果最佳。

background: hsl(210,13%,60%);
color: hsl(210,13%,30%);
text-shadow: 0 .07em .07em rgba(255,255,255,.8);  // 这个例子中文字底部的白色阴影使得文字有立体感

当文字为深色背景配上浅色文字时,在文字的顶部加上深色投影效果最佳。

background: hsl(210,13%,30%);
color: hsl(210,13%,60%);
text-shadow: 0 -.07em .07em rgba(0,0,0,.8);  // 这个例子中文字顶部的黑色阴影使得文字有立体感

2、空心字效果

利用text-shadow叠加的效果来给文字实现描边效果。

通过各个方向想偏移量相同的阴影叠加形成描边

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

通过多层相同的模糊阴影叠加形成描边

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

3、文字外发光效果

相关文章

  • 27、现实中的文字效果

    1、凸版印刷效果 当文字为浅色背景配上深色文字时,在文字的底部加上浅色投影效果最佳。 当文字为深色背景配上浅色文字...

  • css 中字体文本小诀窍

    本篇介绍 css 几种文本修饰的案例。 1、现实中的文字效果 1.1 凸版印刷效果 背景知识:text-shado...

  • 20.文字

    可以将文字效果直接拖拽到文字线上添加文字效果。 2D文字、3D文字、文字样式/ 可以将UI界面在PS 中制作好,导...

  • jquery实现点击鼠标左键页面出现文字效果

    title: jquery实现点击鼠标左键页面出现文字效果tags: [jquery,鼠标左键事件,文字效果] 近...

  • 3d复古风格文字效果ps样式

    3d复古风格文字效果ps样式包含10种不同3d复古文字效果ps样式,都是psd格式的,复古文字效果PS样式适用于多...

  • Photoshop样式 2个六角形金色闪光文字效果样式

    ps怎么做金色闪光文字效果呢?小编这里带来了2个六角形金色闪光文字效果样式,能轻松帮你做出六角形金色闪光文字效果,...

  • 12现代系列文字效果ps样式套装

    12现代系列文字效果ps样式内容介绍 12现代系列文字效果样式Vol.2,这是一款优质的Adobe Photosh...

  • 炫酷闪光文字效果Photoshop样式

    炫酷闪光文字效果Photoshop样式推荐给大家!炫酷闪光文字效果Photoshop样式适用于文字,形状和任何图层...

  • 现实中的现实

    一颗年轻的心

  • 现实中的现实

    如果哭可以解决问题, 我愿意放弃自尊, 蹲在大马路上撕心裂肺。 如果泪水可以解决问题, 我愿意毁掉容颜, 泪流成河...

网友评论

      本文标题:27、现实中的文字效果

      本文链接:https://www.haomeiwen.com/subject/xiplzttx.html