Writing in the front

Be free and at leisure on a Friday night, sort out their own lot often do (collect), going to have it again today, find a star high project, there are a lot of CSS fragments, and the title is very attractive, and then spent nearly an hour from the beginning to the end after a time, some of which are some of the knowledge, we often use Also includes some relatively new attributes of the application, knowledge quite a lot, in order to make you look more convenient, and then took a little (very long very long) time to translate into Chinese.

Github.com/30-seconds/…

Of course, I need to communicate with the author in advance and get the author’s permission. The author hopes to create a warehouse and keep up with the official update so that more people can see it.

Chinese warehouse github.com/Bigerfe/30-… , has completed the translation of CSS select collection.

This article is a free translation rather than a literal translation, in order to facilitate understanding also added some of their own language, if there is any deviation or error, please leave a comment.

A selection of useful CSS fragments that you can understand in 30 seconds or less.

This CSS collection is divided into five categories – Layout, visual, animation, interactive, and others.

Please refer to the original documentation for more details. Github.com/30-seconds/… .

layout

1. Box model reset

The box model is reset so that the width and height of the box are not affected by its border or padding.Copy the code

HTML

<div class="box">border-box</div>
<div class="box content-box">content-box</div>
Copy the code

CSS

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  padding: 10px;
  background: tomato;
  color: white;
  border: 10px solid red;
}
.content-box {
  box-sizing: content-box;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • Box-sizing: When the element is set to border-box, even padding or border does not change the width or height of the element.
  • Box-sizing: set inherit so that the elements inherit the parent box-sizing rules.

Browser Support

99.9% view this caniuse

2. Clear float a better way

Floating cleanup is not required with auxiliary elements.

Note: This is only useful when using a float layout. Consider using Flexbox layout or grid layout in real life scenarios.

HTML

<div class="clearfix">
  <div class="floated">float a</div>
  <div class="floated">float b</div>
  <div class="floated">float c</div>
</div>
Copy the code

CSS

.clearfix{
  border:solid 1px red;
}
.clearfix::after {
  content: ' ';
  display: block;
  clear: both;
}
.floated {
  float: left;
  margin-left:20px;
}

Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

Browser Support

100%

3. Constant aspect ratio

Given an element of variable width, it ensures that its height remains proportional in a responsive manner (that is, its aspect ratio remains constant).

DEMO

You can see the actual effects and edit the code on CodePen

HTML

<div class="constant-width-to-height-ratio"></div>
Copy the code

CSS

.constant-width-to-height-ratio {
  background: # 333;
  width: 50%;
}
.constant-width-to-height-ratio::before {
  content: ' ';
  padding-top: 100%;
  float: left;
}
.constant-width-to-height-ratio::after {
  content: ' ';
  display: block;
  clear: both;
}
Copy the code

instructions

  • width:50%Only the width of the parent element is set
  • ::beforeDefines a pseudo-element for the parent element
  • padding-top: 100%;Sets the inner margin of the pseudo-element, where the percentage value is calculated by width, so it is rendered as a responsive block of elements.
  • This method also allows content to be properly placed within elements.

Browser Support

100%

4. Center the table

Use display: table (as an alternative to flexbox) to place child elements horizontally and vertically within their parent elements.

HTML

<div class="container">
  <div class="center"><span>Centered content</span></div>
</div>
Copy the code

CSS

.container {
  border: 1px solid # 333;
  height: 250px;
  width: 250px;
}
.center {
  display: table;
  height: 100%;
  width: 100%;
}
.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

  • Display: table makes the.center element behave like<table>The HTML element;
  • Set the width and height of.center to 100% so that it fills the parent element;
  • Display: table-cell, set ‘. Center > span’ table-cell to allow elements to behave like HTML elements;
  • Text-align: center Center the child element horizontally;
  • Vertical-align: middle Centralizes the child element vertically;

The external parent must have a fixed width and height.

Browser Support

100%

See this section caniuse

5. Distribute the child elements evenly

HTML

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>
Copy the code
.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • Display: flex: Displays the Flex layout

  • The justify – content: space – between:

  • Distribute child elements evenly and horizontally. The first child element is on the left edge and the last child element is on the right edge. Alternatively, use context-content: space-around to allocate space around child nodes, rather than between them.

Browser Support

99.5%

  • Prefixes are required for full support. caniuse

6. Make images display comfortably in containers

Sets the fit and position of the image in its container while preserving its aspect ratio. Previously this could only be done using the background image and 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" />
Copy the code

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;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • object-fit: containThe entire image is displayed in the container and the aspect ratio is maintained
  • object-fit: coverFill the container with images and keep the aspect ratio
  • object-position: [x] [y]Adjust the display position of the image

Browser support

95.5% caniuse

7. Center with flexbox

Use Flexbox to center its child horizontally and vertically

HTML

<div class="flexbox-centering"><div class="child">Centered content.</div></div>
Copy the code

CSS

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • display: flexEnabling Flex local
  • justify-content: centerThe child element is horizontally centered
  • align-items: centerThe child element is vertically centered

Browser support

99.5% (prefix required) caniuse

8. Center an element vertically against another element.

HTML

<div class="ghost-trick">
  <div class="ghosting"><p>Vertically centered without changing the position property.</p></div>
</div>
Copy the code

CSS

.ghosting {
  height: 300px;
  background: #0ff;
}
.ghosting:before {
  content: ' ';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
p {
  display: inline-block;
  vertical-align: middle;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

The description uses the style of the: before pseudo-element to align the inline element vertically without changing its position attribute.

Browser support

99.9% caniuse

9. Center the grid

Use meshes to reside neutrons horizontally and vertically.

HTML

<div class="grid-centering"><div class="child">Centered content.</div></div>
Copy the code

CSS

.grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • display: gridEnabling grid layout
  • justify-content: centerCenter the child element horizontally
  • align-items: centerCenter the child element vertically

Browser support

92.3% caniuse

10. Make the last item fill the remaining height

By providing the last element with the remaining available space in the current viewport, you can leverage the available viewport space even as you resize the window.

HTML

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>
Copy the code

CSS

html.body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container > div:last-child {
  background-color: tomato;
  flex: 1;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • height: 100%Set the container height to the viewport height
  • display: flexTo enable the flex
  • flex-direction: columnSet the order of items from top to bottom
  • flex-grow: 1Flexbox applies the remaining free space of the container to the last child element. The parent must have viewport height. Flex-grow: 1 can be applied to the first or second element, and it will have all available space.

Browser support

99.5% need to use the prefix caniuse

11. Hidden off-screen elements

HTML

<a class="button" href="http://pantswebsite.com">
  Learn More <span class="offscreen"> about pants</span>
</a>
Copy the code

CSS

.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • Delete all borders
  • useclipHidden elements
  • Set width and height to 1px
  • Use margin: -1px to remove the height and width of the element
  • Overflow of hidden elements
  • Remove all padding
  • Absolutely position elements so that they do not take up space in the DOM

Browser support

100% requires the prefix caniuse (although cilp has been deprecated, newer clip-path currently has very limited support for browsers).

12. Use transform neutrons

Centered with position: Absolute and Transform: Translate (), it does not need to know the width and height of the parent and child elements, making it ideal for responsive applications.

HTML

<div class="parent"><div class="child">Centered content</div></div>
Copy the code

CSS

.parent {
  border: 1px solid # 333;
  height: 250px;
  position: relative;
  width: 250px;
}
.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(50%, 50%);text-align: center;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

Browser support

97.7% require the prefix caniuse

visual

13. Truncated display of multi-line text

If the text is longer than one line, n lines are truncated and end with a gradient.

HTML

<p class="truncate-text-multiline">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
  labore et.
</p>
Copy the code

CSS

.truncate-text-multiline {
  overflow: hidden;
  display: block;
  height: 109.2 px.;
  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.4 px.;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • overflow: hiddenPreventing content overflow
  • width: 400pxMake sure elements have dimensions
  • Height: 109.2 pxFont size * line-height * numberOfLines (in this case 26 * 1.4 * 3 = 109.2)
  • Height: 36.4 pxFont size * line-height (in this case 26 * 1.4 = 36.4)
  • background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%The gradient from thetransparentTo gradient from transparent to# f5f6f9

Browser support

97.5% caniuse

14. Draw a circle

Create circles using pure CSS.

HTML

<div class="circle"></div>
Copy the code

CSS

.circle {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: # 333;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

Browser support

97.7% caniuse

15. List counters

Counters are essentially variables maintained by CSS whose values can be incrementing by CSS rules to track how many times they are used.

HTML

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>
    List item
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>
Copy the code

CSS

ul {
  counter-reset: counter;
}
li::before {
  counter-increment: counter;
  content: counters(counter, '. ') ' ';
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

Note you can now create ordered lists using any type of HTML tag.

  • counter-resetInitializes the counter, whose 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 for countable elements. Once the counter reset is initialized, the value of the counter can be increased or decreased.
  • counter(name, style)Displays the value of the section counter. Usually used for content properties. This function can take two arguments, the first as the name of the counter and the second as placeholder content, for example3.1The decimal point of theta.
  • CSS counters are especially useful for making outline lists because new instances of counters are automatically created in child elements. Using the counters () function, it is possible to insert delimited text between nested counters at different levels.

Browser support

99.9% caniuse

16. Customize scroll bars

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 />
    Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>
Copy the code

CSS

.custom-scrollbar {
  height: 70px;
  overflow-y: scroll;
}
/* To style the document scrollbar, remove `.custom-scrollbar` */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

Browser support

90.7% caniuse

17. Customize the style of text selection

HTML

<p class="custom-text-selection">Select some of this text.</p>
Copy the code

CSS

::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

Browser support

86.5% caniuse

18. Create dynamic shadows

Creates a shadow similar to box-shadow, but based on the color of the element itself.

HTMl

<div class="dynamic-shadow"></div>
Copy the code

CSS

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}
.dynamic-shadow::after {
  content: ' ';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5 rem;
  filter: blur(0.4 rem);opacity: 0.7;
  z-index: -1;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • ::afterDefine a pseudo-element
  • position: absoluteTakes the pseudo element out of the document flow and positions it relative to the parent
  • width: 100% and height: 100%Resizes the pseudo-element to fill in the size of its parent element so that it is equal in size.
  • background: inheritCauses the pseudo-element to inherit a linear gradient from its parent
  • Top: 0.5 remOffsets the pseudo-element slightly from its parent.
  • The filter: the blur (rem) 0.4Set the pseudo-element blur effect to create the bottom shadow effect.
  • Opacity: 0.7Set pseudo-element transparency
  • z-index: -1Position the pseudo-element after the parent but in front of the background.

Browser support

94.2% need to use the prefix caniuse

19. Etch text effect

Creates an effect in which the text looks like it is “etched” or sculpted in the background. HTML

<p class="etched-text">I appear etched into the background.</p>
Copy the code

CSS

.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5 rem;
  font-weight: bold;
  color: #b8bec5;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • text-shadow: 0 2px whiteCreate a white shadow offset 0px horizontally and 2px vertically from the origin position.
  • The background must be darker than the shadow for the effect to be noticeable.

Browser support

99.5% need to use the prefix caniuse

20. Focus Within pseudo-class

If any of the subitems in the form are focused, change the form’s appearance. 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>
Copy the code

CSS

form {
  border: 3px solid #2d98da;
  color: # 000000;
  padding: 4px;
}
form:focus-within {
  background: #f7b731;
  color: # 000000;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • Pseudo class: : focus-withinApply the corresponding style to the parent element (any child element is focused). For example, an input element within a form element.

Browser support

82.9% IE11 or current versions of Edge are not supported. caniuse

21. Specify the full screen of the element

: fullSRCreen Full screen pseudo class represents the element that is displayed when the browser is in full screen 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>
Copy the code

CSS

.container {
  margin: 40px auto;
  max-width: 700px;
}
.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
}
.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}
.element:-ms-fullscreen p {
  visibility: visible;
}
.element:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • :fullscreenPseudo-class selectors are used to select and set elements that are displayed in full-screen mode.

Browser support

85.6%

Properties,

caniuse

22. Gradient text

Provides a gradient color for text.

HTML

<p class="gradient-text">Gradient text</p>
Copy the code

CSS

.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

Browser support

94.1%

caniuse

23. Gradient tracking

A hover effect in which the gradient follows the mouse cursor.

HTML

<button class="button">
	<span>Hover me I'm awesome</span>
</button>
Copy the code

CSS

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: white; } .button { position: relative; appearance: none; background: #f72359; padding: 1em 2em; border: none; color: white; The font - size: 1.2 em. cursor: pointer; outline: none; overflow: hidden; border-radius: 100px; span { position: relative; pointer-events: none; } &::before { --size: 0; content: ''; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background: radial-gradient(circle closest-side, #4405f7, transparent); transform: translate(-50%, -50%); transition: width .2s ease, height .2s ease; } &:hover::before { --size: 400px; }}Copy the code
document.querySelector('.button').onmousemove = (e) = > {

	const x = e.pageX - e.target.offsetLeft
	const y = e.pageY - e.target.offsetTop

	e.target.style.setProperty('--x'.`${ x }px`)
	e.target.style.setProperty('--y'.`${ y }px`)}Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

Browser support

Js Caniuse is required for 91.6%

24. :not pseudo class selector

The: NOT pseudo-selector is useful for styling a set of elements while preserving the style of the last (specified) element.

HTML

<ul class="css-not-selector-shortcut">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
Copy the code

CSS

.css-not-selector-shortcut {
  display: flex;
}
ul {
  padding-left: 0;
}
li {
  list-style-type: none;
  margin: 0;
  padding: 0 0.75 rem;
}
li:not(:last-child) {
  border-right: 2px solid #d2d5e4;
}
Copy the code

DEMO

You can see the actual effects and edit the code on CodePen

instructions

  • li:not(:last-child)Style all li elements except last: Child, so there is no border to the right of the last element.

Browser support

99.9% caniuse

25. Overflow scroll gradient

Add a gradient to the overflow element to better indicate what to scroll through. HTLM

<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 />
    Quisquam enim qui iure, consequatur velit sit?
  </div>
</div>
Copy the code

CSS

.overflow-scroll-gradient {
  position: relative;
}
.overflow-scroll-gradient::after {
  content: ' ';
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 25px;
  background: linear-gradient(RGBA (255, 255, 255, 0.001), White);/* transparent keyword is broken in Safari */
  pointer-events: none;
}
.overflow-scroll-gradient__scroller {
  overflow-y: scroll;
  background: white;
  width: 240px;
  height: 200px;
  padding: 15px;
  line-height: 1.2;
}
Copy the code

DEMO

instructions

  • ::afterDefine a pseudo element to show the gradient effect
  • background-image: linear-gradient(...)Add a linear gradient from transparent to white (top to bottom).
  • pointer-events: noneSpecifies that pseudo-elements cannot be the target of mouse events, and that the text behind them is still optional/interactive.

Browser support

97.5% caniuse

26. Underline text beautifully

HTML

<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
Copy the code

CSS

.pretty-text-underline {
  display: inline;
  text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9.1px -1px #f5f6f9;
  background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
.pretty-text-underline::-moz-selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}
.pretty-text-underline::selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}
Copy the code

DEMO

View and edit code on CodePen

Browser support

97.5% caniuse1 caniuse2

27. Reset all styles

Use a property to reset all styles to default values. This does not affect the direction and Unicode-bidi attributes.

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>
</div>
Copy the code

CSS

.reset-all-styles {
  all: initial;
}
Copy the code

DEMO

View and edit code on CodePen

instructions

The All attribute allows you to reset all styles (inherited or not) to default values.

Browser support

91.2% caniuse

28. Shape separator

Use SVG shapes to split two different blocks to create a more interesting visual appearance.

HTML

<div class="shape-separator"></div>
Copy the code

CSS

.shape-separator {
  position: relative;
  height: 48px;
  background: # 333;
}
.shape-separator::after {
  content: ' ';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}
Copy the code

DEMO

View and edit code on CodePen

instructions

  • background-image: url(...)Add an SVG shape (24×12 triangle) as the background image for the pseudo-element, repeating by default. It must be the same color as the block to be divided. For other shapes, we can useURL encoder for SVG.

Browser support

99.7% caniuse

29. System fonts

HTML

<p class="system-font-stack">This text uses the system font.</p>
Copy the code

CSS

.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
Copy the code

DEMO

View and edit code on CodePen

Note The browser searches for fonts one by one. If the font is found, use the current font. If the font cannot be found (defined on the system or in CSS), continue to search.

  • -apple-systemAvailable on iOS and macOS (but not Chrome)
  • BlinkMacSystemFontUsed for macOS Chrome
  • Segoe UIFor Windows 10
  • RobotoUse it on Android
  • Oxygen-SansUsed on Linux KDE
  • UbuntuFor Ubuntu
  • CantarellUsed on Linux with GNOME Shell
  • Helvetica Neue and HelveticaFor macOS 10.10 and lower
  • ArialFonts widely supported by operating systems
  • sans-serifIf no other font is supported, downgrade to use the Sans-Serif universal font

Browser support is 100%

30. CSS switch

Use only CSS

HTMl

<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>
Copy the code

CSS

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3 s;
}
.switch::after {
  content: ' ';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3 s;
}
input[type='checkbox']:checked + .switch::after {
  transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
  background-color: #7983ff;
}
.offscreen {
  position: absolute;
  left: -9999px;
}
Copy the code

DEMO

Preview and edit code on CodePen

Browser support 97.7% requires prefixes

caniuse

31. Draw a triangle with CSS

HTML

<div class="triangle"></div>
Copy the code

CSS

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid # 333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
Copy the code

DEMO

Preview and edit code on CodePen

Browser support is 100%;

32. Zebra stripe list

Create lists with alternating background colors, which are useful for distinguishing between rows.

HTML

<ul>
  <li>Item 01</li>
  <li>Item 02</li>
  <li>Item 03</li>
  <li>Item 04</li>
  <li>Item 05</li>
</ul>
Copy the code

CSS

li:nth-child(odd) {
  background-color: #eee;
}
Copy the code

DEMO

Preview and edit code on CodePen

Browser support 99.9% caniuse

animation

33. Bouncing loading animation

HTML

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>
Copy the code

CSS

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0); }}.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2 rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6 s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2 s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4 s;
}
Copy the code

DEMO

Preview and edit code on CodePen

Browser support 97.4% caniuse

34. Button border animation

Create a hover border animation

HTML

<div class="button-border"><button class="button">Submit</button></div>
Copy the code

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.25 s;
  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%;
}
Copy the code

DEMO

Preview and edit code on CodePen

The instructions use: before and: after pseudo-elements as borders to set the animation while hovering.

Browser support is 100%.

35. Donut spinner

Create a doughnut spinner that can be used to wait for content to load.

DEMO

HTML

<div class="donut"></div>
Copy the code

CSS

@keyframes donut-spin {
  0% {
    transform: rotate(0deg); 100%} {transform: rotate(360deg); }}.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2 s linear infinite;
}
Copy the code

Preview and edit code on CodePen

Use a translucent border for the entire element and set the border color on one side to # 7983FF; Finally, animate the entire element.

Browser support ** 97.4%** Prefix required.

caniuse1 https://caniuse.com/#feat=transforms2d

caniuse2 feat=transforms2d

36. Slow motion effect

DEMO

HTML

<div class="easing-variables">Hover</div>
Copy the code

CSS

:root {
  /* Place variables in here to use globally */
}
.easing-variables {
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  display: inline-block;
  width: 75px;
  height: 75px;
  padding: 10px;
  color: white;
  line-height: 50px;
  text-align: center;
  background: # 333;
  transition: transform 1s var(--ease-out-quart);
}
.easing-variables:hover {
  transform: rotate(45deg);
}
Copy the code

Preview and edit code on CodePen

Browser support ** 91.6% ** Caniuse CSS -variables

37. Highly excessive

Converts the height of an element from 0 to automatic when its height is unknown.

DEMO

Preview and edit code on CodePen

HTML

<div class="trigger">
  Hover me to see a height transition.
  <div class="el">content</div>
</div>
Copy the code

CSS

.el {
  transition: max-height 0.5 s;
  overflow: hidden;
  max-height: 0;
}
.trigger:hover > .el {
  max-height: var(--max-height);
}
Copy the code

JAVASCRIPT

var el = document.querySelector('.el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')
Copy the code

instructions

Browser support 91.6% caniuse CSS -variables

  • Note: this will cause all animation frames to be rearranged, and lag may occur if there are a large number of elements below the element.

caninuse – css-variables

caninuse – css-transitions

38. Hover shadow animation

Creates a shadow box animation around the text while hovering over it.

Animation effects can be previewed and code edited on CodePen

HTML

<p class="hover-shadow-box-animation">Box it!</p>
Copy the code

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.3 s;
  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);
}
Copy the code

Browser support 97.3%

caniuse – feat-transforms3d

caniuse – css-transitions

39. Hover slide animation

Creates an underline text animation while the text is hovering.

DEMO

Animation effects can be previewed and code edited on CodePen

HTML

<p class="hover-underline-animation">Hover this text to see the effect!</p>
Copy the code

CSS

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover-underline-animation::after {
  content: ' ';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25 s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
Copy the code

instructions

  • display: inline-blockMake the p an inline block to prevent the underline from spanning the entire line width rather than just the text content.
  • position: relativeSets the parent element to relative positioning
  • ::afterDefine a pseudo-element
  • position: absoluteRemove the pseudo-element from document 6 and position it relative to the parent element
  • width: 100%Ensure that the width of the pseudo-element is the same as that of the parent element.
  • transform: scaleX(0)The pseudo-element is initially scaled to 0, so it is invisible.
  • bottom: 0 and left: 0Place the pseudo-element in the lower left corner of the parent element.
  • The transition: transform 0.25 s ease - outSet the animation effect toease-outAnd do it in 0.25 seconds.
  • transform-origin: bottom rightTransforms the center point to the lower right corner of the parent element.
  • :hover::afterThen use scaleX (1) to convert the width to 100%, and then change the center point to the bottom left, allowing it to convert out from the other direction while hovering.

Browser support 97.5%

caniuse – feat=transforms2d

caniuse – css-transitions

interaction

40. Disable selection

Use CSS to make content unselectable.

DEMO

Preview effects and edit code on CodePen

HTML

<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>
Copy the code

CSS

.unselectable {
  user-select: none;
}
Copy the code

instructions

User-select: none Specifies that text cannot be selected

Browser support 93.2% (prefix is required, which is not a safe way to prevent users from copying content.)

caniuse – feat=user-select-none

41. Pop-up menus

Interactive menus pop up on hover and focus.

Preview effects and edit code on CodePen

HTML

<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>
Copy the code

CSS

.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 100px;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: # 333;
  color: white;
  padding: 15px;
}
.reference:hover > .popout-menu..reference:focus > .popout-menu..reference:focus-within > .popout-menu {
  visibility: visible;
}
Copy the code

instructions

  • left: 100%The popup menu is offset by 100% of its parent’s width from the left.
  • visibility: hidden
  • .reference:hover > .popout-menuPopout-menu is displayed when the mouse is hovering
  • .reference:focus > .popout-menuWhen focusing,.popout-menu is displayed
  • .reference:focus-within > .popout-menuMake sure the popup window displays when the focus is in the reference range.

Browser support is 100%;

42. Brother elements fade

Sibling nodes fade out when hovering.

DEMO

Preview effects and edit code on CodePen

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>
</div>
Copy the code

CSS

span {
  padding: 0 1rem;
  transition: opacity 0.2 s;
}
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}
Copy the code

instructions

  • The transition: opacity of 0.2 sSet the fade animation to 0.2 seconds.
  • .sibling-fade:hover span:not(:hover)When the parent hovers, select the currently unhovered SPAN subitem and change its transparency to 0.5.

Browser support 97.5%;

caniuse-feat=css-sel3

caniuse-feat=css-transitions

other

Calculate function Calc()

The calc () function allows CSS values to be defined using mathematical expressions, and properties take values that are the result of mathematical expressions.

DEMO

Preview effects and edit code on CodePen

If you want to align the background image on the right and bottom, you can only use the line length value. So now you can use the calc () function.

HTML

<div class="box-example"></div>
Copy the code

CSS

.box-example {
  height: 280px;
  background: # 222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
  background-position: calc(100% - 20px) calc(100% - 20px);
}
Copy the code

instructions

  • Addition, subtraction, multiplication and division are allowed.
  • You can use different units (for example, pixels and percentages) for each value in the expression.
  • Allows nesting of calc () functions.
  • It can be used with any permission.

Browser support is 97.0%

caniuse – feat=calc

44. CSS custom variables

CSS variables that contain specific values to reuse.

HTML

<p class="custom-variables">CSS is awesome!</p>
Copy the code

CSS

:root {
  /* Place variables within here to use the variables globally. */
}
.custom-variables {
  --some-color: #da7800;
  --some-keyword: italic;
  --some-size: 1.25 em;
  --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2 em slategray;
  color: var(--some-color);
  font-size: var(--some-size);
  font-style: var(--some-keyword);
  text-shadow: var(--some-complex-value);
}
Copy the code

DEMO

Preview effects and edit code on CodePen

instructions

  • --variable-name:Declare variables in this format.
  • var(--variable-name)Use this function to reuse variables throughout the document.

Browser support 91.6%

caniuse – feat=css-variables

For more exciting, fun and useful front-end content, please pay attention to the public account “Front-end technology jianghu”