CSS实现立体字效果

最新推荐文章于 2024-05-03 14:55:36 发布

zetao1988

最新推荐文章于 2024-05-03 14:55:36 发布

阅读量2k

点赞数

文章标签： css xhtml class html

本文链接：https://blog.csdn.net/zetao1988/article/details/6552188

版权

不用滤镜，不用图片，用纯CSS实现立体字效果.

效果如下：

让我们先来看一下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{background:#999; font-size:9pt;} .front{ position:absolute; top:1px; left:0; color:#fff; }</style> </head> <body> <div style="color:#fff" mce_style="color:#fff">没有任何效果(参照)</div> <br /> <div style="position:relative" mce_style="position:relative"> <span class="front">立体字123font(文字阴影效果)</span> <span class="back">立体字123font(文字阴影效果)</span> </div> </body> </html>

原理很简单，两行相同文字，在垂直方向进行了一个像素的位移，利用高对比颜色产生逼真的阴影效果。

这项技术在苹果的官方网站上使用很广泛。

效果如下：

为了让顶部光源所产生的高光能够很好展示，要求文字背景是浅灰色，这样的效果最佳。

zetao1988

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现立体字效果

不用滤镜，不用图片，用纯CSS实现立体字效果.效果如下：让我们先来看一下代码：body{b
复制链接

扫一扫