Implementation of css3 visual effects-CSS Tutorial-php.cn

This time I will bring you the implementation of css3 visual special effects. What are the precautions for realizing css3 visual special effects? The following is a practical case, let’s take a look.

1. Single-sided shadow

1. Application of box-shadow attribute, format: h-shadow v-shadow blur spread color inset attribute value introduction h- sahdow: The position of the horizontal shadow, negative values are allowed

①v-shadow: The position of the vertical shadow, negative values are allowed

②blur: Blur distance

③spread: The size of the shadow, Expansion distance, can be a negative number

④color: the color of the shadow

⑤inset/outset: internal or external shadow

2. The expansion distance of the shadow is valid for all four sides and cannot be used alone Applies to one side.

3. box-shadow supports settings for multiple sets of values to take effect at the same time

Sample code:

.wrap{
            width: 200px;
            height: 120px;
            background: yellowgreen;
            box-shadow: 2px 0px 4px -2px black,
                        -2px 0px 4px -2px black;
        }

Copy after login

2. No Regular projection

1. The shape generated by border-radius is good with projection, but if pseudo elements and translucent decorations are added, the shadow performance will be very poor. The following situations will occur question.

① Semi-transparent image, Background image, or border-image

②The element sets a dotted, dotted or translucent border, but has no background (orbackground-clipWhen it is not border-box)

③The small corners inside the element are generated using pseudo elements

④The shape generated by clip-path

Solution: Use drop-shadow of svg to achieve

Sample code:

.wrap{
            width: 200px;
            height: 120px;
            border: 6px dotted yellowgreen;
            --box-shadow: 0px 0px 4px 0px black;
            -webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1))
        }

Copy after login

3. Chromosome effect

1. Based on filter implementation, apply the relevant values of the filter attribute to adjust the saturation, brightness and other values of the image

2. Based on min-blend-mode implementation, the role is to realize the element content and background and the following The elements are "mixed"

3. Basic background-blend-mode implementation, function: to realize the mixing of background color and background image, background image and image

Sample code for three situations:

.wrap1{
            width: 200px;
            height: 120px;
            overflow: hidden;
        }
        .wrap1 > img{
            max-height: 100%;
            max-width: 100%;
            -webkit-filter: sepia(1) saturate(4) hue-rotate(150deg);
        }
        .wrap2{
            width: 200px;
            height: 120px;
            background: hsl(335, 100%, 50%);
            overflow: hidden;
        }
        .wrap2 > img{
            height: 100%;
            width: 100%;
            mix-blend-mode: luminosity;
        }
        .wrap3{
            width: 200px;
            height: 120px;
            background-size: cover;
            background-color: hsl(335, 100%, 50%);
            background-image: url("../img/cat.png"); 
            background-blend-mode: luminosity;
        }

Copy after login

4. Frosted glass effect

Main implementation principle: the content pseudo-element background is the same picture as the underlying background; and plus filter:blur blur filter is enough. Note that blur cannot be applied to the underlying background, nor can it be applied to the background of the element (this will cause the element itself to be blurred, causing the text to be invisible), and can only be used on pseudo-elements.

The code is as follows:

body{
    background: url("../img/cat.png") no-repeat;
    background-size: cover;
}
.wrap{
    position: relative;
    width: 500px;
    margin: 0px auto;
    padding: 10px;
    line-height: 1.5;
    background: hsla(0, 0%, 100%, .3);
    overflow: hidden;
}
.wrap::before{
    content: '';
    background: url("../img/cat.png") 0/cover fixed;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
}

Copy after login

Code description: 1. Both the body and wrap pseudo-elements apply the same background image

2. wrap The background-attachment is set to fixed, so that the background image does not move with the scrolling

3. The wrap pseudo-element is set to absolute positioning, and the z-index level is only higher than the background

4. Use blur to set the blur size of the wrap pseudo-element

5. Use negative margin values to increase the width, and use overflow:hidden for the parent element to hide the overflow, making the blurred background more realistic.

5. Corner effect

Implementation steps

1. First use linear-gradient to achieve the corner effect 2, and then use linear-gradinet to generate it A triangle and set its position, width and height

The code is as follows:

.wrap{
        background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0/2em 2em,
        linear-gradient(-135deg, transparent 1.4em, #58a 0);
        width: 200px;
        height: 120px;
    }

Copy after login

##Note

1 , 100% 0/2em 2em is positioning the position, width and height of the background element, especially the width and height of 2em are the normal width of the background element.

2. The 1.4em in the second linear-gradient is measured along the gradient axis, which is the distance from the gradient axis to the top edge of the element. In this example, it is the distance from the gradient axis to the top right edge

3. to left bottom means that the gradient starts from the lower left corner

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!