CSS TUTORIALS - CSS - Text Effects
CSS - Text Effects
ADVERTISEMENTS
| Parameter | Description |
|---|---|
| opacity | Level of the opacity. 0 is fully transparent, 100 is fully opaque. |
| finishopacity | Level of the opacity at the other end of the object. |
| style | The shape of the opacity gradient. 0 = uniform 1 = linear 2 = radial 3 = rectangular |
| startX | X coordinate for opacity gradient to begin. |
| startY | Y coordinate for opacity gradient to begin. |
| finishX | X coordinate for opacity gradient to end. |
| finishY | Y coordinate for opacity gradient to end. |
ADVERTISEMENTS
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div> |
ADVERTISEMENTS
|
Image Example: Text Example: CSS Tutorials
|
| Parameter | Description |
|---|---|
| add | True or false. If true the image is added to the blurred image and if false the image is not added to the blurred image. |
| direction | The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left). 0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left |
| strength | The number of pixels the blur will extend. The default is 5 pixels. |
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Blur(Add = 0, Direction = 225, Strength = 10)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div> |
|
Image Example: Text Example: CSS Tutorials
|
| Parameter | Description |
|---|---|
| color | The color that you'd like to be transparent. |
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #FFFFFF)"> <p>Text Example:</p> <div style="width: 580; height: 50; font-size: 30pt; font-family: Arial Black; color: #3300FF; Filter: Chroma(Color = #3300FF)">CSS Tutorials</div> |
|
Image Example: Text Example: CSS Tutorials
|
| Parameter | Description |
|---|---|
| color | The color, in #RRGGBB format, of the dropshadow. |
| offX | Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left. |
| offY | Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up. |
| positive | If true, all opaque pixels of the object have a dropshadow. If false, all transparent pixels have a dropshadow. The default is true. |
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #000000) DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: DropShadow(Color=#000000, OffX=2, OffY=2, Positive=1)">CSS Tutorials</div> |
|
Image Example: Text Example: CSS Tutorials
|
| Parameter | Description |
|---|---|
| FlipH | Creates a horizontal mirror image |
| FlipV | Creates a vertical mirror image |
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: FlipH"> <img src="/images/css.gif" alt="CSS Logo" style="Filter: FlipV"> <p>Text Example:</p> <div style="width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: FlipV">CSS Tutorials</div> |
|
Image Example: Text Example: CSS Tutorials
|
| Parameter | Description |
|---|---|
| color | The color you want the glow to be. |
| strength | The intensity of the glow (from 1 to 255). |
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div> |
|
Image Example: Text Example: CSS Tutorials
|
| Parameter | Description |
|---|---|
| gray | Converts the colors of the object to 256 shades of gray. |
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Gray"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Gray">CSS Tutorials</div> |
|
Image Example: Text Example: CSS Tutorials
|
| Parameter | Description |
|---|---|
| Invert | Maps the colors of the object to their opposite value in the color spectrum. |
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: invert"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: invert">CSS Tutorials</div> |
|
Image Example: Text Example: CSS Tutorials
|
| Parameter | Description |
|---|---|
| color | The color that the transparent areas will become. |
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Mask(Color=#00FF00)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Mask(Color=#00FF00)">CSS Tutorials</div> |
|
Image Example: Text Example: CSS Tutorials
|
| Parameter | Description |
|---|---|
| color | The color that you want the shadow to be. |
| direction | The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left). 0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left |
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div> |
|
Image Example: Text Example: CSS Tutorials
|
| Parameter | Description |
|---|---|
| add | A value of 1 adds the original image to the waved image, 0 does not. |
| freq | The number of waves. |
| light | The strength of the light on the wave (from 0 to 100). |
| phase | At what degree the sine wave should start (from 0 to 100). |
| strength | The intensity of the wave effect. |
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div> |
|
Image Example: Text Example: CSS Tutorials
|
| Parameter | Description |
|---|---|
| xray | Grayscales and flattens the color depth. |
Example:
|
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Xray""> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; style="Filter: Xray">CSS Tutorials</div> |
|
Image Example: Text Example: CSS Tutorials
|