首页/新闻资讯

在线咨询

15918836078 网站设计、网站建设咨询

12个有趣的CSS文本阴影效果,附上css代码!

发布时间:2019-01-12 2847 次浏览

排版是网页设计中每个人最喜欢的地方。CSS给你的一个特别有趣的代码是text-shadow,它一开始看起来很简单,但是可以用它来创建一些有创意的效果。

今天我们将提供几个文本阴影示例,您可以直接进行复制和粘贴使用。基本阴影文本阴影属性非常容易使用,并且在所有现代浏览器中都能很好地工作,甚至不需要任何浏览器识别前缀!

然而,如果您使用像Modernizr这样的工具可以帮助您在较旧的浏览器中实现高级的CSS3效果。语法下面显示了创建简单文本阴影的语法。你有四个变量要处理,前两个设置你的阴影的位置,第三个设置模糊的数量,第四个设置阴影的颜色。

text-shadow: horizontal-offset vertical-offset blur color;

将其付诸实践,这里有一个例子,阴影向下移动了两个像素,向右移动了四个像素,其中三个像素是模糊的,颜色为黑色,不透明度为30%。

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

这是这段代码的结果,一个漂亮的简单的阴影本身就非常吸引人。screenshot

为什么使用rgba 作为阴影代码?
作为一个快速提示,你不需要使用rgba为你的阴影的颜色,但可以利用任何CSS颜色方法。然而,我发现rgba是理想的颜色设置的阴影,因为它添加了另一个维度的工作。不仅可以设置阴影的位置、模糊和颜色,还可以使用alpha值设置阴影的不透明度。

这实际上比使用其他颜色方法更容易,因为您可能需要为可能稍微深一点或浅一点的背景颜色寻找合适的重音。使用rgba,你可以只使用黑色或白色和减少透明度,以混合它的背景。文本阴影的好处是,你可以用它做的事情比普通的投影要多得多。

例如,这里有一个创建插入文本错觉的快速技巧。首先要做的是将文本颜色设置为比背景颜色稍微暗一点的颜色。接下来,应用一个轻微的白色文本阴影,降低不透明度。如您所见,我使用了#222的背景色,然后将文本设置为黑色,透明度为60%。最后,我的白色阴影的位置稍微向下和向右与10%的不透明度。
1547223778879878.jpg

body {    background: #222;} #text h1 {    color: rgba(0,0,0,0.6);    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);}




screenshot

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);


screenshot

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);


screenshot

text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),                 
0px 34px 30px rgba(0,0,0,0.1);


screenshot

text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);

screenshot

text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);


screenshot

background-color: #666666;    -webkit-background-clip: text;    -moz-background-clip: text;    background-clip: text;    color: transparent;    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;


screenshot

text-shadow: 0px 0px 6px rgba(255,255,255,0.7);


screenshot

text-shadow:-10px 10px 0 #00e6e6,-20px 20px 0 #01cccc,-30px 30px 0 #00bdbd;


screenshot

text-shadow:0 15px 5px rgba(0,0,0,.1),10px 20px 5px rgba(0,0,0,.05),-10px 20px 5px rgba(0,0,0,.05);

screenshot

color:rgba(0,0,0,.6);text-shadow:2px 8px 6px rgba(0,0,0,.2),0 -5px 35px hsla(0,0%,100%,.3);


文章标签: