HSL color model

  • HUE: A color distributed on the base color wheel. Also called a solid color, a solid color is a color that does not contain black, white, or gray.

  • SATURATION refers to the brightness of colors, and the addition of gray to pure colors decreases the SATURATION of colors. 100% solid color, no shades of grey. 50% is 50% gray and 0% is completely gray. Below is the change in saturation from 100% to 0%.

  • LIGHTNESS: Refers to the degree of LIGHTNESS of a color. Adding black or white to a solid color changes the LIGHTNESS of the color. Among them, 0% are all dark (black), 100% are all bright (white), and 50% are neither clear nor dark.

HSL color model is a color model composed of hue, saturation and shade. It is hSLA (Hue, saturation, lightness).

Basic use of Filter

The filter CSS attribute applies graphical effects such as blur or color offset to elements. Filters are usually used to adjust images, backgrounds and border renderings.

Filter Indicates the meaning of the filter attribute

  • brightness()Make the image brighter or dimmer,0%Will create an all-black image,100%Show the original, greater than100%Show brighter picture effects.
  • contrast()Increase or decrease the contrast of the image, value is0%Image full grey image, no contrast.100%Show the original, greater than100%Display images with higher contrast.
  • saturate()Supersaturated or desaturated input image, value is0% Is completely unsaturated, completely converted to grayscale image, showing 100% of the original image, greater than 100% has higher saturation.
  • grayscale()Change the image gray level, the value is0% 到 100%, and the value is 0%. Show the original picture, and the value is100%The image is completely converted to gray scale.
  • blur()Blur the image. The passed value is in px
  • drop-shadow()Add a shadow to the image, the same value as the box-shadow property.
  • hue-rotate()Change the overall tone of the image, Angle sets the value of the color ring Angle that the image will be adjusted. A value of0degShow the original, greater than360degIt’s like going around again.
  • invert()Invert image color, value in0% 和 100%Between,100%The value is completely reversed. A value of0%Then the image has no change.
  • opacity()Change the opacity of the image0% 和 100%Between, the value is0%Is completely transparent and the value is100%Then the image has no change.
  • sepia()Turn the image to tan with a value of0% 到 100%Between, the value is100%It’s completely dark brown and has a value of zero0%The graph doesn’t change.

Method of using the filter function

You can use a single filter function or multiple filter functions at the same time.

/* 
      
        values uses a single filter */
      
filter: blur(5px);
/* Use Multiple filters */
filter: contrast(175%) brightness(3%);
/* Use no filter */
filter: none;
Copy the code

Filter Effect of each attribute value

Codepen. IO/denghuijie /…

Example filter

Irregular projection

Codepen. IO/denghuijie /…

Box-shadow is perfect for adding a shadow effect to shapes generated by rectangles or border-radius. However, when an element has fake elements or translucent decorations, box-shadow will ignore the transparent parts, resulting in poor projection.

Box-shadow: 3px 3px rgba(0, 0, 0, 0.5**)支那You can use the drop-shadow() filter to add shadows to translucent images, fake elements, and more. ** Remember that drop-shadow will shadow any part that is not transparent.

Filter: drop-shadow(3px 3px rgba(0, 0, 0, 0.5));

The dyeing effect

Codepen. IO/denghuijie /…

Combine various filters to achieve the effect of dyeing.

  • Using Sepia (1) to desaturate the orange-yellow effect, almost all pixels converge to 35-40.
  • Use a Saturate (200%) filter to saturate the pixels.
  • Rotate (295) with the hot-rotate (295) filter. For example, if you want HSL (335, 100%, 50%),40 to 335 and hue offset to 295 degrees, hue-rotate(295)

Frosted glass effect

Codepen. IO/denghuijie /… Since we cannot blur the element itself directly, we will process a pseudo-element, and then locate it to the lower level of the element. The background of the pseudo-element and the body background will seamlessly coincide, and blur the pseudo-element.

  1. First add a pseudo-element, position it absolutely, and set all offsets to zero, so that it can be completely overwritten on the.content.
.content::before{
        position: absolute;
        content: ' ';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
}
Copy the code
  1. Set the pseudo-element’s background to overlap exactly with the body element’s background.
body,
.content::before{
        background: url(bg.jpg);
        background-attachment: fixed;
}
Copy the code
  1. Add a fuzzy attribute to the pseudo-element. Since the fuzzy effect will fade away at the edge, you need to expand the size of the pseudo-element outward at least 20px relative to the host element. At the same time, the host element cuts out the extra fuzzy areas.
.content{
        overflow: hidden;
}
.content::before{
        filter: blur(30px);
        margin: -50px;
}
Copy the code

Soften the background by blurring

Codepen. IO/denghuijie /…