CSSボックスシャドウの使用方法：13の秘訣と例

CSSボックスシャドウの使用方法：13の秘訣と例

CSSは、開発者がWebページのスタイルを設定するために使用する言語です。これは、HTML要素が画面、紙、またはその他の形式のメディアにどのように表示されるかを制御します。 CSSは、独自の画像でWebページのスタイルを設定するための完全なカスタマイズ機能を提供します。





CSSを使用して、要素の背景色、フォントスタイル、フォントの色、ボックスシャドウ、マージン、およびその他の多数のプロパティを変更できます。このガイドでは、ボックスシャドウのいくつかの効果的な使用法について説明します。



CSSボックスシャドウとは何ですか？

NS ボックスシャドウ プロパティは、HTML要素にシャドウを適用するために使用されます。これは、ボックスや画像のスタイル設定に最もよく使用されるCSSプロパティの1つです。





CSS構文：

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. 水平オフセット： 水平オフセットが正の場合、影はボックスの右側になります。また、水平オフセットが負の場合、影はボックスの左側になります。
  2. 垂直オフセット： 垂直オフセットが正の場合、影はボックスの下になります。また、垂直オフセットが負の場合、影はボックスの上になります。
  3. ぼかし半径： 値が高いほど、影がぼやけます。
  4. 広がり半径： それは影がどれだけ広がるべきかを意味します。正の値は影の広がりを増やし、負の値は広がりを減らします。
  5. 色： それは影の色を意味します。また、rgba、hex、hslaなどの任意のカラー形式をサポートします。

ぼかし、広がり、色のパラメータはオプションです。ボックスシャドウの最も興味深い部分は、コンマを使用してボックスシャドウの値を何度でも区切ることができることです。これを使用して、要素に複数の境界線と影を作成できます。



1.ボックスの左、右、下に薄暗いボックスシャドウを追加します

次のボックスシャドウCSSとターゲットHTML要素を使用して、ボックスの3つの側面（左、右、下）に非常に暗い影を追加できます。

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

出力：



2.すべての面に薄暗いボックスシャドウを追加します

ターゲットHTML要素で次のボックスシャドウCSSを使用して、ボックスのすべての側面に明るいシャドウを追加できます。



box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

出力：

3.下部と右側に薄いボックスシャドウを追加します

次のボックスシャドウCSSとターゲットHTML要素を使用して、ボックスの下部と右側にシャドウを追加できます。

PCで削除されたFacebookメッセージを回復する方法
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

出力：

4.すべての面にダークボックスシャドウを追加します

ターゲットHTML要素で次のボックスシャドウCSSを使用して、ボックスのすべての側面にダークシャドウを追加できます。

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

出力：

5.すべての側面にスプレッドシャドウを追加します

ターゲットHTML要素で次のコマンドを使用して、ボックスのすべての側面にスプレッドシャドウを追加できます。

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

出力：

6.すべての側面に細い境界線の影を追加します

ターゲットHTML要素で次のCSSを使用して、ボックスのすべての側面に単純な境界線の影を追加できます。

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

出力：

7.ボックスシャドウを底面と左側に追加します

次のボックスシャドウCSSとターゲットHTML要素を使用して、ボックスの下部と左側にシャドウを追加できます。

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

出力：

8.薄暗いボックスを追加します-上部と左側に影、下部と右側に暗い影

ターゲットHTML要素で次のCSSを使用して、ボックスの上部と左側に明るい影を追加し、ボックスの下部と右側に暗い影を追加できます。

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

出力：

9.すべての面に薄い色のボーダーシャドウを追加します

ターゲットHTML要素で次のボックスシャドウCSSを使用して、ボックスのすべての側面に単純な色付きの境界線シャドウを追加できます。

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

出力：

10.ボックスの下部と左側に複数の色付きの境界線の影を追加します

ターゲットHTML要素で次のCSSを使用して、ボックスの下部と左側に複数の色付きの境界線の影を追加できます。

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

出力：

Windows10を使用しているグラフィックカードを見つけるにはどうすればよいですか

11.複数の色付きの境界線の影を下部に追加します

ターゲットHTML要素で次のボックスシャドウCSSを使用して、ボックスの下部に複数の色付きの境界線シャドウを追加できます。

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

出力：

12.ボックスの下部と右側に複数の色付きの境界線の影を追加します

ターゲットHTML要素で次のCSSを使用して、ボックスの下部と右側に複数の色付きの境界線の影を追加できます。

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

出力：

13.左側と右側に明るい影を追加し、下部に影を広げます

次のボックスシャドウCSSとターゲットHTML要素を使用して、左側と右側に明るい影を追加し、ボックスの下部に影を広げることができます。

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

出力：

CSSをHTMLページと統合する

これで、CSSを使用してクールなボックスシャドウ効果を追加する方法がわかりました。これらを複数の方法でHTML要素と簡単に統合できます。

関連している： CSSファイルをチェック、クリーンアップ、最適化するための11の便利なツール

HTMLページ自体に埋め込んだり、別のドキュメントとして添付したりできます。 HTMLドキュメントにCSSを含めるには3つの方法があります。

内部CSS

埋め込みまたは内部スタイルシートは、 を使用したHTMLドキュメントのセクション エレメント。あなたは任意の数を作成することができます HTMLドキュメント内の要素ですが、 と タグ。 HTMLドキュメントで内部CSSを使用する方法を示す例を次に示します。





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





インラインCSS

インラインCSSは、HTML要素に一意のスタイルルールを追加するために使用されます。これは、HTML要素で使用できます。 スタイル 属性。 style属性には、次の形式のCSSプロパティが含まれます。 「プロパティ：値」 セミコロンで区切る（ ; ）。

関連：CSSグリッドを使用して2次元Webサイトを構築する方法を学ぶ

すべてのCSSプロパティは1行である必要があります。つまり、CSSプロパティ間に改行があってはなりません。 HTMLドキュメントでインラインCSSを使用する方法を示す例を次に示します。





CSS box-shadow



Style 4





外部CSS

外部CSSは、HTMLドキュメントにスタイルを適用するための最も理想的な方法です。外部スタイルシートには、すべてのスタイルルールが別のドキュメント（.cssファイル）に含まれています。このドキュメントは、を使用してHTMLドキュメントにリンクされます。 鬼ごっこ。影響を受けるHTMLファイルではマークアップの変更が最小限で済むため、この方法は、スタイルを定義してHTMLドキュメントに適用するための最良の方法です。 HTMLドキュメントで外部CSSを使用する方法を示す例を次に示します。

を使用して新しいCSSファイルを作成します .css 拡大。次に、そのファイル内に次のCSSコードを追加します。

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

最後に、HTMLドキュメントを作成し、そのドキュメント内に次のコードを追加します。

携帯電話を使用して隠しカメラを見つける方法




CSS box-shadow




Style 4





CSSファイルはを介してHTMLドキュメントにリンクされていることに注意してください タグと href 属性。

上記の3つのメソッド（内部CSS、インラインCSS、外部CSS）はすべて、同じ出力を表示します-

CSSでWebページをエレガントにする

CSSを使用することで、Webページのスタイルを完全に制御できます。さまざまなCSSプロパティを使用して、すべてのHTML要素をカスタマイズできます。世界中の開発者がCSSの更新に貢献しており、1996年のリリース以来、貢献してきました。そのため、初心者は学ぶことがたくさんあります。

幸いなことに、CSSは初心者に優しいです。いくつかの簡単なコマンドから始めて、あなたの創造性があなたをどこに連れて行くかを見ることによって、あなたはいくつかの優れた練習を得ることができます。

共有 共有 つぶやき Eメール 10分で学ぶことができる10の簡単なCSSコード例

CSSのサポートが必要ですか？これらの基本的なCSSコード例を最初に試してから、独自のWebページに適用してください。

次を読む 関連トピック
  • プログラミング
  • ウェブデザイン
  • CSS
著者について ユブラジチャンドラ（60件の記事が公開されました）

Yuvrajは、インドのデリー大学のコンピュータサイエンス学部生です。彼はフルスタックWeb開発に情熱を注いでいます。執筆していないときは、さまざまなテクノロジーの深さを探っています。

YuvrajChandraのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください