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

ブログ    

推薦する

HTML の表のフレームとルール属性の詳細な説明

テーブル タグの frame 属性と rules 属性は境界線の表示を制御できます。フレーム プロパ...

2019 年に最も役立ち重要なオープンソース ツール トップ 10

Black Duck の 2017 年のオープンソース調査では、回答者の 77% がオープンソース...

Linux クラウド サーバーに新しいディスクをマウントする方法

背景社内に新しいサーバーが追加され、2Tのハードディスクがマウントされました。sshでログイン後、マ...

MySQLは適切なストレージエンジンを選択します

データベースに関して最もよく聞かれる質問の 1 つは、現在のビジネス ニーズを満たす MySQL の...

MySQL ステートメントの概要

目次1. データベースの使用を選択2. 情報を表示する3. テーブルを作成する4. データを挿入する...

MySQL 5.7 のインストールと設定のチュートリアル

この記事では、参考までにMySQLのインストールと設定のチュートリアルを紹介します。具体的な内容は次...

CSS と JavaScript を使用して管理ダッシュボードのレイアウトを構築するためのサンプル コード

あなたが作成するものこの新しいチュートリアルでは、CSS と JavaScript を使用して、レス...

フロントエンドページのスライド検証を実装するための JavaScript + HTML

この記事では、フロントエンドページのスライド検証を実装するためのJavaScript + HTMLの...

自動同期テーブル構造のMySql開発

開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...

Linux システムのスワップ領域の紹介

スワップ スペースは、オペレーティング システムに関係なく、今日のコンピューティングの一般的な側面で...

ソースコード分析からTomcatがサーブレットの初期化を呼び出す方法の詳細な説明

目次導入1. Tomcatを起動するコード2. Tomcatフレームワーク3. コンテナを作成する ...

HTML コードの書き方に関する提案のまとめ

リソースファイルのプロトコルを省略する画像、メディアファイル、スタイル、スクリプトの URL では、...

WeChatアプレット認証ログインを処理するエレガントな方法

序文WeChat ミニプログラム プロジェクトでユーザー情報を取得し、ユーザー ログインを実装する場...

MySQL ストアドプロシージャの長所と短所の分析

MySQL バージョン 5.0 ではストアド プロシージャのサポートが開始されました。ストアド プロ...