From cb9037411539c62d873197b39c726d15ce8f4b96 Mon Sep 17 00:00:00 2001 From: 30secondsofcode <30secondsofcode@gmail.com> Date: Tue, 12 Mar 2019 21:48:03 +0000 Subject: [PATCH] Travis build: 217 [cron] --- docs/index.html | 4 ++-- index.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/index.html b/docs/index.html index 127f77149..a458499f2 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>
@@ -437,7 +437,7 @@ p {
 
 
JavaScript
var el = document.querySelector('.el')
 var height = el.scrollHeight
 el.style.setProperty('--max-height', height + 'px')
-
 
Demo
 
 
 Hover me to see a height transition. 
content
 
 
   
Explanation
 
CSS
 
     
  1. transition: max-height: 0.5s cubic-bezier(...) specifies that changes to max-height should be transitioned over 0.5 seconds, using an ease-out-quint timing function.
    2.  
  2. overflow: hidden prevents the contents of the hidden element from overflowing its container.
    3.  
  3. max-height: 0 specifies that the element has no height initially.
    4.  
  4. .target:hover > .el specifies that when the parent is hovered over, target a child .el within it and use the --max-height variable which was defined by JavaScript.
    5.  
 
JavaScript
 
     
  1. el.scrollHeight is the height of the element including overflow, which will change dynamically based on the content of the element.
    2.  
  2. el.style.setProperty(...) sets the --max-height CSS variable which is used to specify the max-height of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.
    3.  
 
Browser Support
 
 
 91.6% 
 
 
 
Requires JavaScript
  ⚠️ Causes reflow on each animation frame, which will be laggy if there are a large number of elements beneath the element that is transitioning in height.  
   
 
 
Hover Shadow Box Animationanimation
 
Creates a shadow box around the text whern it is hovered.
 
HTML
<p class="hover-shadow-box-animation">Box it!</p>
+
 
Demo
 
 
 Hover me to see a height transition. 
content
 
 
   
Explanation
 
CSS
 
     
  1. transition: max-height: 0.5s cubic-bezier(...) specifies that changes to max-height should be transitioned over 0.5 seconds, using an ease-out-quint timing function.
    2.  
  2. overflow: hidden prevents the contents of the hidden element from overflowing its container.
    3.  
  3. max-height: 0 specifies that the element has no height initially.
    4.  
  4. .target:hover > .el specifies that when the parent is hovered over, target a child .el within it and use the --max-height variable which was defined by JavaScript.
    5.  
 
JavaScript
 
     
  1. el.scrollHeight is the height of the element including overflow, which will change dynamically based on the content of the element.
    2.  
  2. el.style.setProperty(...) sets the --max-height CSS variable which is used to specify the max-height of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.
    3.  
 
Browser Support
 
 
 91.6% 
 
 
 
Requires JavaScript
  ⚠️ Causes reflow on each animation frame, which will be laggy if there are a large number of elements beneath the element that is transitioning in height.  
   
 
 
Hover shadow box animationanimation
 
Creates a shadow box around the text when it is hovered.
 
HTML
<p class="hover-shadow-box-animation">Box it!</p>
 
 
CSS
.hover-shadow-box-animation {
   display: inline-block;
   vertical-align: middle;
diff --git a/index.html b/index.html
index 458fc7522..77f3bd00e 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

@@ -1682,7 +1682,7 @@ el.style.setProperty('--max-height', height + 'px')
             
           

           

-            
Hover Shadow Box Animationanimation

+            
Hover shadow box animationanimation

             
Creates a shadow box around the text when it is hovered.

             
HTML
<p class="hover-shadow-box-animation">Box it!</p>