46 lines
1.4 KiB
Markdown
46 lines
1.4 KiB
Markdown
---
|
|
title: Dynamic shadow
|
|
tags: visual,intermediate
|
|
---
|
|
|
|
Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
|
|
|
|
```html
|
|
<div class="dynamic-shadow"></div>
|
|
```
|
|
|
|
```css
|
|
.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;
|
|
}
|
|
```
|
|
|
|
#### Explanation
|
|
|
|
- `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.
|
|
- `z-index: 1` establishes a new stacking context.
|
|
- `:after` defines a pseudo-element.
|
|
- `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
|
|
- `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
|
|
- `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
|
|
- `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
|
|
- `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
|
|
- `opacity: 0.7` makes the pseudo-element partially transparent.
|
|
- `z-index: -1` positions the pseudo-element behind the parent but in front of the background.
|