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

使用 CSS 3 製作長投影

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

在當下最受歡迎的扁平化的設計中,長投影被看著屢試不爽的設計技能。今天教大家一份製作長投影的方法,如何用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實作會動的貓臉


#css變數說明及教學


##css變數說明及教學


###設定DIV捲軸屬性與樣式的方式介紹################

以上是使用 CSS 3 製作長投影的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn