CSSはカラフルでスマートな影の効果を実現します

背景

前景要素から特定の色を継承する影の効果を作成する方法を知りたいと思ったことはありませんか?方法についてはこの記事をお読みください。

先日、 Home Depot歩いていたところ、そこでは販売中のスマートライトが大きく展示されていました💡 。そのうちの1つは、テレビの後ろに設置され、テレビの前面の画面に表示される色に近い光を投影する一連の電球で、下の写真に見られるようなものでした。

テレビの後ろで何が起こっているかに注目してください。テレビ画面の前景に表示される色は、ランプによって色付きの影の背景として投影されます。画面上の色が変わると、背景の投影色も変わります。本当にクールですよね？

これを見た後、最初に自然に頭に浮かんだ考えは、 web開発技術を使用して、前景色をシミュレートできるほどスマートなカラフルな影を作成できるのではないかということでした。この効果はCSSのみを使用して完全に実現可能であることがわかりました。この記事では、これをどのように実現できるかを見ていきます。

さあ始めましょう！

実現させる

次の段落でわかるように、 CSSのみを使用してスマートな色の影を作成するのは、最初は困難な作業のように思えるかもしれませんが、段階的に進み、難しい部分を小さな部分に分割していくと、すべてが理解しやすくなり、理解しやすくなります。次のセクションでは、次のような例を作成します。

表示されているのは、寿司🍣の写真と、その背後にある前景色に対応する影です。私たちが行っていることが動的であることを強調するために、影に脈動するアニメーション効果を追加しました。この実用的な例を参考にして、 HTMLとCSSのみを使用してすべてを実現する方法を詳しく見ていきましょう。

写真を表示

寿司🍣表示するためのHTML次のようになりますが、特別なことは何もありません。

<div class="parent">
  <div class="colorfulShadow 寿司"></div>
</div>

親div要素.parentがあり、その中に🍣を表示するために使用される子要素.suchiが含まれています。背景画像を使用して🍣インスタンス化します。.sushi .sushiの具体的なスタイル ルールは次のとおりです。

。寿司 {
  マージン: 100px;
  幅: 150ピクセル;
  高さ: 150px;
  背景画像: url("https://www.kirupa.com/icon/1f363.svg");
  背景繰り返し: 繰り返しなし;
  背景サイズ: 含む;
}

上記のスタイル ルールでは、 div幅と高さを150 * 150ピクセルに設定し、 background-imageと関連プロパティを設定しました。これで達成した結果を表示すると、次の図に示すような内容が表示されます。

影を作る

寿司🍣画像が表示されたので、さらに興味深い部分は影を定義することです。子疑似要素::afterを指定して影を定義します。これにより、 3処理が実行されます。

• 画像を含むdivすぐ後ろ。
• 親要素と同じ背景画像を継承します。
• フィルターはカラフルなdrop-shadow効果を作成します。

上記の 3 つの機能は、次の 2 つのスタイル ルールによって実装されます。

.colorfulShadow{
  位置: 相対的;
}
.colorfulShadow::after {
  コンテンツ： "";
  幅: 100%;
  高さ: 100%;
  位置: 絶対;
  背景: 継承;
  背景の位置: 中央 中央;
  フィルター: ドロップシャドウ(0px 0px 10px rgba(0, 0, 0, 0.50)) ぼかし(20px);
  Zインデックス: -1;
}

ここで少し時間を取って実装を確認し、各プロパティとそれに対応する値に細心の注意を払ってください。最も注目すべきはbackgroundプロパティとfilterプロパティです。 backgroundの値はinheritです。これは、親要素の背景値を継承することを意味します。

背景: 継承;

filterプロパティは、 drop-shadowとblur 2つのフィルター値を定義します。

フィルター: ドロップシャドウ(0px 0px 10px rgba(0, 0, 0, 0.50)) ぼかし(20px);

drop-shadowフィルターは、透明度50%の黒い影を設定します。 blurフィルターは、要素に20pxぼかし効果を設定します。これら 2 つのフィルターを組み合わせることで、最終的にカラフルな影を作成できます。これら 2 つのスタイル ルールが有効になると、以下に示すように、寿司🍣画像の背後にカラフルな影が表示されます。

私たちはこれまで多くのことを達成してきました。完全を期すために、カラフルな影を拡大縮小しながらアニメーション化したい場合は、それを実現するのに役立つ追加のCSSを次に示します。

.colorfulShadow{
  位置: 相対的;
}
.colorfulShadow::after {
  コンテンツ： "";
  幅: 100%;
  高さ: 100%;
  位置: 絶対;
  背景: 継承;
  背景の位置: 中央 中央;
  フィルター: ドロップシャドウ(0px 0px 10px rgba(0, 0, 0, 0.50)) ぼかし(20px);
  Zインデックス: -1;
  /* アニメーションの時間です! */
  アニメーション: 1 秒の 3 次ベジェ (.17, .67, .45, 1.32) を無限に交互に振動します。
}

@keyframes 振動 {
  から {
    変換: スケール(1, 1);
  }
  に {
    変換: スケール(1.3, 1.3);
  }
}

アニメーションをループさせずにインタラクティブ性を高めたい場合は、 CSS transitionを使用して、 hoverなどの影の動作を変更することもできます。強調するのが難しい点は、疑似要素をHTMLで作成された要素やJavaScript動的に作成された要素と同じように扱うことです。唯一の違いは、この要素は完全にCSSのみを使用して作成されることです。

結論は

疑似要素を使用すると、通常はHTMLとJavaScriptの領域内で実行される要素作成タスクをCSSを使用して作成できます。カラフルなスマート シャドウでは、背景画像が設定されている親要素に依存しています。これにより、ぼかし効果やドロップ シャドウを設定しながら、親の背景の詳細​​を継承できる子要素を簡単に定義できます。これはすべてうまく機能し、コピー アンド ペーストの作業を大幅に節約できますが、このアプローチはあまり柔軟性がありません。

背景画像を持つ単なる空の要素ではない空の要素にこのような影を適用したい場合はどうすればよいでしょうか?この影の効果を適用したいボタンやコンボボックスなどのHTML要素がある場合はどうすればよいでしょうか?解決策の 1 つは、 JavaScriptを利用してDOM内の対応する要素をコピーし、それをフォアグラウンド要素の下部に配置して、フィルターを適用することです。これも 1 つの方法です。これは機能しますが、 DOM要素を複製するというやや重いプロセスを考えるとぞっとします。さらに悪いことに、 JavaScriptは、提供された任意の視覚的意図をレンダリング ターゲット ビットマップに変換する機能がありません。 🥶

この記事は翻訳です。元のアドレスをご覧ください: https://www.kirupa.com/html5/creating_colorful_smart_shadows.htm
記事URL: https://www.cnblogs.com/dragonir/p/14758359.html 著者: dragonir

CSS でカラフルでスマートな影を実現する方法についての記事はこれで終わりです。CSS の影の実装に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。