ホームページ > 記事 > ウェブフロントエンド > CSS 3 を使用して長い影を作成する

CSS 3 を使用して長い影を作成する

php中世界最好的语言オリジナル: 2017-11-18 11:35:511669ブラウズ

現在最も人気のあるフラットデザインでは、長い影が実証済みのデザインスキルです。今日は長い影を作成する方法と、長い影の効果を実現するための PS と CSS3 の使用方法を説明します。

たとえば、次のデザインは非常に古典的なロングプロジェクションです:

CSS 3 を使用して長い影を作成する

自然界では、ロングプロジェクションは夕暮れ時に行われます。太陽が地平線に近い場合、水平な地面にある物体を上から見ると、長い影の効果が生じます。インターフェイスデザインでは、通常、北西の角から差し込む太陽光をシミュレートするために 45 度の角度をシミュレートする効果を使用し、デザインのテーマと鋭いコントラストを形成します。 photoshop を使用して長い影を作成する方法はたくさんあります。長い影の効果を作成するためによく使用される 4 つの方法について説明します。私がよく使用する 4 番目の方法は、レイヤーをコピーして移動することでこの効果を実現します。たとえば、behance にアップロードされたこの写真、

CSS 3 を使用して長い影を作成する

基本的な原則は、現在のレイヤーをコピーし、レイヤースタイルを選択し、黒で塗りつぶしてから、元のレイヤーの下に移動することです。次に、マウスまたはフィルターを使用してパンしたり、1 単位上に移動したり、1 単位下に移動したりできます。

CSS 3 を使用して長い影を作成する

次に、このレイヤーを複製して、再度翻訳します。次に、2 つの影レイヤーを結合します

CSS 3 を使用して長い影を作成する

次に、この操作を繰り返します。つまり、このレイヤーを 1 回複製し、下と右に 2 単位移動します。マージを再度実行します。コピーし、偶数のユニットを移動し、結合し、繰り返します。

もちろんフィルター→その他→ディスプレイスメントを使うとさらに便利です

CSS 3 を使用して長い影を作成する

ざっくりとした効果はこれで、最後に透明度を設定するだけです。

CSS 3 を使用して長い影を作成する

上記はデザインに関するもので、フロントエンドは CSS コードを通じてどのようにしてそのような効果を実現するのでしょうか?誰もが最初に考えるのは text-shadow

です。これはすでに css3 でサポートされています。本文の背景色を設定しましょう。私は青の方が好きです。次に、Google フォントに移動して好みのフォントを選択します。デフォルトのフォントで問題ない場合は、Passion One

を選択して CSS コードに導入します。

@import url(‘https://fonts.googleapis.com/css?family=Passion+One‘);

この時点で、長い影などのいくつかの文字を本文に入力しましょう

<body>  
  <h1>Long Shadow</h1>
</body>

それから、h1 のいくつかの基本スタイルを定義します;

h1{  
  text-align:center;
  font-size:6rem;
  padding-top:2rem;
}

次のステップは、text-shadow Coded の記述の中核を実現することです。

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 は背景の色です。歩幅も同様です。影の長さをどのくらいにしますか。最後は透明度です。次に計算して、1 ユニットずつ移動し、パーセントで色を減らし、最後にスタイルを整理します。

現時点では、この関数を h1 スタイルで使用するだけです

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

ここで、$bg: は背景の色です: #3498db。

CSS 3 を使用して長い影を作成する

関連記事