SASS實現DIV扁平化長陰影的美麗效果

現現在扁平化設計風格至關流行，各類地方均可以看到它的身影，而長陰影（Long Shadow）是扁平化設計中的一個重要的概念，那長陰影究竟是什麼意思呢？往下看

長陰影

長陰影其實就是擴展了對象的投影，感受是一種光線照射下的影子，一般採用角度爲 45 度的投影，給對象添加了一份立體感。長陰影快速發展爲流行的設計趨勢，並常常被應用到扁平設計方案的對象。想這樣：

今天咱們就用SASS實現相似的長陰影的效果

咱們拿一個登陸頁面做爲例子，添加前是這樣的

實現方法

爲實現長陰影的效果咱們先須要建立一個函數

/*
* 長陰影實現函數：longshadow
* $color:顏色值
* $opacity:透明度
* $stepnum:投影長度
* $stepLength:漸變步長 默認爲1
*/
@function longshadow($color,$opacity,$stepnum, $stepLength:1 ){

  $gradient_steps: null;
  // 計算步數
  $steps:floor( $stepnum / $stepLength);
  
  @for $i from 0 through $steps {
    // 設置透明度
    $op: $opacity - $i / $steps ;
    // 設置顏色
    $colour_mix: rgba($color, $op);

    $seperator: null;
    // 添加鏈接用的逗號
    @if($i != $steps){
      $seperator: #{','};
    }
    // 拼接box-shadow語句，例：1px 1px rgba(0,0,0,1),……
    $gradient_steps: append( #{$gradient_steps}, #{$i * $stepLength }px #{$i * $stepLength }px $colour_mix $seperator );

  }
  // 拼接好的語句返回
  @return $gradient_steps;

}

建立好函數後，咱們爲登陸框設置box-shadow屬性，並調用上面的方法

.rg {
  background: #fff;
  text-align: center;
  border-radius: 5px;
  padding:20px;
//調用方法 
  box-shadow:longshadow(#dbe3f5,.5,300);
}

這樣一個簡單的長陰影的效果的效果就出來了

咱們能夠傳入不一樣的顏色、透明度，陰影的長度一級漸變的步長

box-shadow:longshadow(rgb(203, 203, 203),.5,300,20);

效果是這樣的

最後 🙌

好啦，以上就是我本次分享的所有內容啦，若是你以爲個人文章對你有一丟丟幫助，那麼請不要吝嗇你的贊👍哦，阿門~