[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 の後ろにあります。
• は、親要素と同じ背景画像を継承します。
• は、カラフルな ???? シャドー効果

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

::after

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

drop-shadow

.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; } 属性は、2つのフィルタ値を定義する。 background と {コード

{{コード

私たちの {コード フィルタは filter 透明度のある黒い影。 background を設定するためのフィルターです。 inherit ぼかしの効果です。これら2つのフィルタの組み合わせは、最終的にカラフルな影を作り出します。これら2つのスタイルルールが有効な場合、寿司に次のような画像が表示されることが確認できます。 background: inherit; 画像の背後にある色のついた影は

ここまでで、かなりのことが実現できました。念のため、カラフルな影にズームイン・ズームアウトのアニメーション効果を持たせたい場合は、以下のように追加の filter を使えば実現できます。

{{コード

ループするアニメーション効果を使わずに、インタラクティブ性を高めたい場合は drop-shadow のように、シャドウの挙動を変更することができます。 blur filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0, 0.50)) blur(20px); の操作になります。強調すべき難点は、擬似要素が drop-shadow を作成したり {コード {コード 要素のみで完全に作成される点が異なります。 50% !

結論

擬似要素によって blur を使用すると、通常、疑似要素が 20px と ???? 要素の作成作業をドメイン内で行うことができます。カラフルなスマートシャドウの場合、親要素が背景画像のセットを持つことに依存しています。そのため、親の背景の詳細を継承し、ぼかしや投影効果を設定する子要素を簡単に定義することができます。この方法は、コピー＆ペーストの手間を省くことができ、とても便利ですが、柔軟性に欠けます。

このようなシャドウを、背景画像だけでない空の要素に適用したい場合はどうすればいいのでしょうか。もし私が 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 提供したい任意のビジュアルインテントをレンダリング対象のビットマップに変換する機能がないのだ! ????

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

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