CSS3中驚豔的gradient

之前曾經記錄過linear-gradient（線性漸變）和 radial-gradient（徑向漸變）的語法。

能夠參考《CSS3中border-radius、box-shadow與gradient那點事兒》

但在實際應用中卻不怎麼用，主要就是由於本身並無懂這兩個屬性的強大之處，再加上本身的想象力實在太差，想不到在什麼場景使用它們。

我原本覺得它們僅僅是作漸變效果，顯然個人想法太狹隘了，它們還有更多的用處。

最近在看《CSS Secrets》，裏面就提到了不少CSS使用技巧，下面的不少地方都是參照書中的例子，而後寫了點本身的理解。

linear-gradinet 與 radial-gradient 的語法以下：

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

radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

下面的全部源碼我都放到了codepen中，點擊就可在線調試。

 

1、stop位置

stop位置，也就是開始漸變的位置。

1）stop位置不一樣

將會出現過渡的效果，#fb3開始漸變的位置是20%，在20%以前就只有#fb3，到80%就是#58a。

div.transition1 {
  background: linear-gradient(#fb3 20%, #58a 80%);
}

 

2）stop位置相同

就不會有過渡的效果，由於#58a開始過渡的位置與#fb3的相同，那麼這兩個顏色之間就沒有了間隔。

div.transition2 {
  background: linear-gradient(#fb3 50%, #58a 50%);
}

 

3）stop位置爲0

將會和前一組的stop值相同，下面的代碼就和上面的50%是同樣的。

div.transition3 {
  background: linear-gradient(#fb3 50%, #58a 0);
}

 

4） 經過設置0，實現條紋色

#fb3的起始漸變是33.3%，給第二個顏色#58a設置爲0，使得兩個顏色之間沒有間隔，第三種顏色yellowgreen設置爲0，後面的就所有顯示這個顏色。

div.transition4 {
  background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
}

 

2、方向或角度

1）設置條紋顯示方向

有四個值，left、right、top、bottom。

to top, to bottom, to left 和 to right這些值會被轉換成角度0deg, 180deg, 270deg, 90deg。

left： 設置左邊爲漸變起點的橫座標值。   right：設置右邊爲漸變起點的橫座標值。

top： 設置頂部爲漸變起點的縱座標值。   bottom： 設置底部爲漸變起點的縱座標值。

div.angle1 {
  background: linear-gradient(to right, #fb3 50%, #58a 0);
  background-size: 30px 100%;
}

 

2）斜條紋

1. 將角度設置爲45°，總體就會斜過來，出現一個黃色的三角形，但並非條紋

div.angle2 {
  background: linear-gradient(45deg, #fb3 50%, #58a 0);
  background-size: 30px 30px;
}

2. 若是要設置條紋的話，得要先向下面第一張圖那樣，有兩個位置顯示黃色，兩個位置顯示藍色，第二張圖是個全景圖。

 

在25%內是黃色，而後到50%是藍色，再到是75%黃色，最後是藍色。

div.angle3 {
  background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
  background-size: 30px 30px;
}

 

3）條紋的計算方式

上面的效果只是條紋的一種展示方式，但均可以經過計算得出，下圖是個30*30的正方形。

上圖中假設第一個直角三角形的邊長是15px，並且等邊，計算從直角對應的高，也就是首次漸變的值。

根據勾股定理能夠得出斜邊的值爲 能夠得出15√2，在根據面積的計算能夠得出15*15 = 高*15√2，最後得出圖中的值。

正方形的對角線長度爲30√2，剛剛計算出的高再除以這個值，等於25%，也就是上面代碼中的值。

 

3、複雜條紋

1）網格

經過合併多組gradient，能夠組合出桌布效果。

div.complex1 {
  background: white;
  background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0), linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
  background-size: 30px 30px;
}

第一組gradient先旋轉90°，transparent 是透明，豎起來，第二組仍是橫着的。

 

2）波爾卡圓點

經過設置兩個「background-position」，達到波爾卡圓點效果，其中tan是顏色值，我誤覺得是三角函數中的正切tan了。

div.complex2 {
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

根據上面的語法，有多個屬性。

shape：漸變的形狀，圓形（circle）和橢圓（ellipse），不夠在上面的代碼中我設置ellipse，顯示出來的仍是圓形。

position：與background-position或者transform-origin相似。如缺省，默認爲中心點。

size：漸變的尺寸大小，參數以下表所示。

 

3）棋盤

上圖就是一張棋盤，能夠看到，經過重複畫出虛線正方形，就能完成棋盤效果。

那麼咱們就是要經過linear-gradient組合製做出這個正方形中的形狀。

若是是直接畫出兩個正方形，難度比較大，可是若是畫出四個直角三角形，再經過移位，那麼就能更容易實現。

將紅色正方形中的第1個三角形和綠色正方形中的第2個三角形合併在一塊兒，再把剩下的兩個合併在一塊兒，這樣就能拼成兩個正方形了。

div.complex3 {
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0), 
    linear-gradient(45deg, transparent 75%, #bbb 0), 
    linear-gradient(45deg, #bbb 25%, transparent 0), 
    linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
  background-size: 30px 30px;
}

上面的代碼就是在實現拼圖，經過設置background-position來作到偏移。

 

4）在線紋理背景實例

在css3patterns這個網站中，有許多示例，而且還有源碼。

 

4、圓環

圓環是經過先畫一個餅圖，而後再圓中再畫一個與背景色相同的圓，看上去就是圓環了。

<div class="pie"></div>

上面是HTML代碼，很是簡潔。

 

1）畫圓

先經過「linear-gradient」，畫一半是綠色，一半是灰色的圓。

.pie {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: yellowgreen;
  background-image: linear-gradient(to right, transparent 50%, #655 0);
  transform: rotate(20deg);/*只是爲了旋轉一下*/
}

 

2）蒙版

在僞元素「::before」中添加一個蒙版，蒙版能夠覆蓋右半邊的圓

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  transform: rotate(.1turn);
}

「border-radius」：設置四邊形的四角的圓角半徑，上面的值能夠分紅四個屬性，這樣設置後，蒙版的形狀就是一個半圓。

第一個是水平半徑，第二個是垂直半徑。

.pie::before{
    border-top-left-radius: 0 50%;
    border-top-right-radius: 100% 50%;
    border-bottom-right-radius: 100% 50%;
    border-bottom-left-radius: 0 50%;
}

「transform-origin」：爲了讓蒙版旋轉能夠繞着圓的中心點，因此設置了「left」

「rotate」：旋轉有四種單位，

 

3）旋轉

經過旋轉蒙版能夠把要顯示的部分顯示出來，下圖所示，就是旋轉不一樣的「turn」，顯示不一樣部分。

不過當超過50%的時候，也就是設置「.6turn」的時候，就是下面這幅樣子

而不是下面這樣，因此這裏須要作些小調整。

首先是要將蒙版設置灰色，其次旋轉的不是「.6turn」，而是「.1turn」。

.pie::before {
  transform: rotate(.1turn);

  background: #655;
}

 

4）內圓

在僞對象「::after」中畫一個與背景色同樣的圓。

 

5、箭頭形

1）角度

linear-gradient 中的角度是順時針旋轉的，下表中前面兩個是順時針，後面兩個是逆時針。

h3 {
 background:linear-gradient(10deg, transparent 15px, #2bbf85 0);   
}

10°	170°	-10°	-170°

能夠拿起你的手機，旋轉手機試試。

 

2）to <side-or-corner>

除了角度，還能夠設置to top, to bottom, to left 和 to right這些值，會被轉換成角度0°, 180°, 270°與 90°

h3 {
 background:linear-gradient(to left bottom, transparent 15px, #2bbf85 0);   
}

還能夠組合使用：

left bottom	left top	right bottom	right top

 

3）製做箭頭

給兩個linear-gradient分別設置兩個角度，並設置background-size的值，最後兩個背景圖拼在一塊兒就是一個箭頭了。

h3 {
  width: 200px;
  height: 100px;
  background: linear-gradient(-60deg, transparent 20%, #2bbf85 0) bottom right, linear-gradient(-120deg, transparent 20%, #2bbf85 0) top right;
  background-size: 100% 50%, 100% 50%;
  background-repeat: no-repeat, no-repeat;
}

 

最近在本身的一個實際項目中就應用到了linear-gradient，包圍PK的那個圓環，包住歧視那幾個字的箭頭。