Bouncing loader
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.
Bouncing loader
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.
-
@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.
-
.bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.
-
.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.
-
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.
-
animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
-
nth-child(n) targets the element which is the nth child of its parent.
-
animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
Browser support
93.4% ✅ No caveats.
Box-sizing reset
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.
-
@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.
-
.bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.
-
.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.
-
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.
-
animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
-
nth-child(n) targets the element which is the nth child of its parent.
-
animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
Browser support
93.4% ✅ No caveats.
Box-sizing reset
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;
@@ -49,7 +49,45 @@
.content-box {
box-sizing: content-box;
}
-
Demo
border-box content-box Explanation
box-sizing: border-box makes the addition of padding or borders not affect an element's width or height.box-sizing: inherit makes an element respect its parent's box-sizing rule.
Browser support
95.9% ✅ No caveats.
Calc()
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
border-box content-box Explanation
box-sizing: border-box makes the addition of padding or borders not affect an element's width or height.box-sizing: inherit makes an element respect its parent's box-sizing rule.
Browser support
95.9% ✅ No caveats.
Button border animation
Creates a border animation on hover.
HTML
<div class="button-border">
+ <button class="button">Submit</button>
+</div>
+
CSS
.button {
+ background-color: #c47135;
+ border: none;
+ color: #ffffff;
+ outline: none;
+ padding: 12px 40px 10px;
+ position: relative;
+}
+.button:before,
+.button:after {
+ border: 0 solid transparent;
+ transition: all 0.25s;
+ content: '';
+ height: 24px;
+ position: absolute;
+ width: 24px;
+}
+.button:before {
+ border-top: 2px solid #c47135;
+ left: 0px;
+ top: -5px;
+}
+.button:after {
+ border-bottom: 2px solid #c47135;
+ bottom: -5px;
+ right: 0px;
+}
+.button:hover {
+ background-color: #c47135;
+}
+.button:hover:before,
+.button:hover:after {
+ 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()
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;
@@ -338,16 +376,14 @@ form:focus-within {
height: 100vh;
}
Demo
Click the button below to enter the element into fullscreen mode.
I change color in fullscreen mode!
Explanation
fullscreen CSS pseudo-class selector is used to select and style an element that is being displayed in fullscreen mode.
Browser support
81.6% 83.38
Ghost trick
Vertically centers an element in another.
HTML
<div class="ghost-trick">
- <div class="ghosting">
- <p>Vertically centered without changing the position property.</p>
- </div>
+ <div class="ghosting"><p>Vertically centered without changing the position property.</p></div>
</div>
CSS
.ghosting {
height: 300px;
background: #0ff;
}
.ghosting:before {
- content: "";
+ content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
diff --git a/index.html b/index.html
index 2cde4f718..9b1ab092d 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@
+
+ Button border animation
+ Creates a border animation on hover.
+ HTML
<div class="button-border">
+ <button class="button">Submit</button>
+</div>
+
+ CSS
.button {
+ background-color: #c47135;
+ border: none;
+ color: #ffffff;
+ outline: none;
+ padding: 12px 40px 10px;
+ position: relative;
+}
+.button:before,
+.button:after {
+ border: 0 solid transparent;
+ transition: all 0.25s;
+ content: '';
+ height: 24px;
+ position: absolute;
+ width: 24px;
+}
+.button:before {
+ border-top: 2px solid #c47135;
+ left: 0px;
+ top: -5px;
+}
+.button:after {
+ border-bottom: 2px solid #c47135;
+ bottom: -5px;
+ right: 0px;
+}
+.button:hover {
+ background-color: #c47135;
+}
+.button:hover:before,
+.button:hover:after {
+ 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()
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.
@@ -1334,9 +1427,7 @@ If no link is provided, it defaults to 99+%. -->
Ghost trick
Vertically centers an element in another.
HTML
<div class="ghost-trick">
- <div class="ghosting">
- <p>Vertically centered without changing the position property.</p>
- </div>
+ <div class="ghosting"><p>Vertically centered without changing the position property.</p></div>
</div>
CSS
.ghosting {
@@ -1344,7 +1435,7 @@ If no link is provided, it defaults to 99+%. -->
background: #0ff;
}
.ghosting:before {
- content: "";
+ content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
@@ -1366,7 +1457,7 @@ p {
height: 300px;
background: #0ff; }
[data-scope="ghost-trick.md"] .ghosting:before {
- content: "";
+ content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
diff --git a/snippets/button-border.md b/snippets/button-border.md
index 2770a4af8..5b48f48dd 100644
--- a/snippets/button-border.md
+++ b/snippets/button-border.md
@@ -5,9 +5,7 @@ Creates a border animation on hover.
#### HTML
```html
-
+
```
#### CSS