andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update snippets

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-20 13:05:10 +03:00
parent 2d1f637692
commit d35dab24c3
10 changed files with 43 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
snippets/dynamic-shadow.md
View File

@ -18,7 +18,7 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
z-index: 1;
}
.dynamic-shadow::after {
.dynamic-shadow:after {
content: '';
width: 100%;
height: 100%;
@ -33,17 +33,15 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
#### Explanation
1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.
2. `z-index: 1` establishes a new stacking context.
3. `::after` defines a pseudo-element.
4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
5. `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
6. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
7. `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
8. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
9. `opacity: 0.7` makes the pseudo-element partially transparent.
10. `z-index: -1` positions the pseudo-element behind the parent but in front of the background.
- `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.
#### Browser support
- https://caniuse.com/#feat=css-filters