1. <nav id="9tq2v"><big id="9tq2v"><video id="9tq2v"></video></big></nav>
        1. <label id="9tq2v"></label>
          设为首页 - 加入收藏 镇江站长网 (http://www.uswotlk.com)- 中小站长必上的网站 - 聚焦镇江站长前沿资讯!
          热搜: 手机 优酷 中国 创业者
          当前位置: 主页 > 综合聚焦 > 创业热点 > 经验 > 正文

          纯CSS3文字渐变内发光投影效果

          发布时间:2018-10-07 02:36 所属栏目:[经验] 来源:站长网
          导读:今天群上面同志们在讨论css3内发光效果,自己也就研究一下,写了个效果出来,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考。发个效果图大家看先: 一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box

          今天群上面同志们在讨论css3内发光效果,自己也就研究一下,写了个效果出来,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考。发个效果图大家看先:

          纯CSS3文字 <wbr>渐变内发光投影效果

          一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box-shadow设置方型盒子投影,用raidus的话可以让盒子产生圆角,看起来就很圆滑舒服,一般的写法是这样的:

           

           

          1px(水平方向偏移) 1px(垂直方向偏移) 5px(阴影羽化) #000(颜色);

          当偏移量为负数时就向反方向偏移,试试就明白了,这里不贴图。

          这个是一般的投影效果,如果是内阴影,那么就加个“inset”属性,写法如下:

           

           

          这样就变成了PS里面的内阴影,效果很赞,很实用,如果需要内发光效果,则背景底色深,投影颜色浅,这样就会感觉是发光,而背景颜色深,投影颜色浅,这样看起来就是投影了;

          不过群里面讨论的是文字的投影内发光,上面的是顺便提提而已,下面才是正题:

          文字是用text-shadow来产生阴影,而且产生的时候能跟随文字的轮廓投影,如下所示:

          纯CSS3文字 <wbr>渐变内发光投影效果

          如果用box-shadow的话效果是这样的:

          纯CSS3文字 <wbr>渐变内发光投影效果

           

          会根据放文字容器的盒子来投影(我设定了容器的宽度200px,背景未设定颜色透明),不会跟随文字轮廓投影,效果不是我们所要的;

          然而text-shadow没有inset属性,这个就比较棘手了,怎么才能实现文字内投影,同时还有文字渐变?

          一层一层来,一般ps处理文字效果都是一层层的剥离,先从文字内发光入手:

          我写了这么一个页面试内发光,代码如下:


          提示:可修改后代码再运行!

          效果图如下:

          纯CSS3文字 <wbr>渐变内发光投影效果

          【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

          网友评论
          推荐文章
          金亚洲游戏