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;
@@ -730,7 +730,30 @@ input[type='checkbox']:checked + .switch {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
-
Demo
Explanation
View this link for a detailed explanation.
The color of the border is the color of the triangle. The side the triangle tip points corresponds to the opposite border-* property. For example, a color on border-top means the arrow points downward.
Experiment with the px values to change the proportion of the triangle.
Browser support
99+% ✅ No caveats.
Truncate text
If the text is longer than one line, it will be truncated and end with an ellipsis ….
HTML
<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
+
Demo
Explanation
View this link for a detailed explanation.
The color of the border is the color of the triangle. The side the triangle tip points corresponds to the opposite border-* property. For example, a color on border-top means the arrow points downward.
Experiment with the px values to change the proportion of the triangle.
Browser support
99+% ✅ No caveats.
Truncate text multiline
If the text is longer than one line, it will be truncated for n lines and end with an gradient fade.
HTML
<p class="truncate-text-multiline">
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+ labore et.
+</p>
+
CSS
.truncate-text-multiline {
+ overflow: hidden;
+ display: block;
+ height: 109.2px;
+ margin: 0 auto;
+ font-size: 26px;
+ line-height: 1.4;
+ width: 400px;
+ position: relative;
+}
+.truncate-text-multiline:after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 150px;
+ height: 36.4px;
+ background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
+}
+
Demo
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.
Explanation
overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).width: 400px ensures the element has a dimension.height: 109.2px calculated value for height, it equals font-size * line-height * numberOfLines (in this case 26 * 1.4 * 3 = 109.2)height: 36.4px calculated value for gradient container, it equals font-size * line-height (in this case 26 * 1.4 = 36.4)background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%) gradient from transparent to #f5f6f9
Browser support
99+% ✅ No caveats.
Truncate text
If the text is longer than one line, it will be truncated and end with an ellipsis ….
HTML
<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
CSS
.truncate-text {
overflow: hidden;
white-space: nowrap;
diff --git a/index.html b/index.html
index 9684da3c7..8780b72e7 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,7 @@
+
+ Truncate text multiline
+ If the text is longer than one line, it will be truncated for n lines and end with an gradient fade.
+ HTML
<p class="truncate-text-multiline">
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+ labore et.
+</p>
+
+ CSS
.truncate-text-multiline {
+ overflow: hidden;
+ display: block;
+ height: 109.2px;
+ margin: 0 auto;
+ font-size: 26px;
+ line-height: 1.4;
+ width: 400px;
+ position: relative;
+}
+.truncate-text-multiline:after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 150px;
+ height: 36.4px;
+ background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
+}
+
+ Demo
+
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+ labore et.
+
+
+
+ Explanation
+
+ overflow: hidden prevents the text from overflowing its dimensions
+ (for a block, 100% width and auto height).width: 400px ensures the element has a dimension.height: 109.2px calculated value for height, it equals font-size * line-height * numberOfLines (in this case 26 * 1.4 * 3 = 109.2)height: 36.4px calculated value for gradient container, it equals font-size * line-height (in this case 26 * 1.4 = 36.4)background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%) gradient from transparent to #f5f6f9
+ Browser support
+
+
+ 99+%
+
+
+ ✅ No caveats.
+
+
+
Truncate text
If the text is longer than one line, it will be truncated and end with an ellipsis ….