移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域。
产品设计中使用渐变色的好处:
1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观众闭上眼睛还有残影,眼睛会极度疲劳)。2:优雅而低调的深浅色调:3:纯色单调 渐变色一是色彩不单调 二是在有限空间内尽可能制造空间感4:稍微加点渐变可以让纯色层显得更细腻,不那么单调。画面显得更丰富。代码如下,非常简单新的梯度渐变语法,新的语法包含四个渐变函数:
linear-gradient(): 线性梯度渐变 radial-gradient(): 径向梯度渐变 repeating-linear-gradient():重复梯度渐变 repeating-radial-gradient():色站
一:线性渐变 linear-gradient(): 线性梯度渐变
移动开发之css3实现背景渐变效果
二:radial-gradient径向渐变
代码
移动开发之css3实现背景渐变效果
三: repeating-linear-gradient():重复梯度渐变
移动开发之css3实现背景渐变效果
四:repeating-radial-gradient():色站
移动开发之css3实现背景渐变效果
/全兼容的移动端渐变写法/
/* Firefox 3.6+ */background: -moz-linear-gradient(top, #66b7f9,#1c82d4);/* Safari 4-5, Chrome 1-9 */background: -webkit-gradient(linear,top,from(#66b7f9),to(#1c82d4));/* Safari 5.1+, Chrome 10+ */background: -webkit-linear-gradient(top, #66b7f9, #1c82d4);/* Opera 11.10+ */background: -o-linear-gradient(top, #66b7f9, #1c82d4);/* default */background: linear-gradient(top, #66b7f9, #1c82d4);background-color: #1c82d4;
原文作者:祈澈姑娘
技术博客:90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
文末福利:关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源200G干货大全。公众号回复“1”,拉你进程序员技术讨论群