[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS

背景

前景要素から特定の色を継承したシャドウ効果を作成する方法をご存知ですか？この記事を読んで、その方法を見つけてください。

先日、ホームセンターの前を通りかかりました( Home Depot ホームデポは、世界有数の住宅建築用品の小売業者）そこで、彼らが販売しているスマートライトを大々的に展示していたのです。 ???? そのひとつが、テレビの後ろに設置する一連の電球で、下の画像にあるような、テレビの前景画面に表示される色に近い色の光を投射するものです。

テレビの後ろで何が起こっているのかに注目してください。テレビ画面の手前に表示されている色は、照明によって色のついた陰影のある背景に投影されています。画面の色が変わると、背景の投影色も変わるのです。実にクールでしょう？

これを見た後、当然ながら最初に頭に浮かんだのは、このように web 開発技術により、前景色を模倣したカラフルな影を作ることができるのでしょうか？結論から言うと、前景色を模したカラフルな影を作るには CSS が、この効果を得ることは完全に可能です。今回は、その方法について見ていきましょう。

やってみよう

実現させる

次の段落で説明するように、一見すると CSS スマートなカラーシャドウを作るのは大変な作業に見えるかもしれませんが、段階を踏んで難しい部分を小さくしていくと、すべてが理解しやすく、消化しやすくなることがわかります。次のセクションでは、下図のような例を作成します。

見えているのは、お寿司 ???? の画像に、前景色に対応した影が後ろに付いています。動いていることを強調するために、影には脈打つようなアニメーションの効果が加えられています。この効果的な例を使って、次に HTML と CSS を使えば、すべてに命が吹き込まれます。

画像を表示する

寿司を表示する場合 ???? の HTML 以下は特別なことではありません。

<div class="parent">
  <div class="colorfulShadow sushi"></div>
</div>

私たちは、親 div 要素 .parent を含み、子要素 .suchi を表示するために使用されます。 ???? . これをインスタンス化するために、背景画像を ???? は、その .sushi 要素に対する具体的なスタイルルールは以下の通りです。

.sushi {
  margin: 100px;
  width: 150px;
  height: 150px;
  background-image: url("https://www.kirupa.com/icon/1f363.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

上記のスタイル・ルールでは div から 150 * 150 の幅と高さのピクセルを設定し background-image と関連する属性で、今実現した結果を表示すると、以下のようなものになります。

シャドウの作成

さて、お寿司を表示したところで ???? の画像で、より興味深いのは影を定義することです。を指定する副疑似要素を使用します。 ::after を行い、影を定義します。 3 ひとつだけ。

• 画像のある場所に直接設置 div 画像に続く
• 親要素と同じ背景を継承した背景画像です。
• カラフルな drop-shadow シャドー効果

上記3つの機能は、以下の2つのスタイルルールで実装されています。

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
}

この実装をざっと見て、それぞれのプロパティと対応する値に注意してください。最も注目すべきなのは background 属性と filter 属性があります。 background の値は inherit つまり、親要素の背景の値を継承します。

background: inherit;

filter 属性は、2つのフィルタ値を定義する。 drop-shadow と

blur
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0, 0.50)) blur(20px);

drop-shadow

私たちの 50% フィルタは blur 透明度のある黒い影 20px フィルターが設定されるのは、要素 ???? ぼかしの効果です。これら 2 つのフィルタの組み合わせは、最終的にカラフルな影を作り出します。これら 2 つのスタイル ルールが有効な場合、次のような画像が寿司に表示されることがわかります。 CSS 画像の後ろにある色のついた影。

<イグ

ここまでで、だいぶ達成できました。完全なものにするために、ズームインとズームアウトのアニメーションを使ったカラフルな影が欲しい場合は、次のような追加の .colorfulShadow { position: relative; } .colorfulShadow::after { content: ""; width: 100%; height: 100%; position: absolute; background: inherit; background-position: center center; filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0, 0.50)) blur(20px); z-index: -1; /* animation time! animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate; } @keyframes oscillate { from { transform: scale(1, 1); } to { transform: scale(1.3, 1.3); } } を使えば実現できます。

CSS transition

ループするアニメーション効果を使わずに、インタラクティブ性を高めたい場合は hover のように、シャドウの挙動を変えることができます。 HTML の操作で行うことができます。強調すべき難点は、擬似要素はあたかも JavaScript を作成したり CSS 要素は、動的に作成される要素と同じですが、唯一の違いは、この要素は完全に CSS が作成されました!

まとめ

この擬似要素によって HTML で通常見られる擬似要素を作成します。 JavaScript と HTML 要素の作成作業をドメイン内で行います。カラフルなスマートシャドウの場合、親要素が背景画像のセットを持つことに依存しています。そのため、親の背景の詳細を継承し、ぼかしや投影効果を設定する子要素を簡単に定義することができます。これはとても良いことで、コピー＆ペーストの作業も軽減されますが、この方法はあまり柔軟ではありません。

このようなシャドウを、背景画像だけでない空の要素に適用したい場合はどうすればいいのでしょうか。例えば JavaScript ボタンやコンボボックスのような要素で、このシャドウ効果を適用したいのですが？一つの解決策は DOM をコピーします。 DOM を対応する要素の中に入れて、それを前景要素の下に置いて、フィルターを適用する、というのも一つの方法です。この方法でも効果は得られますが、ちょっと繰り返しが多いかなという気がしています。 JavaScript 要素は、身震いするほど重い処理です。さらに悪いことに、この JavaScript は、提供したい視覚的な意図をレンダリング対象のビットマップに変換する機能がないのです! ????

この記事は翻訳です。オリジナルは、こちらをご覧ください。 https://www.kirupa.com/html5/creating_colorful_smart_shadows.htm
この記事のアドレス https://www.cnblogs.com/dragonir/p/14758359.html 著者：ドラゴニア

カラフルな、インテリジェントな影を達成するためにCSSに関するこの記事はここに導入され、より関連する影の内容を達成するためにCSSは、スクリプトホーム以前の記事を検索してくださいまたは次の関連記事を閲覧を継続、私はあなたが将来的にもっとスクリプトホームをサポートして願っています！.