:: Neo-Reality :: HTML & CSS

Basic Filters

Written by Jen

If you thought that some effects can only be achieved if you have flashy graphics programs, then you're highly mistaken. Text and image effects can also be achieved by using CSS, more specifically CSS filters. However, do note that if you look down at the page, and the images look all the same to you, then your browser does not support these filters and there's really no point in trying them.

These filters are the most basic ones, which means that they are the most highly accepted on internet browsers. To show you the difference in effects, I will be using the following image:

Image from Neopets.com

Let's start with one of my favourites: fading. This effect can be used on all elements, including tables, divs, or other things you have issued a class or ID for.

This is an example of inline CSS. You can do this in a stylesheet as well, just place the filter property with which element you wish to fade. The opacity number is the factor that decides how much is being faded. This number ranges from 1-100, with 100 being an unfaded image. Using 0 will make the image disappear, which pretty much ruins the point of fading the image.

Next is one that is really popular for affiliate buttons when you hover over them: blur. This is not a nice effect to have permanently, which is why just about everyone opts for it to be a hover effect.

The greater the strength number, the greater the blur. Direction number is in degrees, as in the angle of which your blurring motion is taking place. For a completely horizontal blur, you would use 90. For a completely vertical blur, you would use 180.

Too much color on your site? How about dimming down those bright colors with a grayscale filter?

Once again, this effect is usually used when hovering over affiliates buttons. Makes sense since those buttons are bright and flashing and you can't really tell which one you're hovering over.

I'm not sure why you'd do this, but inverting colors is also a common filter you could use.

Creating a wave pattern just hurts my eyes, but hey, some people seem to like it enough to want to use it.

The lower the Frequency (Freq), the less pleats you'll have. The greater the light strength, the darker the image becomes. The lower the phase number, the more in tune it will become (don't really worry about this as it doesn't make much difference to the overall picture). And the greater the strength, the less curvey the wave will become (ie. more jagged).

Finally, for you lopsided people, you can also flip your elements.

<img src="http://images.neopets.com/games/tradingcards/261.gif" style="Filter: FlipV;"> to flip it vertically OR
<img src="http://images.neopets.com/games/tradingcards/261.gif" style="Filter: FlipH;"> to flip it horizontally.

The following filter effects will be show using a different picture. These effects will only work if you're using a picture with a transparent background (ie. it's a cut-out). These effects actually works best with text, but I will use the following image all the same since it's easier to display the code.

Image from Neopets.com

This is one of the effects that get so annoying to read that just about all forums or chat boards ban it; glow.

Of course, you don't have to use the annoying green color. You can switch it to a shade that's more pleasing to the eye. And the higher the strength number, the more glow you'll get.

A similar filter effect is the shadow effect. Pretty popular with text, but not so much with images.

The color I've used is the typical shadow color, but you can use any color you fancy. The direction is measured in degrees, ie. the angle that you want the shadow to drop.

There are other filters out there, such as the chroma or x-ray filter, which you can also use. But I don't really recommend those since they are either incompatible with too many browser types or they just don't look very good. However, if you'd like to learn more about them, feel free to email me.