Each of these posts is a gold nugget I’ve ever posted, and many of them are over 100 praises.
In view of the occasional flashpoint, this article has collected all the CSS giFs I’ve posted so far for you to read.
It should be noted that the order is still listed according to the order of release at that time, there is no systematic summary, a lot of tolerance.
And here, old Yao, thank you for your support as always. ๐ ๐ ๐
01. [Negative margins] ๐ The effect of negative margins. Note that the left and right negative margins are not uniform. When left is negative, it moves to the left, and when right is negative, it pulls to the left. Up and down is similar to left and right
Don’t be so conceited. You think you are square, but in others’ eyes you are round
03. [BFC app] ๐BFC App block margin collapsing (currently only)
04. [BFC application] ๐BFC application to eliminate the impact of floating
05. [One of flex’s unknown features] ๐ Magic use of Margin: Auto in flex layout
06. ๐ Flex layout. When the sum of flex-grows is less than one, only some of the remaining space is allocated proportionately, not all of it
07. [input width] ๐ is not set to the element display:block will automatically fill the width of the parent element. An exception is input, whose default width depends on the value of the size feature
08. [Positioning feature] ๐ Setting both left and right for absolute positioning and fixed positioning is the same as implicitly setting width
09. [cascade context] ๐ cascade context: a junior is a junior, and then it’s just a junior
10. [sticky positioning] ๐position:sticky positioning to work, you need to set the final stranded position. Chrome is buggy and Firefox is perfect
11. [Adjacent brother selector] ๐ Common scenarios of adjacent brother selector
12. [Mode boxes] ๐ค RGBA is an easy way to make the background of a mode box transparent
13. [triangle] ๐ the principle of CSS drawing triangles
14. [table layout] ๐display: Table Implements the layout of multiple columns in the same height
15. [color contrast] โฃ red letters on blue background, because the color contrast is relatively low, so it is not a good color scheme ๐
16. [fixed width/height ratio] โฅ CSS to achieve the principle of fixed width/height ratio: the percentage of padding is relative to the width of the block it contains, not the height
17. [animation direction] ๐น animation direction can choose alternate, go back alternately
18. [Linear gradient application] ๐ฎ CSS drawing ribbon principle
19. [Hide text] ๐ฏ Two ways to hide text content
20.ใ middle ใ๐ฐ a simple way to achieve middle
21. [Angular gradient] ๐ฒ New gradient: Angular gradient. Can be used to implement pie charts
22. ๐background-position: The percentage position of the image itself coincides with the same percentage position of the container
23. ๐ดbackground-repeat new values: round and space. The former means rounding up, the latter means leaving a gap
24. [background attachment] ๐background-attachment specifies how the background is attached to the container. Note that the values local and fixed are used
25. [Animation delay] ๐ต Animation add delay time can make the pace inconsistent
26. ๐ can use outline to stroke, it doesn’t take up space, it can even be inside
27 [Background positioning] ๐ถ When the fixed background does not scroll with the element, background positioning is relative to the viewport
28 tab-size ๐ท By default, the TAB value contains eight Spaces. Tab-size can specify the space length
29 [animation pause] ๐ฅCSS animations can be paused
30 [object-fit] ๐ After specifying the size of the image, you can set the object-fit to contain or cover
31 [Mouse Status] When the ๐ button is disabled, do not forget to set the mouse status
32 [Background blur] ๐ Use CSS filter to achieve background blur
33 [fill-available] ๐ Set the width to fill-available to make inline-blocks fill the space like blocks
34 [fit-content] ๐ Set the width to fit-content, which causes the block to shrink as inline blocks do
35 [Custom properties] ๐ Simple usage of CSS custom properties
36 [min-content/max-content] ๐ You can set the width to both min-content and max-content. The former makes the content as narrow as possible, and the latter makes the content as expanded as possible
37 [Progress bar] ๐ Use gradient, a div to achieve the progress bar
38 [Print] ๐ can set the page properties when printing a web page. For example, the page-break-before property indicates whether a new page needs to be started
39 [frame by frame animation] ๐ use CSS Sprite to achieve frame by frame animation
40 [resize] ๐ Ordinary elements can also be resized like a textarea
41 [breadcrumbs] ๐ Implements breadcrumbs using the before pseudo-element
42 [sticky footer] ๐ Use grid layout to achieve sticky footer
43 [animation fill state] ๐ CSS can set the animation before and at the end of the state maintained
44 [animation negative delay] ๐ฅCSS animation can set the delay time to negative, indicating that the animation has been running for that long before it started
๐ The magic of love goes in circles
46 [animation case] ๐ฌ Principle of water wave effect
47 [animation case] ๐ธCSS pinball animation effect principle
48 [outline] ๐ป Outline property
49 [Grid] ๐ Firefox Grid layout detector
I hope it helps.
Also welcome to read my JS Regular mini book.
In this paper, to the end.