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>
</div>
CSS
@keyframes bouncing-loader {
- from {
- opacity: 1;
- transform: translateY(0);
- }
to {
opacity: 0.1;
- transform: translateY(-1rem);
+ transform: translate3d(0, -1rem, 0);
}
}
.bouncing-loader {
@@ -31,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: translateY().
-
.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
95.3% ✅ 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
95.3% ✅ 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;
@@ -274,7 +270,23 @@ li::before {
display: flex;
justify-content: space-between;
}
-
Demo
Item1
Item2
Item3
Explanation
display: flex enables flexbox.justify-content: space-between evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
Alternatively, use justify-content: space-around to distribute the children with space around them, rather than between them.
Browser support
98.1% ⚠️ Needs prefixes for full support.
Flexbox centering
Horizontally and vertically centers a child element within a parent element using flexbox.
HTML
<div class="flexbox-centering">
+
Demo
Item1
Item2
Item3
Explanation
display: flex enables flexbox.justify-content: space-between evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
Alternatively, use justify-content: space-around to distribute the children with space around them, rather than between them.
Browser support
98.1% ⚠️ Needs prefixes for full support.
Fit image in container
Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the background-size property.
HTML
<img class="image image-contain" src="https://picsum.photos/600/200">
+<img class="image image-cover" src="https://picsum.photos/600/200">
+
CSS
.image {
+ background: #34495e;
+ border: 1px solid #34495e;
+ width: 200px;
+ height: 200px;
+}
+.image-contain {
+ object-fit: contain;
+ object-position: center;
+}
+.image-cover {
+ object-fit: cover;
+ object-position: right top;
+}
+
Demo
Explanation
object-fit: contain fits the entire image within the container while preserving its aspect ratio.object-fit: cover fills the container with the image while preserving its aspect ratio.object-position: [x] [y] positions the image within the container.
Browser support
92.9% ✅ No caveats.
Flexbox centering
Horizontally and vertically centers a child element within a parent element using flexbox.
HTML
<div class="flexbox-centering">
<div class="child">Centered content.</div>
</div>
CSS
.flexbox-centering {
@@ -626,4 +638,14 @@ input[type='checkbox']:checked + .switch {
text-overflow: ellipsis;
width: 200px;
}
-
Demo
If I exceed one line's width, I will be truncated.
Explanation
overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).white-space: nowrap prevents the text from exceeding one line in height.text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.width: 200px; ensures the element has a dimension, to know when to get ellipsis
Browser support
98.4% ⚠️ Only works for single line elements.
\ No newline at end of file
+Demo
If I exceed one line's width, I will be truncated.
Explanation
overflow: hiddenprevents the text from overflowing its dimensions (for a block, 100% width and auto height).white-space: nowrapprevents the text from exceeding one line in height.text-overflow: ellipsismakes it so that if the text exceeds its dimensions, it will end with an ellipsis.width: 200px;ensures the element has a dimension, to know when to get ellipsis
Browser support
⚠️ Only works for single line elements.
Zebra striped list
Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.
HTML
<ul>
+ <li>Item 01</li>
+ <li>Item 02</li>
+ <li>Item 03</li>
+ <li>Item 04</li>
+ <li>Item 05</li>
+</ul>
+CSS
li:nth-child(odd) {
+ background-color: #eee;
+}
+Demo
- Item 01
- Item 02
- Item 03
- Item 04
- Item 05
Explanation
- Use the
:nth-child(odd)or:nth-child(even)pseudo-class to apply a different background color to elements that match based on their position in a group of siblings.
Note that you can use it to apply different styles to other HTML elements like div, tr, p, ol, etc.
Browser support
✅ No caveats.
