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

improve(dynamic-shadow.md)

Browse Source
This commit is contained in:
atomiks
2018-03-31 23:31:16 +11:00
parent 959d3f5b9f
commit 508dea6a8f
4 changed files with 27 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
snippets/dynamic-shadow.md
View File

@ -5,23 +5,18 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
#### HTML
```html
<div class="dynamic-shadow-parent">
<div class="dynamic-shadow"></div>
</div>
<div class="dynamic-shadow"></div>
```
#### CSS
```css
.dynamic-shadow-parent {
position: relative;
z-index: 1;
}
.dynamic-shadow {
position: relative;
width: 10rem;
height: 10rem;
background: linear-gradient(75deg, #6d78ff, #00ffb8);
z-index: 1;
}
.dynamic-shadow::after {
content: '';
@ -39,21 +34,16 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__dynamic-shadow-parent">
<div class="snippet-demo__dynamic-shadow"></div>
</div>
<div class="snippet-demo__dynamic-shadow"></div>
</div>
<style>
.snippet-demo__dynamic-shadow-parent {
position: relative;
z-index: 1;
}
.snippet-demo__dynamic-shadow {
position: relative;
width: 10rem;
height: 10rem;
background: linear-gradient(75deg, #6d78ff, #00ffb8);
z-index: 1;
}
.snippet-demo__dynamic-shadow::after {
content: '';
@ -70,20 +60,16 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
#### Explanation
The snippet requires a somewhat complex case of stacking contexts to get right, such that the pseudo-element
will be positioned underneath the element itself while still being visible.
1. `position: relative` on the parent establishes a Cartesian positioning context for child elements.
1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.
2. `z-index: 1` establishes a new stacking context.
3. `position: relative` on the child establishes a positioning context for pseudo-elements.
4. `::after` defines a pseudo-element.
5. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
6. `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
7. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
8. `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
9. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
10. `opacity: 0.7` makes the pseudo-element partially transparent.
11. `z-index: -1` positions the pseudo-element behind the parent.
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.
#### Browser support