|
如下图所示，在网页设计中，有时候会需要用到渐变效果，渐变可以创建出类似于彩虹的视觉图案效果，在没有CSS3之前，为了显示一个渐变需要专门制作一个图片，这种不法不但不灵活还增加请求数，而CSS3可以轻松实现网页渐变效果，用于做渐变背景、渐变导航、配合CSS3动画做特效等。 在CSS3中，Gradient（渐变）分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同，但最后是统一标准的： CSS颜色线性渐变的语法background-image: linear-gradient(point> || angle>,]? stop>, stop> [, stop>]*)第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。 至少需要两种颜色(起点和终点)，你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色，或一种颜色加一个百分比： /* color-stop(percentage/amount, color) */color-stop(0.20, red)因为CSS渐变色(Gradients)技术是CSS3里比较新的技术，属于高级的CSS功能，于是每种浏览器对这种技术的实现都添加了一些自己的特色。例如以WebKIt为渲染引擎的谷歌浏览器，就对它实现了多种语法。下面的这段代码基本包括了所有自顶向下颜色渐变的所有情况： #example1 { /* 底色 */ background-color: #063053; /* chrome 2+, safari 4+; multiple color stops */ background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99)); /* chrome 10+, safari 5.1+ */ background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99); /* firefox; multiple color stops */ background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99); /* ie 6+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873'); /* ie8 + */ -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')'; /* ie10 */ background-image: -ms-linear-gradient(#063053, #395873, #5c7c99); /* opera 11.1 */ background-image: -o-linear-gradient(#063053, #395873, #5c7c99); /* 标准写法 */ background-image: linear-gradient(#063053, #395873, #5c7c99);注意，我们首先设定了一个背景色。这个颜色是在万一用户使用的浏览器不支持CSS渐变色(Gradients)技术时使用的颜色。CSS渐变色(Gradients)技术里还支持带有角度的渐变方向，而不仅仅只有直上直下或直左直右。我们可以用下面的语法实现它： #example2 { /* fallback */ background-color:#063053; /* chrome 2+, safari 4+; multiple color stops */ background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99)); /* chrome 10+, safari 5.1+ */ background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99); /* firefox; multiple color stops */ background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99); /* ie10 */ background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%); /* opera 11.1 */ background-image: -o-linear-gradient(45deg, #063053, #395873); /* The 'standard' */ background-image: linear-gradient(45deg, #063053, #395873);}我们可以做的更复杂些….一个色彩缤纷的CSS颜色渐变？下面我们来做一个彩虹： /* example 3 - linear rainbow */#example3 { /* fallback */ background-color:#063053; /* chrome 2+, safari 4+; multiple color stops */ background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange)); /* chrome 10+, safari 5.1+ */ background-image:-webkit-linear-gradient(red, green, blue, purple, orange); /* firefox; multiple color stops */ background-image:-moz-linear-gradient(top, red, green, blue, purple, orange); /* ie10 */ background-image: -ms-linear-gradient(red, green, blue, purple, orange); /* opera 11.1 */ background-image: -o-linear-gradient(red, green, blue, purple, orange); /* The 'standard' */ background-image: linear-gradient(red, green, blue, purple, orange);}关于IE对CSS颜色渐变技术的支持做一些说明：在早期IE是使用filter和-ms-filter语法实现渐变色，而最新版的IE里改为了-ms-linear-gradient语法。我们可以使用CSS里条件判断语句来解决这个问题： 线性渐变的语法对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);} 径向渐变的语法对象选择器 {background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色);} 渐变的兼容方法1、线性渐变 (2)Safari , Chrome (3)Opera 11.10+ 兼容IE 2、径向渐变 渐变应用实例1、径向渐变做大背景 background-color: #4B770A;background-image: -webkit-gradient(radial, 50% 400, 1, 50% 400, 400, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0)));//仅实现了webkit下的效果2、蒙版效果 position: fixed; width: 100%; height: 60px; bottom: 0px; content: ''; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.33) 33%, rgba(255, 255, 255, 0.73) 66%, rgba(255, 255, 255, 1) 91%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 0)), color-stop(33%,rgba(255, 255, 255, 0.33)), color-stop(66%,rgba(255, 255, 255, 0.73)), color-stop(91%,rgba(255, 255, 255, 1))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.33) 33%,rgba(255, 255, 255, 0.73) 66%,rgba(255, 255, 255, 1) 91%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.33) 33%,rgba(255, 255, 255, 0.73) 66%,rgba(255, 255, 255, 1) 91%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.33) 33%,rgba(255, 255, 255, 0.73) 66%,rgba(255, 255, 255, 1) 91%); background: linear-gradient(top, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.73) 33%,rgba(255, 255, 255, 0.73) 66%,rgba(255, 255, 255, 1) 91%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );3、渐变按钮 .myButton { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%); background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%); background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%); background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%); background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0); background-color:#ededed; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; cursor:pointer; color:#777777; font-family:arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:0px 1px 0px #ffffff; margin-top: 100px;}.myButton:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed)); background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%); background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%); background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%); background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%); background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0); background-color:#dfdfdf;}.myButton:active { position:relative; top:1px;}4、用径向渐变做一张优惠券 主要的代码如下： background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px);background-size: 15px 15px;background-position: 9px 3px;完整代码： CSS代码 这是公共样式：.stamp {width: 387px;height: 140px;padding: 0 10px;position: relative;overflow: hidden;}.stamp:before {content: '';position: absolute;top:0;bottom:0;left:10px;right:10px;z-index: -1;}.stamp:after {content: '';position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);z-index: -2;}.stamp i{position: absolute;left: 20%;top: 45px;height: 190px;width: 390px;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);}.stamp .par{float: left;padding: 16px 15px;width: 220px;border-right:2px dashed rgba(255,255,255,.3);text-align: left;}.stamp .par p{color:#fff;}.stamp .par span{font-size: 50px;color:#fff;margin-right: 5px;}.stamp .par .sign{font-size: 34px;}.stamp .par sub{position: relative;top:-5px;color:rgba(255,255,255,.8);}.stamp .copy{display: inline-block;padding:21px 14px;width:100px;vertical-align: text-bottom;font-size: 30px;color:rgb(255,255,255);}.stamp .copy p{font-size: 16px;margin-top: 15px;}.stamp01{background: #F39B00;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);background-size: 15px 15px;background-position: 9px 3px;}.stamp01:before{background-color:#F39B00;}.stamp02{background: #D24161;background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);background-size: 15px 15px;background-position: 9px 3px;}.stamp02:before{background-color:#D24161;}.stamp03{background: #7EAB1E;background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);background-size: 15px 15px;background-position: 9px 3px;}.stamp03:before{background-color:#7EAB1E;}.stamp03 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}.stamp03 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}.stamp03 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}.stamp04{width: 390px;background: #50ADD3;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD3 4px);background-size: 12px 8px;background-position: -5px 10px;}.stamp04:before{background-color:#50ADD3;left: 5px;right: 5px;}.stamp04 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}.stamp04 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}.stamp04 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}HTML代码 div class='stamp stamp01'>div class='par'>p>XXXXXX折扣店p>div class='stamp stamp02'>div class='stamp stamp03'>div class='stamp stamp04'>div class='par'>p>XXXXXX折扣店p>sub class='sign'>￥sub>span>50.00span>sub>优惠券sub>p>订单满100.00元p>div>div class='copy'>副券p>2015-08-13br>2016-08-13p>a href='#'>立即使用a>div>i>i>div>PS：用这个方式还可以做邮票，不信你试试 相信你看到这，一定觉得，这么长串的代码，我怎么写出来，看着都晕。如果是简单的渐变，可以用less的函数来生成，只需要提供开始颜色和停止颜色。如果是按钮，则有专门的网站，可视化生成。 Less函数 /* 线性渐变 */.gradient (@origin: top, @start: #ffffff, @stop: #000000) { background-color: @start; background-image: -webkit-linear-gradient(@origin, @start, @stop); background-image: -moz-linear-gradient(@origin, @start, @stop); background-image: -o-linear-gradient(@origin, @start, @stop); background-image: -ms-linear-gradient(@origin, @start, @stop); background-image: linear-gradient(@origin, @start, @stop);}/* 快速渐变 */.quick-gradient (@origin: left, @alpha: 0.2) { background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));}用法： //html代码div class='div1'>div>div class='div2'>div> //css代码div{ width: 200px; height: 80px; margin: 10px;}.div1{ .gradient(top, #00B7EA, #0391B3);}.div2{ .quick-gradient();}本文完~
|
|
|
