純粋な CSS を使用してカラフルでインテリジェントな影を実現する方法の詳細な説明

この記事では、純粋なCSSを使ってカラフルでインテリジェントな影を実現する方法を詳しく紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#前景要素から特定の色を継承するドロップ シャドウ効果を作成する方法を考えたことはありますか?この記事を読んでその方法を見つけてください!

私は数日前、Home Depot (Home Depot、American Home Depot Company、世界有数の住宅建築材料および資材の小売業者) の前を通りました。そのうちの 1 つは、テレビの後ろにある一連の電球で、テレビの前景画面に表示される色と同じような光を放ちます (下の写真に似ています)。

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

これを見た後、私の最初の自然な考えは、web 開発テクニックを使用して、前景色をシミュレートできるほど賢明なカラフルなシャドウを作成できないかということでした。事実は、この効果が CSS のみを使用して達成できることを証明しています。この記事では、その方法を見ていきます。 [学習ビデオ共有: 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.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.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.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 没有将你想提供的任意视觉意向转换为渲染目标位图的能力！

更多编程相关知识，请访问：编程视频！！

以上が純粋な CSS を使用してカラフルでインテリジェントな影を実現する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。