html5前端教程如何使用CSS3製作長投影

在flat design(扁平化的設計)中，long shadow （長投影）被看著屢試不爽的設計技能。比如下面這張，非常經典的長投影設計:

攝影師選擇長投影通常是給帶來戲劇效果，在自然界中，長投影發生在黃昏的時候，太陽接近地平線時，水平地面上的物體俯瞰就會有長投影的效果。在介面設計中我們通常採用了模擬45度角的效果，模擬陽光從西北角上射來，從而與設計的主題形成鮮明的對比效果。使用photoshop製作長投影有很多種方法，你可以閱讀常用的四種方法建立長投影效果,自己平時最喜歡用的也是第四種，通過圖層複製和移動來達到這樣的效果,比如自己在behance上傳的這張，

大致原理就是你複製乙個當前圖層，選中圖層樣式，填充黑色，然後將其移到原圖層下面。然後使用滑鼠或者濾鏡都可以實現平移，友移乙個單位和下移乙個單位。

然後，我們再複製這個圖層，再平移一次。然後合併這兩個陰影圖層

然後我們再重複動作，即把這個圖層複製一次，向下移和向右移動2個單位。再執行合併。依次類推複製，移動偶數倍單位，合併，然後再重複。

當然你用濾鏡->其他->位移會更加方便

大致就是這樣的效果，然後最後設定下透明度就好。

上面說的是設計，前端如何通過css**來實現這樣的效果？大家第一時間想到就是css3已經支援的text-shadow

然後在css**中引入就好。

@import url(『

這個時候我們在我們的body裡面隨便敲幾個字母吧，比如long shadow

然後我們定義一些h1的基本樣式;

h1;

@return $gradient_steps;

函式的執行效果就是類似於我穿入乙個顏色a和乙個顏色b,其中顏色a就是陰影開始的地方的顏色，顏色b就是背景的顏色，步長也就是類似你希望你的陰影有多長，最後乙個就是透明度。然後就是計算了，我們沒次都移動乙個單位，然後顏色進行百分比的遞減，最後組織好樣式就可以了。

這個時候我們只需要在h1的樣式中使用這個函式就好

@include text-shadow(longshadow(darken($bg,30%),$bg,50, 0.5));

其中$bg:就是我們背景的顏色咯： #3498db。

html5前端教程如何使用CSS3製作長投影

HTML 教程 HTML5 標準

HTML 教程 HTML5 標準

HTML5如何使用SVG

html5前端教程 如何使用CSS3製作長投影

HTML 教程 HTML5 標準

HTML 教程 HTML5 標準

HTML5如何使用SVG

相關推薦

html5前端教程如何使用CSS3製作長投影