diff --git a/docs/blob.9c6ecde4.png b/docs/blob.0b90d97e.png similarity index 100% rename from docs/blob.9c6ecde4.png rename to docs/blob.0b90d97e.png diff --git a/docs/favicon-32x32.7c1b17bc.png b/docs/favicon-32x32.7c1b17bc.png new file mode 100644 index 000000000..3ce4960e3 Binary files /dev/null and b/docs/favicon-32x32.7c1b17bc.png differ diff --git a/docs/favicon-32x32.80cc02ab.png b/docs/favicon-32x32.80cc02ab.png deleted file mode 100644 index ba68eb7be..000000000 Binary files a/docs/favicon-32x32.80cc02ab.png and /dev/null differ diff --git a/docs/index.html b/docs/index.html index 162e2d22d..870310e79 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,4 +1,4 @@ - 30 Seconds of CSS

30 Seconds of CSS

A curated collection of useful CSS snippets you can understand in 30 seconds or less.

Star

Bouncing loaderanimation

Creates a bouncing loader animation.

HTML

<div class="bouncing-loader">
+    30 Seconds of CSS                   
 
 
    
  
30 Seconds of CSS
 
 A curated collection of useful CSS snippets you can understand in 30 seconds or less. 
 
 Star 
 
 
 
 
 
  
 
Bouncing loaderanimation
 
Creates a bouncing loader animation.
 
HTML
<div class="bouncing-loader">
   <div></div>
   <div></div>
   <div></div>
@@ -27,7 +27,7 @@
 .bouncing-loader > div:nth-child(3) {
   animation-delay: 0.4s;
 }
-
 
Demo
 
 
 
 
 
 
 
  
Explanation
 
Note: 1rem is usually 16px.
 
     
  1.  
    @keyframes defines an animation that has two states, where the element changes opacity and is translated up on the 2D plane using transform: translate3d(). Using a single axis translation on transform: translate3d() improves the performance of the animation.
     
    2.  
  2.  
    .bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.
     
    3.  
  3.  
    .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.
     
    4.  
  4.  
    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.
     
    5.  
  5.  
    animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
     
    6.  
  6.  
    nth-child(n) targets the element which is the nth child of its parent.
     
    7.  
  7.  
    animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
     
    8.  
 
Browser support
 
 
 95.3% 
 
 
✅ No caveats.
   
 
 
Box-sizing resetlayout
 
Resets the box-model so that widths and heights are not affected by their borders or padding.
 
HTML
<div class="box">border-box</div>
+
 
Demo
 
 
 
 
 
 
 
  
Explanation
 
Note: 1rem is usually 16px.
 
     
  1.  
    @keyframes defines an animation that has two states, where the element changes opacity and is translated up on the 2D plane using transform: translate3d(). Using a single axis translation on transform: translate3d() improves the performance of the animation.
     
    2.  
  2.  
    .bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.
     
    3.  
  3.  
    .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.
     
    4.  
  4.  
    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.
     
    5.  
  5.  
    animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
     
    6.  
  6.  
    nth-child(n) targets the element which is the nth child of its parent.
     
    7.  
  7.  
    animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
     
    8.  
 
Browser support
 
 
 95.3% 
 
 
✅ No caveats.
   
 
 
Box-sizing resetlayout
 
Resets the box-model so that widths and heights are not affected by their borders or padding.
 
HTML
<div class="box">border-box</div>
 <div class="box content-box">content-box</div>
 
 
CSS
html {
   box-sizing: border-box;
@@ -270,7 +270,7 @@ li::before {
   display: flex;
   justify-content: space-between;
 }
-
 
Demo
 
 
 
Item1
 
Item2
 
Item3
 
 
  
Explanation
 
     
  1. display: flex enables flexbox.
    2.  
  2. justify-content: space-between evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
    3.  
 
Alternatively, use justify-content: space-around to distribute the children with space around them, rather than between them.
 
Browser support
 
 
 98.1% 
 
 
⚠️ Needs prefixes for full support.
   
 
 New 
Fit image in containerlayoutvisual
 
Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the background-size property.
 
HTML
<img class="image image-contain" src="https://picsum.photos/600/200">
+
 
Demo
 
 
 
Item1
 
Item2
 
Item3
 
 
  
Explanation
 
     
  1. display: flex enables flexbox.
    2.  
  2. justify-content: space-between evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
    3.  
 
Alternatively, use justify-content: space-around to distribute the children with space around them, rather than between them.
 
Browser support
 
 
 98.1% 
 
 
⚠️ Needs prefixes for full support.
   
 
 New 
Fit image in containerlayoutvisual
 
Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the background-size property.
 
HTML
<img class="image image-contain" src="https://picsum.photos/600/200">
 <img class="image image-cover" src="https://picsum.photos/600/200">
 
 
CSS
.image {
   background: #34495e;
@@ -366,7 +366,7 @@ el.style.setProperty('--max-height', height + 'px')
   transform: scaleX(1);
   transform-origin: bottom left;
 }
-
 
Demo
 
 
Hover this text to see the effect!
 
  
Explanation
 
     
  1. display: inline-block makes the block p an inline-block to prevent the underline from spanning the entire parent width rather than just the content (text).
    2.  
  2. position: relative on the element establishes a Cartesian positioning context for pseudo-elements.
    3.  
  3. ::after defines a pseudo-element.
    4.  
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
    5.  
  5. width: 100% ensures the pseudo-element spans the entire width of the text block.
    6.  
  6. transform: scaleX(0) initially scales the pseudo element to 0 so it has no width and is not visible.
    7.  
  7. bottom: 0 and left: 0 position it to the bottom left of the block.
    8.  
  8. transition: transform 0.25s ease-out means changes to transform will be transitioned over 0.25 seconds with an ease-out timing function.
    9.  
  9. transform-origin: bottom right means the transform anchor point is positioned at the bottom right of the block.
    10.  
  10. :hover::after then uses scaleX(1) to transition the width to 100%, then changes the transform-origin to bottom left so that the anchor point is reversed, allowing it transition out in the other direction when hovered off.
    11.  
 
Browser support
 
 
 95.4% 
 
 
✅ No caveats.
   
 
 New 
Last item with remaining available heightlayout
 
Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.
 
HTML
<div class="container">
+
 
Demo
 
 
Hover this text to see the effect!
 
  
Explanation
 
     
  1. display: inline-block makes the block p an inline-block to prevent the underline from spanning the entire parent width rather than just the content (text).
    2.  
  2. position: relative on the element establishes a Cartesian positioning context for pseudo-elements.
    3.  
  3. ::after defines a pseudo-element.
    4.  
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
    5.  
  5. width: 100% ensures the pseudo-element spans the entire width of the text block.
    6.  
  6. transform: scaleX(0) initially scales the pseudo element to 0 so it has no width and is not visible.
    7.  
  7. bottom: 0 and left: 0 position it to the bottom left of the block.
    8.  
  8. transition: transform 0.25s ease-out means changes to transform will be transitioned over 0.25 seconds with an ease-out timing function.
    9.  
  9. transform-origin: bottom right means the transform anchor point is positioned at the bottom right of the block.
    10.  
  10. :hover::after then uses scaleX(1) to transition the width to 100%, then changes the transform-origin to bottom left so that the anchor point is reversed, allowing it transition out in the other direction when hovered off.
    11.  
 
Browser support
 
 
 95.4% 
 
 
✅ No caveats.
   
 
 New 
Last item with remaining available heightlayout
 
Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.
 
HTML
<div class="container">
   <div>Div 1</div>
   <div>Div 2</div>
   <div>Div 3</div>
@@ -575,7 +575,14 @@ li:not(:last-child) {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
     Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
-
 
Demo
 
 
This text uses the system font.
 
  
Explanation
 
The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).
 
     
  1. -apple-system is San Francisco, used on iOS and macOS (not Chrome however)
    2.  
  2. BlinkMacSystemFont is San Francisco, used on macOS Chrome
    3.  
  3. Segoe UI is used on Windows 10
    4.  
  4. Roboto is used on Android
    5.  
  5. Oxygen-Sans is used on GNU+Linux
    6.  
  6. Ubuntu is used on Linux
    7.  
  7. "Helvetica Neue" and Helvetica is used on macOS 10.10 and below (wrapped in quotes because it has a space)
    8.  
  8. Arial is a font widely supported by all operating systems
    9.  
  9. sans-serif is the fallback sans-serif font if none of the other fonts are supported
    10.  
 
Browser support
 
 
 99+% 
 
 
✅ No caveats.
  
 
 New 
Toggle switchvisualinteractivity
 
Creates a toggle switch with CSS only.
 
HTML
<input type="checkbox" id="toggle" class="offscreen" />
+
 
Demo
 
 
This text uses the system font.
 
  
Explanation
 
The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).
 
     
  1. -apple-system is San Francisco, used on iOS and macOS (not Chrome however)
    2.  
  2. BlinkMacSystemFont is San Francisco, used on macOS Chrome
    3.  
  3. Segoe UI is used on Windows 10
    4.  
  4. Roboto is used on Android
    5.  
  5. Oxygen-Sans is used on GNU+Linux
    6.  
  6. Ubuntu is used on Linux
    7.  
  7. "Helvetica Neue" and Helvetica is used on macOS 10.10 and below (wrapped in quotes because it has a space)
    8.  
  8. Arial is a font widely supported by all operating systems
    9.  
  9. sans-serif is the fallback sans-serif font if none of the other fonts are supported
    10.  
 
Browser support
 
 
 99+% 
 
 
✅ No caveats.
  
 
 
Text decoration wavyvisual
 
Creates a Text decoration wavy.
 
HTML
<a href="#">I'm a link</a>
+
 
CSS
a {
+  text-decoration: underline wavy orange;
+}
+a:hover {
+  text-decoration: underline wavy orangered;
+}
+
 
Demo
 
 I'm a link 
  
Explanation
 
wavy draws a wavy line.
 
wavy is a value of text-decoration-style CSS property that sets the style of the lines specified by text-decoration-line.
 
text-decoration is a shorthand property for the various text decoration properties: text-decoration-color, text-decoration-style andtext-decoration-line are used.
 
Browser support
 
 
 83.1% 
 
 
✅ No caveats.
   
 
 New 
Toggle switchvisualinteractivity
 
Creates a toggle switch with CSS only.
 
HTML
<input type="checkbox" id="toggle" class="offscreen" />
 <label for="toggle" class="switch"></label>
 
 
CSS
.switch {
   position: relative;
@@ -638,7 +645,7 @@ input[type='checkbox']:checked + .switch {
   text-overflow: ellipsis;
   width: 200px;
 }
-
 
Demo
 
 
If I exceed one line's width, I will be truncated.
 
  
Explanation
 
     
  1. overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
    2.  
  2. white-space: nowrap prevents the text from exceeding one line in height.
    3.  
  3. text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
    4.  
  4. width: 200px; ensures the element has a dimension, to know when to get ellipsis
    5.  
 
Browser support
 
 
 98.4% 
 
 
⚠️ Only works for single line elements.
   
 
 New 
Zebra striped listvisual
 
Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.
 
HTML
<ul>
+
 
Demo
 
 
If I exceed one line's width, I will be truncated.
 
  
Explanation
 
     
  1. overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
    2.  
  2. white-space: nowrap prevents the text from exceeding one line in height.
    3.  
  3. text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
    4.  
  4. width: 200px; ensures the element has a dimension, to know when to get ellipsis
    5.  
 
Browser support
 
 
 98.4% 
 
 
⚠️ Only works for single line elements.
   
 
 New 
Zebra striped listvisual
 
Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.
 
HTML
<ul>
   <li>Item 01</li>
   <li>Item 02</li>
   <li>Item 03</li>
diff --git a/docs/leaves.dcfeae1d.svg b/docs/leaves.9711e0f6.svg
similarity index 100%
rename from docs/leaves.dcfeae1d.svg
rename to docs/leaves.9711e0f6.svg
diff --git a/docs/logo.f81741a3.png b/docs/logo.0fe29f19.png
similarity index 100%
rename from docs/logo.f81741a3.png
rename to docs/logo.0fe29f19.png
diff --git a/docs/new.cdde38b9.svg b/docs/new.3ebb1f32.svg
similarity index 100%
rename from docs/new.cdde38b9.svg
rename to docs/new.3ebb1f32.svg
diff --git a/docs/opengraph.a501bc49.png b/docs/opengraph.a501bc49.png
new file mode 100644
index 000000000..9540b7493
Binary files /dev/null and b/docs/opengraph.a501bc49.png differ