【css3筆記】---- 漸變的祕密

《CSS揭祕》這本書很是不錯，充滿了乾貨和驚喜。如下主要是關於使用漸變作出來的一些效果的筆記。請用最新的現代瀏覽器觀看。

首先要回顧下一個css語句： 

linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

這是一個線性漸變，第一參數是漸變方向，是可選的。能夠是角度，angle的值是度數，好比45deg，90deg。也能夠使用to side-or-corner .好比 to left（從右到左） ,to bottom(從上到下)；第二個和第三個參數都是漸變顏色。因此最簡單的寫法能夠有：

background: linear-gradient(aquamarine,orange)

默認是從上往下漸變。但若是咱們不想要漸變，就要顏色條。訣竅就是兩種顏色之間不要留空隙，由於留了空隙就會出現漸變的過渡效果。因此咱們能夠設置各佔50%。這個50%表明顏色位置。也能夠是長度單位。

background: linear-gradient(aquamarine 50%,orange 50%)

 

 若是咱們須要多種顏色呢，好比一個藍白紅。

 background: linear-gradient(90deg,aqua 0 ,aqua 33%,white 0 ,white 67%,crimson 0 ,crimson )

注意到三個0和最後的crimon顏色沒有色標。第一個aqua 0 ,aqua 33% 表示aqua佔了33%，而第二個白色倒是 white 0 ,white 67%，看上去是佔了67%，實際上是從33%開始的。

若是某個色標的位置比它以前的位置都要小，則色標的位置會被設置爲前面因此色標位置的最大值。

因此第二個0表明的是33%，第三個0表明的是67%。你能夠將0改爲小於這兩個值的值，效果是同樣的。而最後一個顏色，不用色標也會自動填充。因此若是咱們只想畫個線條，漸變顏色能夠使用透明色：

 linear-gradient(white 2px, transparent 0)

但若是咱們要實現重複效果，還須要background-size的配合。background-size默認是 100% 100%。但若是定義了大小，等因而把整個面積分割成重複的小塊。

網格1：

 .grid {
            width: 225px;
            height: 225px;
            background: #58a;
            background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg,white 2px,transparent 0);
            background-size: 75px 75px, 75px, 75px;
        }

第一個漸變是將225px 橫着分紅了三等分。而後第二個漸變，垂直分紅了三等分。這是肉眼看到的效果，實際上是9個75px*75px的方塊拼出來的結果。

網格2：

background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg,white 2px,transparent 0),linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,transparent 0);
background-size: 75px 75px, 75px 75px,15px 15px,15px 15px;

那這個網格實現就簡單了。再疊加漸變，每一個75再分紅5個15。這效果看着像瓷磚。

棋盤

可是如何畫出一個棋盤呢？注意線條不是連貫的哦。如上圖，根據上面background-size的思路，咱們知道這樣的棋盤是有多個這樣的正方形組成的。

而這兩個正方形，又是由四個三角形組成的。線性漸變的一個特色就是會在background-size的區域裏，一條線上只有一種顏色。

background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%,#bbb 0),linear-gradient(45deg, #ffbb33 25%, transparent 0),linear-gradient(45deg, transparent 75%,#ffbb33 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px,15px 15px, 30px 30px;

注意到還使用了一組background-position，第一個#bbb色是佔了45度方向的25%，而第二個#bbb色是佔45度方向最後的25%。若是把第二個三角形換成紅色，而後位置從0,0開始就一目瞭然了。

 background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%,red 0);
 background-size: 30px 30px;
 background-position: 0 0, 0px 0px,15px 15px, 30px 30px;

將紅色三角形位置改成15px,15px 就湊成了一個正方形。同理再疊加出一個正方形就獲得了棋盤的格式。同理，咱們能夠拼湊一個歇着的格子。

讓三角形每次轉90度，且沒必要移動位置。

background-image: linear-gradient(45deg, red 0, red 25%,transparent 0), linear-gradient(135deg, orange 0, orange 25%,transparent 0),linear-gradient(225deg, yellow 0, yellow 25%,transparent 0),linear-gradient(315deg, green 0, green 25%,transparent 0)

 

斜網格

有了上面的積累，畫一個斜格子就簡單了：

 background-image: linear-gradient(45deg,transparent 49% ,black 0,black 51% ,transparent 0), linear-gradient(135deg,transparent 49% ,black 0,black 51% ,transparent 0);
 background-size: 30px 30px;

至關因而每一個單元就漸變了兩條斜線。

斜格子

一直去拼這種單元可能讓你有點煩，因而出來了repeating-linear-gradient。

background: repeating-linear-gradient( 45deg, transparent, transparent 1em, moccasin 0, moccasin 2em, transparent 0, transparent 3em, powderblue 0, powderblue 4em, transparent 0, transparent 5em, lavender 0, lavender 6em, transparent 0, transparent 7em, beige 0, beige 8em), repeating-linear-gradient( -45deg, transparent, transparent 1em, khaki 0, khaki 2em, transparent 0, transparent 3em, beige 0, beige 4em, transparent 0, transparent 5em, peachpuff 0, peachpuff 6em );

注意到顏色都是成對出現。這樣纔會出現咱們的色條。注意這裏使用了background-blend-mode: multiply; 混合模式。否則效果沒有這麼好看。

圓點:

思路和上面同樣，使用徑向漸變疊加和錯位

 background-image:radial-gradient(#fff 5px,transparent 0),radial-gradient(#fff 10px, transparent 0);
 background-size: 40px;
 background-position: 0 0, 20px 20px;

沙發

沙發這個效果比較複雜，使用了徑向漸變製做圓點和陰影，線性漸變勾勒出線條。

 background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
                radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
                radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
                radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
                radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
                radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
                radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
                radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
　　　　　　　　  linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
                linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0
                ;
background-color: #300; 
background-size: 100px 100px;

radial-gradient語法：

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

看上去有點複雜，[]表示一個參數，[]?表示這個參數可選，| 表示這兩個參數二選一，||表示這兩個參數能夠同時存在，'，'號表示這個參數結束。包含形狀，中心點位置，擴展關鍵字和顏色。形狀分圓形(circle)和橢圓(ellipse)，位置能夠是長度/百分比/簡寫的left、center等。顏色和線性漸變同樣，好比漸變一個太陽：

 background:radial-gradient(at 45px 45px,rgb(248, 242, 209),gold,#FFF);

不過這裏的at不只影響着漸變的中心點並且還影響着漸變的形狀。 若是加上background-size咱們能夠獲得一塊餅乾：想吃麼 (*^__^*) ……

而擴展關鍵字主要有下面幾種狀況

closest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊

background:radial-gradient(circle closest-side ,aqua,gold);

closest-corner：指定徑向漸變的半徑長度爲從圓心到離圓心最近的角

 background:radial-gradient(circle closest-corner  ,aqua,gold);

farthest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊

 background:radial-gradient(circle farthest-side at 30% 30%  ,aqua,gold);

farthest-corner：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角

 background:radial-gradient(circle farthest-corner at 30% 30%  ,aqua,gold);

 若是咱們想畫出色圈呢，這就要用到線性漸變中的技巧。

 

background:radial-gradient(white 0,white 10%,red 0, red 20%,white 0,white 30%,red 0,red 40%,white 0,white 50%,red 0,red 60%,white 0,white 100%);

兩種顏色交替出現。而後也能夠畫個藍天白雲： 接近小朋友的畫風...

疊加來個百葉窗：

小結：這些效果仍是蠻有意思的，這一篇主要是學習了 linear-gradient，repeating-linear-gradient以及background-size、background-position來實現網格效果，最後還用到了radial-gradient，徑向漸變的花樣更多，全部的效果基本都是基於漸變疊加和重複，更多的效果能夠參考下面的連接。

http://lea.verou.me/css3patterns/ 

http://bennettfeely.com/gradients/

http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html

羣中有此書的分享，不止於技術書籍。