CSSテキストシャドウで遊び心のあるエフェクトを作成します

CSS Text-Shadowプロパティを使用して、真に3Dに見えるテキストを作成する方法を見てみましょう。テキストシャドウは、テキストの背後にぼやけたグラデーションの色を適用できると考えるかもしれません。しかし、Box-Shadowのように、影がどれほどぼやけているかを制御できます。それは、カンマを分離する影と組み合わせて、それらを積み重ねることは、ここで行うCSSの策略です。

最後には、次のようなものがあります。

テキストシャドウをすばやく復活させます

構文は次のようなものです。

 .el {
 Text-Shadow：[x-offset] [y-offset] [blur] [color];
}

• X-オフセット：X軸の位置。正の値が影を右に移動し、負の値が影を左に移動します。 （必須）
• Yオフセット：Y軸の位置。正の値が影を下に移動し、負の値は影を上部に移動します。 （必須）
• ぼかし：影がどれだけぼやけているべきか。値が高いほど、影が柔らかくなります。デフォルト値は0px（ぼかしなし）です。 （オプション）
• 色：影の色。 （必須）

最初の影

1つの影だけを追加して、効果の作成を始めましょう。影は右に6px、底まで6pxを押します。

 ：根 {
  - テキスト：＃5362F6; /* 青 */
  - シャドウ：＃e485f8; /* ピンク */
}


.playful {
 色：var（ - テキスト）;
 Text-Shadow：6px 6px var（ - 影）;
}

より多くの影で深さを作成します

私たちが持っているのは、この時点でのフラットな影だけです。まだ3Dはそれほど多くありません。深さを作成し、同じ要素にテキストシャドウインスタンスを追加することで、実際のテキストに影を接続できます。必要なのは、それらを分離することだけです。真ん中にもう1つ追加することから始めましょう：

 .playful {
 色：var（ - テキスト）;
 Text-Shadow：6px 6px var（ - 影）、
        3px 3px var（ - 影）;
}

これはすでにどこかに到達していますが、見栄えが良くなるためにさらにいくつかの影を追加する必要があります。追加するステップが多いほど、最終結果はより詳細になります。この例では、6px 6pxから開始し、0に達するまで0.25pxの増分で徐々に削減します。

 .playful {
 色：var（ - テキスト）;
 テキストシャドウ： 
  6px 6px var（ - 影）、 
  5.75px 5.75px var（ - 影）、 
  5.5px 5.5px var（ - 影）、 
  5.25px 5.25px var（ - 影）、
  5px 5px var（ - 影）、 
  4.75px 4.75px var（ - 影）、 
 4.5px 4.5px var（ - 影）、 
  4.25px 4.25px var（ - 影）、
 4px 4px var（ - 影）、
  3.75px 3.75px var（ - 影）、
 3.5px 3.5px var（ - 影）、
  3.25px 3.25px var（ - 影）、
  3px 3px var（ - 影）、
  2.75px 2.75px var（ - 影）、
   2.5px 2.5px var（ - 影）、
  2.25px 2.25px var（ - 影）、
   2px 2px var（ - 影）、
  1.75px 1.75px var（ - 影）、
  1.5px 1.5px var（ - 影）、
   1.25px 1.25px var（ - 影）、
  1px 1px var（ - 影）、
   0.75px 0.75px var（ - 影）、
  0.5px 0.5px var（ - 影）、
 0.25px 0.25px var（ - 影）;
}

SASSでコードを簡素化します

結果は見栄えが良いかもしれませんが、今のコードは読み取りと編集が非常に困難です。影を大きくしたい場合は、それを達成するために多くのコピーと貼り付けをしなければなりません。たとえば、シャドウサイズを10pxに増やすと、16個のシャドウが手動で追加されることを意味します。

そして、それがSCSSが写真に登場するところです。関数を使用して、すべての影を生成する自動化できます。

 @Function TextShadow（$ precision、$ size、$ color）{
 $ value：null; 
 $ offset：0;
 $ length：$ size *（1 / $ precision）-1;


 @0から$ length {
  $ offset：$ offset $ precision;
  $ Shadow：$ offset px $ offset px $ color;
  $ value：append（$ value、$ shadow、comma）;
 }


 @return $ value;
}


.playful {
 色：＃5362F6;
 Text-Shadow：TextShadow（0.25、6、＃E485F8）;
}

関数Textshadowは、影の精度、サイズ、色の3つの異なる引数を取ります。次に、オフセットがシャドウの合計サイズ（この場合は6px）に達するまで$精度（この場合は0.25px）だけ増加するループを作成します。

これにより、影のサイズまたは精度を簡単に増やすことができます。たとえば、10pxの大きさで0.1pxで増加する影を作成するには、コードでこれを変更するだけでいいでしょう。

 Text-Shadow：TextShadow（0.1、10、＃e485f8）;

交互の色

交互の色を求めて、物事を少し盛り上げたいと思っています。スパンに包まれた個々の文字でテキストを分割します（これは手動で行うか、ReactまたはJavaScriptで自動化できます）。出力は次のようになります：

 <p aria-label="手を洗う！">
 <span aria-hidden="true"> w </span> <span aria-hidden="true"> a </span> <span aria-hidden="true"> s </span> <span aria-hidden="true"> h </span> ...
</p>

次に、スパン上のnth-child（）セレクターを使用して、テキストと影の色を変更できます。

 .playfulスパン：nth-​​child（2n）{
 色：＃ED625C;
 Text-Shadow：TextShadow（0.25、6、＃F2A063）;
}

バニラCSSでこれを行った場合、これが私たちが最終的に終わるものです：

 .playful span {
 色：var（ - テキスト）;
 テキストシャドウ： 
  6px 6px var（ - 影）、
  5.75px 5.75px var（ - 影）、
  5.5px 5.5px var（ - 影）、
  5.25px 5.25px var（ - 影）、
  5px 5px var（ - 影）、
  4.75px 4.75px var（ - 影）、
  4.5px 4.5px var（ - 影）、
  4.25px 4.25px var（ - 影）、
  4px 4px var（ - 影）、
  3.75px 3.75px var（ - 影）、
  3.5px 3.5px var（ - 影）、
  3.25px 3.25px var（ - 影）、
  3px 3px var（ - 影）、
  2.75px 2.75px var（ - 影）、
  2.5px 2.5px var（ - 影）、
  2.25px 2.25px var（ - 影）、
  2px 2px var（ - 影）、
  1.75px 1.75px var（ - 影）、
  1.5px 1.5px var（ - 影）、
  1.25px 1.25px var（ - 影）、
  1px 1px var（ - 影）、
  0.75px 0.75px var（ - 影）、
  0.5px 0.5px var（ - 影）、
  0.25px 0.25px var（ - 影）;
}


.playfulスパン：nth-​​child（2n）{
  - テキスト：＃ed625c;
  - シャドウ：＃F2A063;
}

私たちが好きなパターンを達成するまで、他の色やインデックスで同じことを数回繰り返すことができます。

ボーナスポイント：アニメーションの追加

同じ原則を使用して、アニメーションを追加することで、テキストをさらに活気づけることができます。まず、各スパンを上下に動かす繰り返しアニメーションを追加します。

 .playful span {
 色：＃5362F6;
 Text-Shadow：TextShadow（0.25、6、＃E485F8）;
 位置：相対;
 アニメーション：散布1.75s無限。
}

これを、より好ましい還元運動メディアクエリを使用して、もう少し最適化できます。そうすれば、アニメーションを望んでいない人はそれを取得しません。

 .playful span {
  色：＃5362F6;
  Text-Shadow：TextShadow（0.25、6、＃E485F8）;
  位置：相対;
  アニメーション：散布1.75s無限。
}

@media画面と（還元モーションを好む：redument）{
  アニメーション：なし;
}

次に、各nth-child（n）で別のアニメーション遅延を追加します。

 .playfulスパン：nth-​​child（2n）{
 色：＃ED625C;
 Text-Shadow：TextShadow（0.25、6、＃F2A063）;
 アニメーション遅延：0.3s;
}

以上がCSSテキストシャドウで遊び心のあるエフェクトを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。