使用 CSS 3 制作長投影
在flat design(扁平化的設計)中，Long Shadow （長投影）被看著屢試不爽的設計技能。比如下面這張，非常經典的長投影設計:
攝影師選擇長投影通常是給圖片帶來戲劇效果， 在自然界中，長投影發生在黃昏的時候，太陽接近地平線時，水平地面上的物體俯瞰就會有長投影的效果。在界面設計中我們通常采用了模擬45度角的效果，模擬陽光從西北角上射來，從而與設計的主題形成鮮明的對比效果。使用photoshop制作長投影有很多種方法，你可以閱讀 常用的四種方法創建長投影效果 ,自己平時最喜歡用的也是第四種，通過圖層復制和移動來達到這樣的效果,比如自己在 behance 上傳的這張圖片，
大致原理就是 你復制一個當前圖層，選中圖層樣式，填充黑色，然后將其移到原圖層下面。然后使用鼠標或者濾鏡都可以實現平移，友移一個單位和下移一個單位。 
然后，我們再復制這個圖層，再平移一次。然后合并這兩個陰影圖層 
然后我們再重復動作，即把這個圖層復制一次，向下移和向右移動2個單位。再執行合并。依次類推復制，移動偶數倍單位，合并，然后再重復。
當然你用濾鏡->其他->位移會更加方便
大致就是這樣的效果，然后最后設置下透明度就好。
上面說的是設計，前端如何通過css代碼來實現這樣的效果？大家第一時間想到就是css3已經支持的text-shadow
首先我們給背景添加一種比較突出的顏色吧，自己強烈安利 flatcolors 這個網站，里面有很多配色方案，隨取隨用。 我們給body 設置一下背景色。自己比較喜歡藍色。接下來我們再去 google font 里面挑選自己喜歡的字體，如果你覺得默認的字體可以接受也沒關系.自己選擇了Passion One
然后在css代碼中引入就好。
@import url(‘ https://fonts.googleapis.com/css?family=Passion+One ‘);
這個時候我們在我們的body里面隨便敲幾個字母吧，比如long shadow
<body>
<h1>Long Shadow</h1>
</body>
然后我們定義一些h1的基本樣式;
h1{
text-align:center;
font-size:6rem;
padding-top:2rem;
}
接下來就是要實現最核心的就是寫text-shadow的代碼了
text-shadow 的值可以有x,y軸的位移，加模糊半徑和顏色。
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
我們只要反復的平移，然后使其顏色趨近與背景色既可以了。
也就是這樣子的代碼
text-shadow： 1px 1px rgba(18, 67, 100, 0.5) , 2px 2px rgba(20, 72, 107, 0.51) , 3px 3px rgba(22, 76, 113, 0.52) , 4px 4px rgba(23, 81, 119, 0.53) , 5px 5px rgba(25, 85, 125, 0.54) ...
但是這樣寫下去肯定是不現實的，自己需要反復計算步長和增長。還好我們有scss和less這樣的預處理框架。我們可以非常方便的完成顏色的換算和增長。
scss代碼實現參考
@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){
$gradient_steps: null;
<a>@for</a> $i from 1 through $stepnum{
$weight: ( ( $i - 1 ) / $stepnum ) * 100;
$colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
$seperator: null;
@if($i != $stepnum){
$seperator: #{','};
}
$gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );
}
@return $gradient_steps;
}
函數的執行效果就是類似于我穿入一個顏色a和一個顏色b,其中顏色a就是陰影開始的地方的顏色，顏色b就是背景的顏色，步長也就是類似你希望你的陰影有多長，最后一個就是透明度。然后就是計算了，我們沒次都移動一個單位，然后顏色進行百分比的遞減，最后組織好樣式就可以了。
這個時候我們只需要在h1的樣式中使用這個函數就好
@include text-shadow(longshadow(darken($bg,30%),$bg,50, 0.5));
其中$bg:就是我們背景的顏色咯： #3498db。
運行效果如下：
See the Pen text long shadow by Jack Pu ( @Jack_Pu ) on CodePen .
來自：http://web.jobbole.com/90645/