From 4e554e5d563417179d9a0874ebd0fb4372bab65a Mon Sep 17 00:00:00 2001 From: 30secondsofcode <30secondsofcode@gmail.com> Date: Mon, 21 Jan 2019 21:21:32 +0000 Subject: [PATCH] Travis build: 151 [cron] --- docs/index.html | 6 +++--- index.html | 20 ++++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/index.html b/docs/index.html index c24ac3e53..33f60dee1 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;
@@ -85,7 +85,7 @@
   height: 100%;
   width: 100%;
 }
-
 
Demo
 
 
 
  
Explanation
 
Use the :before and :after pseduo-elements as borders that animate on hover.
 
Browser support
 
 
 99+% 
 
 
✅ No caveats.
   
 
 
Calc()other
 
The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.
 
HTML
<div class="box-example"></div>
+
 
Demo
 
 
 
  
Explanation
 
Use the :before and :after pseduo-elements as borders that animate on hover.
 
Browser support
 
 
 99+% 
 
 
✅ No caveats.
   
 
 
Calc()other
 
The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.
 
HTML
<div class="box-example"></div>
 
 
CSS
.box-example {
   height: 280px;
   background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
diff --git a/index.html b/index.html
index 3cf3ebb29..9684da3c7 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@
         
         

           
animation

-          Bouncing loaderButton border animationDonut spinnerEasing variablesHeight transitionHover Shadow Box AnimationHover underline animation
+          Bouncing loaderButton border animationDonut spinnerEasing variablesHeight transitionHover Shadow Box AnimationHover underline animation
         

         

           
interactivity

@@ -281,36 +281,36 @@
 }
 

             
Demo

-            

+            

               

             

-