Suprem
04-21-2005, 08:32 PM
Ok I thought I would write a Tutorial on this, Sence alot of people wonder what alpha filters are.
Welcome to CSS Alpha filter 101
The CSS Alpha filter gives a fading effect to text and images. There are 3 styles that you can apply to the alpha filter.
Style=1 will give the effect from the right-to-left
Style=2 will apply the effect from both left and right sides of the object.
Style=3 will fade around all the corners.
Play around with the code "style" and the "start and finish co-ordinates" in the css script and see what effects you can make. Of course you can change the font size and type to suit your page design.
If you insert css "style=1" into the applied Alpha filter. This well make it fade from right to left.
And the same again with "style=2" but it well fade from left and right sides of the object.
Css code for the Alpha filter in the text box below.
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: blue; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">WHAT EVER YOU WANT GOES HERE</span>
This image has the "Style=2" Alpha filter applied, which gives a feather effect to the image without having to apply the effect in a graphic editor. Great for webpages and so easy to apply.
This image has the "Style=2" Alpha filter applied, which gives a feather effect to the image without having to apply the effect in a graphic editor.
Copy the css code in the text box below. Change the image name to suit your own image.
<img src="URL OF PIC GOES HERE" style="Filter: Alpha(Opacity=100,
FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)" align="left" height="20px" width="20px">
Welcome to CSS Alpha filter 101
The CSS Alpha filter gives a fading effect to text and images. There are 3 styles that you can apply to the alpha filter.
Style=1 will give the effect from the right-to-left
Style=2 will apply the effect from both left and right sides of the object.
Style=3 will fade around all the corners.
Play around with the code "style" and the "start and finish co-ordinates" in the css script and see what effects you can make. Of course you can change the font size and type to suit your page design.
If you insert css "style=1" into the applied Alpha filter. This well make it fade from right to left.
And the same again with "style=2" but it well fade from left and right sides of the object.
Css code for the Alpha filter in the text box below.
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: blue; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">WHAT EVER YOU WANT GOES HERE</span>
This image has the "Style=2" Alpha filter applied, which gives a feather effect to the image without having to apply the effect in a graphic editor. Great for webpages and so easy to apply.
This image has the "Style=2" Alpha filter applied, which gives a feather effect to the image without having to apply the effect in a graphic editor.
Copy the css code in the text box below. Change the image name to suit your own image.
<img src="URL OF PIC GOES HERE" style="Filter: Alpha(Opacity=100,
FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)" align="left" height="20px" width="20px">