Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Image manipulation with CSS filters

Sunday, July 3rd, 2016 by Servage

css-filtersDid you know it is possible to manipulate images directly with CSS? This is possible with a feature in CSS3 called filters. CSS filters are similar to filters found in image manipulation programs like Photoshop. These filters are capable of changing the blur, brightness, grayscale, contrast and other properties of pictures on a website. This article introduces you to the CSS filter property as well the most common functions and values it supports.

Filter function syntax

The syntax for the CSS filter property is simple: filter: <type>(<value>). <type> can be any filter type, such as blur. <value> depends on what the type takes as input, such as 10px.

Blur

Blur does exactly what you might expect it to do: It blurs a picture. The function takes a length as input. The length can be specified using various CSS units, such as pixels, centimeters or inches. The blur function is rather sensitive: even a blur of 2px significantly affects the sharpness of an image.

Brightness

The brightness function is also quite self-explanatory. However, the values it takes as input are not given in lengths. Instead, to make an image darker it takes a value between 0-1 or 0%-100%. Zero means completely dark and 1 or 100% are the defaults. To make an image brighter, use a value higher than 1 or 100%.

Grayscale

Grayscale can be used to reduce colors of an image all the way down to a black-and-white image. The grayscale function takes input identical to brightness, except it cannot be above 100%. 0 means original and 1 makes the image completely black and white.

Contrast

Contrast adjusts the contrast (color and brightness difference) of a picture. The contrast function also takesnumbers or percentages as input in the same fashion as the brightness and grayscale functions. 1 or 100% is the default, and any lower value means a decrease in contrast. To increase contrast, a value above 100% can be selected.

Drop shadow

The drop-shadow function is an interesting filter. It takes almost identical input to the box-shadow property (e.g. 10px 10px 5px #ccc). However, what makes drop-shadow interesting is the fact that it takes the alpha channel of an image into consideration. While box-shadow draws a box around the border of a rectangular image, drop-shadow draws a shadow around the actual contents of an image. For example, a ball would have a shadow around the ball itself instead of around the corners of the image.

Conclusion

These were some of the basic functions you can use with the CSS filter. There are a couple more for you to find out about, including saturate, sepia, opacity and hue-rotate. It is highly recommended to experiment more with these yourself. When using the drop-shadow function, remember to use transparent images for best results.

Image manipulation with CSS filters, 3.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.