CSS: Filter Command

HTML Filter Tutorial	Revised: 11/30/2003
Quick Study

Cascading Style Sheet: FILTER Effect

There are others Style Sheet (CSS) attributes we can use in creating a customize homepage. When you access a certain site, you've seen a lot of text that were wrapped with color. On CSS we can use a certain command that will do the highlighting, doing wave, on blur, shadow, etc. I like using the shadow it creates a solid silhouette in projection on FONTS or an Images. This feature only works on I.E. 4.x and above.

FILTER can be a transparent (as colored glass) that can see the background you have on your homepage. If you want an indistinct pattern or having darker sections of design in your Fonts, simply use the "Filter: Shadow." Usually the shading or the shadow has the default color that is gray. We can change that shadow to a different color you want. You can use this value in the Filter "(color=n, direction=n)". So when you add the value, it will shows like this: Filter: Shadow (color=#3333FF, direction=135). The additional command after the Filter command will put a solid projection on a certain fonts or images. The "direction" is another value indicates the degree or the percentage of the projection.

To give you an example of what we have discussed earlier. We can try creating an example that can easily view the outcome. First, we can try this through a FONT and then with images.

   
          <P Style="color:#000000;
          width:100%;
          text-indent: 10.5px; 
          font-size: 15pt; 
          font-weight:bold;
          font-family:Georgia; 
          Filter:shadow(color=3333FF, direction=135)> 
          Check on how neat if you have this style. </P>

Check on how neat if you have this style.

On the above example, the value "direction" will determine where you should the drop shadow will be place. "Direction=135" act as the determiner to the placeholder. Same thing when you add this value: "Alpha (opacity=50)". Opacity will shaded or darken. The value "50" has an impact if you use it on fonts or images, it will convert to grayscale. You can change the number 1 to 100.

Drop Shadow is the same with the Shadow effect, but you need to use "height" to specify the amount of pixel can be a use for the effect.

We can combine Filters to add more effect or style on your home page. You can use Filter as an alternative if you cannot find an image as your header. To add another Filter effect, we can use Fliph () effect.

       <p style="color:#000099;
       width:100%;      
       text-indent: 10.5px;
       font-size:15pt;
       font-weight:bold;
       font-family:Georgia;
       Filter:Shadow(color=9966CC) Fliph()" >
       To combine two Filter effects.

To combine two Filter effects.

So, you've seen Filter: Shadow, Flip and Alpha (opacity) on text. We can now try corporate it with IMAGE with text.

      <P Style="Width:100%; 
      Filter:fliph();
      font-size:15pt; ">
      <:Img Src="pctechph.gif">Image filter Command </P>

My Logo Image filter Command

The test image on the example will be then flip on horizontal position, the command Flip with "h" can change into a Vertical position (FlipV). Another effect we can use is unblur and glow. Unblur effect it's like using the Alpha (opacity=n). The blur effect is to make dim, indistinct, or vague in outline or character if you use it on Pictures.

An example of onblur:

       <p style="width:100%; 
       font-family:Tahoma;
       font-size:15.5pt;
       width:100%
       Filter:Blur(pixelradius=50)">
       <img src="pctechph.gif"> This is a blur image command</p>

My Logo This is a blur image command

Note: Where the value under the "pixelradius" becomes less readable at higher values if you set numbers from 1 to 100. This will also help speed up the loading process of a picture when you it was access it in a lower speed.

Another effect is GLOW. It has a rich warm typically ruddy color: REDNESS. This new command is another way for you to add effect on every font. You can also change on the background color; by default it was set to "RED". Simply add "color=n". Where in "n" is the color you want.

      <P Style="Width:100%;
      font-family:Tahoma;
      font-size: 20pt;
      Filter:Glow"> This will create REDNESS </P>

This will create REDNESS

Filter: Mask is to modify the size or shape of (as a photograph) by means of an opaque border. This border has the default color that is black. We can use this Mask effect for Fonts too.

        <P Style="font-family:Tahoma;
       font-size:15pt;
       width:50%;
       Filter:Mask;">  This is a MASK Effect

This is a MASK Effect

Another type of FILTER effect are shown below:

Grayscale: Same thing with the shadow it drops information from the element. Syntax: style="filter:Grayscale();"
Invert: to reverse in position, order, color, brigthness or relationship. Syntax: style="filter: Invert();"
Chroma: A quality of color combining hue and saturation. Syntax: style="filter:chroma(#3399ff);"
Wave: Creates shape or outline having successive curves. Syntax: style="filter: Wave(strength=n,freq=m,lightstrength=p,add=i,phase=j);"
XRay: a photograph (pictures) obtained by use of X rays. Syntax: style="filter:XRay(color= ,strength=n);"

[ Go Back ]

[ Home ] [ Table Tutorial ] [ CSS Tutorial ] [ Div Tutorial ] [ JavaScript ] [ List Tutorial ]
Š1999-2000. Comments or Questions about this page? Please e-mail the PCTechPH@yahoo.com . All Rights Reserved.

	Visit Our Sponsors!

	Affordable HP Products from Office Depot!
	Net2Phone is the global leader in long distance savings!
	Stop Missing Calls While You're Online! Hear who's calling while you're online... Get the FREE the Internet Answering Machine Click Here!
	Be an Affiliates
	Join the Monster Affiliate Program now!
	Calling all Webmasters....Let us pay you for referring affiliates to the LinkShare Network.
	HTML Tutorial!
	Dynamic Drive DHTML code library Visit Dynamic Drive for free, original DHTML scripts and components, all of which utilize the latest in DHTML and JavaScript technology!

Quick Study