SegmentFault Technology Weekly -- CSS that does not take the usual path

CSS (English full name: Cascading Style Sheets) is a computer language used to represent document styles such as HTML (an application of Standard Common Markup Language) or XML (a subset of Standard Common Markup Language). CSS can not only modify web pages statically, but also dynamically format various elements of web pages with various scripting languages.

The editor has compiled high-quality technical articles about CSS in the Sifu community, welcome to read~~

CSS 特性

What is the most anticipated new feature of CSS @layer in 2022? 》

Entering 2022, new features of CSS are emerging in an endless stream, and the new feature that has attracted the most attention in the CSS circle recently is CSS @layer.
This article will use the most concise language to quickly let readers understand what is the new CSS @layer specification.

"Revolutionary innovation, animation killer @scroll-timeline"

In the CSS specification Scroll-linked Animations, an epoch-making feature was introduced. That is -- The @scroll-timeline at-rule, which literally translates to scrolling the timeline.
This article will take you to find out, from getting started to learning to use CSS @scroll-timeline.

"Tell me about variables in CSS"

Most programming languages support variables from the very beginning of the language. However, CSS did not support native variables in the first place. So everyone started to choose CSS, LESS and other compatible CSS extension languages. Fortunately, CSS also supports variables now. Let's talk about variables in CSS below.

How many pits are there in shorthand in CSS? I won't dare any more..."

Shorthand (syntactic sugar) may bring a lot of convenience to our coding, but everything has good and bad, and shorthand also brings some problems, so today I will discuss the "good" and "bad" of shorthand in CSS .

Guide to CSS Custom Properties

Custom properties (sometimes called CSS variables or cascading variables) are defined by CSS authors and contain values that can be reused throughout the document. The value is set by the custom attribute tag (eg: --main-color: black;), and the value is obtained by the var() function (eg: color: var(--main-color);)

Can CSS also autocomplete strings? 》

Many times, you will encounter the need for string completion. A typical example is the zero-fill operation in time or date, such as

 2021-12-31
2022-03-03

The usual practice is

 if (num < 10) {
  num = '0' + num
}

Later, native completion methods appeared in JS padStart() and padEnd() , as follows

 '3'.padStart(2, '0')
// 结果是 ’03‘
'12'.padStart(2, '0')
// 结果是 ’12‘

In fact, this effect can also be achieved in CSS, and there are various solutions. Let's take a look at it together. I believe you can have a different experience and quote.

"CSS implementation tree structure directory"

Recently I encountered such a tree structure directory in the project, the effect is as follows

If you use a framework like Ant Design, you can use ready-made components directly. What if such a framework is not used? In fact, pure CSS can also be done. Let's see how to achieve it. There are many CSS tricks you may not know~

神奇的 CSS

"Magic CSS, let the text intelligently adapt to the background color"

Text appears white on a black background and black on a white background. It seems to be a complicated effect, but it is actually very easy to implement in CSS. Today, I will introduce such a little trick. In CSS, use the mixing mode mix-blend-mode: difference to intelligently adapt the text to the background color.

"Amazing! Smart use of CSS parallax to achieve cool interactive effects"

This article will introduce a small trick to achieve scrolling parallax effect with CSS, and use this trick to make some interesting interactive effects.
Here, such a pure CSS parallax trick will be used:
1. Use transform: translate3d to achieve scrolling parallax
2. Use CSS parallax to achieve cool interactive effects
3. CSS scroll parallax animation 2
4. Combined with CSS @scroll-timeline, use CSS to control scrolling and animation

"Using background-clip to achieve super text animation"

background-clip: text was also mentioned many times before. The core is to use the text in the block as the clipping area to cut out, the background of the text is the background of the block, and the area outside the text will be cut out.
Simply put, it is an element that uses background-clip: text, and its background content only retains the area where the text is located. With the transparent text color: transparent, the text can be used to reveal the background.
Using background-clip: text, you can get a lot of very interesting text effects.

"Make the interaction more vivid! Interesting mouse follow 3D rotation effect"

To briefly analyze, this interaction effect mainly has two cores:

1. With the power of CSS 3D
2. The rotation of the element needs to be combined with the movement of the mouse

This article will describe how to use pure CSS to achieve a similar interactive effect, and use JavaScript to bind mouse events to quickly restore the above effect.

"CSS shadow advanced, to achieve a more three-dimensional shadow effect! 》

The existence of CSS shadows makes objects look more three-dimensional. However, on top of the simplest use of shadows, we can achieve more interesting and more three-dimensional shadowing effects.
This article will show you how to use CSS to achieve several types of shadow effects that are more three-dimensional than ordinary shadows.

CSS 的艺术

"CSS Repeating Linear Gradient Drawings"

"Outrageous CSS! From dial scale to art decoupage"

Animating React Logos with CSS

"Are you still using a timer? CSS can also realize electronic clock"

CSS 面试

"Front-end interview data finishing [css articles]"

Simple selectors: id selector, class selector, tag selector,
Combined selectors: descendant selector (space), child selector (>), sibling selector (+), common selector (~)
Pseudo-class (:hover)
Pseudo-elements (::before, ::firt-child, ::not())
attribute selector
ps. Sibling selectors (+) and generic selectors (~): "+" refers to "own" adjacent siblings, and "~" applies all sibling references

"An interesting CSS interview question, FizzBuzz ~"

FizzBuzz is an interesting topic. Let's look at the topic:
If you encounter a multiple of 3, say Fizz, if a multiple of 5, say Buzz, if it is a multiple of 3 and a multiple of 5, say FizzBuzz.
In some programming languages, this is a relatively rudimentary topic, and of course, with a little conversion, we can turn it into a topic about CSS selectors.

---

PS: What technical content do you want to see, you can leave a message in the comment area~

If you have any questions, you can add Ms. WeChat~