CSS を使った動的な影の作成

はじめに

この実験では、CSSを使って動的な影を作成する方法を探ります。::after疑似要素と、background、filter、opacity、z-indexなどのさまざまなCSSプロパティを使って、要素自体の色に基づいてボックスシャドウに似た効果を作成する方法を学びます。この実験が終わるとき、あなたは自分のデザインにさらなる深さと立体感を追加することができるようになります。

Skills Graph

動的な影

VM内には既にindex.htmlとstyle.cssが用意されています。

要素の色に基づく影を作成するには、次の手順に従ってください。

1. position: absoluteを使用し、widthとheightを100%に設定した::after疑似要素を使用して、親要素内の利用可能なスペースを埋めます。
2. background: inheritを使用して、親要素のbackgroundを継承します。
3. topを使用して疑似要素をわずかにオフセットします。その後、filter: blur()を使用して影を作成し、opacityを設定して半透明にします。
4. z-index: -1を設定することで疑似要素を親要素の後ろに配置します。親要素にはz-index: 1を設定します。

以下は、HTMLとCSSのコードの例です。

<div class="dynamic-shadow"></div>

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}

.dynamic-shadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは動的な影の実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習することができます。