CSS でテキストシャドウと要素シャドウ効果を使用する

テキストシャドウの紹介

CSSでは、 text-shadowプロパティを使用してテキストの影を設定します。このプロパティには、水平方向の影、垂直方向の影、(明瞭度またはぼかしの距離)、影の色の合計4の属性値があります。
text-shadowプロパティ値の説明、テキストシャドウの実践では、最初の値はシャドウの水平方向の移動を設定し、2 番目の値はシャドウの垂直方向の移動を設定し、3 番目の値はシャドウのぼかし距離を設定し、4 番目の値はシャドウの色を設定します。
text-shadowプロパティの値は負の数に設定できます。
テキストに複数の影を設定するには、カンマで区切ります。

テキストシャドウ: 1px 2px 3px 赤、1px 2px 6px レベッカ紫;

テキストシャドウの練習

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>テキストシャドウ</title>
  <スタイル>  
    div{
      フォントサイズ: 60px;
      色: シーグリーン;
      テキストシャドウ: 1px 2px 3px 赤;
    }
  </スタイル>
</head>

<本文>
   <div>笑顔こそが本来の信念です。 </div>
</本文>

</html>

エレメンタルシャドウの紹介

要素に影を設定するには、 CSSのbox-shadowプロパティを使用します。

box-shadowプロパティ値の説明は次のとおりです。最初の値は影の水平方向の移動を設定し、2 番目の値は垂直方向の移動を設定し、3 番目の値は影の明瞭度を設定し、4 番目の値は影のサイズを設定し、5 番目の値は影の色を設定し、6 番目の値は影の位置を設定します。デフォルトの影の位置は外側で、 inset影を内側に設定します。
box-shadowプロパティの値は負の数に設定できます。
box-shadowプロパティ値では、カンマで区切ることで複数のシャドウを設定できます。

エレメンタルシャドウプラクティス

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>要素の影</title>
  <スタイル>  
    div{
      幅: 100ピクセル;
      高さ: 100px;
      境界線: 2px 実線の赤;
      box-shadow: 3px 6px 8px darkblue、4px 8px 6px rebeccapurple inset;
    }
  </スタイル>
</head>

<本文>
   <div>笑顔こそが本来の信念です。 </div>
</本文>

</html>

要約する

以上が、CSS でのテキストシャドウと要素シャドウ効果の使用についてご紹介した内容です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: デザイン理論: テキストの読みやすさと可読性

>>: DockerにrockerChatをインストールし、チャットルームを設定するための詳細な手順