Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the CSS skills worth collecting". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the CSS skills worth collecting".

1. Use Shape-outside to bend text around a floating image

It is a CSS property that allows you to set shapes. It also helps to define the area where the text flows. Css Code:

Any-shape {width: 300px; float: left; shape-outside: circle (50%);} 2. Magic combination

This small combination can actually prevent most of the layout errors you encounter in HTML. We really don't want horizontal sliders or absolutely positioned items to do what they want to do, nor do we want random margins and padding everywhere. So this is your magic combination.

* {padding: 0 _ margin: 0 _ blank _

Sometimes "display:block" is useless, but in most cases, you will treat and as the same block as other blocks. So, in most cases, it will actually help you!

3. Split HTML and CSS

This is more like a "workflow" type of skill. I recommend that you create different CSS files at development time before merging them. For example, one for desktops, one for mobile, and so on. Finally, you must merge them, as this will help minimize the number of HTTP requests on your site.

The same principle applies to HTML. If you are not developing in a SPA environment such as Gatsby, then PHP can be used to include HTML snippets. For example, you want to keep a "/ modules" folder in a separate file that will contain navigation bars, footers, and so on. Therefore, if you need to make any changes, you don't have to edit them on every page. The more modularity, the better the result.

4.:: initials

It applies the style to the first letter of the block-level element. Therefore, we can introduce familiar effects from print or paper magazines. Without this pseudo element, we would have to create many spans to achieve this effect. For example:

How do you do this? The code is as follows:

P.intro:first-letter {font-size: 100px; display: block; float: left; line-height: .5; margin: 15px 15px 10px 0;} 5. Four core attributes

CSS animation provides a relatively simple way to make a smooth transition between a large number of attributes. A good animation interface depends on a smooth experience. In order to maintain good performance in our animation timeline, we must limit our animation attributes to the following four cores:

Zoom-transform:scale (2)

Rotate-transform:rotate (180deg)

Location-transform:translateX (50rem)

Opacity-opacity: 0.5

Animation attributes such as border radius, height / width, or margins affect the browser layout method, while the animation of the background, color, or box shadow affects the browser drawing method. All of this will greatly reduce your FPS (FramesPerSecond). You can use these properties to produce some interesting effects, but you should use them carefully to maintain good performance.

6. Use variables to be consistent

A good way to maintain consistency is to use CSS variables or preprocessor variables to predefine animation time.

: root {timing-base: 1000;}

Animating the baseline or transition duration without defining a unit gives us the flexibility to call this duration in the calc () function. This duration may be different from our basic CSS variable, but it is always a simple modification of that number and will always be a consistent experience.

7. Conical gradient

Have you ever wondered if you can only use CSS to create pie charts? The good news is, you can actually! This can be done using the conic-gradient function. This function creates an image made up of gradients where the set color transition rotates around the center point. You can do this using the following lines of code:

.piechart {background: conic-gradient (rgb (255,132,45) 0% 25%, rgb (166,195,209) 25% 56%, # ffb50d 56%); border-radius: 50%; width: 300px; height: 300px;} 8. Change the text selection color

To change the text selection color, we use:: selection. It is a pseudo element that is overridden at the browser level to replace the text highlight color with the color of your choice. You can see the effect after selecting the content with the cursor.

:: selection {background-color: # f3b70f;} 9. Hovering effect

Hover effects are commonly used for buttons, text links, block parts of a site, icons, and so on. If you want to change the color when someone hovers over it, just use the same CSS, but add: hover to it and change the style. This is your way.

.m h3 {font-size:36px; color:#000; font-weight:800;} .m h3:hover {color:#f00;}

When someone hovers over the h3 tag, this will change the color of your h3 tag from black to red. It is very useful because if you don't want to change it, you don't have to declare the font size or weight again. It only changes any properties that you specify.

10. Projection

Add this attribute to bring better shadows to transparent images. You can do this using a given line of code.

.img-wrapper img {width: 100%; height: 100%; object-fit: cover; filter: drop-shadow (30px 10px 4px # 757575);} 11. Center Div using Placement items

Centering the div element is one of the scariest tasks we have to perform. But don't be afraid, my friend, you can center any div with a few lines of CSS. Just don't forget to set display:grid; for the parent element, and then use the place-items attribute shown below.

Main {width: 100%; height: 80vh; display: grid; place-items: center center;} 12. Use Flexbox to center Div

We have used the location project to center the project. But now we have solved a classic problem, using flexbox to center div. To do this, let's take a look at the following example:

.center {display: flex; align-items: center; justify-content: center;}. Center div {width: 100px; height: 100px; border-radius: 50%; background: # b8b7cd;}

First, we need to make sure that the parent container holds a circle, that is, flex-container. In it, we have a simple div to make our circle. We need to use the following important attributes related to flexbox:

Display: flex; this ensures that the parent container has an flexbox layout.

Align-items: center; this ensures that the flex subitem is aligned with the center of the horizontal axis.

Justify-content: center; this ensures that the flex subkey is aligned with the center of the principal axis.

Thank you for your reading, these are the contents of "what are the CSS skills worth collecting?" after the study of this article, I believe you have a deeper understanding of what the CSS skills worth collecting have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.