CSS Filter Examples
A CSS Filter is a coding technique used to hide or show CSS markup depending on the browser's brand and/or version number. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. Web developers will implement CSS Filters when attempting to achieve consistent layout appearance in browsers that do not have a consistent CSS behavior.
Below are some CSS Filter Example you can use to give a nice look and feel to your webpages:
Alpha Channel:
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">"DotNetSlackers"</span>
Motion Blur:
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">"DotNetSlackers"</span>
Chroma:
<span style="width: 580; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Chroma(Color = #FF0000)">"DotNetSlackers"</span>
Drop Shadow:
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: blue; Filter: DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)">"DotNetSlackers"</span>
Flip:
<span style="width: 300; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: FlipV">"DotNetSlackers" </span>
Glow:
<span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">"DotNetSlackers"</span>
Grayscale:
<span style="width: 300; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Gray">"DotNetSlackers" </span>
Invert:
<span style="width: 387; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Invert">"DotNetSlackers"</span>
Mask:
<span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Mask(Color=#00FF00)">"DotNetSlackers"</span>
Shadow:
<span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">"DotNetSlackers"</span>
Wave:
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=5, LightStrength=20, Phase=20, Strength=20)">"DotNetSlackers"</span>
X-ray:
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Xray">"DotNetSlackers" </span>
Below is the corresponding effects of above example:
