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;
@@ -291,38 +291,56 @@ li::before {
align-items: center;
height: 100px;
}
-
Demo
Centered content. Explanation
display: flex enables flexbox.justify-content: center centers the child horizontally.align-items: center centers the child vertically.
Browser support
95.5% ⚠️ Needs prefixes for full support.
Fullscreen
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
display: flex enables flexbox.justify-content: center centers the child horizontally.align-items: center centers the child vertically.
Browser support
95.5% ⚠️ Needs prefixes for full support.
Focus Within
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.
Fullscreen
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
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
Gradient text
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
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
Gradient text
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 @@
+
+ Focus Within
+ 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.
+
+
+
+
+
+
Fullscreen
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!
-
+