Blur, glow, and other text filters

[howto_user]

Prerequisites:
GLOBAL_HEAD tutorial
Basic knowledge of CSS

You may have seen some journals that have glowing text, or that have links that blur when the mouse hovers over them. These are done with a function of CSS called text filters. There are several neat text filters you can apply, using the filter: attribute. Here we'll cover the most common ones, but keep in mind before you try these that they can severely drain your computer's power and slow everything down, especially if you use a filter on a lot of text (say, all your entries).

Horizontal flip
filter: fliph();

Vertical flip
filter: flipv();

The following filters have Add, Color, Strength, or Direction properties. These should be changed to numbers that suit your liking.

Add specifies whether the original object will be added to the filter or not. Any nonzero value adds the original object and zero does not.

Strength affects how much the object will glow or blur and can be changed to any one-digit number.

The Color property can be changed to any hexadecimal color code. [A list of such codes can be found here.]

The Direction property changes which direction the object is blurred from or which direction the shadow comes from. In the wave filter, Phase is equivalent to Direction.

Numbers you can use as directions:

0 (top)
45 (top right)
90 (right)
135 (bottom right)
180 (bottom)
225 (bottom left)
270 (left)
315 (top left)

Glow
filter:glow(Color=#003399,Strength=2);

Blur
filter:blur(Add=1,Strength=4,Direction=45);

Wave
filter:wave(Add=1,Freq=2,LightStrength=20,Phase=45,Strength=3);
In this filter, Freq specifies the number of waves the filter makes, and LightStrength is a percentage value that specifies the strength of light on the wave effect

Shadow
filter:shadow(Color=#003399,Direction=45);

Drop shadow
filter:dropshadow(Color=#003399,Direction=180);

So, for example, if you wanted to make your links blur slightly when they are hovered over, you would add this CSS code to a GLOBAL_HEAD override:

GLOBAL_HEAD<=

<=GLOBAL_HEAD

In that example code, you'll notice the height: 0; property. It's important to add this with any filter you use, because they may not work properly without it.

If you're adding this code to existing GLOBAL_HEAD overrides, you'll need to make sure to merge them correctly. Instructions on how to merge overrides can be found in this tutorial.

For other ways you can change the way text looks using CSS, try this tutorial.

contributed by thewildrose and girl_from_mars