Recently have been studying the CSS, as found in the practice of most of the time in write CSS, and feel very bad, although look a lot before, but seldom have to practice, not to mention the, now found that is not you know what you will, many of them are you use with the only really, so going to spend a period of time the CSS now, And write it down, in case you forget, it will also be easy to find when you need it in the future project. The editor I used before was too messy to write articles, but now I use Markdown, I feel much better.

Note: this article will not introduce too much basic knowledge, because it is not necessary, there are many basic tutorials online can be searched, this article is mainly on CSS research, through it can improve your coding skills, if there is no understanding of the complete search.

currentColorCoding practices,currentColorIt inherits the current text color

In this dome demo, the color is the same as the border color, as is the hover. We might have written color:red; border-color:red; But using currenColor is easier.

Code:


    #box{
        width:30vw;
        height:30vh;
        line-height:30vh;
        margin:10vh auto;
        color:#333;
        border:1px solid currentColor;
        text-align:center;
    }
    #box:hover{
        color:red;
    }


       

        Pursue the son
       
Copy the code

We can see that when the color changes the currentColor will change accordingly.

: : before and: afterpractice

I’m sure there’s a lot of this on the web, but it’s easy to use ::before and ::after to solve this problem.

Code:

#box{ text-align:center; position:relative; } #box::before{ content:''; position:absolute; left:0; top:50%; width:100%; height:1px; background-color:#ccc; z-index:-1; } #box::after{content:' test '; background-color:#fff; padding:0 5px; }Copy the code

Use ::before to create a line that is 100% wide and 1px high, and cover the line with the text. So give the text a background color that matches the body color. The other thing is that there’s a reason why I have ::after text, if I put text inside a div, I’m going to have trouble, because if I put text inside div, div is 100% wide and if I give it a background color, it’s going to cover up the line.

What if it’s vertical?



Code:

body,div{ margin:0; padding:0; } #box{ position:relative; margin-left:100px; } #box::before{ content:''; position:absolute; left:15px; top:0px; width:1px; height:100vh; background-color:#ccc; } #box::after{content:' test '; background-color:#fff; position:absolute; top:50vh; left:0; }Copy the code

Vh is used here. Vh is a dynamic measure of the screen height. 1vh is equal to 1% of the screen height.

And then there’s this situation.



Code:




    #box{
        position:relative;
    }
    #box::before{
        content:'';
        position:absolute;
        left:0;
        top:0;
        width:10%;
        height:1px;
        background-color:red;
    }
    #box::after{
        content:'';
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:1px;
        background-color:#dedede;
        z-index:-1;
    }

Copy the code
Border or box-shadow implements modal boxes

In the past we might have used an element to implement the modal box, but now it’s not necessary.



Since border cannot use percentages, use an oversized value instead. Oh, yesvwUnits, in fact, some very simple things can solve a lot of seemingly complex things, but we did not go to think about it.

#box{ position:fixed; left:50%; top:50%; width:200px; height:200px; transform:translate(-50%,-50%); Border: 10000 px solid rgba (0,0,0,0.3); }
       

        Dreamson front end blog
       


Once upon a time there was a mountain...
Copy the code

Let’s do a box-shadow implementation

#box{ position:fixed; left:50%; top:50%; width:200px; height:200px; transform:translate(-50%,-50%); Box-shadow :0 00 100vw Rgba (0,0,0,0.3); }
       

        Dreamson front end blog
       


Once upon a time there was a mountain...
Copy the code

The same effect will not be screenshots.

Don’t talk to me about compatibility. There are so many things about learning. One thing, learning!

Create a burger menu using Box-shadow

#box{ width:100px; Box-shadow :0px 0px 0px 3px #000,0px 12px 0px 3px red,0 px 25px 0px 3px #000; }Copy the code

One less element counts as one element.

Continuously updated… So much the better if you have a good idea to share.