Visual effects of CSS3 new features application

This paper introduces the visual effects of the new CSS3 features, such as single shadow, irregular projection, chromosome effect, frosted glass effect, folding angle effect, the concrete realization is as follows:

One, one side shadow

1. Application of Box-shadow attribute, format: H-shadow v-shadow blur spread color Inset property Introduction H-sahdow: Position of horizontal shadow, allowable negative value

①v-shadow: Position of vertical shadow, allowable negative value

②blur: Blur Distance

③spread: Shadow Size, expansion distance, can be negative

④color: The color of the shadow

⑤inset/outset: Internal or external shading

2, the shadow expansion distance is effective on all sides, can not be applied alone in the unilateral.

3. Box-shadow supports multiple sets of values to be in effect at the same time

Example code:

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

Second, irregular projection

1, the use of Border-radius generated shape, with the projection is good, but if the addition of pseudo-elements and translucent decoration, shadow performance is very bad, the following conditions will be problematic.

① translucent images, background images, or border-image

The ② element sets a dotted, dashed, or translucent border, but no background (or background-clip is not border-box)

③ elements have small corners that are generated with pseudo-elements

④ shapes generated by Clip-path

Workaround: Use SVG's drop-shadow to achieve

Example 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))        }

Third, chromosome effect

1, based on the filter implementation, the use of the Filter property of the relevant values, adjust the image saturation, brightness equivalence

2, based on the implementation of Min-blend-mode, the role: to achieve the element content and background and the following elements "mixed"

3, the basic Background-blend-mode realization, the function: realizes the background color and the background picture, the background picture and the picture mix

Example code for three cases:

. 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;        }

Four, the effect of wool glass

Main implementation principle: the content pseudo-element background and the underlying background of the same image, and add Filter:blur blur filter. Note that Blur cannot be applied to the underlying background or to the background of an element (so that the element itself applies blur blur, which causes 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;}

Code Description: 1, body and wrap pseudo-elements all apply the same background image

2, wrap background-attachment set to fixed, let the background map do not follow the scroll together

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

4. Using Blur to set the fuzzy dimensions of wrap pseudo-elements

5, with margin to increase the width of negative, the parent element with Overflow:hidden hidden overflow, so that the blurred background more real.

Five, the effect of folding angle

Implementation steps

1, first use linear-gradient to achieve the chamfer effect 2, and then use linear-gradinet to generate a triangle, and set his position and width high

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;    }
  

Attention

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

2, while the 1.4em in the second linear-gradient is measured along the gradient axis, that is, the distance from the gradient axis to the top edge of the element, this example is the distance from the gradient axis to the top right edge

3, to the left bottom is to indicate that the gradient starts from the lower

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.