1. Multi-column Layout
MDN – CSS Multi-column Layout
Can I Use – CSS3 Multi-column Layout
CSS provides support for multi-column layouts. Supports setting the number of columns in a layout (column-count), the flow rules for how content should flow between columns, the spacing between columns (column-gap), and the style of column-rules.
For example, you can implement the following waterfall flow effect:
Codepen demo
Main styles:
.masonry {
width: 1440px;
margin: 20px auto;
columns: 4;
column-gap: 30px;
.item {
width: 100%;
break-inside: avoid;
margin-bottom: 30px;
img {
width: 100%; }}}Copy the code2. Writing Modes
MDN – CSS Writing Modes
Can I Use – CSS writing-mode property
Writing Modes define various international Writing Modes, such as left to right (Latin, Hindi), right to left (Hebrew, Arabic), bidirectional (a mix of left to right and right to left languages), and vertical (Chinese).
Here are three ways of writing:
Codepen demo
Key styles:
.left-to-right {
direction: ltr;
}
.right-to-left {
direction: rtl;
}
.vertical {
writing-mode: vertical-rl;
}
Copy the codeAlternatively, it can be used to implement a Code rain of the Matrix: Codepen-Matrix code rain
3. aspect-ratioattribute
MDN – aspect-ratio
Can I Use – CSS property: aspect-ratio
The aspect-ratio property of CSS is used to set the preferred aspect ratio of elements, automatically calculating width, height, and other layout functions, eliminating the need to calculate both width and height.
For example, video websites can set the ratio of video playback window to 16/9:
Codepen demo
Key styles:
.video-box {
width: 70vw;
background-color: # 000;
aspect-ratio: 16/9;
}
Copy the code4. gapattribute
MDN – gap
Can I Use – gap property for Flexbox
The CSS gap property is used to set the spacing between rows and columns in Flex and Grid layouts, and is short for row-gap and column-gap.
In the past, we used margin and padding to control the spacing between Flex items when using Flex layout. Using gap is more convenient.
Such as:
<div class="flex-box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Copy the code.flex-box {
display: flex;
width: 400px;
flex-wrap: wrap;
gap: 20px;
}
.item {
width: 120px;
height: 60px;
background-color: c. rimson; }Copy the code
Codepen demo
5. CSS Shapes
MDN – CSS Shapes
Can I Use – CSS Shapes Level 1
CSS Shapes are used to describe the geometry of elements. The normal shape of an element is a rectangle, and with CSS Shapes you can define an element as a circle, oval, or polygon.
For the Level 1 specification, CSS Shapes can be applied to floating elements. The specification defines different ways to define shapes on floating elements.
For example, make the following text wrap around a circular image:
Codepen demo
Key styles:
img {
width: 300px;
float: left;
shape-outside: circle(50%);
}
Copy the code6. object-fitattribute
MDN – object-fit
Can I Use – CSS3 object-fit/object-position
The object-fit attribute is used to set how the contents of an element (such as or
For example, to adjust the display of an image in a container:
Codepen demo
7. filterattribute
MDN – filter
Can I Use – CSS Filter Effects
The CSS filter attribute applies the effect adjustments of the image (blur, contrast, grayscale, hue, and so on) to the elements. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
For example, many websites will adjust the color to black and white on national memorial Day every year. You can use a code filter to fix this problem:
8. backdrop-filterattribute
Similar to the filter attribute, the backdrop filter attribute applies a graphical effect, such as blur or color offset, to the background area of an element. Because it applies to everything after an element, you need to make at least part of the element or its background transparent to see the effect.
MDN – backdrop-filter
Can I Use – CSS Backdrop Filter
For example, you can use it to create a frosted glass effect:
Codepen demo
Key code:
<div class="box">
<p>
If I know what love is
<br />it is because of you
</p>
</div>
Copy the code.box {
background: url(.. /images/roses.jpg) no-repeat; }p {
background-color: rgba(255.255.255.0.3);
backdrop-filter: blur(20px);
color: white;
}
Copy the code9. conic-gradient()function
MDN – conic-gradient()
Can I Use – conic-gradient()
We should contact many linear-gradient() functions in CSS. In addition, there are radial-gradient(), conic-gradient() and other types in the gradient family, and more types can be referred to mDN-gradient.
The conic-gradient() function creates an image that consists of gradients in which the color transitions around (rather than radiating from) a central point.
For example, a common gradient dashboard chart can be drawn using the conic-gradient() function:
Codepen demo
10. accent-colorattribute
MDN – accent-color
Can I Use – CSS property: accent-color
The accent color property of CSS is used to set the accent color of UI controls generated by certain elements. For example, the color of the checkbox and radio controls generated by the element when selected.
For example, change the emphasis color of the following elements:
Codepen demo
Key code:
<input type="checkbox" class="checkbox" checked />
<input type="radio" class="radio" checked />
<input type="range" class="range" />
<progress value="70" max="100" class="progress">70%</progress>
Copy the code.checkbox {
width: 40px;
height: 40px;
accent-color: crimson;
}
.radio {
width: 40px;
height: 40px;
accent-color: dodgerblue;
}
.range {
width: 200px;
accent-color: lawngreen;
}
.progress {
width: 200px;
accent-color: coral;
}
Copy the code11. Scroll Snap
MDN – CSS Scroll Snap
Can I Use – CSS Scroll Snap
CSS Scroll Snap introduces the capture of Scroll position, which enforces the position at which the Scroll port of a Scroll container may end after the Scroll operation is complete.
For example, I want the end of each scroll to stop at the beginning of the next element to achieve a scrolling effect:
Codepen demo
Key code:
<article class="scroller">
<section>
<h2>Page one</h2>
</section>
<section>
<h2>Page two</h2>
</section>
<section>
<h2>Page three</h2>
</section>
<section>
<h2>Page four</h2>
</section>
</article>
Copy the code.scroller {
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
section {
scroll-snap-align: start;
}
Copy the code12. overscroll-behaviorattribute
MDN – overscroll-behavior
Can I Use – CSS overscroll-behavior
The overscroll-behavior property of the CSS defines the behavior of elements when they scroll to the edge of the scroll area. It’s short for overscroll behavior-x and overscroll behavior-y.
The default behavior of the browser is that when a child element is scrolled to the edge and continues to scroll, the parent element is triggered to scroll. This behavior is called scroll chaining. Most of the time we don’t need this behavior, such as scrolling through a popover and not wanting the following page to scroll. You can modify this behavior by setting overscroll behavior:contain without listening for scroll events to prevent bubbling.
Example: Codepen Demo
Well, at present can think of is so much, I hope to help you more efficient, more elegant painting page 😀!