CSS various filters make 10 kinds of artistic effect word

css| filters with the flexibility to apply the features of CSS filters and combine them, we can get a lot of unexpected results. This is a number of effect demonstrations for your reference.

　　Effect One:

Www.webjx.com

This effect uses the shadow filter with the following code:

Filter:shadow (color=black,direction=135)

　　Effect Two:

Www.webjx.com

With the effect of the blur filter, the code is as follows:

Filter:blur (direction=135,strength=10)

　　Effect Three:

Www.webjx.com

With the effect of the DropShadow filter, the code is as follows:

Filter:dropshadow (color= #888888, offx=8,offy=8,positive=1)

　　Effect Four:

Www.webjx.com

With the effect of the glow filter, the code is as follows:

Filter:glow (color=royalblue,strength=5)

　　Effect Five:

Www.webjx.com

The effect uses two kinds of filters: Shadow and Alpha, and the code is as follows:

Filter:alpha (opacity=100,finishiopacity=0,style=1) Shadow (color= #ff3366, direction=135)

Effect Six:

Www.webjx.com

This effect also uses two filters mask and shadow, just like the top example in this article, except that the color is different and the code is as follows:

Filter:mask (color= #f7f7f7) Shadow (color=royalblue,direction=135)

Note:mask color to be consistent with the background color of the page, the color of the font determined by shadow.

　　Effect of Seven:

Www.webjx.com

This effect is similar to the effect six, the effect of six mask with the same color as the background, and this example mask is red, the same, the font color by shadow decision. The code is as follows:

Filter:mask (color=red) Shadow (color=black,direction=135)

　　Effect Eight:

Www.webjx.com

If the effect of six of the font is engraved, then the effect of the font should be embossed, with two filters to achieve mask and DropShadow, pay attention to mask color and Web page background color consistent, or mask and chroma into the use, can achieve the same effect (described below). The code is as follows:

Filter:mask (color= #f7f7f7f) DropShadow (color=royalblue,offx=-3,offy=-3,positive=1)

　　Effect Nine:

Www.webjx.com

This halo text uses two filters glow and Droshadow, and the code is as follows:

Filter:glow (color=pink,strength=10) DropShadow (color=royalblue,offx=3,offy=3,positive=1)

　　Effect Ten:

Www.webjx.com

You can do hollow words with the glow Filter by setting the font color to the background color, and then setting the strenght value of the glow filter to 1 or 2. The code for this effect is as follows:

Filter:glow (color=green,strength=2) Shadow (color= #66cc99, direction=135)