宝安公司网站设计：所有你需要知道的关于CSS3文本阴影效果

2019.08.09 宝安公司网站设计

110

CSS3,一大堆的文本阴影效果可供我们去玩。 在本文中,我们将讨论一些影响你可以用相对较少的CSS代码。

CSS3文本阴影可以应用到页面上的任何文本。 文字阴影的语法如下:

text-shadow:xPosition yPosition blurSize color;

地点:

· xPosition 是文本阴影的水平位置相对于文本。

· yPosition 是文本的垂直位置相对于文本的影子。

· blurSize 阴影模糊的大小。

· 颜色 颜色值-十六进制,rgb, rgba,高速逻辑,hsla或命名的颜色。

假设我们宝安公司网站设计有一段与类“myText”在我们的HTML,我们可以应用与下面的CSS文本的影子:

p.myText { text-shadow:1px 1px 2px #f00; }

这里我们要求浏览器创建一个文本阴影1像素的右下角的文本,2像素的模糊和红色的颜色(十六进制值# ff0000,可以卖空# f00)。 这是完成后的效果:

 

也许红色不是最好的颜色。 这是一个灰色的版本:

p.myText { text-shadow:2px 2px 2px #aaa; }

 

在这里,我们宝安公司网站设计已经创建了一个更好的恭维字体的文本阴影效果。

排版狂热分子,值得注意的是,在一些浏览器中使用文本阴影实际上稀释你的字体非常小,因为它会引发不同的反走样方法。 在下面的示例中,顶部的文本呈现文本的影子,而文本有一个白色文本阴影和底部出现稍薄。

 

那么哪些浏览器支持文本阴影呢? 好消息! 不少!

 

不幸的是,Internet Explorer不支持文本阴影直到10版本。 的浏览器不支持文本的影子,文本仍将出现但影子会失踪。

10个其他影响使用CSS3文本的影子

使用CSS3文本阴影,您可以创建许多不同的影响。 让我们看看一些:

左上角的影子

使用负值xPosition和yPosition我们可以移动文本阴影左上角。

 

p.myText { text-shadow:-2px -2px 2px #aaa; }

影子只

通过设置字体颜色一样的背景,我们只可以创建一个阴影效果。

 

p.myText { color:#fff; text-shadow:2px 2px 2px #000; }

模糊的影子

xPosition和yPosition 0一起的一个大模糊创造这种效果。

 

p.myText { color:#fff; text-shadow:0 0 5px #000; }

模糊的文本

设置字体颜色透明创造这种效果使得文本看起来模糊。

 

p.myText { color:transparent; text-shadow:0 0 5px #000; }

没有模糊的影子

设置0给了我们另一个模糊的效果。

 

p.myText { text-shadow:2px 2px 0 #aaa; }

多个没有模糊的影子

通过使用一个逗号,我们可以指定多个文本阴影。 我们已经创建了第一个文本阴影与相同的颜色背景给semi-3D效应。

 

p.myText { text-shadow:1px 1px 0 #fff, 2px 2px 0 #000; }

遥远的影子

你的影子可以尽可能接近或远离你的文本。 看守元素的CSS溢出属性如果你设置它太远,因为他们可能把影子。

 

p.myText { text-shadow:30px 10px 0 #aaa; }

彩虹的影子

您可以使用尽可能多的阴影。 我已经创建了一个可爱的彩虹效果。

 

p.myText { color:#000; text-shadow:1px 1px 0 red, 2px 2px 0 orange, 3px 3px 0 yellow, 4px 4px 0 green, 5px 5px 0 blue, 6px 6px 0 indigo, 7px 7px 0 violet; }

轮廓阴影

通过创建4阴影周围的文本,我们可以创建一个轮廓的效果。

 

p.myText { color:#fff; text-shadow:-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,1px 1px 0 #000; }

看透的影子

通过使用rgba或hsla字体颜色,我们可以看到一个alpha透明度值我们可以透过文本,看看下面的阴影。

 

p.myText { color:rgba(0,0,0,0.5); text-shadow:3px 3px 0 #aaa; }

RGBA CSS3的新特性,允许您设置一个alpha透明度RGB颜色值。 值alpha透明度的范围可以从0到1。 α值0将完全透明的颜色,而值将确保没有透明度。 0.5和0.8适合大多数效果。

奥软和HSLA也新颜色格式CSS3和允许我们定义基于色调颜色,饱和度和明度。 色调以红色(0)的价值,在120年,与绿色蓝色240,回到红在360。 饱和度和明度百分比,100%提供最饱和/轻的价值。

现场演示

如果你想知道更多关于每个文本阴影效果所示,我上传的代码 JSFiddle 。

即将到来的

宝安公司网站设计在后面的文章中,我们将探索@font-face以及它如何允许您使用自定义字体作为web文本。 在那之前,使用这些文本阴影玩得开心!

 


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监
TOP