CSS3 new Features Application (2?? ) Visual effects

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, the value of the Filter property is applied to adjust the saturation and brightness equivalence of the image.
• Based on the Min-blend-mode implementation, the function: to implement the element content and background and the following elements occur "mixed"
• Basic Background-blend-mode implementation, function: To achieve background color and background image, background image and 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:

• 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 background element, especially the width and height of the 2em, is the normal width of the background element.
• 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 case the distance from the gradient axis to the top right edge
• To left bottom is to indicate that the gradient starts from the bottom right corner

CSS3 new Features Application (2?? ) Visual effects