はじめに
この実験では、CSSを使って動的な影を作成する方法を探ります。::after
疑似要素と、background
、filter
、opacity
、z-index
などのさまざまなCSSプロパティを使って、要素自体の色に基づいてボックスシャドウに似た効果を作成する方法を学びます。この実験が終わるとき、あなたは自分のデザインにさらなる深さと立体感を追加することができるようになります。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、CSSを使って動的な影を作成する方法を探ります。::after
疑似要素と、background
、filter
、opacity
、z-index
などのさまざまなCSSプロパティを使って、要素自体の色に基づいてボックスシャドウに似た効果を作成する方法を学びます。この実験が終わるとき、あなたは自分のデザインにさらなる深さと立体感を追加することができるようになります。
VM内には既にindex.html
とstyle.css
が用意されています。
要素の色に基づく影を作成するには、次の手順に従ってください。
position: absolute
を使用し、width
とheight
を100%
に設定した::after
疑似要素を使用して、親要素内の利用可能なスペースを埋めます。background: inherit
を使用して、親要素のbackground
を継承します。top
を使用して疑似要素をわずかにオフセットします。その後、filter: blur()
を使用して影を作成し、opacity
を設定して半透明にします。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でさらに多くの実験を練習することができます。