Filter in CSS | All CSS Filters
CSS filters are a powerful way to apply visual effects to HTML elements. Here’s a breakdown of all the CSS filter functions available:
1. Blur
Syntax: filter: blur(px);
Meaning: Applies a Gaussian blur to the element. The value specifies the radius of the blur effect.
2. Brightness
Syntax: filter: brightness(%)
Meaning: Adjusts the brightness of the element. Values over 100% make the element brighter, while values under 100% darken it.
3. Contrast
Syntax: filter: contrast(%)
Meaning: Adjusts the contrast of the element. Values over 100% increase contrast, while values under 100% decrease it.
4. Drop-shadow
Syntax: filter: drop-shadow(offsetX offsetY blurRadius color);
Meaning: Applies a shadow effect similar to box-shadow, but it's a filter effect, allowing it to be more versatile with transparency and blending.
5. Grayscale
Syntax: filter: grayscale(%)
Meaning: Converts the element to grayscale. A value of 100% makes the element completely grayscale, while 0% leaves it unchanged.
6. Hue-rotate
Syntax: filter: hue-rotate(deg);
Meaning: Rotates the hue of the element's colors. The value is specified in degrees, from 0 to 360.
7. Invert
Syntax: filter: invert(%)
Meaning: Inverts the colors of the element. A value of 100% fully inverts the colors, while 0% leaves them unchanged.
8. Opacity
Syntax: filter: opacity(%)
Meaning: Sets the opacity level of the element. Values range from 0% (fully transparent) to 100% (fully opaque).
9. Saturate
Syntax: filter: saturate(%)
Meaning: Adjusts the saturation of the element’s colors. Values over 100% increase saturation, while values under 100% decrease it.
10. Sepia
Syntax: filter: sepia(%)
Meaning: Applies a sepia tone to the element, which makes it look like a photograph from the early 20th century. A value of 100% applies full sepia, while 0% keeps the original colors.
11. Contrast
Syntax: filter: contrast(%)
Meaning: Adjusts the contrast of the element. Values greater than 100% increase contrast, while values less than 100% decrease it.
Please Like share and subscribe to my Youtube channel.
#coding #webdesign #css #webdevelopment #programming #programminglanguage #tamannaah #tamannaahbhatia
Смотрите видео Filter in CSS | All CSS Filters онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь CodeChat 30 Август 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 370 раз и оно понравилось 17 людям.