CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(5)使用放射渐变制作光影效果
来源:互联网 发布:蛆娘黑历史 知乎 编辑:程序博客网 时间:2024/06/05 04:42
阴影效果通常用来表现光线投射在物体上的感觉,如果想制作一个如图5.19所示的文字光影效果,就可以使用背景的线性渐变进行构建。
图5.19可以看到有类似光束照射文字的效果,很好地突出了文字。这实现起来很简单,只需要对文字居中,对背景元素设置从中心发散的放射渐变即可,代码如下:
// HTML代码<div class="box">赞</div> // CSS代码:.box{ width: 200px; height: 200px; font-size: 80px; line-height: 200px; text-align: center; background: -webkit-radial-gradient(#feb3ad, #fd695d); background: -o-radial-gradient(#feb3ad, #fd695d);background: -moz-radial-gradient(#feb3ad, #fd695d);background: radial-gradient(#feb3ad, #fd695d);}
这样,一个最基本的光影背景效果就完成了,可以通过调节颜色来设置光影的亮度,越接近白色越亮。通过调整中心色彩占据的百分比来调节光晕效果的范围,如图5.20所示。
图5.20 调节光晕效果
相比图片来说,开发者可以通过直接调整CSS代码中的参数获得效果的改变,灵活性和开发速度都大大提高了。
有学习的一起交流
0 0
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(5)使用放射渐变制作光影效果
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(3)线性渐变
- CSS高效开发实战-CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(3)线性渐变
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图
- CSS高效开发实战-CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图
- CSS高效开发实战-CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(2)实现多背景
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(4)构造尺寸更灵活的背景
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(2)CSS3利用图层叠加实现多背景
- 使用放射渐变制作光影效果
- 只会CSS还不够,LESS、SASS、BootStrap、Foundation一网打尽!
- 只会CSS还不够,LESS、SASS、BootStrap、Foundation一网打尽!
- 只会CSS还不够,LESS、SASS、BootStrap、Foundation一网打尽!
- 只会CSS还不够,LESS、SASS、BootStrap、Foundation一网打尽!
- 只会CSS还不够,LESS、SASS、BootStrap、Foundation一网打尽!
- 使用less开发css
- CSS预编译工具(SASS,LESS)
- less sass与css区别.
- CSS预处理器 Less & Sass
- 用户登录续
- solr调优参考
- 利用TextArea 定义不同的显示颜色或者显示格式
- N!的素因子分解
- ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(5)使用放射渐变制作光影效果
- 设置android:supportsRtl="true"无效问题
- C++11:类型推导auto
- java实体类实现序列化的意义
- 特种浓缩分离:弧形阳极电泳工艺流程
- Android Java 开发工具集合
- 动态规划:从新手到专家
- nyoj78圈水池(凸包问题)
- LeetCode Maximum Gap