Note: 1rem is usually 16px.
@keyframes defines an animation that has two states, where the element changes opacity and is translated up on the 2D plane using transform: translateY().
.bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.
.bouncing-loader > div, targets the three child divs of the parent to be styled. The divs are given a width and height of 1rem, using border-radius: 50% to turn them from squares to circles.
margin: 3rem 0.2rem specifies that each circle has a top/bottom margin of 3rem and left/right margin of 0.2rem so that they do not directly touch each other, giving them some breathing room.
animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
nth-child(n) targets the element which is the nth child of its parent.
animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
✅ No caveats.
Resets the box-model so that widths and heights are not affected by their borders or padding.
html {
+Note: 1rem is usually 16px.
@keyframes defines an animation that has two states, where the element changes opacity and is translated up on the 2D plane using transform: translateY().
.bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.
.bouncing-loader > div, targets the three child divs of the parent to be styled. The divs are given a width and height of 1rem, using border-radius: 50% to turn them from squares to circles.
margin: 3rem 0.2rem specifies that each circle has a top/bottom margin of 3rem and left/right margin of 0.2rem so that they do not directly touch each other, giving them some breathing room.
animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
nth-child(n) targets the element which is the nth child of its parent.
animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
✅ No caveats.
Resets the box-model so that widths and heights are not affected by their borders or padding.
html {
box-sizing: border-box;
}
*,
@@ -149,18 +149,13 @@ li::before {
height: 30px;
animation: donut-spin 1.2s linear infinite;
}
-Use a semi-transparent border for the whole element, except one side that will serve as the loading indicator for the donut. Use animation to rotate the element.
⚠️ Requires prefixes for full support.
Creates a shadow similar to box-shadow but based on the colors of the element itself.
<div class="dynamic-shadow-parent">
- <div class="dynamic-shadow"></div>
-</div>
-.dynamic-shadow-parent {
- position: relative;
- z-index: 1;
-}
-.dynamic-shadow {
+Use a semi-transparent border for the whole element, except one side that will serve as the loading indicator for the donut. Use animation to rotate the element.
⚠️ Requires prefixes for full support.
Creates a shadow similar to box-shadow but based on the colors of the element itself.
<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: '';
@@ -173,7 +168,7 @@ li::before {
opacity: 0.7;
z-index: -1;
}
-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.
position: relative on the parent establishes a Cartesian positioning context for child elements.z-index: 1 establishes a new stacking context.position: relative on the child establishes a positioning context for pseudo-elements.::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.⚠️ Requires prefixes for full support.
Variables that can be reused for transition-timing-function properties, more powerful than the built-in ease, ease-in, ease-out and ease-in-out.
<div class="easing-variables"></div>
+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.⚠️ Requires prefixes for full support.
Variables that can be reused for transition-timing-function properties, more powerful than the built-in ease, ease-in, ease-out and ease-in-out.
<div class="easing-variables"></div>
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
diff --git a/index.html b/index.html
index 89a5d54c0..096080923 100644
--- a/index.html
+++ b/index.html
@@ -779,19 +779,14 @@ in any specification.
Dynamic shadow
Creates a shadow similar to box-shadow but based on the colors of the element itself.
- HTML
<div class="dynamic-shadow-parent">
- <div class="dynamic-shadow"></div>
-</div>
+ HTML
<div class="dynamic-shadow"></div>
- CSS
.dynamic-shadow-parent {
- position: relative;
- z-index: 1;
-}
-.dynamic-shadow {
+ CSS
.dynamic-shadow {
position: relative;
width: 10rem;
height: 10rem;
background: linear-gradient(75deg, #6d78ff, #00ffb8);
+ z-index: 1;
}
.dynamic-shadow::after {
content: '';
@@ -807,20 +802,15 @@ in any specification.
Demo
-
-
-
+
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.
- position: relative on the parent establishes a Cartesian positioning context for child elements.position: relative on the element establishes a Cartesian positioning context for psuedo-elements.z-index: 1 establishes a new stacking context.position: relative on the child establishes a positioning context for pseudo-elements.::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.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.z-index: -1 positions the pseudo-element behind the parent but in front of the background.
Browser support
diff --git a/snippets/dynamic-shadow.md b/snippets/dynamic-shadow.md
index 59b447275..e18b586a2 100644
--- a/snippets/dynamic-shadow.md
+++ b/snippets/dynamic-shadow.md
@@ -5,23 +5,18 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
#### HTML
```html
-
-
-
+
```
#### 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
-
-
-
+