在flat design(扁平化的設計)中，Long Shadow （長投影）被看着屢試不爽的設計技能。比如下面這張，非常經典的長投影設計:
攝影師選擇長投影通常是給圖片帶來戲劇效果， 在自然界中，長投影發生在黃昏的時候，太陽接近地平線時，水平地面上的物體俯瞰就會有長投影的效果。在界面設計中我們通常採用了模擬45度角的效果，模擬陽光從西北角上射來，從而與設計的主題形成鮮明的對比效果。使用photoshop製作長投影有很多種方法，你可以閱讀常用的四種方法創建長投影效果,自己平時最喜歡用的也是第四種，通過圖層複製和移動來達到這樣的效果,比如自己在behance上傳的這張圖片，
大致原理就是 你複製一個當前圖層，選中圖層樣式，填充黑色，然後將其移到原圖層下面。然後使用鼠標或者濾鏡都可以實現平移，友移一個單位和下移一個單位。
然後，我們再複製這個圖層，再平移一次。然後合併這兩個陰影圖層
然後我們再重複動作，即把這個圖層複製一次，向下移和向右移動2個單位。再執行合併。依次類推複製，移動偶數倍單位，合併，然後再重複。
當然你用濾鏡->其他->位移會更加方便
大致就是這樣的效果，然後最後設置下透明度就好。
上面說的是設計，前端如何通過css代碼來實現這樣的效果？大家第一時間想到就是css3已經支持的text-shadow
順便給大家推薦一個裙，它的前面是 537，中間是631，最後就是 707。想要學習前端的小夥伴可以加入我們一起學習，互相幫助。羣裏每天晚上都有大神免費直播上課，如果不是想學習的小夥伴就不要加啦。（537631707）
首先我們給背景添加一種比較突出的顏色吧，自己強烈安利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 href="http://www.jobbole.com/members/lowkey2046">@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。
作者：Jack Pu
www.jackpu.com/shi-yong-css-3-zhi-zuo-chang-tou-ying-long-shadow/