LabEx
ログイン登録

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

Beginner

This tutorial is from open-source community. Access the source code

はじめに

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 94%です。学習者から 100% の好評価を得ています。

動的な影

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 でさらに多くの実験を練習することができます。