â‘ Dynamic Shadow
index.html
and style.css
have already been provided in the VM.
To create a shadow that is based on the colors of an element, follow these steps:
Use the
::after
pseudo-element withposition: absolute
andwidth
andheight
set to100%
to fill the available space in the parent element.Inherit the
background
of the parent element by usingbackground: inherit
.Slightly offset the pseudo-element using
top
. Then, usefilter: blur()
to create a shadow, and setopacity
to make it semi-transparent.Position the pseudo-element behind its parent by setting
z-index: -1
. Setz-index: 1
on the parent element.
Here's an example HTML and CSS code:
<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;
}
Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.
â‘¡ Summary
Congratulations! You have completed the Dynamic Shadow lab. You can practice more labs in LabEx to improve your skills.
Want to learn more?
- 🚀 Practice Dynamic CSS Shadows Creation
- 🌳 Learn the latest CSS Skill Trees
- 📖 Read More CSS Tutorials
Join our Discord or tweet us @WeAreLabEx ! 😄
Top comments (0)