From c3982fe6119c8f1ad69e537caa4a45e40530a26c Mon Sep 17 00:00:00 2001 From: 30secondsofcode <30secondsofcode@gmail.com> Date: Sat, 12 Jan 2019 11:35:08 +0000 Subject: [PATCH] Travis build: 132 [FORCED] --- docs/index.html | 62 ++++++++++++++--------- index.html | 104 +++++++++++++++++++++++++++++++-------- snippets/focus-within.md | 9 ++-- 3 files changed, 127 insertions(+), 48 deletions(-) diff --git a/docs/index.html b/docs/index.html index d1620373c..f69a34320 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
 
 
 93.4% 
 
 
✅ 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
 
 
 93.4% 
 
 
✅ 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;
@@ -291,38 +291,56 @@ li::before {
   align-items: center;
   height: 100px;
 }
-
 
Demo
 
 
 
Centered content.
 
 
  
Explanation
 
     
  1. display: flex enables flexbox.
    2.  
  2. justify-content: center centers the child horizontally.
    3.  
  3. align-items: center centers the child vertically.
    4.  
 
Browser support
 
 
 95.5% 
 
 
⚠️ Needs prefixes for full support.
   
 
 
Fullscreenvisual
 
The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode.
 
HTML
<div class="container">
+
 
Demo
 
 
 
Centered content.
 
 
  
Explanation
 
     
  1. display: flex enables flexbox.
    2.  
  2. justify-content: center centers the child horizontally.
    3.  
  3. align-items: center centers the child vertically.
    4.  
 
Browser support
 
 
 95.5% 
 
 
⚠️ Needs prefixes for full support.
   
 
 
Focus Withinvisualinteractivity
 
Changes the appearance of a form if any of its children are focused.
 
HTML
<div class="focus-within">
+  <form>
+    <label for="given_name">Given Name:</label>
+    <input id="given_name" type="text">
+    <br>
+    <label for="family_name">Family Name:</label>
+    <input id="family_name" type="text">
+  </form>
+</div>
+
 
CSS
form {
+  border: 3px solid #2d98da;
+  color:  #000000;
+  padding: 4px;
+}
+form:focus-within {
+  background: #f7b731;
+  color: #000000;
+}
+
 
Demo
 
 
 
   
   
 
 
   
Explanation
 
The psuedo class :focus-within applies styles to a parent element if any child element gets focused. For example, an input element inside a form element.
 
Browser support
 
 
 78.9% 
 
 
⚠️ Not supported in IE11 or the current version of Edge.
    
 
 
Fullscreenvisual
 
The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode.
 
HTML
<div class="container">
   <p><em>Click the button below to enter the element into fullscreen mode. </em></p>
-  <div class="element" id="element">
-    <p>I change color in fullscreen mode!</p>
-  </div>
-  <br>
-  <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">Go Full Screen!</button>
+  <div class="element" id="element"><p>I change color in fullscreen mode!</p></div>
+  <br />
+  <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
+    Go Full Screen!
+  </button>
 </div>
 
 
CSS
.container {
-    margin: 40px auto;
-    max-width: 700px;
+  margin: 40px auto;
+  max-width: 700px;
 }
 .element {
-    padding: 20px;
-    height: 300px;
-    width: 100%;
-    background-color: skyblue;
+  padding: 20px;
+  height: 300px;
+  width: 100%;
+  background-color: skyblue;
 }
 .element p {
-    text-align: center;
-    color: white;
-    font-size: 3em;
+  text-align: center;
+  color: white;
+  font-size: 3em;
 }
 .element:-ms-fullscreen p {
-    visibility: visible;
+  visibility: visible;
 }
 .element:fullscreen {
-    background-color: #e4708a;
-    width: 100vw;
-    height: 100vh;
+  background-color: #e4708a;
+  width: 100vw;
+  height: 100vh;
 }
-
 
Demo
 
 
 
Click the button below to enter the element into fullscreen mode. 
 
 
I change color in fullscreen mode!
 
 
  
 
  
Explanation
 
     
  1. fullscreen CSS pseudo-class selector is used to select and style an element that is being displayed in fullscreen mode.
    2.  
 
Browser support
 
 
 81.6% 
 
 
83.38
   
 
 
Gradient textvisual
 
Gives text a gradient color.
 
HTML
<p class="gradient-text">Gradient text</p>
+
 
Demo
 
 
 
Click the button below to enter the element into fullscreen mode. 
 
 
I change color in fullscreen mode!
 
 
  
 
  
Explanation
 
     
  1. fullscreen CSS pseudo-class selector is used to select and style an element that is being displayed in fullscreen mode.
    2.  
 
Browser support
 
 
 81.6% 
 
 
83.38
   
 
 
Gradient textvisual
 
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 a84bc7e98..089fd54b5 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
         
         

           
interactivity

-          Disable selectionMouse cursor gradient trackingPopout menuSibling fadeToggle switch
+          Disable selectionFocus WithinMouse cursor gradient trackingPopout menuSibling fadeToggle switch
         

         

           
other

@@ -1188,40 +1188,102 @@ in any specification.

 
             
           

+          

+            
Focus Withinvisualinteractivity

+            
Changes the appearance of a form if any of its children are focused.

+            
HTML
<div class="focus-within">
+  <form>
+    <label for="given_name">Given Name:</label>
+    <input id="given_name" type="text">
+    <br>
+    <label for="family_name">Family Name:</label>
+    <input id="family_name" type="text">
+  </form>
+</div>
+

+            
CSS
form {
+  border: 3px solid #2d98da;
+  color:  #000000;
+  padding: 4px;
+}
+form:focus-within {
+  background: #f7b731;
+  color: #000000;
+}
+

+            
Demo

+            

+              

+                

+                  
+                  
+                  

+                  
+                  
+                

+              

+            

+            
+
+            
Explanation

+            
The psuedo class :focus-within applies styles to a parent element if any child element gets focused. For example, an input element inside a form element.

+            
Browser support

+            

+              

+                78.9%
+              

+            

+            
⚠️ Not supported in IE11 or the current version of Edge.

+
+            
+            
+
+            
+          

           

             
Fullscreenvisual

             
The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode.

             
HTML
<div class="container">
   <p><em>Click the button below to enter the element into fullscreen mode. </em></p>
-  <div class="element" id="element">
-    <p>I change color in fullscreen mode!</p>
-  </div>
-  <br>
-  <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">Go Full Screen!</button>
+  <div class="element" id="element"><p>I change color in fullscreen mode!</p></div>
+  <br />
+  <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
+    Go Full Screen!
+  </button>
 </div>
 

             
CSS
.container {
-    margin: 40px auto;
-    max-width: 700px;
+  margin: 40px auto;
+  max-width: 700px;
 }
 .element {
-    padding: 20px;
-    height: 300px;
-    width: 100%;
-    background-color: skyblue;
+  padding: 20px;
+  height: 300px;
+  width: 100%;
+  background-color: skyblue;
 }
 .element p {
-    text-align: center;
-    color: white;
-    font-size: 3em;
+  text-align: center;
+  color: white;
+  font-size: 3em;
 }
 .element:-ms-fullscreen p {
-    visibility: visible;
+  visibility: visible;
 }
 .element:fullscreen {
-    background-color: #e4708a;
-    width: 100vw;
-    height: 100vh;
+  background-color: #e4708a;
+  width: 100vw;
+  height: 100vh;
 }
 

             
Demo

@@ -1232,7 +1294,9 @@ in any specification.

                   
I change color in fullscreen mode!

                 

                 

-                
+