Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to achieve visual effects in Css3", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve visual effects in Css3" article.

1. Unilateral shadow

1. Application of box-shadow attribute. Format: the value of h-shadow v-shadow blur spread color inset attribute introduces the position of h-sahdow: horizontal shadow. Negative values are allowed.

① v-shadow: position of vertical shadows, negative values allowed

② blur: blur distanc

③ spread: shadow size, expansion distance, can be negative

④ color: color of shadow

⑤ inset/outset: internal or external shadow

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

3. Box-shadow supports settings where multiple groups of values 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;}

Irregular projection

1, using the shape generated by border-radius, using projection is very good, but if you add pseudo elements and translucent decoration, the shadow performance is very bad, the following cases will be problematic.

① translucent image, background image, or border-image

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

Small corners inside ③ elements are generated by pseudo elements.

Shapes generated by ④ through clip-path

Solution: use svg's drop-shadow to implement

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

III. Chromosome effect

1. Based on the filter, the related values of filter attribute are applied to adjust the saturation and luminance of the picture.

2. Based on min-blend-mode implementation, its function is to realize the "mixing" of element content, background and the following elements.

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

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

Fourth, ground glass effect

The main implementation principle: the content pseudo-element background and the underlying background of the same picture; and add filter:blur blur filter. Note that blur cannot be applied to the underlying background, nor can it be applied to the background of the element (so that the element itself applies blur ambiguity, resulting in invisible text), but only 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. Both body and wrap pseudo elements apply the same background picture.

2. Set the background-attachment of wrap to fixed, so that the background image does not follow the scrolling.

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

4. Using blur to set the fuzzy size of wrap pseudo elements.

5. Increase the width with a negative value of margin, and hide the overflow of the parent element with overflow:hidden, making the blurred background more realistic.

Fifth, corner effect

Implementation steps

1. First use linear-gradient to achieve chamfering effect 2, and then use linear-gradinet to generate a triangle and set its position and 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;}

Be careful

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

2. 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 of the right

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

The above is about the content of this article on "how to achieve visual effects in Css3". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.