ボックスシャドウでCSSのみをオーバーレイする方法

コンテンツオーバーレイ 現代のWebデザインの重要な部分です。彼らはあなたを助けます 要素を隠す Webページ上、およびそれ以降 - ユーザーの承認を得て - それを明らかに, 背後のボタンなど、追加の情報やコントロールを表示する.

典型的なオーバーレイは 半透明, とともに 無地の背景色 （通常は黒）、ユーザーが表示したり操作したりするためのテキストやボタンがあります。相互作用（クリックまたはホバー）が発生した後、オーバーレイ 削除されてコンテンツが表示されます その下に.

この記事では、次のことを見ていきます。 色付きのオーバーレイを画像に追加する 純粋なCSSを使用して。下記のデモで最終結果を見ることができます。画像を重ねるとポケモンが見えます。この記事では画像について説明しますが、ここで紹介する技法は他のコンテンツタイプ（テキストブロックなど）にも安全に適用できます。.

余分なHTML要素を追加しないでください

オーバーレイは頻繁にによって作成されます 余分なHTML要素を配置する と 不透明度 1未満の値 カバーする要素の真上. 問題は、このテクニックには 追加の オーバーレイの要素（または擬似要素）.

あなたがHTMLサイズの方法に慣れていないのであれば、オーバーレイのための余分な要素を持つことはおそらく大したことではないでしょう。しかし持っている 分ける 要素とそのオーバーレイのスタイルルールはCSSの読みやすさと保守性を損なう.

コードを整理し、HTMLのアウトラインを乱さないようにするには、CSSのみのソリューションを使用することをお勧めします。.

でオーバーレイを作成 ボックスシャドウ

では、どのようにして実際にCSSのみのオーバーレイを作成できるのでしょうか。の助けを借りて ボックスシャドウ CSSプロパティボックスシャドウはこの仕事に最適です。 要素を覆う暗い影?

ボックスシャドウには、というプロパティ値があります。 差し込み, 影が表示されます 箱の枠の内側.

影のサイズが要素の幅と高さの半分または半分を超えるインセットbox-shadowは、次のような影を作成します。 をカバー 全体 素子.

 .ボックス幅：200ピクセル;高さ：200ピクセル。ボックスシャドウ：グリーン0 0 0 100ピクセルのインセット。  

通常オーバーレイなので 透明度がある, 箱の影にも追加する必要があります。これを使用して行うことができます。 rgba（） 影の色に対する関数.

の RGB rgbaの一部は、赤、緑、青のカラーチャンネル値を表します。 ある を表します アルファチャンネル, どちらですか 透明性に責任がある.

アルファチャンネルの場合、値1は 不透明色, 0は 完全に透明な色.

ボックスシャドウのRGBAカラー値のアルファチャンネルに0〜1の値を割り当てることで、次のことができます。 半透明のオーバーレイを作成する.

デモ用のコードを作成する

私たちのデモは、さまざまなポケモンの画像と名前を表示します。ここでは、デモの最初のポケモンであるBulbasaurのコードだけを作成します。他のコードも同じ方法で作成されます（Codepenでは、それらのコードもチェックアウトできます）。.

HTML

HTMLの場合、必要なことは 箱を作る CSSで他のすべてを追加します.

CSS

以下のCSSでは、 .ポケットモンスター 要素はポケモン画像を表示し、 .ポケモン:: after 擬似要素はポケモンの名前を運ぶ.

以来 ボックスシャドウ 財産 複数の値を取ることができます のために 複数の影を描画する, オーバーレイの影の他に、私は他の灰色の影を追加しました。 .ポケットモンスター そして .ポケモン：ホバー 美学のための要素.

 / *ポケモンの写真* / .pokemon width：200px;高さ：200ピクセル。 / *フレックスボックスを使用してコンテンツを中央に配置する* / display：flex;内容を正当化する：中央。整列項目：中央。 / * overlay * / box-shadow：0 0 0 100ピクセルのインセット、0 0 5ピクセルのグレー。 / *ホバーアウト遷移* / transition：box-shadow 1s; / *ポケモン名* / .pokemon :: after width：80％;身長：80％。表示ブロック;フォント：16pt 'bookman old syle';カラー：ホワイト。ボーダー：2pxソリッド。 text-align：center。 / *フレックスボックスを使用してコンテンツを中央に配置する* / display：flex;内容を正当化する：中央。整列項目：中央。 / *遷移のホバーアウト* / transition：不透明度1秒0.5秒。 * / .pokemon：hover transition：box-shadow 1s;;ボックスシャドウ：0 0 0 5ピクセルのインセット、0 0 5ピクセルのグレー、0 0 10ピクセルのグレーのインセット。 * / .pokemon：hover :: after transition：opacity .5s; / *ホバーでポケモンの名前を隠す不透明度：0。  

ときに .ポケットモンスター 要素はホバーされており、その影はその背後にある画像を明らかにするために変更する必要があります.

あなたはそれを見ることができます .ポケモン：ホバー セレクタは、オーバーレイを削除する新しいボックスシャドウを取得します。 .ポケモン：hover :: after セレクタを使ってポケモンの名前を隠します。 不透明度 財産.

あなたはまた気づいたかもしれません カラー値がない オーバーレイボックスの影に .ポケットモンスター そして .ポケモン：ホバー スタイルルール個々のポケモンのオーバーレイボックスの影の色を指定する必要があります 独自のスタイルルールで, それらはすべて互いに異なるので.

として ボックスシャドウ 手書きプロパティはありません, 影の色は設定できません 個別に のようなもので, ボックスシャドウカラー;代わりに - 私たちは 色 財産.

デフォルトでは、 色 プロパティ、その値は ボーダー、アウトライン、およびボックスシャドウカラーに適用されます。 同様に。だから、あなたは単に使用することができます 色 ボックスシャドウに色を追加するプロパティ.

 #bulbasaur background-image：url（https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg）; / *ボックスシャドウカラーに使用されるカラー値* / color：rgba（71、121、94、0.9）; #bulbasaur :: after / *ポケモン名* / content： 'Bulbasaur';  

オーバーレイシャドウの色は前述のものを使います。 rgba（） オーバーレイを透明にするためのアルファ値が0.9の関数.

オーバーレイボックスの影の色とは別に、上記のCSSは各ポケモンに個別のルールを追加します。 背景画像 そして名前.

これで、CSS専用のカラー画像オーバーレイの準備が整いました。下のペンにあるすべてのポケモンのコードを見てください。.