Recently, I have been reading CSS World by Xin Ye in my spare time. The content is really wonderful, and many details are thoroughly analyzed, which is worth recommending. There e are many ways to achieve certain effects in everyday development, but the CSS code below is something I’ve rarely used before.

Hover changes to another image effect

/**css**/
img: hover {
     content: url( laugh-tear.png);
 }

/**html code**/
< img src=" laugh.png"> 
Copy the code

Limitations: The Content property only changes the visual rendering, so when we right-click or save the image, the SRC image will still be saved.

Displaying the Website Logo

< h1>logo</ h1>
 h1{ 
   content: url( logo. svg);
 }
Copy the code

Advantages:

1, will not affect website SEO.

2. Use.SVG vector graphics for mobile Retina screens (.SVG will be smudged).

Note: Don’t assume important text is generated using the Content attribute, because this is not accessible and SEO friendly. The Content attribute can only be used to generate irrelevant content such as decorative graphics or serial numbers. Also, don’t worry about important text being replaced by Content, just the visual layer.

Settings cannot be selected or copied

  user-select: none
Copy the code

The small icon of “Three stripes” indicates that

.icon-menu { 
     display: inline-block; 
     width: 140px;
     height: 10px; 
     padding: 35px 0; 
     border-top: 10px solid; 
     border-bottom: 10px solid; 
     background-color: currentColor; 
     background-clip: content-box;
}

Copy the code

Double – layer dot graphic illustration

.icon-dot { 
     display: inline-block; 
      width: 100px;
      height: 100px; 
      padding: 10px; 
      border: 10px solid; 
      border-radius: 50%; 
      background-color: currentColor; 
      background-clip: content-box; 
}

Copy the code

Remove margin-right: 20

/** / li: nth-of-type(3n) {margin-right: 0; }Copy the code
**/ ul {margin-right: -20px; margin-right: -20px; } ul > li {float: left; 
     width: 100px; 
     margin-right: 20px;
 }

Copy the code

Margin: The magic of auto

Horizontal and vertical center

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .father {
            position: relative;
            width: 300px;
            height: 150px;
            border: red solid 1px;
        }
        .son {
            position: absolute;  /**key code here**/
            background-color: orange;
            width: 100px;
            height: 100px;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;  /**key code here**/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>
Copy the code

Left/right alignment effect.

. .father { width: 300px; height: 200px; border: red solid 1px; } .son { width: 100px; height: 100px; background-color: orange; margin-right: 50px; Margin-left: auto; margin-left: auto; margin-left: auto; /**key code here**/ } ...Copy the code

Horizontal center

. .father { width: 300px; height: 200px; border: red solid 1px; } .son { width: 100px; height: 100px; background-color: orange; margin-right: auto; /**key code here**/ margin-left: auto; /**key code here**/ } ...Copy the code

### vertical center

. .father { width: 300px; height: 200px; writing-mode: vertical-lr; /**key code here**/ border: red solid 1px; } .son { width: 100px; height: 100px; background-color: orange; margin: auto; /**key code here**/ } ...Copy the code

Remove the bottom border CSS for maximum rendering performance

div { &emsp; 
    border: 1px solid; 
    border-bottom: 0 none;  /**key code here**/
 }

Copy the code

Gracefully add icon button click area

The click area went from 16 × 16 to 38 × 38,

.icon-clear { 
     width: 16px; 
      height: 16px;
      border: 11px solid transparent; /**key code here**/
}

Copy the code

Highest performance equilateral triangle graph drawing

  div {
            width: 0;
            border-width: 50px 34px;
            border-style: solid;
            border-color: #f30 transparent transparent;
        }
Copy the code

Highest performance issceles triangle graph drawing

        div {
            width: 0;
            border-width: 20px 10px;
            border-style: solid;
            border-color: #f30 transparent transparent;
        }
Copy the code

Or this triangle (the triangle under the dialog bubble)

        div {
            width: 0;
            border-width: 20px 10px;
            border-style: solid;
            border-color: #f30 #f30 transparent transparent;
        }
Copy the code

Highest performance trapezoidal graph drawing

        div {
            width: 10px;
            height: 10px;
            border: 10px solid;
            border-color: #f30 transparent transparent;
        }
Copy the code

Realistic 3D effect

        div {
            width: 10px;
            height: 10px;
            border: 10px solid;
            border-color: #f30 #00f #396 #0f0;
        }
Copy the code

The forgottenexunit

Achieve arrow centered Chinese text vertical direction (not affected by font, size)

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>

        .icon-arrow {
            display: inline-block;
            width: 20px;
            height: 1ex;
            background: url(arrow.svg) no-repeat center/20px 20px;
        }

    </style>
</head>
<body>
    <div style="font-size: 18px"> arrows are centered < I class="icon-arrow"></i>
    </div>

</body>
</html>
Copy the code

Always in the middledialog(Compatible with IE7)

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title>demo</title> <style> .container { position: fixed; top:0; right: 0; left: 0; bottom: 0; Background - color: rgba (0, 0, 5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container:after { content:' ';
           display: inline-block;
           height: 100%;
           vertical-align: middle;
       }
       .content {
           width: 240px;
           height: 120px;
           padding: 20px;
       }

       .dialog {
           display: inline-block;
           vertical-align: middle;
           border-radius: 6px;
           background-color: #fff;
           font-size: 14px;
           white-space: normal;
       }

    </style>
</head>
<body>
    <div class="container">
        <div class="dialog">
            <div class="content"</div> </div> </body> </ HTML >Copy the code

Remove the default scroll bar (effective on PC)

/**good code**/
 html {
            overflow: hidden;
        }

/**bad code**/
 html, body {    
            overflow: hidden;
        }
Copy the code

This writing to this, welcome ❤️⭐️👏 to point out mistakes or release their own opinions to explore, mutual encouragement. 🤝