CSS implements transparent squares in three ways
Those of you who use Photoshop regularly will be familiar with the background of such a transparent square, also known as the "checkerboard" effect. This effect must be realized through gradients. Here are 3 tips for drawing transparent squares in CSS
Front three layout, float, Flex, grid introduction.
When writing margin, padding, etc. in combination, do not write them together unless it is necessary. It is recommended to separate them, such as margin-top or padding-bottom. A wave of advertising for Hungry Man valley, heh heh. Grid layout belongs to the more advanced layout, may be used in the future, this layout is more simple, can put the front door...
A thorough understanding of the rendering engine and a few suggestions for performance optimization
In daily during the development process, good enough to write performance code, application of structure is more stable, we should not only have in-depth knowledge of the execution mechanism of javascript, more want to have a deeper understanding of its host environment, understand the working principle and structure, it can help us to web operation mode has a higher level of cognitive world. This time I want to introduce the browser rendering engine. In the...
H5 mobile ADAPTS IphoneX and other models
In the figure above, iPhoneX has added these two areas in the head and bottom, so we need to make some adaptations for this type of model to facilitate our WebApp display of mobile terminal pages made of H5. The common layout is head + torso + bottom three
Stretch, available, and fill-available keywords
Stretch, available, and fill-available are the same keywords with different names, allowing the size of the element to automatically fill the available space, just like the default size of the <div> element
Detail drawing 3D rotating cube with CSS
Present a cube needs six sides, up and down, left and right, front and back, each side represents a div, here we use pseudo-class elements to set up the two elements up and down, because the left and right four sides are 90deg, so we use CSS variables to control
Use of Windi CSS in Vue3 + Vite project
Windi CSS is a CSS framework that is different from CSS preprocessors. Before learning Windi CSS, it is best to have the psychological preparation of "its writing habits are greatly different", and then to accept it and learn it.
Skillful use of pseudo elements to solve fixed elements baidu browser shielding problem
When doing such an active page, I found that the button element with fixed position at the bottom could not be displayed in Baidu browser. So far, all the methods we have seen on the web are based on the width element, which is not very useful (more on the other methods in the end). Btn_fixed is an empty div that is added to the page as a pseudo-element after the button is cut. And that will finish...
CSS pseudo-elements (:first-letter,:first-line,:before,:after)
You can see that the style of the first letter has been changed. This is its main role, which is not often used in the actual project. The main function is to change the style of the first line of a text paragraph. You can see that the text style of the first line has been changed. The content property is important, it's the carrier of the tag content. This article is written with reference to the W3C. If there is any mistake, welcome to point out! ...
Windicss approach to atomized CSS
Introduces the atomic class CSS related knowledge and some, in view of the development of the pain point to do some analysis, a preliminary attempt to WinDI, and combined with the experience of development to write some suggestions