diff --git a/docs/index.html b/docs/index.html index be8875672..11aa764e2 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

Box-sizing reset

Resets the box-model so that widths and heights are not affected by their borders or padding.

CSS

html {
+     30 Seconds of CSS         
 
 
  
30 Seconds of CSS
 
 A curated collection of useful CSS snippets you can understand in 30 seconds or less. 
 Star 
 
 
 
 
 
Box-sizing reset
 
Resets the box-model so that widths and heights are not affected by their borders or padding.
 
CSS
html {
   box-sizing: border-box;
 }
 *,
@@ -6,7 +6,7 @@
 *::after {
   box-sizing: inherit;
 }
-
 
Demo
 
 
Demo
 
  
Explanation
 
     
  1. box-sizing: border-box makes the addition of padding or borders not affect an element's width or height.
    2.  
  2. box-sizing: inherit makes an element respect its parent's box-sizing rule.
    3.  
 
Browser support
 
 
 98.2% 
 
 
✅ No caveats.
  
 
 
Clearfix
 
Ensures that an element self-clears its children.
 
Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
 
HTML
<div class="clearfix">
+
 
Demo
 
 
Demo
 
  
Explanation
 
     
  1. box-sizing: border-box makes the addition of padding or borders not affect an element's width or height.
    2.  
  2. box-sizing: inherit makes an element respect its parent's box-sizing rule.
    3.  
 
Browser support
 
 
 98.2% 
 
 
✅ No caveats.
  
 
 
Clearfix
 
Ensures that an element self-clears its children.
 
Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
 
HTML
<div class="clearfix">
   <div class="floated">float a</div>
   <div class="floated">float b</div>
   <div class="floated">float c</div>
@@ -90,7 +90,16 @@
   font-weight: bold;
   color: #b8bec5;
 }
-
 
Demo
 
 
I appear etched into the background.
 
  
Explanation
 
text-shadow: 0 2px white creates a white shadow offset 0px horizontally and 2px vertically from the origin position.
 
The background must be darker than the shadow for the effect to work.
 
The text color should be slightly faded to make it look like it's engraved/carved out of the background.
 
Browser support
 
 
 97.9% 
 
 
✅ No caveats.
  
 
 
Gradient text
 
Gives text a gradient color.
 
HTML
<p class="gradient-text">Gradient text</p>
+
 
Demo
 
 
I appear etched into the background.
 
  
Explanation
 
text-shadow: 0 2px white creates a white shadow offset 0px horizontally and 2px vertically from the origin position.
 
The background must be darker than the shadow for the effect to work.
 
The text color should be slightly faded to make it look like it's engraved/carved out of the background.
 
Browser support
 
 
 97.9% 
 
 
✅ No caveats.
  
 
 
Evenly distributed children
 
Evenly distributes child elements within a parent element.
 
HTML
<div class="evenly-distributed-children">
+  <p>Item1</p>
+  <p>Item2</p>
+  <p>Item3</p>
+</div>
+
 
CSS
.evenly-distributed-children {
+  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
 
 
 97.8% 
 
 
⚠️ Needs prefixes for full support.
  
 
 
Gradient text
 
Gives text a gradient color.
 
HTML
<p class="gradient-text">Gradient text</p>
 
 
CSS
.gradient-text {
   background: -webkit-linear-gradient(pink, red);
   -webkit-text-fill-color: transparent;
diff --git a/index.html b/index.html
index 2ff6a8119..a31588d53 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,7 @@
         Donut spinner
         Easing variables
         Etched text
+        Evenly distributed children
         Gradient text
         Hairline border
         Horizontal and vertical centering
@@ -455,6 +456,54 @@ in any specification.

               
             
           

+          

+            
Evenly distributed children

+            
Evenly distributes child elements within a parent element.

+            
HTML
<div class="evenly-distributed-children">
+  <p>Item1</p>
+  <p>Item2</p>
+  <p>Item3</p>
+</div>
+

+            
CSS
.evenly-distributed-children {
+  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

+            

+              

+                97.8%
+              

+            

+            
⚠️ Needs prefixes for full support.

+            
+          

           

             
Gradient text

             
Gives text a gradient color.