100%

Fun with CSS Filters

R Proffitt
by Richard Proffitt
iopan design

The fact that CSS has the capability of transforming images with PhotoShop-like filters has always impressed me. Sure, there are only a handful at the moment — but see how quickly technology advances? More different filters are promised for the future. Still, with a few basic filters at your disposal, and the spirit of adventure, it's supprising just what images you can produce.

See the table below for the list of current filters available for CSS. We'll be looking at them all in this article now, and great news for us: the syntax is really simple to understand.

Currently, I cannot honestly say what prefixes are necessary for the different browsers to render the filters effectively. In the examples given below, I'm just using the general CSS code, with just one prefix: -webkit-. If you're uncertain, you could add the others… but that might not be needed – so try them without first, you could save a lot of time and trouble.

Available CSS Filters

Filter Units Description
blur() pixels To be more specific, they type of blur that the blur() function produces, is what designer's would call a Gaussian Blur; a sort of all-over general shifting of pixels. You only need to specify a small number of pixels before the blurred image becomes unrecognisable.
brightness() percentage This does just what you would expect turning up and down the brightness on any electronic device. But remember, you can specify a brightness of above 100% if you wish, this is true of the other filters also.
contrast() percentage And this filter does for changing the contrast levels of the particular hues… bright colours become brighter, dark colours, darker. Again, it's perfectly fine to specify a contrast of 200%.
url()
drop-shadow() x and y pixels, spread in pixels, shadow colour in code There are four units to be entered, three are in pixels, the final data is the colour of the shadow and can be entered in any of the usual ways (hex code, rgb, rgba, etc.) Firstly and Secondly, the x and y positions, as in a 2D grid. Thirdly the ammount of spread in pixels. This filter works most effectively on a transparent png.
grayscale() percentage
hue-rotate() degrees
invert() percentage
opacity() percentage
sepia() percentage

The CSS Filters' Syntax

.filter { filter: <filter-function> [<filter-function>]* | none }

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

six CSS filters demonstrated
Six CSS Filters

In the image, you should be able to make out that there are six different filters being demonstrated. But continue reading and you'll see all of the filters demonstrated live.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae.

“Above all, think of life as a prototype. We can conduct experiments, make discoveries, and change our perspectives. We can look for opportunities to turn processes into projects that have tangible outcomes. We can learn how to take joy in the things we create whether they take the form of a fleeting experience or an heirloom that will last for generations. We can learn that reward comes in creation and re-creation, no just in the consumption of the world around us. Active participation in the process of creation is our right and our privilege. We can learn to measure the success of our ideas not by our bank accounts by their impact on the world.”

Tim Brown

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

img

Fusce in augue

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

<div class="logo-footer-cont">
  <a href="index.html">
     <img class="logo-footer" src="images/logo-footer.png" alt="logo">
  </a>
</div>

Pellentesque venenatis tellus non purus tincidunt vitae ultrices tellus eleifend. Praesent quam augue, accumsan nec tempus dapibus, pharetra ac lacus. Nunc eleifend consequat justo id dapibus. In ut consequat massa. Nunc scelerisque suscipit leo nec imperdiet.

Nullam vel tellus

Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim. ❧

 


Articles