Bouncing loader
Creates a bouncing loader animation.
@@ -125,13 +81,9 @@ </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 {
@@ -161,51 +113,41 @@
Explanation
Note: 1rem is usually 16px.
-
-
+@keyframesdefines an animation that has two states, where the element changesopacityand is translated up on the 2D plane usingtransform: translateY().@keyframesdefines an animation that has two states, where the element changesopacityand is translated up on the 2D plane usingtransform: translate3d(). Using a single axis translation ontransform: translate3d()improves the performance of the animation. -
-
+.bouncing-loaderis the parent container of the bouncing circles and usesdisplay: flexandjustify-content: centerto position them in the center..bouncing-loaderis the parent container of the bouncing circles and usesdisplay: flex+ andjustify-content: centerto position them in the center. -
-
+.bouncing-loader > div, targets the three childdivs of the parent to be styled. Thedivs are given a width and height of1rem, usingborder-radius: 50%to turn them from - squares to circles..bouncing-loader > div, targets the three childdivs of the parent to be styled. Thedivs are given a width and height of1rem, usingborder-radius: 50%to turn them from squares to circles. -
-
+margin: 3rem 0.2remspecifies that each circle has a top/bottom margin of3remand left/right margin of0.2remso that they do not directly touch each other, giving them some breathing room.margin: 3rem 0.2remspecifies that each circle has a top/bottom margin of3remand left/right margin + of0.2remso that they do not directly touch each other, giving them some breathing room. -
@@ -220,14 +162,12 @@animationis a shorthand property for the various animation properties:animation-name,animation-duration,animation-iteration-count,animation-directionare used.Browser support
- 95.3% + 93.4%✅ No caveats.
@@ -264,28 +204,23 @@border-boxcontent-box- +Explanation
box-sizing: border-boxmakes the addition ofpaddingorborders not affect an element'swidthorheight.
@@ -294,152 +229,16 @@
- It allows addition, subtraction, multiplication and division.
- Can use different units (pixel and percent together, for example) for each value in your expression.
- It is permitted to nest calc() functions. -
- 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.
+ - 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. .clearfix::afterdefines a pseudo-element.content: ''allows the pseudo-element to affect layout.
- clear: bothindicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.
+ clear: bothindicates that the left, right or both sides of the element cannot be adjacent + to earlier floated elements within the same block formatting context.-
-
+counter-resetInitializes a counter, the value is the name of the counter. By default, the counter starts in 0. This property can also be used to change its value to any specific number.counter-resetInitializes a counter, the value is the name of the counter. By default, the counter starts at 0. This property can also be used to change its value to any specific number. -
counter-incrementUsed in element that will be countable. Oncecounter-resetinitialized, a counter's value can be increased or decreased. -
-
+counter(name, style)Displays the value of a section counter. Generally used in acontentproperty. This function can receive two parameters, the first as the name of the counter and the second one can bedecimalorupper-roman(decimalby default).counter(name, style)Displays the value of a section counter. Generally used in acontentproperty. This function can receive two parameters, the first as the name of the counter and the second one can bedecimalorupper-roman(decimalby default). -
-
+counters(counter, string, style)Displays the value of a section counter. Generally used in acontentproperty. This function can receive three parameters, the first as the name of the counter, the second one - you can include a string which comes after the counter and the third one can bedecimalorupper-roman(decimalby default).counters(counter, string, style)Displays the value of a section counter. Generally used in acontentproperty. This function can receive three parameters, the first as the name of the counter, the second one you can include a string which comes after the counter and the third one can bedecimalorupper-roman(decimalby default). -
-
A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. Using the
+counters()function, separating text can be inserted between different - levels of nested counters.A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. Using the
counters()function, separating text can be inserted between different levels of nested counters. ::-webkit-scrollbartargets the whole scrollbar element.::-webkit-scrollbar-tracktargets only the scrollbar track.::-webkit-scrollbar-thumbtargets the scrollbar thumb.display: tableon '.center' allows the element to behave like a<table>HTML element.
@@ -1024,9 +774,7 @@ in any specification.
- - https://caniuse.com/#search=display%3A%20table - +
- https://caniuse.com/#search=display%3A%20table
- - https://caniuse.com/#feat=css-animation - -
- - https://caniuse.com/#feat=transforms2d - +
- https://caniuse.com/#feat=css-animation +
- https://caniuse.com/#feat=transforms2d
position: relativeon the element establishes a Cartesian positioning context for psuedo-elements.
@@ -1161,21 +898,20 @@ in any specification.
display: flexenables flexbox.
@@ -1353,24 +1078,77 @@ in any specification.
object-fit: containfits the entire image within the container while preserving its aspect ratio.
+ object-fit: coverfills the container with the image while preserving its aspect ratio.
+ object-position: [x] [y]positions the image within the container.
+ display: flexenables flexbox.
@@ -1402,14 +1178,12 @@ in any specification.
background: -webkit-linear-gradient(...)gives the text element a gradient background.webkit-text-fill-color: transparentfills the text with a transparent color.
- webkit-background-clip: textclips the background with the text, filling the text with the gradient background as the color.
+ webkit-background-clip: textclips the background with the text, filling the text with + the gradient background as the color.display: gridenables grid.
@@ -1494,21 +1261,20 @@ in any specification.
box-shadow, when only using spread, adds a pseudo-border which can use subpixels*.
- - Use
@media (min-resolution: ...)to check the device pixel ratio (1dppxequals 96 DPI), setting the spread of thebox-shadowequal to1 / dppx.
+ - Use
@media (min-resolution: ...)to check the device pixel ratio (1dppxequals 96 DPI), + setting the spread of thebox-shadowequal to1 / dppx. - - https://caniuse.com/#feat=css-boxshadow - -
- - https://caniuse.com/#feat=css-media-resolution - +
- https://caniuse.com/#feat=css-boxshadow +
- https://caniuse.com/#feat=css-media-resolution
transition: max-height: 0.5s cubic-bezier(...)specifies that changes tomax-heightshould be transitioned over 0.5 seconds, using anease-out-quinttiming function.overflow: hiddenprevents the contents of the hidden element from overflowing its container.max-height: 0specifies that the element has no height initially.
- .target:hover > .elspecifies that when the parent is hovered over, target a child.elwithin it and use the--max-heightvariable which was defined by JavaScript.
+ .target:hover > .elspecifies that when the parent is hovered over, target a child.elwithin + it and use the--max-heightvariable which was defined by JavaScript.el.scrollHeightis the height of the element including overflow, which will change dynamically based on the content of the element.
+ el.scrollHeightis the height of the element including overflow, which will change dynamically + based on the content of the element.el.style.setProperty(...)sets the--max-heightCSS variable which is used to specify themax-heightof the element the target is hovered over, allowing it to transition smoothly from 0 to auto.- - https://caniuse.com/#feat=css-variables - -
- - https://caniuse.com/#feat=css-transitions - +
- https://caniuse.com/#feat=css-variables +
- https://caniuse.com/#feat=css-transitions +
display: inline-blockto set width and length forpelement thus making it aninline-block.
+ - Set
transform: perspective(1px)to give element a 3D space by affecting the distance between the Z plane and the user andtranslate(0)to reposition thepelement along z-axis in 3D space.
+ box-shadow:to set up the box.
+ transparentto make box transparent.
+ transition-propertyto enable transitions for bothbox-shadowandtransform.
+ :hoverto activate whole css when hovering is done untilactive.
+ transform: scale(1.2)to change the scale, magnifying the text.
+ display: inline-blockmakes the blockpaninline-blockto prevent the underline from spanning the entire parent width rather than just the content (text).
+ display: inline-blockmakes the blockpaninline-blockto prevent the underline from + spanning the entire parent width rather than just the content (text).position: relativeon the element establishes a Cartesian positioning context for pseudo-elements.::afterdefines a pseudo-element.position: absolutetakes the pseudo element out of the flow of the document and positions it in relation to the parent.width: 100%ensures the pseudo-element spans the entire width of the text block.transform: scaleX(0)initially scales the pseudo element to 0 so it has no width and is not visible.bottom: 0andleft: 0position it to the bottom left of the block.
- transition: transform 0.25s ease-outmeans changes totransformwill be transitioned over 0.25 seconds with anease-outtiming function.
+ transition: transform 0.25s ease-outmeans changes totransformwill be transitioned over 0.25 seconds + with anease-outtiming function.transform-origin: bottom rightmeans the transform anchor point is positioned at the bottom right of the block.
- :hover::afterthen usesscaleX(1)to transition the width to 100%, then changes thetransform-origintobottom leftso that the anchor point is reversed, allowing it transition out in the - other direction when hovered off.
+ :hover::afterthen usesscaleX(1)to transition the width to 100%, then changes thetransform-origin+ tobottom leftso that the anchor point is reversed, allowing it transition out in the other direction when + hovered off.height: 100%set the height of container as viewport height.
@@ -1940,14 +1609,12 @@ body {
- Four
- Remove all borders. @@ -2199,9 +1832,7 @@ li:not(:last-child) {
position: relativeon the parent establishes a Cartesian positioning context for pseudo-elements.::afterdefines a pseudo element.
- background-image: linear-gradient(...)adds a linear gradient that fades from transparent to white (top to bottom).
+ background-image: linear-gradient(...)adds a linear gradient that fades from transparent to white + (top to bottom).position: absolutetakes the pseudo element out of the flow of the document and positions it in relation to the parent.
- width: 240pxmatches the size of the scrolling element (which is a child of the parent that has the pseudo element).
+ width: 240pxmatches the size of the scrolling element (which is a child of the parent that has + the pseudo element).height: 25pxis the height of the fading gradient pseudo-element, which should be kept relatively small.bottom: 0positions the pseudo-element at the bottom of the parent.pointer-events: nonespecifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
@@ -2298,14 +1927,12 @@ li:not(:last-child) {
position: relativeon the reference parent establishes a Cartesian positioning context for its child.position: absolutetakes the popout menu out of the flow of the document and positions it in relation to the parent.left: 100%moves the the popout menu 100% of its parent's width from the left.visibility: hiddenhides the popout menu initially and allows for transitions (unlikedisplay: none).
- .reference:hover > .popout-menumeans that when.referenceis hovered over, select immediate children with a class of.popout-menuand change theirvisibilitytovisible, - which shows the popout.
+ .reference:hover > .popout-menumeans that when.referenceis hovered over, select immediate children with a class of.popout-menuand change theirvisibilitytovisible, which shows the popout..reference:focus > .popout-menumeans that when.referenceis focused, the popout would be shown..reference:focus-within > .popout-menuensures that the popout is shown when the focus is within the reference.text-shadowuses 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger -pxsize. Additional values can create an even thicker shadow, and subpixel values can also be used.
- background-image: linear-gradient(...)creates a 90deg gradient using the text color (currentColor).
- - The
background-*properties size the gradient as 100% of the width of the block and 1px in height at the bottom and disables repetition, which creates a 1px underline beneath the text.
- - The
::selectionpseudo selector rule ensures the text shadow does not interfere with text selection. -
+ text-shadowuses 4 values with offsets that cover a 4x4 px area to ensure the underline + has a "thick" shadow that covers the line where descenders clip it. Use a color + that matches the background. For a larger font, use a largerpxsize. Additional values + can create an even thicker shadow, and subpixel values can also be used.
+ background-image: linear-gradient(...)creates a 90deg gradient using the + text color (currentColor).
+ - The
background-*properties size the gradient as 100% of the width of the block and 1px + in height at the bottom and disables repetition, which creates a 1px underline beneath + the text.
+ - The
::selectionpseudo selector rule ensures the text shadow does not interfere with text + selection. - - https://caniuse.com/#feat=css-textshadow - -
- - https://caniuse.com/#feat=css-gradients - +
- https://caniuse.com/#feat=css-textshadow +
- https://caniuse.com/#feat=css-gradients
position: relativeon the element establishes a Cartesian positioning context for pseudo elements.::afterdefines a pseudo element.
- background-image: url(...)adds the SVG shape (a 24x12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can - use - the URL-encoder for SVG.
+ background-image: url(...)adds the SVG shape (a 24x12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can use the URL-encoder for SVG.position: absolutetakes the pseudo element out of the flow of the document and positions it in relation to the parent.width: 100%ensures the element stretches the entire width of its parent.height: 12pxis the same height as the shape.
@@ -2555,14 +2167,12 @@ li:not(:last-child) {
transition: opacity 0.2sspecifies that changes to opacity will be transitioned over 0.2 seconds.
- .sibling-fade:hover span:not(:hover)specifies that when the parent is hovered, select anyspanchildren that are not currently being hovered and change their opacity to0.5.
+ .sibling-fade:hover span:not(:hover)specifies that when the parent is hovered, select anyspanchildren + that are not currently being hovered and change their opacity to0.5.- - https://caniuse.com/#feat=css-sel3 - -
- - https://caniuse.com/#feat=css-transitions - +
- https://caniuse.com/#feat=css-sel3 +
- https://caniuse.com/#feat=css-transitions
-apple-systemis San Francisco, used on iOS and macOS (not Chrome however)BlinkMacSystemFontis San Francisco, used on macOS Chrome
@@ -2673,11 +2268,9 @@ li:not(:last-child) {
- The
forattribute associates the<label>with the appropriate<input>checkbox element by itsid. .switch::afterdefines a pseudo-element for the<label>to create the circular knob.input[type='checkbox']:checked + .switch::aftertargets the<label>'s pseudo-element's style when the checkbox ischecked.transform: translateX(20px)moves the pseudo-element (knob) 20px to the right when the checkbox ischecked.background-color: #7983ff;sets the background-color of the switch to a different color when the checkbox ischecked.
- .offscreenmoves the<input>checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it - is accessible via keyboard and screen readers.
- transition: all 0.3sspecifies all property changes will be transitioned over 0.3 seconds, therefore transitioning the<label>'sbackground-colorand the pseudo-element'stransformproperty when the checkbox is checked.
+ .offscreenmoves the<input>checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it is accessible via keyboard and screen readers.
+ transition: all 0.3sspecifies all property changes will be transitioned over 0.3 seconds, therefore transitioning the<label>'sbackground-colorand the pseudo-element'stransformproperty when the checkbox is checked.overflow: hiddenprevents the text from overflowing its dimensions (for a block, 100% width and auto height).
+ 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.
+ 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- Item 01 +
- Item 02 +
- Item 03 +
- Item 04 +
- Item 05 +
- 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.
+
Browser support
- 98.4% + 95.9%✅ No caveats.
--
- Toggle switch
-Creates a border animation on hover.
-HTML
-<button class="button">Submit</button> -CSS
-@import url(https://fonts.googleapis.com/css?family=BenchNine:700); -.button { - background-color: #c47135; - border: none; - color: #ffffff; - cursor: pointer; - display: inline-block; - font-family: 'BenchNine', Arial, sans-serif; - font-size: 1em; - font-size: 22px; - line-height: 1em; - margin: 15px 40px; - outline: none; - padding: 12px 40px 10px; - position: relative; - text-transform: uppercase; - font-weight: 700; -} -.button:before, -.button:after { - border-color: transparent; - -webkit-transition: all 0.25s; - transition: all 0.25s; - border-style: solid; - border-width: 0; - content: ''; - height: 24px; - position: absolute; - width: 24px; -} -.button:before { - border-color: #c47135; - border-top-width: 2px; - left: 0px; - top: -5px; -} -.button:after { - border-bottom-width: 2px; - border-color: #c47135; - bottom: -5px; - right: 0px; -} -.button:hover, -.button.hover { - background-color: #c47135; -} -.button:hover:before, -.button.hover:before, -.button:hover:after, -.button.hover:after { - height: 100%; - width: 100%; -} -Demo
-- -- -Explanation
-This effect is uses before and after selectors to make the border full width 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.
@@ -455,46 +254,43 @@- -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():
+ +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():
+ height: 280px; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat; + background-position: calc(100% - 20px) calc(100% - 40px); +} +Background-image in the right/bottomExplanation
Browser support
- 94.9% + 93.0%✅ No caveats.
@@ -515,28 +311,25 @@- +Explanation
-border-radius: 50%curves the borders of an element to create a circle.Since a circle has the same radius at any given point, the
+widthandheightmust be the same. Differing values will create an ellipse.Since a circle has the same radius at any given point, the
widthandheightmust be the same. Differing + values will create an ellipse.Browser support
- 95.5% + 93.7%✅ No caveats.
@@ -568,21 +361,19 @@float cExplanation
Browser support
@@ -596,7 +387,8 @@- +Constant width to height ratio
-Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).
+Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion + (i.e., its width to height ratio remains constant).
HTML
<div class="constant-width-to-height-ratio"></div>CSS
.constant-width-to-height-ratio { @@ -618,26 +410,22 @@- +Explanation
-
+padding-topon the::beforepseudo-element causes the height of the element to equal a percentage of its width.100%therefore means the element's height will always be100%of the width, - creating a responsive square. -padding-topon the::beforepseudo-element causes the height of the element to equal a percentage of + its width.100%therefore means the element's height will always be100%of the width, creating a responsive + square.This method also allows content to be placed inside the element normally.
Browser support
@@ -688,47 +476,40 @@ li::before {- +Explanation
You can create a ordered list using any type of HTML.
Browser support
- 98.4% + 95.9%✅ No caveats.
@@ -738,9 +519,9 @@ li::before {Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
HTML
<div class="custom-scrollbar"> <p> - Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> - Iure id exercitationem nulla qui repellat laborum vitae, <br> - molestias tempora velit natus. Quas, assumenda nisi. <br> + Lorem ipsum dolor sit amet consectetur adipisicing elit.<br /> + Iure id exercitationem nulla qui repellat laborum vitae, <br /> + molestias tempora velit natus. Quas, assumenda nisi. <br /> Quisquam enim qui iure, consequatur velit sit? </p> </div> @@ -766,52 +547,43 @@ li::before {- +Explanation
There are many other pseudo-elements that you can use to style scrollbars. For more info, visit the - WebKit Blog.
+There are many other pseudo-elements that you can use to style scrollbars. For more info, visit the WebKit Blog.
Browser support
- 88.0% + 86.7%⚠️ Scrollbar styling doesn't appear to be on any standards track.
@@ -834,30 +606,25 @@ li::before {- +Select some of this text.
Explanation
::selectiondefines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.Browser support
- 84.9% + 82.5%⚠️ Requires prefixes for full support and is not actually in any specification.
@@ -885,21 +652,18 @@ in any specification.- +CSS is awesome!
Explanation
The variables are defined globally within the
:rootCSS pseudo-class which matches the root element of a tree representing the document. Variables can also be scoped to a selector if defined within the block.Declare a variable with
@@ -907,14 +671,12 @@ in any specification.--variable-name:.Browser support
- 88.0% + 87.6%✅ No caveats.
@@ -934,25 +696,21 @@ in any specification.You can select me.
You can't select me!
Explanation
user-select: nonespecifies that the text cannot be selected.Browser support
- 87.2% + 89.2%⚠️ Requires prefixes for full support. ⚠️ This is not a secure method to prevent users from copying content.
@@ -961,9 +719,7 @@ in any specification.Display table centering
Vertically and horizontally centers a child element within its parent element using
display: table(as an alternative toflexbox).HTML
<div class="container"> - <div class="center"> - <span>Centered content</span> - </div> + <div class="center"><span>Centered content</span></div> </div>CSS
.container { @@ -985,28 +741,22 @@ in any specification.Demo
- +-- Centered content -+Centered contentExplanation
✅ No caveats.
-
-
- +Explanation
-Use a semi-transparent
+borderfor the whole element, except one side that will serve as the loading indicator for the donut. Useanimationto rotate the element.Use a semi-transparent
borderfor the whole element, except one side that will + serve as the loading indicator for the donut. Useanimationto rotate the element.Browser support
- 95.3% + 93.4%⚠️ Requires prefixes for full support.
-
-
- +Explanation
Browser support
- 91.7% + 90.2%⚠️ Requires prefixes for full support.
- +Easing variables
-Variables that can be reused for
+transition-timing-functionproperties, more powerful than the built-inease,ease-in,ease-outandease-in-out.Variables that can be reused for
transition-timing-functionproperties, more + powerful than the built-inease,ease-in,ease-outandease-in-out.HTML
<div class="easing-variables">Hover</div>CSS
:root { @@ -1218,57 +954,50 @@ in any specification.- +HoverExplanation
-The variables are defined globally within the
+:rootCSS pseudo-class which matches the root element of a tree representing the document. In HTML,:rootrepresents the<html>element and is identical - to the selectorhtml, except that its specificity is higher.The variables are defined globally within the
:rootCSS pseudo-class which matches the root element of a tree representing the document. In HTML,:rootrepresents the<html>element and is identical to the selectorhtml, except that its specificity is higher.Browser support
- 88.0% + 87.6%✅ No caveats.
@@ -1289,29 +1018,27 @@ in any specification.- +I appear etched into the background.
Explanation
-
+text-shadow: 0 2px whitecreates a white shadow offset0pxhorizontally and2pxvertically from the origin position.text-shadow: 0 2px whitecreates a white shadow offset0pxhorizontally and2pxvertically + from the origin position.The background must be darker than the shadow for the effect to work.
-The text color should be slightly faded to make it look like it's engraved/carved out of the background.
+The text color should be slightly faded to make it look like it's engraved/carved out + of the background.
Browser support
- 98.1% + 95.5%✅ No caveats.
@@ -1338,12 +1065,10 @@ in any specification.Item3
Explanation
Browser support
- 98.1% + 95.5%⚠️ 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-sizeproperty.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
+-
+
Browser support
++++ 91.5% ++✅ 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> +HTML
<div class="flexbox-centering"><div class="child">Centered content.</div></div>CSS
.flexbox-centering { display: flex; @@ -1385,14 +1163,12 @@ in any specification.Centered content.Explanation
Browser support
- 98.1% + 95.5%⚠️ Needs prefixes for full support.
@@ -1429,30 +1203,27 @@ in any specification.- +Gradient text
Explanation
Browser support
- 91.5% + 90.1%⚠️ Uses non-standard properties.
@@ -1460,9 +1231,7 @@ in any specification.- +Grid centering
Horizontally and vertically centers a child element within a parent element using
-grid.HTML
<div class="grid-centering"> - <div class="child">Centered content.</div> -</div> +HTML
<div class="grid-centering"><div class="child">Centered content.</div></div>CSS
.grid-centering { display: grid; @@ -1477,14 +1246,12 @@ in any specification.Centered content.Explanation
Browser support
- 87.6% + 88.3%✅ No caveats.
- - + +Hairline border
-Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp.
+Gives an element a border equal to 1 native device pixel in width, which can look + very sharp and crisp.
HTML
<div class="hairline-border">text</div>CSS
.hairline-border { @@ -1534,45 +1300,34 @@ in any specification.- +textExplanation
Browser Support
- 95.5% + 93.7%⚠️ Needs alternate syntax and JavaScript user agent checking for full support.
-
-
*Chrome does not support subpixel values on
@@ -1607,40 +1362,37 @@ el.style.setProperty('--max-height', height + 'px')border. Safari does not support subpixel values onbox-shadow. Firefox supports subpixel values on both.contentExplanation
CSS
JavaScript
-
-
Browser Support
@@ -1651,12 +1403,71 @@ el.style.setProperty('--max-height', height + 'px')- 88.0% + 87.6%-
-
+- +Hover Shadow Box Animation
+Creates a shadow box around the text whern it is hovered.
+HTML
+<p class="hover-shadow-box-animation">Box it!</p> +CSS
+.hover-shadow-box-animation { + display: inline-block; + vertical-align: middle; + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px transparent; + margin: 10px; + transition-duration: 0.3s; + transition-property: box-shadow, transform; +} +.hover-shadow-box-animation:hover, +.hover-shadow-box-animation:focus, +.hover-shadow-box-animation:active { + box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5); + transform: scale(1.2); +} +Demo
+++ +Box it!
+Explanation
+-
+
Browser Support
++++ 93.3% ++✅ No caveats.
+ @@ -1664,11 +1475,7 @@ el.style.setProperty('--max-height', height + 'px')Hover underline animation
Creates an animated underline effect when the text is hovered over.
-- Credit: - https://flatuicolors.com/ - -
+Credit: https://flatuicolors.com/
HTML
<p class="hover-underline-animation">Hover this text to see the effect!</p>CSS
.hover-underline-animation { @@ -1697,191 +1504,57 @@ el.style.setProperty('--max-height', height + 'px')- +Hover this text to see the effect!
Explanation
-
-
Browser support
- 95.4% + 93.5%✅ No caveats.
--
- Icon Border Animation
-Creates a border animation on hover.
-HTML
-<a href="#" class="button ion-ios-star-outline"></a> -CSS
-@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); -.button { - position: relative; - overflow: hidden; - font-size: 40px; - color: rgba(255, 255, 255, 0.8); - margin: 40px; - padding: 3px; - display: inline-block; - text-align: center; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); - text-decoration: none; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -.button::before { - background-color: #2b2b2b; - width: 75px; - height: 75px; - line-height: 75px; -} -.button:after { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: #f39c12; - content: ''; - z-index: -1; - display: inline-block; - -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, -100%); - transform: rotate(-45deg) scale(1.5) translate(0%, -100%); -} -.button:before, -.button:after { - -webkit-transition: all 0.4s ease-in-out; - transition: all 0.4s ease-in-out; -} -.button:hover, -.button:active, -.button.hover { - color: #ffffff; -} -.button:hover:after, -.button:active:after, -.button.hover:after { - -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, 0%); - transform: rotate(-45deg) scale(1.5) translate(0%, 0%); -} -Demo
- - -Explanation
-This effect is uses before and after selectors to make the border full width on hover.
-Browser support
---- 99+% --✅ No caveats.
- - - - --
Last item with remaining available height
Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.
HTML
<div class="container"> @@ -1913,22 +1586,18 @@ body {Div 3Explanation
Browser support
- 98.1% + 95.5%⚠️ Needs prefixes for full support.
@@ -1957,14 +1624,8 @@ body {- +Mouse cursor gradient tracking
A hover effect where the gradient follows the mouse cursor.
-- Credit: - Tobias Reich - -
-HTML
<button class="mouse-cursor-gradient-tracking"> - <span>Hover me</span> -</button> +Credit: Tobias Reich
+HTML
<button class="mouse-cursor-gradient-tracking"><span>Hover me</span></button>CSS
.mouse-cursor-gradient-tracking { position: relative; @@ -2005,59 +1666,48 @@ btn.onmousemove = function(e) { }Demo
-- -- - + + +Explanation
TODO
Browser support
@@ -2065,9 +1715,7 @@ btn.onmousemove = function(e) { ⚠️ Requires JavaScript. @@ -2106,48 +1754,38 @@ li:not(:last-child) {- 88.0% + 87.6%Explanation
-
+li:not(:last-child)specifies that the styles should apply to alllielements except the:last-child.li:not(:last-child)specifies that the styles should apply to alllielements except + the:last-child.Browser support
- 98.4% + 95.9%✅ No caveats.
Offscreen
-A bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility ( - ADA) development when more context is needed for visually-impaired users. As an alternative to
+display: nonewhich is not readable by screen readers orvisibility: hiddenwhich takes up physical space in the - DOM.A bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility (ADA) development when more context is needed for visually-impaired users. As an alternative to
display: nonewhich is not readable by screen readers orvisibility: hiddenwhich takes up physical space in the DOM.HTML
<a class="button" href="http://pantswebsite.com"> - Learn More - <span class="offscreen"> about pants</span> + Learn More <span class="offscreen"> about pants</span> </a>CSS
.offscreen { @@ -2162,24 +1800,19 @@ li:not(:last-child) { }Demo
- - + +Explanation
✅ No caveats.
(Although
@@ -2211,13 +1842,13 @@ li:not(:last-child) {cliptechnically has been depreciated, the newerclip-pathcurrently has very limited browser support.)Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
HTML
<div class="overflow-scroll-gradient"> <div class="overflow-scroll-gradient__scroller"> - Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> - Iure id exercitationem nulla qui repellat laborum vitae, <br> - molestias tempora velit natus. Quas, assumenda nisi. <br> - Quisquam enim qui iure, consequatur velit sit? <br> - Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> - Iure id exercitationem nulla qui repellat laborum vitae, <br> - molestias tempora velit natus. Quas, assumenda nisi. <br> + Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> + Iure id exercitationem nulla qui repellat laborum vitae, <br /> + molestias tempora velit natus. Quas, assumenda nisi. <br /> + Quisquam enim qui iure, consequatur velit sit? <br /> + Lorem ipsum dolor sit amet consectetur adipisicing elit.<br /> + Iure id exercitationem nulla qui repellat laborum vitae, <br /> + molestias tempora velit natus. Quas, assumenda nisi. <br /> Quisquam enim qui iure, consequatur velit sit? </div> </div> @@ -2250,47 +1881,45 @@ li:not(:last-child) {- +- Lorem ipsum dolor sit amet consectetur adipisicing elit. -
Iure id exercitationem nulla qui repellat laborum vitae, -
molestias tempora velit natus. Quas, assumenda nisi. -
Quisquam enim qui iure, consequatur velit sit? -
Lorem ipsum dolor sit amet consectetur adipisicing elit. -
Iure id exercitationem nulla qui repellat laborum vitae, -
molestias tempora velit natus. Quas, assumenda nisi. -
Quisquam enim qui iure, consequatur velit sit? + Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Iure id exercitationem nulla qui repellat laborum vitae,
+ molestias tempora velit natus. Quas, assumenda nisi.
+ Quisquam enim qui iure, consequatur velit sit?
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Iure id exercitationem nulla qui repellat laborum vitae,
+ molestias tempora velit natus. Quas, assumenda nisi.
+ Quisquam enim qui iure, consequatur velit sit?Explanation
Browser support
- 95.4% + 93.5%✅ No caveats.
@@ -2313,11 +1940,7 @@ li:not(:last-child) {Popout menu
Reveals an interactive popout menu on hover and focus.
-HTML
<div class="reference" tabindex="0"> - <div class="popout-menu"> - Popout menu - </div> -</div> +HTML
<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>CSS
.reference { position: relative; @@ -2342,40 +1965,33 @@ li:not(:last-child) {Demo
- +- +Explanation
Pretty text underline
-A nicer alternative to
+text-decoration: underlineor<u></u>where descenders do not clip the underline. Natively implemented astext-decoration-skip-ink: autobut it has less control over - the underline.A nicer alternative to
text-decoration: underlineor<u></u>where descenders do not clip the underline. + Natively implemented astext-decoration-skip-ink: autobut 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 { @@ -2416,47 +2032,44 @@ li:not(:last-child) {- +Pretty text underline without clipping descending letters.
Explanation
-
-
Browser support
- 95.4% + 93.5%✅ No caveats.
-
-
Resets all styles to default values with one property. This will not affect
directionandunicode-bidiproperties.HTML
<div class="reset-all-styles"> <h5>Title</h5> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p> + <p> + Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui + repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui + iure, consequatur velit sit? + </p> </div>CSS
.reset-all-styles { @@ -2477,27 +2094,27 @@ li:not(:last-child) {- +Title
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui + repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui + iure, consequatur velit sit? +
Explanation
The
allproperty allows you to reset all styles (inherited or not) to default values.Browser support
- 88.3% + 87.2%⚠️ MS Edge status is under consideration.
@@ -2525,28 +2142,23 @@ li:not(:last-child) {- +Explanation
Browser support
- 98.3% + 95.7%✅ No caveats.
@@ -2571,12 +2181,8 @@ li:not(:last-child) {Sibling fade
Fades out the siblings of a hovered item.
HTML
<div class="sibling-fade"> - <span>Item 1</span> - <span>Item 2</span> - <span>Item 3</span> - <span>Item 4</span> - <span>Item 5</span> - <span>Item 6</span> + <span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span> + <span>Item 5</span> <span>Item 6</span> </div>CSS
span { @@ -2590,42 +2196,32 @@ li:not(:last-child) {Demo
- +- Item 1 - Item 2 - Item 3 - Item 4 - Item 5 - Item 6 + Item 1 Item 2 Item 3 Item 4 + Item 5 Item 6Explanation
Browser support
- 95.4% + 93.5%✅ No caveats.
-
-
- +This text uses the system font.
Explanation
-The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).
+The browser looks for each successive font, preferring the first one if possible, and + falls back to the next if it cannot find the font (on the system or defined in CSS).
-
Toggle switch
Creates a toggle switch with CSS only.
-HTML
<input type="checkbox" id="toggle" class="offscreen" /> -<label for="toggle" class="switch"></label> +HTML
<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>CSS
.switch { position: relative; @@ -2711,10 +2304,7 @@ input[type='checkbox']:checked + .switch { }Demo
-- - -+Explanation
-This effect is styling only the
+<label>element to look like a toggle switch, and hiding the actual<input>checkbox by positioning it offscreen. When clicking the label associated with the<input>element, it sets the<input>checkbox into the:checkedstate.This effect is styling only the
<label>element to look like a toggle switch, and hiding the actual<input>checkbox by positioning it offscreen. When clicking the label associated with the<input>element, it sets the<input>checkbox into the:checkedstate.Browser support
- 95.5% + 93.7%⚠️ Requires prefixes for full support.
@@ -2778,11 +2365,8 @@ input[type='checkbox']:checked + .switch {Transform centering
-Vertically and horizontally centers a child element within its parent element using
-position: absoluteandtransform: translate()(as an alternative toflexboxordisplay: table). Similar - toflexbox, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.HTML
<div class="parent"> - <div class="child">Centered content</div> -</div> +Vertically and horizontally centers a child element within its parent element using
+position: absoluteandtransform: translate()(as an alternative toflexboxordisplay: table). Similar toflexbox, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.HTML
<div class="parent"><div class="child">Centered content</div></div>CSS
.parent { border: 1px solid #333; @@ -2834,9 +2418,7 @@ input[type='checkbox']:checked + .switch {⚠️ Requires prefix for full support.
@@ -2868,10 +2450,10 @@ input[type='checkbox']:checked + .switch { }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 onborder-topmeans the arrow points downward.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 onborder-top+ means the arrow points downward.Experiment with the
pxvalues to change the proportion of the triangle.Browser support
@@ -2909,26 +2491,74 @@ input[type='checkbox']:checked + .switch {+Explanation
-
-
Browser support
- 98.4% + 95.8%⚠️ 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
+++ +-
+
Explanation
+-
+
Note that you can use it to apply different styles to other HTML elements like div, tr, p, ol, etc.
+Browser support
++++ 95.9% ++✅ No caveats.
+ + + + + +