CSSの内側の影。 CSS の内部シャドウ CSS box-shadow 構文

30.11.2023

通常のシャドウは、box-shadow または text-shadow を使用して簡単に実装できます。しかし、内部の影を作成する必要がある場合はどうすればよいでしょうか? この記事では、わずか数行のコードでこれらの影を作成する方法について説明します。

構文

まず、CSS でシャドウを実装する 2 つの主な方法を見てみましょう。

ボックスシャドウ

デザイン ボックスシャドウいくつかの異なる意味が含まれています。

水平オフセットそして 垂直オフセット- それぞれ水平方向と垂直方向の変位。これらの値は、オブジェクトがどの方向に影を落とすかを示します。

ぼかし半径そして 拡散半径もう少し複雑です。違いは何ですか? 2 つの要素を含む例を見てみましょう。値は ぼかし半径異なる：

影のエッジがぼやけているだけです。異なる価値観で 拡散半径次のことがわかります。

この場合、影が広い範囲に散らばっていることがわかります。値を指定しない場合 ぼかし半径そして 拡散半径、その場合、それらは 0 に等しくなります。

テキストシャドウ

構文は次とよく似ています ボックスシャドウ:

意味は似ていますが、違います スプレッドシャドウ。使用例：

ボックスシャドウの挿入

オブジェクト内の影を「反転」するには、以下を追加する必要があります。 差し込み CSSで:

基本的な box-shadow 構文を理解すると、インナーシャドウの実装方法を理解するのは非常に簡単になります。値は同じままで、色 (16 進数の RGB) を追加できます。

色は RGB 形式であり、アルファ値は影の透明度を決定します。

影のある画像

画像に内側の影を追加するのは、通常の影を追加するよりも少し難しくなります。 ディビジョン。まず、通常の画像コードは次のとおりです。

次のように影を追加できると考えるのが論理的です。

Img (ボックスシャドウ: インセット 0px 0px 10px rgba(0,0,0,0.5); )

しかし、影は見えません。

この問題を解決するにはいくつかの方法がありますが、それぞれに長所と短所があります。そのうちの 2 つを見てみましょう。 1 つ目は、画像を通常のラップでラップすることです。 ディビジョン:

Div (高さ: 200px; 幅: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img (高さ: 200px; 幅: 400px; 位置: 相対; z-index: -2 ;)

すべて機能しますが、HTML と CSS マークアップを少し追加する必要があります。 2 番目の方法は、画像を目的のブロックの背景として設定することです。

Div (高さ: 200px; 幅: 400px; 背景: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )

インナーシャドウを使用すると、次のようなことが起こる可能性があります。

テキストシャドウへの挿入

内部テキストシャドウを実装するには、コードに追加するだけです。 差し込み機能しません:

解決するには、まずヘッダーに適用します h1暗い背景と明るい影を設定します。

H1 (背景色: #565656; カラー: 透明; テキストシャドウ: 0px 2px 3px rgba(255,255,255,0.5); )

何が起こるかというと、次のとおりです。

隠し味を加える 背景クリップこれにより、テキストを超えて (暗い背景に) 広がる部分が切り取られます。

H1 (背景色: #565656; カラー: 透明; テキストシャドウ: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: テキスト; -moz-background-clip: テキスト; 背景クリップ: テキスト;)

私たちが必要としていたものとほぼ正確に一致しました。ここで、テキストを少し暗くするだけ (アルファ)、結果は次のようになります。

CSS の box-shadow プロパティを使用して、要素に影を追加し、その外観を変更できます。このスタイルを使用すると、ブロックのボリュームや立体感などの興味深い効果を実現できます。このプロパティは、最新のすべてのブラウザーでサポートされています。例外は、IE8 と Opera Mini です。

box-shadow プロパティ: 構文

このスタイルは次のように記述されます。

ボックスシャドウ: インセット 4px 4px 8px 5px #333333;

各パラメータが何を担当するかを順番に (左から右に) 考えてみましょう。

キーワード inset: 指定する必要のないパラメータ。影を描きます内部要素。
Xオフセット: 要素に対して影を水平方向にオフセットする度合いを指定します。正の値は右へのシフトを意味し、負の値は左へのシフトを意味します。値 0 は、シャドウがオフセットされていないことを意味します。
Yシフト: 影の垂直方向の変位量を指定します。正の値は下方へのシフトを意味し、負の値は上方へのシフトを意味します。値 0 はシフトなしのシャドウです。
ぼかし半径：影のぼけ具合です。値が大きいほど、影がぼやけます。パラメータが指定されていない場合、デフォルト値は 0 です。この場合、影は完全にクリアになります。
拡大: 両方の軸に沿ってシャドウを引き伸ばすためのオプションのパラメータ。値が大きいほど、ストレッチが大きくなります。拡張機能は、前のパラメータが存在する場合にのみ機能します。デフォルト値は 0 です。
影の色: このパラメータですべてが明確になります - 要素の影の色を設定します。デフォルトの色は黒です。

注記。 Android ブラウザーと iPhone Safari の古いバージョンでは、box-shadow CSS プロパティが正しく機能するために -webkit- プレフィックスが必要です。

このプロパティは、複数の値のグループを取ることができます (同時に複数の影を作成します)。これを行うには、これらのパラメータのグループをカンマで区切ってリストする必要があります。例えば：

ボックスシャドウ: 15px 15px 20px #8b0163、インセット 15px 15px 20px #630046;

ボックスシャドウの例

CSS の box-shadow プロパティの威力と美しさをより深く理解していただくために、安全に実践できる例をいくつか紹介します。この性質は普通のブロックを大きく変えることができます！

光の影

ボックスシャドウ: 0 2px 4px rgba(0, 0, 0, .25);

紙の効果

ボックスシャドウ: 0 1px 4px rgba(0, 0, 0, .3)、-23px 0 20px -23px rgba(0, 0, 0, .6)、23px 0 20px -23px rgba(0, 0, 0, .6)、インセット 0 0 40px rgba(0, 0, 0, .1);

複数のレイヤー

ボックスシャドウ: 6px 6px #ccc、12px 12px #a3a3a3;

トリプルフレーム

ボックスシャドウ: 0 0 0 7px rgb(118, 46, 177)、0 0 0 14px rgba(118, 46, 177, 0.6)、0 0 0 21px rgba(118, 46, 177, 0.4);

コーナー

ボックスシャドウ: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

ご覧のとおり、box-shadow プロパティには想像力の余地がたくさんあります。ブロックは好きなように変形できます。重要なのは、比例感を持つことです。 😉

次の章では、要素のサイズを決定する幅と高さのプロパティについて説明します。

親愛なる読者の皆さん、こんにちは。今日はあなたと一緒にやります CSSを使用したブロックの美しい影。これは、特にテンプレートを作成する場合に非常に役立つと思います。そして、影のあるブロックは非常に魅力的でモダンに見えます。

ブラウザのサポート

基本的に、最新のブラウザはすべてシャドウ効果をサポートしています。

Internet Explorer 9.0以降。
Firefox 3.5 以降。
Chrome 1 以降。
Safari 3 以降。
Opera 10.5 以降。

重要な点も 1 つ述べておきたいと思います。ブラウザによっては、特定のプレフィックスを使用することがあります。 Firefoxに使用 -モズ-、Chrome と Safari の場合は、プレフィックスを使用する必要があります。 -ウェブキット。

さて、ここからは最も興味深い部分に移りましょう。すべてのシャドウを個別に見てみましょう。8 つの効果があります。

影効果1

この例では、ブロックの影が下にあります。

HTML

HTML

効果6

CSS

.box h3( text-align:center;position:relative;top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ================================================= ========= * 効果 6 * == =================================== =========================*/ .effect6 (position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) インセット; rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) インセット; 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; ) .effect6:before, .effect6:after ( content:""; Position:absolute; z -index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);シャドウ:0 0 20px rgba(0,0,0,0.8); 左:10px; -moz-border-radius:10px; 左:自動; webkit-transform:skew(8度) 回転(3度); -moz-transform:skew(8度) 回転(3度); -ms-transform:skew(8度) 回転(3度);

-o-transform:skew(8 度) 回転(3 度);

変換:スキュー(8度) 回転(3度); )

HTML

影効果7

CSS

.box h3( text-align:center;position:relative;top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ================================================= ========= * 効果 7 * == =================================== =========================*/ .effect7 (position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) インセット; rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) インセット; 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; ) .effect7:before, .effect7:after ( content:""; Position:absolute; z -index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);シャドウ:0 0 20px rgba(0,0,0,0.8); 左:10px; -moz-border-radius:10px; 左:自動; -webkit-transform: スキュー(8 度) 回転(3 度); -moz-transform:スキュー(8 度) 回転(3 度);

-o-transform:skew(8 度) 回転(3 度);

変換:スキュー(8度) 回転(3度); )

HTML

影効果8

CSS

ブロックの側面にある湾曲した影の効果。

エフェクト8

.box h3( text-align:center;position:relative;top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ================================================= ========= * 効果 8 * == =================================== =========================*/ .effect8 (position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) インセット; rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) インセット; 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; ) .effect8:before, .effect8:after ( content:""; Position:absolute; z -index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);シャドウ:0 0 20px rgba(0,0,0,0.8); 左:0; 右:0; -moz-border-radius:100px / 10px ) after ( right:10px; left:auto; -webkit-transform: skew(8deg) 回転(3度); -moz-transform:skew(8deg) 回転(3度); -ms-transform:skew(8度) 回転(3度) ); -o-transform:skew(8 度) 回転(3 度); box-shadow プロパティが導入されました。このプロパティは、要素のボックスに 1 つ以上の影を簡単に追加して目的の視覚効果を与えることができるため、Web 開発者の間で広く使用されるようになりました。

前回の記事では、border-radius プロパティについて説明しました。これを使用すると、角が丸い影を得ることができます。テキストシャドウ (text-shadow) と同様に、複数のシャドウを作成できます。それらは次に従って適用されます。 Z軸前から後ろへ (最初に指定された影が上になります)。

この最新のプロパティの構文を詳しく見てみましょう。

このプロパティの可能な値を順番に検討してみましょう。

意味	説明
なし	影は表示されません。これがデフォルト値です。
差し込み	オプションの値。この値が指定されていない場合 (デフォルト)、影は要素の外側にあり、要素が膨らんだ効果が作成されます。 inset キーワード (値) が存在する場合、影は要素の内側に入り込み、へこんだ効果を作成します。つまり、外側の影から内側の影への変化です。
h-シャドウ	必須の値。水平方向の影の位置を設定します。負の値も許可されます。
Vシャドウ	必須の値。垂直影の位置を設定します。負の値も許可されます。
ぼかし半径	オプションの値。ぼかしの半径を設定します。値が大きいほどぼかしが大きくなり、影が大きく明るくなります。値が指定されていない場合、値は 0 (シャープ - 明確な影) になります。負の値は許可されません。
広がり半径	オプションの値。影のサイズ (影の伸縮半径)。正の値を指定すると影が拡大し、負の値を指定すると影が縮小します。値が指定されていない場合、値は 0 になります (影は要素のサイズに対応します)。
色	オプションの値。影の色を定義します (HEX、RGB、RGBA、HSL、HSLA、「定義済みの色」)。デフォルト値は黒です。

要素の影を作成するために理解する必要がある主な点は次のとおりです。

box-shadow プロパティが現在すべての最新ブラウザでサポートされているという事実に注目していただきたいと思います。

財産			オペラ		アイエクスプローラー	角
ボックスシャドウ	10.0 4.0 -ウェブキット-	4.0 3.5 -モズ-	10.5	5.1 3.1 -ウェブキット-	9.0	12.0

モバイルを含む一部のブラウザのサポートを拡張したい場合 iOS 3.2～4.3そして アンドロイド2.1～3の場合は、メーカーのプレフィックスを使用し、次の構文を使用することをお勧めします (記事内の例では、構文は最新のブラウザーでのみ使用されます)。

-webkit-box-shadow : 値 ; /* Safari 3.1 ～ 4、IOS 3.2 ～ 4.3、Android 2.1 ～ 3 */-moz-box-shadow : 値 ; /* Firefox 3.5 - 3.6 */ box-shadow : value ; /* 上の表 */

練習に移り、要素に 1 つの影を追加する簡単な例から始めましょう。

CSS での box-shadow プロパティの使用例

box-shadow:10px 10px 0px 赤;

クラス = "テスト2" >ボックスシャドウ:10px 10px 10px #777;

この例の結果:

複数のシャドウの使用

次の例では、複数のシャドウを使用したときに実現できる興味深い色の混合効果を検討することを提案します。

CSSで複数の影を使用する例（box-shadowプロパティ）

二固定の幅と高さのブロック (15em と 10em)、四辺にマージン (2em) を追加し、ブロックを整列できるようにブロックラインに設定します。
のために初めクラスでブロックする 。テスト私たちが示した 4要素のすべての側面に異なる影が表示されるように、水平方向と垂直方向の異なる影の値を使用して影を作成します。すべてのシャドウのぼかし半径は同じに設定されました。各影の色は異なり、事前定義された色を使用して指定されます。
のために 2番クラスでブロックする .test2私たちが示した 4水平方向と垂直方向のシャドウ値が異なるシャドウ。すべてのシャドウのブラー半径は同じに設定され、シャドウのストレッチは負に設定され、シャドウ自体が減少しました。各影の色は異なり、RGBA システムを使用して指定されます。

この例の結果:

画像に影を使用する

この記事の最後の例では、画像の影の使用に焦点を当てます。 HTML 要素の影を直接指定できるという事実にすぐに注目していただきたいと思います。これは機能しませんが、関心のある要素の背景として画像を指定し、必要な影をこの要素に割り当てることができます。

背景画像の操作については、教科書記事「」で詳しく説明します。影の使用の学習を終了するために、表面的に触れて、次の要素の背景として画像を使用します。例：

CSSで画像の影を使用する例

二幅と高さが固定されたブロック (237px と 232px)、すべての辺にマージン (2em) を追加し、ブロックを整列できるようにブロックラインに設定します。ブロックサイズ 237 ピクセル x 232 ピクセルを画像のサイズに設定したため、トレーニングのこの段階では、要素に合わせて画像を拡大縮小したり、後の段階で検討する予定の CSS プロパティに影響を与えたりする必要がなくなります (教科書の記事「」にあります）。
のために初めクラスでブロックする 。テスト水平方向と垂直方向のシャドウにゼロの値を指定しましたが、同時にぼかし半径を 50px に指定し、ストレッチ半径を 10px に設定して拡大しました。影の色は、あらかじめ定義された色 (紫) で示されました。さらに、宣言で inset キーワードを指定しました。これにより、影が要素内に収まります。言い換えれば、要素の内部の影を作成しました。
のために 2番クラスでブロックする .test2水平方向と垂直方向のシャドウにゼロの値を指定しましたが、同時にぼかし半径を 50px に指定し、ストレッチ半径を 10px に設定して拡大しました。影の色はRGBAモードで指定します。

この例の結果:

米。 98 CSSで画像に影を付ける例（box-shadowプロパティ）

トピックに関する質問とタスク

次のトピックに進む前に、練習課題を完了してください。

練習タスクを完了するのが難しい場合は、いつでも別のウィンドウで例を開いてページを調べて、どの CSS コードが使用されているかを理解することができます。

2016-2020 Denis Bolshakov、サイトに関するコメントや提案は [email protected] に送信できます。

要素に影を追加します。パラメータをカンマで区切って複数のシャドウを使用することができます。シャドウを適用するときは、リスト内の最初のシャドウがより高く、最後のシャドウがより低くなります。 border-radius プロパティを使用して要素の丸め半径が指定されている場合、影の角も丸くなります。影を追加すると要素の幅が増えるため、ブラウザに水平スクロールバーが表示される場合があります。

簡単な情報

構文

ボックスシャドウ: なし |<тень> [,<тень>]*

どこ<тень>:

差し込み<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>

指定

	説明	例
<тип>	値の型を示します。	<размер>
A&&B	値は指定された順序で出力される必要があります。	<размер> && <цвет>
あ \| B	提案された値 (A または B) から 1 つの値のみを選択する必要があることを示します。	通常 \| 小型株
\|\| B	各値は独立して使用することも、任意の順序で他の値と一緒に使用することもできます。	幅 \|\| カウント
	値をグループ化します。	[ 作物 \|\| クロス ]
*	0 回以上繰り返します。	[,<время>]*
+	1 回以上繰り返します。	<число>+
?	指定するタイプ、単語、またはグループはオプションです。	差し込み？
(A、B)	少なくとも A 回、B 回まで繰り返します。	<радиус>{1,4}
#	カンマで区切って 1 回以上繰り返します。	<время>#

価値観

none 影の追加をキャンセルします。 inset 要素の内側に影が描画されます。<сдвиг по x>要素に対するシャドウの水平方向のオフセット。このパラメータの正の値は影を右にシフトし、負の値は左にシフトします。<сдвиг по y>要素に対するシャドウの垂直方向のオフセット。正の値を指定すると影が下に移動し、負の値を指定すると影が上に移動します。<размытие>影のぼかし半径を設定します。この値が高いほど、影がより滑らかになり、より広く明るくなります。このパラメータが指定されていない場合、デフォルトは 0 になり、影はぼやけるのではなく鮮明になります。<растяжение>正の値を指定すると影が引き伸ばされ、負の値を指定すると影が圧縮されます。このパラメータが指定されていない場合、デフォルトは 0 で、影は要素と同じサイズになります。<цвет>利用可能な CSS 形式の影の色。デフォルトの影は黒です。

パラメーターをカンマで区切って、複数のシャドウを指定することができます。次の順序が考慮されます。リストの最初のシャドウは一番上に配置され、リストの最後のシャドウは一番下に配置されます。

例

ボックスシャドウ

柑橘類は南の茂みに生息するでしょうか？はい、しかし偽物です！

例の結果を図に示します。 1.

米。 1. 影の種類

オブジェクトモデル

物体.style.boxShadow

注記

バージョン 5.1 より前の Safari、バージョン 10.0 より前の Chrome、バージョン 4.0 より前の Android は、-webkit-box-shadow プロパティをサポートします。

バージョン 4.0 より前の Firefox は、-moz-box-shadow プロパティをサポートしています。

バージョン 9.0 より前の Internet Explorer は box-shadow プロパティをサポートしていません。代わりに、filter プロパティを使用できます。

フィルター: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

ここで: offX - 水平方向のシャドウオフセット。 offY — 垂直シャドウのオフセット。カラー — 影の色。

ドロップシャドウフィルターを使用すると、くっきりとしたシャープな影が得られるため、シャドウフィルターを使用してぼかし効果を得ることができます。

フィルター: progid:DXImageTransform.Microsoft.shadow(direction=120、color=#000000、Strength=10);

ここで: 方向 - 0 ～ 360°の影の方向角度。 color — 影の色。強度 — シャドウのオフセット (ピクセル単位)。

仕様

各仕様はいくつかの承認段階を経ます。

推奨事項 - この仕様は W3C によって承認されており、標準として推奨されています。
推薦候補 ( 可能な推奨事項) - 標準を担当するグループは、標準がその目標を満たしていることに満足していますが、標準を実装するには開発コミュニティからの支援が必要です。
提案された推奨事項推奨事項) - この段階で、文書は最終承認のために W3C 諮問委員会に提出されます。
Working Draft - コミュニティレビューのために議論および修正された、より成熟したバージョンのドラフト。
編集者の草案 ( 編集草案) - プロジェクト編集者によって変更が加えられた後の標準のドラフト版。
下書き（仕様草案) - 標準の最初の草案バージョン。