【筆記】用CSS漸層實作文字區塊的透明遮掩效果

一直好奇在亞馬遜網站中，有一種文字透明遮掩效果是怎麼做出來的，像這樣：

可以看到上列文字區塊的下方，有漸漸淡去的效果。

有天找了時間去研究，原來就是利用區塊漸層的效果，就能做得出來了。 首先看一下CSS的部份：

.txtGradient {
   z-index: 2;
   position: relative;
   height: 50px; 
   margin-top: -50px;
   overflow: hidden;
   background: -moz-linear-gradient(
     bottom, 
     rgb(255, 255, 255) 15%,

     rgba(255, 255, 255, 0) 100%
   ); 
   background: -webkit-gradient(
     linear,
     bottom,
     top,
     color-stop(15%, rgb(255, 255, 255)),
     color-stop(100%, rgba(255, 255, 255, 0))
   );
   background: -webkit-linear-gradient(
     bottom,
     rgb(255,255,255) 15%,
     rgba(255, 255, 255, 0) 100%
   );
   background: -o-linear-gradient(
     bottom,
     rgb(255,255,255) 15%,
     rgba(255, 255, 255, 0) 100%
   );
   background: -ms-linear-gradient(
     bottom,
     rgb(255,255,255) 15%,
     rgba(255, 255, 255, 0) 100%
   );

   background: linear-gradient(
     bottom,
     rgb(255, 255, 255) 15%,
     rgba(255, 255, 255, 0) 100%
   );
}

上列主要對我們要用來遮掩的區塊設定漸層的效果，其中linear-gradient屬性的設定主要是由下往上用白色來做漸層，這樣就會讓被遮掩的區塊由上往下慢慢變透明的效果。

這個屬性的設定和參數，可以參考linear-gradient。

再來於HTML中加入文字區塊和要遮掩的區塊：

Duplicate the circle
Because the circle is now a clipping mask, it won’t be visible. 
We need something to be visible that the user can see. 
Let’s duplicate the circle. Now we have two circles ontop of each other, one is a clipping mask,
 the other is a circle with a green stroke.
 


see more

再來我用一點JavaScript來增加一點動畫效果：

做出來的效果就會像這樣：

點了See more之後：

 

上方文字區塊就有整個展開的感覺。

若你有興趣的話，上列程式碼可以在這裡下載。