Texture box for css drawing

foreword

cssWe all know that you can do a lot of things, such as: interface effects, special effects, unique styles, etc. What I bring to you box-shadowtoday to draw a box with a very textured effect.

When I was surfing the Internet before, I found such an effect, so I will record it.

The following is the effect diagram after realization.

Looks good, guys. Let me go to the bottom of the article to see his implementation process.

box-shadowCharacter description

what is box-shadowit

Attribute is used to add a shadow effect on the frame of an element. You can set multiple shadow effects on the same element, separating them with commas. The values ​​that can be set for this property include the shadow's X-axis offset, Y-axis offset, blur radius, diffusion radius, and color.

box-shadowAttribute usage instructions

box-shadowReceive 6 attribute values. When there are multiple shadows, each shadow is ,divided, as follows:

box-shadow: 属性A 属性B 属性C 属性D 属性E 属性F,
            属性A 属性B 属性C 属性D 属性E 属性F;

Attribute value description

• A: The value is: inset, which indicates the diffusion state of the shadow. If it is not filled, it will diffuse outward, which is often called outer shadow; when there is a value and insetis , it will diffuse inward, which is often called inner shadow.
• B: X-axis offset, which can be negative.
• C: Y-axis offset, which can be negative.
• D: Blur radius, can be negative.
• E: Diffusion radius, which can be negative.
• F: Shadow color.

Implementation process

Full implementation of the program to box-shadowachieve .

Build the basic layout

<div class="content">
    <div class="box"></div>
</div>

 * {
    
    
    margin: 0;
    padding: 0;
}
.content {
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(171, 189, 207, 1);
}
.box {
    
    
    width: 300px;
    height: 300px;
    background-color: rgba(201, 212, 223, 1);
    border-radius: 35px;
}

Renderings:

add shadow

Here we first add an outer shadow

Its x, y axis coordinates are 15 pixels, and then we set its blur radius to 30 pixels and diffusion radius to -10 pixels.

Approximate effect location map:

.box {
    
    
    width: 300px;
    height: 300px;
    background-color: rgba(201, 212, 223, 1);
    border-radius: 35px;
    box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2);
}

Renderings:

When the diffusion radius is negative, it means:

When the diffusion radius is negative, it will recover a certain range according to the set value.

Add a white inner shadow to shine on our box like a light

Its x, y axis coordinates are 20 pixels, and then we set its blur radius to 15 pixels.

Approximate effect location map:

.box {
    
    
    width: 300px;
    height: 300px;
    background-color: rgba(201, 212, 223, 1);
    border-radius: 35px;
    box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),
                inset 20px 20px 15px rgba(255, 255, 255, 0.7)
                ;
}

Renderings:

Add a white outer shadow to diffuse our light

Its x, y axis coordinates are -15 pixels, and then we set its blur radius to 35 pixels.

Approximate effect location map:

.box {
    
    
    width: 300px;
    height: 300px;
    background-color: rgba(201, 212, 223, 1);
    border-radius: 35px;
    box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),
                inset 20px 20px 15px rgba(255, 255, 255, 0.7),
                -15px -15px 35px rgba(255, 255, 255, 0.7)
                ;
}

Renderings:

Add a black inner shadow to highlight the border of our box

Here we need to draw this shadow in the lower right corner.

Its x and y axis coordinates are -1 pixel, and then we set its blur radius to 10 pixels.

Approximate effect location map:

.box {
    
    
    width: 300px;
    height: 300px;
    background-color: rgba(201, 212, 223, 1);
    border-radius: 35px;
    box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),
                inset 20px 20px 15px rgba(255, 255, 255, 0.7),
                -15px -15px 35px rgba(255, 255, 255, 0.7),
                inset -1px 1px 10px rgba(0, 0, 0, 0.5)
                ;
}

Renderings:

all codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }
        .content {
      
      
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100vh;
            background-color: rgba(171, 189, 207, 1);
        }
        .box {
      
      
            width: 300px;
            height: 300px;
            background-color: rgba(201, 212, 223, 1);
            border-radius: 35px;
            box-shadow: 
                15px 15px 30px -10px rgba(0, 0, 0, 0.2),
                inset 20px 20px 15px rgba(255, 255, 255, 0.7),
                -15px -15px 35px rgba(255, 255, 255, 0.7),
                inset -1px 1px 10px rgba(0, 0, 0, 0.5)
                ;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box"></div>
    </div>
    
</body>
</html>

epilogue

That's all for css 画图之质感盒子this article.

If you have better suggestions or ideas, you can comment below and discuss together.

I'm Tao Xiaorui , official account @桃小瑞.