今天出去吃飯,飯后搞活動送了個小禮品。禮品本身不值一提,重要的的是漸變。本篇就介紹并實際做一下這個漸變效果。
線性漸變
W3C標準語法:linear-gradient(angle, color… color);
。第一個參數指明漸變方向,0deg表示漸變從下往上,90deg表示漸變從左往右,180deg表示漸變從上往下,270deg表示漸變從右往左。其實就是順時針走一圈。你也可以用to + 關鍵字,例如to top等于0deg,to right等于90deg,to bottom等于180deg,to left等于270deg。第二參數是起始顏色,中間可以指定多個顏色,依次漸變,最后一個參數是終止顏色。權威請參照W3C
先看簡單的,就2個顏色,從白到黑漸變。圖1代碼linear-gradient(0deg, #fff, #000);
或linear-gradient(to top, #fff, #000);
,代碼根據表題依次類推,一圖勝千言
新版瀏覽器用W3C的標準語法沒問題,但低版本可能尚不支持W3C的標準語法,此時你需要使用各瀏覽器私有的語法。當然如果你的頁面不準備繼續支持這些低版本的瀏覽器的話,此段可以略過。
Webkit引擎(Chrome和Safari),Genko引擎(Firefox),Presto引擎(Opera),Trident引擎(IE)的私有語法和和W3C的標準語法非常像。區別如下:
- 需要加上前綴,分別是-webkit-,-moz-,-ms-
- -webkit-,-ms-的第一個參數的關鍵字表示起始位置,因此不需要加to。例如-webkit-linear-gradient(top, #fff, #000);等價于W3C標準語法的linear-gradient(to bottom, #fff, #000);
- -moz-的第一個參數的關鍵字可以可不加to。不加to表示起始位置,加to表示終止位置。例如-moz-linear-gradient(top, #fff, #000);等價于-moz-linear-gradient(to bottom, #fff, #000);
- IE10以下是不支持漸變的…因此沒有私有語法
- Opera從37開始支持,試了下并沒有私有語法,加上-o-前綴反而不認…
另外Webkit引擎(Chrome和Safari)的舊版本還支持一種更舊的私有語法,即舊版本的Webkit引擎的瀏覽器有兩種私有語法。舊語法:-webkit-gradient(type, point, point, color, color)
。第一個參數type指明linear線性漸變或radial徑向漸變。第二三參數分別是漸變的起點坐標和終點坐標。第四五參數是color-stop函數來表示起始和終止顏色。color-stop()支持兩個參數,第一個是點的位置,第二個是顏色,例如color-stop(0.5, #fff)
表示在漸變范圍的中心處有個黑色的過渡色。具體你可以參照這里
為縮減篇幅,下面仍以介紹W3C標準語法為主。
上面的例子是2個顏色漸變,現在試試指定多個顏色間依次漸變。例如linear-gradient(to bottom, yellow, #9C117A, #EF137A, #f00);
linear-gradient(to bottom, yellow 0%, #9C117A 20%, #EF137A 80%, #f00 100%);
。第一個顏色漸變范圍0-20%,第二個顏色漸變范圍20-80%,第三個顏色漸變范圍80-100%,第四個顏色漸變范圍100-100%漸變,等于第四個顏色沒有漸變
不在位置范圍內的顏色表示不漸變,會填充為實色。例如:
background-image:linear-gradient(to bottom, #fb3 20%, #58a 80%);
漸變區域只集中在中間20-80%區域。上部20%是#fb3的實色,下部20%是#58a的實色。即上下各20%的區域都是實色,不漸變。因此如果你將兩個顏色的位置值均設為50%,就出現了完全沒有漸變效果,全部實色的背景:
background-image:linear-gradient(to bottom, #fb3 50%, #58a 50%);
另外,標準規定:如果顏色的位置值比在它之前的所有顏色的位置值都小,那該顏色的位置值會被調整為它前面所有顏色位置值的最大值。因此上面代碼可以把第二個色標位置值設為0:
background-image:linear-gradient(to bottom, #fb3 50%, #58a 50%);
//等價于
background-image:linear-gradient(to bottom, #fb3 50%, #58a 0);
用實色這個特點很容易實現常見的條紋狀的背景效果:
background-image: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
上面#fb3 25%
表示從0-25%區域是實色。#58a 0, #58a 50%
等價于#58a 25%, #58a 50%
,表示從25-50%區域從#58a漸變至#58a,等于實色。#fb3 0, #fb3 75%
等價于#fb3 50%, #fb3 75%
,表示從50-75%區域為從#fb3漸變至#fb3,等于實色。最后#58a 0
等價于#58a 75%
,表示從75%開始全都是實色。
你也可以發揮想象力,將實色這個特點還可用于遮蔽,達到切角效果。這樣就避免了多個標簽,通過層疊覆蓋來實現切角。用漸變簡單方便。
.clip {
background: #58a;
background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
linear-gradient(-135deg, transparent 15px, #58a 0) top right,
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: .5em .6em;
color: white;
font: 50px/64px "微軟雅黑";
}
<span class="clip">禮</span>
你也可以將上面線性漸變改成下面介紹的徑向漸變來實現弧形切角。
徑向漸變
線性漸變是沿著一條直線漸變,而徑向漸變是圓形或橢圓形漸變。相比之下稍微復雜一點。
W3C標準語法:radial-gradient(position, shape, size, color-stop);
第一個參數size at position。size指定水平半徑和垂直半徑。position指明圓心位置,默認值center表示元素中心為漸變的圓心。同樣可以指定為top,right,bottom,left,也可以自定義px值或%百分比,對應關系如下。
20px 50px at center
,表示以元素中心點為圓心,20px為水平半徑,50px為垂直半徑的橢圓型漸變。具體效果見下圖的第一,二行。
第二個參數size shape。shape可設circle,ellipse。看名字就知道了,前者表示圓形漸變,后者表示橢圓形漸變。
如果shape設成circle,那size的px值就是圓形半徑,但不能用%百分比。例如40px circle
表示半徑為40px的圓型漸變。
如果shape設成ellipse,那size的值分別為橢圓的水平半徑和垂直半徑。可以用%百分比。例如30% 80% ellipse表示水平半徑30%(相對于元素的寬),垂直半徑80%(相對于元素的高)的橢圓型漸變。具體效果見下圖的第三行。
前兩個參數可以合并成size shape at position。例如100px 60px ellipse at right
表示圓心在右中位置,水平半徑100px,垂直半徑60px的橢圓漸變。效果見下圖第9單元格。
上面的size除了設px值或%百分比外,還有預定義好的關鍵字closest-side
,closest-corner
,farthest-side
,farthest-corner
(默認值)。看名字也能猜出意思,例如默認值farthest-corner表示漸變半徑為從圓心到離圓心最遠的角落。效果見下圖第4行各單元格。
第四個參數color-stop()函數,在線性漸變里有介紹,不贅述。
效果圖如下,表行就是radial-gradient的參數:
多色漸變
上面的漸變都只設了兩個顏色,一個起始一個終止。其實可以設多個顏色達到多色漸變的效果。例如,左圖線性漸變模擬日出效果,右圖徑向漸變模擬太陽。純CSS實現,毫無PS痕跡。
//左圖日出
background-image: linear-gradient(to bottom, #071B26 0%, #071B26 30%, #8A3B12 80%, #240E03 100%);
//右圖太陽
background-image: radial-gradient(circle,red,orange,#071B26);
重復漸變
CSS3之前想要對background-image實現重復漸變需要配合background-repeat,但也僅限于重復線性漸變,無法重復徑向漸變。CSS3提供了repeating-linear-gradient
和repeating-radial-gradient
便捷地實現重復漸變。例如
//重復線性漸變
background-image: repeating-linear-gradient(red,green 40px, orange 80px);
//重復徑向漸變
background-image: repeating-radial-gradient(black 10px,black 20px,#2a2a2a 30px,#2a2a2a 40px);
上面介紹過條紋背景的實現,但現實中的條紋背景,25%的顆粒度實在太大,比如我們想實現每個條紋的寬度為15px,用重復漸變就可以輕松實現:
background-image: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
但通常條紋狀背景色可能色差不是那么大,而且如果瀏覽器不支持repeating-linear-gradient就顯示不出背景了。因此一種安全的重復漸變方案是,主色調作為背景,而輔助條紋用漸變:
background: #58a;
background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
順著這個思路可以實現信封效果:(關于background兩層背景的思路,可以參照這里)
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%,
#58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;
還有常見的剪裁的效果:
border: 1px solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;
animation: ants 12s linear infinite; //增加動畫效果
@keyframes ants {
from { background-position: 0 0; }
to { background-position: 100% 100%; }
}
增加動畫效果后虛線的邊框會不停滑動(關于animation你可以點擊這里),單純將border設成dashed是無法實現滑動效果的。
兼容性
目前gradient在眾多瀏覽器上表現不錯,但有些低端瀏覽器上會出現一些兼容性的問題。我的建議是放棄它們吧,低端瀏覽器活不過今年。況且漸變畢竟屬于漸進增強,即使沒有漸變效果也不影響用戶的實際使用。
但有時人在江湖身不由己,想象一下和河馬們或客戶們解釋瀏覽器的占有率,解釋漸進增強是件多么累人的事吧。況且你心里很清楚,懂的人不需要解釋,不懂的人解釋了也沒用。所以你可以考慮以下方案模擬出gradient效果:
- 最簡單的方式就是直接PS出一張圖片,雖然多了一次HTTP請求,但你不說誰知道呢_
- 使用腳本,例如PIE腳本等。但會通過JS對HTML結構進行調整,尤其涉及定位時,bug調試起來真的比較麻煩。
- 對低端IE使用濾鏡
總結
不忘初心方得始終,來模擬實先一下小禮品的圖標(色彩可能做不到完全一致):
.priv_icon_coupon {
width: 70px;
height: 70px;
border-radius: 0.3em;
border:3px solid #fff;
background-image: linear-gradient(to bottom, #EF137A, #9C117A);
font: 50px/64px "微軟雅黑";
color: #fff;
text-align: center;
text-shadow: 0 1px rgba(0,0,0,.5);
}
<span class="priv_icon_coupon">禮</span>
網上也有很多牛人做的漸變效果,如Lea Verou