From 57f13902cdce8c7550858ffe35b9f6613d469df3 Mon Sep 17 00:00:00 2001 From: 30secondsofcode <30secondsofcode@gmail.com> Date: Sat, 27 Oct 2018 20:43:03 +0000 Subject: [PATCH] Travis build: 35 [cron] --- docs/index.html | 14 ++++++++++---- index.html | 13 ++++++++++++- snippets/calc.md | 2 +- 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/docs/index.html b/docs/index.html index bca8b7bfd..0e4339079 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>
@@ -31,7 +31,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: translateY().
     
    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: translateY().
     
    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;
@@ -53,7 +53,13 @@
 .content-box {
   box-sizing: content-box;
 }
-
 
Demo
 
 
border-box
 
content-box
 
  
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.4% 
 
 
✅ No caveats.
   
 
 
Circlevisual
 
Creates a circle shape with pure CSS.
 
HTML
<div class="circle"></div>
+
 
Demo
 
 
border-box
 
content-box
 
  
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.4% 
 
 
✅ 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;
+  background-position: calc(100% - 20px) calc(100% - 20px);
+}
+
 
Demo
 
 
 
  
If you want to align a background-image from right and bottom wasn't possible with just straight length values. So now it's possible using calc():
 
 
Background-image in the right/bottom
 
  
Explanation
 
     
  1. It allows addition, subtraction, multiplication and division.
    2.  
  2. Can use different units (pixel and percent together, for example) for each value in your expression.
    3.  
  3. It is permitted to nest calc() functions.
    4.  
  4. It can be used in any property that <length>, <frequency>, <angle>, <time>, <number>, <color>, or <integer> is allowed, like width, height, font-size, top, left, etc.
    5.  
 
Browser support
 
 
 94.9% 
 
 
✅ No caveats.
   
 
 
Circlevisual
 
Creates a circle shape with pure CSS.
 
HTML
<div class="circle"></div>
 
 
CSS
.circle {
   border-radius: 50%;
   width: 2rem;
@@ -499,7 +505,7 @@ li:not(:last-child) {
 .reference:focus-within > .popout-menu {
   visibility: visible;
 }
-
 
Demo
 
 
 
 Popout menu 
 
 
  
Explanation
 
     
  1. position: relative on the reference parent establishes a Cartesian positioning context for its child.
    2.  
  2. position: absolute takes the popout menu out of the flow of the document and positions it in relation to the parent.
    3.  
  3. left: 100% moves the the popout menu 100% of its parent's width from the left.
    4.  
  4. visibility: hidden hides the popout menu initially and allows for transitions (unlike display: none).
    5.  
  5. .reference:hover > .popout-menu means that when .reference is hovered over, select immediate children with a class of .popout-menu and change their visibility to visible, which shows the popout.
    6.  
  6. .reference:focus > .popout-menu means that when .reference is focused, the popout would be shown.
    7.  
  7. .reference:focus-within > .popout-menu ensures that the popout is shown when the focus is within the reference.
    8.  
 
Browser support
 
 
 99+% 
 
 
✅ No caveats.
  
 
 
Pretty text underlinevisual
 
A nicer alternative to text-decoration: underline where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.
 
HTML
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
+
 
Demo
 
 
 
 Popout menu 
 
 
  
Explanation
 
     
  1. position: relative on the reference parent establishes a Cartesian positioning context for its child.
    2.  
  2. position: absolute takes the popout menu out of the flow of the document and positions it in relation to the parent.
    3.  
  3. left: 100% moves the the popout menu 100% of its parent's width from the left.
    4.  
  4. visibility: hidden hides the popout menu initially and allows for transitions (unlike display: none).
    5.  
  5. .reference:hover > .popout-menu means that when .reference is hovered over, select immediate children with a class of .popout-menu and change their visibility to visible, which shows the popout.
    6.  
  6. .reference:focus > .popout-menu means that when .reference is focused, the popout would be shown.
    7.  
  7. .reference:focus-within > .popout-menu ensures that the popout is shown when the focus is within the reference.
    8.  
 
Browser support
 
 
 99+% 
 
 
✅ No caveats.
  
 
 
Pretty text underlinevisual
 
A nicer alternative to text-decoration: underline or <u></u> where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.
 
HTML
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
 
 
CSS
.pretty-text-underline {
   display: inline;
   text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
diff --git a/index.html b/index.html
index 797778f38..55e18d71d 100644
--- a/index.html
+++ b/index.html
@@ -314,6 +314,16 @@
 }
 

             
Demo

+            

+              

+            

+            
             
If you want to align a background-image from right and bottom wasn't possible with just straight length values. So now it's possible using calc():

             

               
Background-image in the right/bottom

@@ -2115,7 +2125,8 @@ li:not(:last-child) {
           

           

             
Pretty text underlinevisual

-            
A nicer alternative to text-decoration: underline where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.

+            
A nicer alternative to text-decoration: underline or <u></u> where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over
+              the underline.

             
HTML
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
 

             
CSS
.pretty-text-underline {
diff --git a/snippets/calc.md b/snippets/calc.md
index 7575afa5a..5bbdf2d4d 100644
--- a/snippets/calc.md
+++ b/snippets/calc.md
@@ -50,6 +50,6 @@ So now it's possible using calc():
 
 ✅ No caveats.
 
-* https://caniuse.com/#feat=calc
+- https://caniuse.com/#feat=calc