CSS3 Filters

Welcome to the dynamic world of CSS3 filters! Delve into the magic of the CSS filter property, where creativity knows no bounds. From adjusting image colors to creating captivating visual effects like grayscale and sepia, CSS3 filters offer a palette of possibilities. Explore the art of enhancing images, backgrounds, and more as we journey through the versatile realm of CSS filters.

In this chapter we'll discuss about the filter effects introduced in CSS3 that you can use to perform visual effect operations like blur, balancing contrast or brightness, color saturation, etc. on graphical elements like an image before it is drawn onto the web page.

The filter effects can be applied to the element using the CSS3 filter property, which accept one or more filter function in the order provided.

filter:	 blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();

Warning: The CSS3 filter effects currently not supported in any version of the Internet Explorer. Older versions of IE supported a non-standard filter property for creating effects like opacity, but this feature has been deprecated.

Photoshop like Gaussian blur effect can be applied to an element using the blur() function. This function accepts CSS length value as parameter which defines the blur radius. A larger value will create more blur. If no parameter is provided, then a value 0 is used.

<style>
img.blur {
    -webkit-filter: blur(2px); /* Chrome, Safari, Opera */
    filter: blur(2px);
}
img.extra-blur {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
</style>

• Try this code

The brightness() function can be used to set the brightness of an image. A value of 0% will create an image that is completely black. Whereas, a value of 100% or 1 leaves the images unchanged. Other values are linear multipliers on the effect.

You can also set the brightness higher than the 100% which results in brighter image. If the amount parameter is missing, a value of 1 is used. Negative values are not allowed.

<style>
img.bright {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}
img.dark {
    -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
    filter: brightness(50%);
}
</style>

• Try this code

Note: The filter functions that take a value expressed with a percent sign (e.g. 75%) also accept the value expressed as decimal (like, 0.75). If the value is invalid, the function returns none and no filter effect will be applied.

The contrast() function is used to adjust the contrast on an image. A value of 0% will create an image that is completely black. Whereas, a value of 100% or 1 leaves the image unchanged. Values over 100% are also allowed which provide results with less contrast. If the amount parameter is missing or omitted, a value of 1 is used.

<style>
img.bright {
    -webkit-filter: contrast(210%); /* Chrome, Safari, Opera */
    filter: contrast(210%);
}
img.dim {
    -webkit-filter: contrast(40%); /* Chrome, Safari, Opera */
    filter: contrast(40%);
}
</style>

• Try this code

You can use the drop-shadow() function to apply the drop shadow effect to the images like Photoshop. This function is similar to the box-shadow property.

<style>
img.shadow {
    -webkit-filter: drop-shadow(3px 3px 5px orange); /* Chrome, Safari, Opera */
    filter: drop-shadow(2px 2px 4px orange);
}
img.shadow-large {
    -webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */
    filter: drop-shadow(4px 4px 10px orange);
}
</style>

• Try this code

Note: The first and second parameters of the drop-shadow() function specifies the horizontal and vertical offset of the shadow respectively, whereas the third parameter specify the blur radius and the last parameter specifies the shadow color, just like the box-shadow property, with one exception, the 'inset' keyword is not allowed.

The images can be converted to grayscale using the grayscale() function. A value of 100% is completely grayscale. A value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers on the effect. If the amount parameter is missing, a value of 0 is used.

<style>
img.complete-gray {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
img.partial-gray {
    -webkit-filter: grayscale(40%); /* Chrome, Safari, Opera */
    filter: grayscale(40%);
}
</style>

• Try this code

The hue-rotate() function applies a hue rotation on the image. The passed parameter defines the number of degrees around the color circle the image samples will be adjusted. A value of 0deg leaves the image unchanged. If the 'angle' parameter is missing, a value of 0deg is used. There is no maximum value, the effect of values above 360deg wraps around.

<style>
img.hue-normal {
    -webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(150deg);
}
img.hue-wrap {
    -webkit-filter: hue-rotate(470deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(470deg);
}
</style>

• Try this code

The invert effect like Photoshop can be applied to an image with the invert() function. A value of 100% or 1 is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 0 is used. Negative values are not allowed.

<style>
img.partially-inverted {
    -webkit-filter: invert(90%); /* Chrome, Safari, Opera */
    filter: invert(90%);
}
img.fully-inverted {
    -webkit-filter: invert(110%); /* Chrome, Safari, Opera */
    filter: invert(110%);
}
</style>

• Try this code

The opacity() function can be used to apply transparency to the images. A value of 0% is completely transparent. A value of 100% or 1 leaves the image unchanged. Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 1 is used. This function is similar to the opacity property.

<style>
img.transparent {
    -webkit-filter: opacity(70%); /* Chrome, Safari, Opera */
    filter: opacity(70%);
}
img.highly-transparent {
    -webkit-filter: opacity(40%); /* Chrome, Safari, Opera */
    filter: opacity(40%);
}
</style>

• Try this code

The sepia() function converts the image to sepia. A value of 100% or 1 is completely sepia. A value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 0 is used.

<style>
img.complete-sepia {
    -webkit-filter: sepia(110%); /* Chrome, Safari, Opera */
    filter: sepia(110%);
}
img.partial-sepia {
    -webkit-filter: sepia(40%); /* Chrome, Safari, Opera */
    filter: sepia(40%);
}
</style>

• Try this code

Note: In photographic terms, sepia toning is a specialized treatment to give a black-and-white photograph a warmer tone (reddish-brown) to enhance its archival quality.

The saturate() function can be used to adjust the saturaion of an image. A value of 0% is completely un-saturated. A value of 100% leaves the image unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are also allowed, providing super-saturated results. If the 'amount' parameter is missing, a value of 1 is used.

<style>
img.un-saturated {
    -webkit-filter: saturate(0%); /* Chrome, Safari, Opera */
    filter: saturate(0%);
}
img.super-saturated {
    -webkit-filter: saturate(210%); /* Chrome, Safari, Opera */
    filter: saturate(210%);
}
</style>

• Try this code

Note: The url() function specifies a filter reference to a specific filter element. For example, url(commonfilters.svg#foo). If the filter reference to an element that didn't exist or the referenced element is not a filter element, then the whole filter chain is ignored. No filter is applied to the element.

What are CSS3 filters, and what do they allow you to do?

CSS3 filters are a set of visual effects that can be applied to HTML elements using CSS. They allow you to manipulate the appearance of elements by altering properties like brightness, contrast, hue, and saturation, among others.

How do you apply a filter to an HTML element using CSS?

To apply a filter to an HTML element, you use the filter property in your CSS code. For example, you can apply a grayscale filter to an image with filter: grayscale(100%);. This will make the image completely grayscale.

What are the different types of CSS3 filters, and how do they work?

There are several types of CSS3 filters, including blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), and sepia(). Each filter accepts specific values that control the intensity or effect of the filter. For example, you can use blur(5px) to apply a 5-pixel blur effect to an element.

How can you combine multiple CSS3 filters on a single element?

You can combine multiple CSS3 filters by chaining them together in the filter property. For example, to apply both a blur and a grayscale effect to an image, you can use filter: blur(5px) grayscale(100%);. The order of the filters matters, as they are applied from left to right.

Can you animate CSS3 filters? If so, how?

Yes, you can animate CSS3 filters using CSS transitions or animations. To animate a filter, define the initial and final filter values and then use a transition or animation property like transition or animation to control the animation duration and timing function.

Can you use CSS3 filters on non-image elements, such as text or background colors?

Yes, CSS3 filters can be applied to various HTML elements, including text and background colors. For example, you can apply a filter like filter: sepia(100%); to change the color of text or background elements.

How do you reset or remove CSS3 filters from an element?

To remove CSS3 filters from an element, you can reset the filter property to its default value, which is none. For example, filter: none; will remove any filters previously applied to the element.

In conclusion, the arsenal of CSS3 filters has emerged as an indispensable resource in the realm of web design, offering a versatile suite of tools to transform and refine visual elements with precision. The cornerstone, the CSS filter property, provides developers with the means to manipulate images seamlessly, unleashing a myriad of effects such as blurring backgrounds, adjusting brightness, contrast, and saturation. This level of control extends to creative expressions, including the application of grayscale, sepia, and hue rotation, presenting opportunities for dynamic and engaging visuals.

The adaptability of CSS3 filters is evident in their ability to go beyond mere stylistic enhancements. From customizing opacity to seamlessly integrating features like drop shadows, these filters play a pivotal role in crafting immersive user experiences. Whether it's experimenting with grayscale backgrounds, conveying moods, or fine-tuning details like image color, CSS3 filters empower developers to tell compelling stories through their designs. From the subtleties of blurs to the vivid expressions of image effects, these filters epitomize the evolution of design possibilities.