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.
<div class="box">border-box</div>
+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.
<div class="box">border-box</div>
<div class="box content-box">content-box</div>
html {
box-sizing: border-box;
@@ -495,10 +495,11 @@ li:not(:last-child) {
padding: 15px;
}
.reference:hover > .popout-menu,
-.reference:focus > .popout-menu {
+.reference:focus > .popout-menu,
+.reference:focus-within > .popout-menu {
visibility: visible;
}
-position: relative on the reference parent establishes a Cartesian positioning context for its child.position: absolute takes the popout menu out of the flow of the document and positions it in relation to the parent.left: 100% moves the the popout menu 100% of its parent's width from the left.visibility: hidden hides the popout menu initially and allows for transitions (unlike display: none)..reference:hover > .popout-menu means that when .reference is hovered over, select immediate children with a class of .popout-menu and change their visibility to visible, which shows the popout.✅ No caveats.
A nicer alternative to text-decoration: underline where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
+position: relative on the reference parent establishes a Cartesian positioning context for its child.position: absolute takes the popout menu out of the flow of the document and positions it in relation to the parent.left: 100% moves the the popout menu 100% of its parent's width from the left.visibility: hidden hides the popout menu initially and allows for transitions (unlike display: none)..reference:hover > .popout-menu means that when .reference is hovered over, select immediate children with a class of .popout-menu and change their visibility to visible, which shows the popout..reference:focus > .popout-menu means that when .reference is focused, the popout would be shown..reference:focus-within > .popout-menu ensures that the popout is shown when the focus is within the reference.✅ No caveats.
A nicer alternative to text-decoration: underline where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
.pretty-text-underline {
display: inline;
text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
diff --git a/index.html b/index.html
index 619adc8cf..852f85506 100644
--- a/index.html
+++ b/index.html
@@ -2008,7 +2008,8 @@ li:not(:last-child) {
padding: 15px;
}
.reference:hover > .popout-menu,
-.reference:focus > .popout-menu {
+.reference:focus > .popout-menu,
+.reference:focus-within > .popout-menu {
visibility: visible;
}
visibility: hidden hides the popout menu initially and allows for transitions (unlike display: none)..reference:hover > .popout-menu means that when .reference is hovered over, select immediate children with a class of .popout-menu and change their visibility to visible,
which shows the popout..reference:focus > .popout-menu means that when .reference is focused, the popout would be shown..reference:focus-within > .popout-menu ensures that the popout is shown when the focus is within the reference.