首頁 > 文章 > web前端 > 使用 CSS 3 製作長投影

使用 CSS 3 製作長投影

php中世界最好的语言原創: 2017-11-18 11:35:511620瀏覽

在當下最受歡迎的扁平化的設計中，長投影被看著屢試不爽的設計技能。今天教大家一份製作長投影的方法，如何用PS和CSS3分別怎麼達到長投影效果。

例如下面這張，非常經典的長投影設計:

使用 CSS 3 製作長投影

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

使用 CSS 3 製作長投影

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

使用 CSS 3 製作長投影

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

使用 CSS 3 製作長投影

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

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

使用 CSS 3 製作長投影

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

使用 CSS 3 製作長投影

上面說的是設計，前端如何透過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 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: #{&#39;,&#39;};
    }
 
    $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。

使用 CSS 3 製作長投影

相關文章