12 CSS tips worth bookmarking! !

This article will share with you 12 CSS tips worth collecting. You can try to remember them, which can save lives in critical moments! I hope to be helpful!

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

It is a CSS property that allows setting a shape. It also helps define areas where text flows. css code:

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

2. Magic combination

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

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

Sometimes "display:block" is not useful, but in most cases you will treat <a> and <span> as the same as A block like any other block. So, in most cases, it will actually help you!

3. Split HTML and CSS

This is more of a "workflow" type of technique. I recommend that you create different CSS files while developing and only merge them at the end. For example, one for desktop, one for mobile, etc. Finally, you must merge them as this will help minimize the number of HTTP requests to your website.

The same principle applies to HTML. If you are not developing in a SPA environment such as Gatsby, PHP can be used to include HTML code snippets. For example, you want to keep a "/modules" folder that will contain the navigation bar, footer, etc. in separate files. So if any changes need to be made, you don't have to edit them on every page. The more modularity, the better the results.

4. ::Initial letter

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

How is this done? 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 properties

CSS animation provides a relatively simple method to smoothly transition between a large number of properties. A good animated interface relies on a smooth and smooth experience. In order to maintain good performance in our animation timeline, we must limit our animation properties to the following four cores:

• scale - transform:scale(2)
• Rotation - transform:rotate(180deg)
• Position - transform:translateX(50rem)
• No Transparency - opacity: 0.5

Animated properties such as border radius, height/width, or margins affect browser layout methods, while animations of background, color, or box shadow affect browser drawing method. All of these will significantly reduce your FPS (FramesPerSecond). You can use these properties to produce some interesting effects, but they should be used with caution to maintain good performance.

6. Use variables to stay consistent

A good way to stay consistent is to use CSS variables or preprocessor variables to predefine animation timings.

:root{ timing-base: 1000;}

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

7. Conic Gradient

Ever wondered if you could create a pie chart using just CSS? The good news is, you actually can! This can be done using the conic-gradient function. This function creates an image consisting of a gradient with a set color transition rotating around a center point. You can do this using the following line of code:

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

8. Changing 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 a color of your choice. You can see the effect by selecting content with your cursor.

::selection {
     background-color: #f3b70f;
 }

9. Hover effects

Hover effects are usually used on buttons, text links, block parts of the site, icons, etc. 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 method;

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

This will change the color of your h2 tag from black to red when someone hovers over it. It's useful because you don't have to declare the font size or weight again if you don't want to change it. It will only change any properties you specify.

10.Shadow

Add this property to bring better shadow effects to transparent images. You can do this using the given lines of code.

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

11. 使用放置项居中 Div

居中 div 元素是我们必须执行的最可怕的任务之一。但不要害怕我的朋友，你可以用几行 CSS 将任何 div 居中。只是不要忘记设置display:grid; 对于父元素，然后使用如下所示的 place-items 属性。

main{
     width: 100% ;
      height: 80vh ;
      display: grid ;
      place-items: center center;
}

12. 使用 Flexbox 居中 Div

我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题，使用 flexbox 将 div 居中。为此，让我们看一下下面的示例：

<div class="center h-48">
  <div></div>
</div>

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}

首先，我们需要确保父容器持有圆，即 flex-container。在它里面，我们有一个简单的 div 来制作我们的圆圈。我们需要使用以下与 flexbox 相关的重要属性：

• display: flex; 这确保父容器具有 flexbox 布局。
• align-items: center; 这可确保 flex 子项与横轴的中心对齐。
• justify-content: center; 这确保 flex 子项与主轴的中心对齐。

之后，我们就有了常用的圆形 CSS 代码。现在这个圆是垂直和水平居中的，试试吧！

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of 12 CSS tips worth bookmarking! !. For more information, please follow other related articles on the PHP Chinese website!