text-shadow文字阴影制作3D文字效果
2017-04-29 00:26

text-shadow文字阴影

text-shadow是用来给文字加阴影的,兼容性到达IE9浏览器,是css3的一个新样式。

text-shadow的语法如下:

text-shadow:h-shadow v-shadow blur color

h-shadow:横向的阴影,可以是负值,必填

v-shadow:纵向的阴影,可以是负值,必填

blur:阴影的模糊成都,选填

color:阴影的颜色,选填

我们用text-shadow来尝试一下它的效果:

.ts_0{
    font-size:42px;
    color:#8e44ad;
    font-weight:bold;
    text-shadow:-2px 2px  #1AC33E;
}

效果如下:

blob.png

我们没有使用h-shadow,v-shadow,color,没有使用blur值,h-shadow为负值时,横向阴影是在文字的左边,为正值时阴影在文字的右边。v-shadow为负值时阴影在文字的下方,为正值的时阴影在文字的上方。

.ts_0{
    font-size:42px;
    color:#8e44ad;
    font-weight:bold;
    text-shadow:-2px 2px 5px #1AC33E;
}

我们给text-shadow添加上blur数值后,效果如下:

blob.png

跟上面没有blur的text-shadow的效果要模糊一些。

text-shadow实现3D文字

上面我们了解了text-shadow的基本用法,下面我们用text-shadow来实现3D文字的效果。

.ts_0{
    font-size:42px;
    color:#8e44ad;
    font-weight:bold;
    text-shadow:-6px 6px  #1AC33E;
}

我们先加大text-shadow阴影效果的数值,效果如下:

blob.png

这个明显不是我们想要的3D文字效果,但是text-shadow跟box-shadow一样,是可以实现多个阴影的同时设置的。

.ts_0{
    font-size:42px;
    color:#8e44ad;
    font-weight:bold;
    text-shadow:-1px 1px #1AC33E,-2px 2px #1AC33E,-3px 3px #1AC33E,-4px 4px #1AC33E,-5px 5px #1AC33E,-6px 6px  #1AC33E;
}

我们用逗号分隔设置多个text-shadow的阴影,一个像素一个像素叠加的阴影,效果如下:

blob.png

这样基本是3D文字的效果了,然后我们再增强点立体感,给越靠后的阴影设置越深的颜色:

.ts_0{
    font-size:42px;
    color:#8e44ad;
    font-weight:bold;
    text-shadow:-1px 1px #1AC33E,-2px 2px #19B43A,-3px 3px #19A536,-4px 4px #189332,-5px 5px #16872E,-6px 6px  #147829;
}

blob.png

从调色板上逐次选择深一点的颜色设置逐步扩大的text-shadow阴影,最终效果如下:

blob.png

立体感效果比上面的纯色的3D效果好多了。

我们再来实现一个向右的3D文字效果:

.ts_1{
    font-size:42px;
    color:#1D78B7;
    font-weight:bold;
    text-shadow:1px 1px #FB1E1E,2px 2px #EF1E1E,3px 3px #E21B1B,4px 4px #D31C1C,5px 5px #C61B1B,6px 6px #B71919;
}
.ts_0{
    font-size:42px;
    color:#8e44ad;
    font-weight:bold;
    text-shadow:-1px 1px #1AC33E,-2px 2px #19B43A,-3px 3px #19A536,-4px 4px #189332,-5px 5px #16872E,-6px 6px  #147829;
}

效果如下:

blob.png

呐,文字的3D效果就是这样啦,使用text-shadow累加,并且逐步加深颜色。一个3D文字就这么呈现出来了。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2894)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1