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

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> 

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

要素に影を設定するには、 CSSbox-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をインストールし、チャットルームを設定するための詳細な手順

推薦する

Linuxダイナミックリンクライブラリの使用

通常のプログラムと比較すると、ダイナミック リンク ライブラリにはメイン関数がなく、一連の関数の実装...

Vue のキーボードイベント監視の概要

キー修飾子キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。...

MySQL テーブル分割後にスムーズにオンラインになる方法

目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...

CSS における位置指定の概要

CSS には 4 種類の配置方法があり、シナリオによって効果が異なります。ここでは、これら 4 種類...

MySQL トリガーの基本的な使い方(作成、表示、削除など)の詳細な説明

目次1. MySQLトリガーの作成: 1. MySQLトリガー作成構文: 2. MySQL作成構文の...

MongoDB の起動エラーを解決します: 共有ライブラリのロード中にエラーが発生しました: libstdc++.so.6: 共有オブジェクト ファイルを開けません:

MongoDB を起動すると、プロンプトは次のようになります。共有ライブラリのロード中にエラーが発...

Linux でマウントされたファイルシステムの種類を表示する方法

序文ご存知のとおり、Linux は ext4、ext3、ext2、sysfs、securityfs、...

MySQL 30軍事ルールの詳細な説明

1. 基本仕様(1)InnoDBストレージエンジンを使用する必要があります。解釈:トランザクション、...

Node.js ファイルのコピー、フォルダの作成、その他の関連操作

NodeJS は次のファイルをコピーします:通常、小さなファイルのコピー操作では、ストリーム パイプ...

React イベントバインディングの詳細

目次クラスコンポーネントイベントバインディング関数コンポーネントイベントバインディング要約するRea...

MySQL よく使われる関数の詳細な概要

目次MySQL 共通関数1. 数値関数文字列関数3. 時間機能4. システム機能5. 集計関数MyS...

Reactは二次的連鎖効果(階段効果)を実現する

この記事では、二次リンク効果を実現するためのReactの具体的なコードを参考までに共有します。具体的...

Windows での MySQL インストール チュートリアル (画像とテキスト付き)

MySQL インストール手順 MySQL は、スウェーデンの MySQL AB によって開発された...

ウェブレッスンプラン、初心者向けレッスンプラン

指導トピックウェブページ適用グレード高校2年生授業時間1 クラス教科書分析焦点: 静的および動的ウェ...

Docker ケース分析: MySQL データベース サービスの構築

目次1 設定ディレクトリとデータディレクトリを作成する3 イメージからホストに構成ファイルをコピーす...