|
如下圖所示，在網(wǎng)頁設計中，有時候會需要用到漸變效果，漸變可以創(chuàng)建出類似于彩虹的視覺圖案效果，在沒有CSS3之前，為了顯示一個漸變需要專門制作一個圖片，這種不法不但不靈活還增加請求數(shù)，而CSS3可以輕松實現(xiàn)網(wǎng)頁漸變效果，用于做漸變背景、漸變導航、配合CSS3動畫做特效等。 在CSS3中，Gradient（漸變）分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)。CSS顏色線性漸變的語法在各種瀏覽器里的實現(xiàn)稍微有些不同，但最后是統(tǒng)一標準的： CSS顏色線性漸變的語法background-image: linear-gradient(point> || angle>,]? stop>, stop> [, stop>]*)第一個參數(shù)是漸變起始點或角。第二個參數(shù)是一種顏色停止點(color stops)。 至少需要兩種顏色(起點和終點)，你可以添加任意種顏色來增加顏色漸變的豐富程度。對顏色停止點的定義可以是一種顏色，或一種顏色加一個百分比： /* color-stop(percentage/amount, color) */color-stop(0.20, red)因為CSS漸變色(Gradients)技術是CSS3里比較新的技術，屬于高級的CSS功能，于是每種瀏覽器對這種技術的實現(xiàn)都添加了一些自己的特色。例如以WebKIt為渲染引擎的谷歌瀏覽器，就對它實現(xiàn)了多種語法。下面的這段代碼基本包括了所有自頂向下顏色漸變的所有情況： #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)技術里還支持帶有角度的漸變方向，而不僅僅只有直上直下或直左直右。我們可以用下面的語法實現(xiàn)它： #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語法實現(xiàn)漸變色，而最新版的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)));//僅實現(xiàn)了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、用徑向漸變做一張優(yōu)惠券 主要的代碼如下： 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>優(yōu)惠券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的函數(shù)來生成，只需要提供開始顏色和停止顏色。如果是按鈕，則有專門的網(wǎng)站，可視化生成。 Less函數(shù) /* 線性漸變 */.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();}本文完~
|
|
|
來自： heii2 > 《網(wǎng)站制作》
