A detailed interpretation of the visual effects of CSS3 new features application

Directory

• Background and border the first part

• Background and Border Part II

• Shape

• Visual effects

• Font typography

• User Experience

• Structure and layout

• Transitions and animations

• SOURCE download

One, one side shadow

• Application of Box-shadow attribute, format: H-shadow v-shadow blur spread Color inset attribute value Introduction

• H-sahdow: Horizontal shadow position, allowable negative value

• V-shadow: Position of vertical shadow, allowable negative value

• Blur: Blur Distance

• Spread: Shadow size, expansion distance, can be negative

• Color: Colors of Shadows

• Inset/outset: Internal or external shading

• The expansion distance of the shadow is effective on all sides and cannot be applied singly.

• Box-shadow settings that support multiple sets of values 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

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

• Translucent images, background images, or border-image

• element has a dotted, dashed, or translucent border, but no background (or background-clip is not border-box)

• A small corner inside an element is generated with a pseudo-element

• 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

• Based on the filter implementation, apply the Filter property of the relevant values, adjust the image saturation, brightness equivalent

• Based on the Min-blend-mode implementation, Effect: Implements the element content and background and the following element occurs "mixed"

• Basic Background-blend-mode implementation, effect: to achieve background color and background image, background image and picture of the 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:

• Both body and wrap pseudo-elements apply the same background image

• Wrap's background-attachment is set to fixed so that the background map does not follow the scrolling

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

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

• Increase the width with a negative margin, and the parent element hides the overflow with overflow:hidden, making the blurred background more realistic.

Five, the effect of folding angle

Implementation steps

• First, using linear-gradient to achieve the chamfer effect

• Then use linear-gradinet to generate a triangle and set his position with a wide 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;    }
  

Attention

• 100% 0/2em 2em The position and width of the positioned background element, especially the width and height of 2em, is the normal width of the background element.

• And 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, in this case the distance from the gradient axis to the top right of the edge

• to the left Bottom is a gradient that starts at the lower-left corner of the