In this section, we'll explore CSS3 filter effects, which enable you to apply visual effects like blur, contrast or brightness adjustments, and color saturation to graphical elements such as images before they're displayed on a webpage.
To apply these filter effects to an element, you can use the CSS3 filter property, which allows for one or more filter functions to be applied in a specific order.
| filter: | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url(); |
Warning: CSS3 filter effects are presently unsupported in any version of Internet Explorer. Previous versions of IE utilized a non-standard filter property to create effects such as opacity, but this functionality has been deprecated.
A Gaussian blur effect, similar to what's found in Photoshop, can be applied to an element using the blur() function. This function accepts a CSS length value as a parameter, defining the blur radius. A larger value results in more blur. If no parameter is provided, a value of 0 is used.
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}— The result of the example above will be something like this:
 |
|
|
blur(0) |
blur(2px) |
blur(5px) |
The brightness() function can be utilized to adjust the brightness of an image. A value of 0% makes the image completely black. Conversely, a value of 100% or 1 maintains the image as is. Other values serve as multipliers on the effect.
You can also increase the brightness beyond 100%, resulting in a brighter image. If the parameter is missing, a default value of 1 is used. Negative values are not accepted.
img.bright {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
img.dark {
-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
filter: brightness(50%);
}— The outcome of the example above will resemble this:
|
|
|
|
brightness(50%) |
brightness(100%) |
brightness(200%) |
Note: The filter functions that use a value expressed with a percent sign (e.g., 75%) also accept the value expressed as a decimal (like 0.75). If the value is invalid, the function will return none, and consequently, no filter effect will be applied.
The contrast() function adjusts the contrast of an image. A value of 0% produces a completely black image, while 100% or 1 maintains the image's original contrast. Values over 100% are allowed, resulting in decreased contrast. If the parameter is missing or omitted, the default value of 1 is used.
img.bright {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
img.dim {
-webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
filter: contrast(50%);
}— The result of the aforementioned example will resemble this:
|
|
|
|
contrast(50%) |
contrast(100%) |
contrast(200%) |
You can utilize the drop-shadow() function to add a drop shadow effect to images, similar to Photoshop. This function works akin to the box-shadow property.
img {
-webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */
filter: drop-shadow(4px 4px 10px orange);
}— The appearance of the aforementioned example will be similar to this:
|
|
|
|
drop-shadow(0) |
drop-shadow(2px 2px 4px orange) |
drop-shadow(4px 4px 10px orange) |
Note: The first and second parameters of the drop-shadow() function specify the horizontal and vertical offset of the shadow respectively, while the third parameter specifies the blur radius, and the last parameter specifies the shadow color. This is similar to the box-shadow property, except that the 'inset' keyword is not allowed.
Images can be transformed into grayscale using the grayscale() function. A value of 100% results in complete grayscale. A value of 0% keeps the image unchanged. Values between 0% and 100% act as linear multipliers on the effect. If the amount parameter is omitted, a value of 0 is assumed.
img.complete-gray {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
img.partial-gray {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}— The result of the above illustration will resemble this:
|
|
|
|
grayscale(0) |
grayscale(50%) |
grayscale(100%) |
The hue-rotate() function applies a rotation of hue on the image. The parameter specifies the degrees around the color circle that the image samples will be adjusted. A value of 0deg does not alter the image. If the angle parameter is not provided, a value of 0deg is assumed. There's no upper limit; values exceeding 360deg wrap around.
img.hue-normal {
-webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */
filter: hue-rotate(150deg);
}
img.hue-wrap {
-webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */
filter: hue-rotate(480deg);
}— The result of the previous example will resemble something like this:
|
|
|
|
hue-rotate(0) |
hue-rotate(150deg) |
hue-rotate(480deg) |
The invert effect, akin to Photoshop, can be applied to an image using the invert() function. A value of 100% or 1 results in complete inversion. A value of 0% keeps the original image. Values between 0% and 100% adjust the effect linearly. If the 'amount' parameter is not specified, it defaults to 0. Negative values are not accepted.
img.partially-inverted {
-webkit-filter: invert(80%); /* Chrome, Safari, Opera */
filter: invert(80%);
}
img.fully-inverted {
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
filter: invert(100%);
}— The result of the previous example will resemble something like this:
|
|
|
|
invert(0) |
invert(80%) |
invert(100%) |
The opacity() function enables you to apply transparency to images. A value of 0% renders the image completely transparent, while 100% or 1 leaves it unchanged. Values between 0% and 100% adjust the effect linearly. If the 'amount' parameter is not specified, it defaults to 1. This function behaves similarly to the opacity property.
img {
-webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
filter: opacity(80%);
}— The result of the previous example will resemble something like this:
|
|
|
|
opacity(100%) |
opacity(80%) |
opacity(30%) |
The sepia() function adds a sepia effect to images. A value of 100% or 1 renders the image completely sepia, while 0% leaves it unchanged. Values between 0% and 100% adjust the effect linearly. If the 'amount' parameter is not specified, it defaults to 0.
img.complete-sepia {
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
filter: sepia(100%);
}
img.partial-sepia {
-webkit-filter: sepia(30%); /* Chrome, Safari, Opera */
filter: sepia(30%);
}— The result of the preceding example will appear something like this:
|
|
|
|
sepia(0%) |
sepia(30%) |
sepia(100%) |
Tip: In photography, sepia toning is a method used to enhance the archival quality of a black-and-white photograph by giving it a warmer reddish-brown tone.
The saturate() function adjusts the saturation of an image. A value of 0% desaturates the image completely, while 100% maintains its original saturation. Other values act as multipliers on the effect, allowing for both desaturation and oversaturation. If the 'amount' parameter is not provided, it defaults to 1.
img.un-saturated {
-webkit-filter: saturate(0%); /* Chrome, Safari, Opera */
filter: saturate(0%);
}
img.super-saturated {
-webkit-filter: saturate(200%); /* Chrome, Safari, Opera */
filter: saturate(200%);
}— The outcome of the aforementioned example will resemble this:
|
|
|
|
saturate(100%) |
saturate(200%) |
saturate(0%) |
Note: The url() function denotes a filter reference to a specific filter element. For instance, url(commonfilters.svg#foo). If the filter reference points to a nonexistent element or the referenced element is not a filter element, then the entire filter chain is disregarded, and no filter is applied to the element.