Scribd
Upload
16 views

Css Text Effects

CSS filters can be used to add visual effects to text and images on webpages. This document describes several CSS filters including Alpha Channel, Motion Blur, Chroma, Drop Shadow, Flip, Glow, Grayscale, Invert, Mask, and Shadow. Each filter is explained with parameters to customize the effect and examples are provided of applying the filters to both images and text.

Uploaded by

manikanta jonnapalli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Css Text Effects

CSS filters can be used to add visual effects to text and images on webpages. This document describes several CSS filters including Alpha Channel, Motion Blur, Chroma, Drop Shadow, Flip, Glow, Grayscale, Invert, Mask, and Shadow. Each filter is explained with parameters to customize the effect and examples are provided of applying the filters to both images and text.

Uploaded by

manikanta jonnapalli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

CSS FILTERS - TEXT AND IMAGE EFFECTS

http://www.tutorialspoint.com/css/css_text_effects.htm Copyright © tutorialspoint.com

You can use CSS filters to add special effects to text, images and other aspects of a webpage
without using images or other graphics. Filters only work on Internet Explorer 4.0+,. If you
are developing your site for multi browsers, then it may not be a good idea to use CSS filters
because there is a possibility that it would not give any advantage.

In this chapter, we will see the details of each CSS filter. These filters may not work in your
browser.

Alpha Channel
The Alpha Channel filter alters the opacity of the object, which makes it blend into the background.
The following parameters can be used in this filter −

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.

Example

<html>
<head>
</head>

<body>
<p>Image Example:</p>

<img src="/css/images/logo.png" 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>
</body>

</html>

It will produce the following result −

Motion Blur
Motion Blur is used to create blurred pictures or text with the direction and strength. The following
parameters can be used in this filter −

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

<html>
<head>
</head>

<body>
<p>Image Example:</p>

<img src="/css/images/logo.png" 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>
</body>

</html>

It will produce the following result −

Chroma Filter
Chroma Filter is used to make any particular color transparent and usually it is used with images.
You can use it with scrollbars also. The following parameter can be used in this filter −

Parameter Description

color The color that you'd like to be transparent.

Example

<html>
<head>
</head>

<body>
<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>
</body>

</html>

It will produce the following result −


Drop Shadow Effect
Drop Shadow is used to create a shadow of your object at the specified X horizontal and Y vertical
offset and color.

The following parameters can be used in this filter −

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

<html>
<head>
</head>

<body>
<p>Image Example:</p>

<img src="/css/images/logo.png"
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>
</body>

</html>

It will produce the following result −


Flip Effect
Flip effect is used to create a mirror image of the object. The following parameters can be used in
this filter −

Parameter Description

FlipH Creates a horizontal mirror image

FlipV Creates a vertical mirror image

Example

<html>
<head>
</head>

<body>
<p>Image Example:</p>

<img src="/css/images/logo.png"
alt="CSS Logo"
style="Filter: FlipH">

<img src="/css/images/logo.png" 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>
</body>

</html>

It will produce the following result −

Glow Effect
Glow effect is used to create a glow around the object. If it is a transparent image, then glow is
created around the opaque pixels of it. The following parameters can be used in this filter −

Parameter Description

color The color you want the glow to be.

strength The intensity of the glow from1to255.

Example

<html>
<head>
</head>

<body>
<p>Image Example:</p>

<img src="/css/images/logo.png"
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>
</body>

</html>

It will produce the following result −

Grayscale Effect
Grayscale effect is used to convert the colors of the object to 256 shades of gray. The following
parameter is used in this filter −

Parameter Description

gray Converts the colors of the object to 256 shades of gray.

Example

<html>
<head>
</head>
<body>
<p>Image Example:</p>

<img src="/css/images/logo.png"
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>
</body>

</html>

It will produce the following result −

Invert Effect
Invert effect is used to map the colors of the object to their opposite values in the color spectrum,
i.e., to create a negative image. The following parameter is used in this filter −

Parameter Description

Invert Maps the colors of the object to their opposite value in the color spectrum.

Example

<html>
<head>
</head>

<body>
<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>
</body>
</html>

It will produce the following result −

Mask Effect
Mask effect is used to turn transparent pixels to a specified color and makes opaque pixels
transparent. The following parameter is used in this filter −

Parameter Description

color The color that the transparent areas will become.

Example

<html>
<head>
</head>

<body>
<p>Image Example:</p>

<img src="/css/images/logo.png"
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>
</body>

</html>

It will produce the following result −

Shadow Filter
Shadow filter is used to create an attenuated shadow in the direction and color specified. This is a
filter that lies in between Dropshadow and Glow. The following parameters can be used in this filter
−

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

<html>
<head>
</head>

<body>
<p>Image Example:</p>

<img src="/css/images/logo.png"
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>
</body>

</html>

It will produce the following result −


Wave Effect
Wave effect is used to give the object a sine wave distortion to make it look wavy. The following
parameters can be used in this filter −

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 from0to100.

phase At what degree the sine wave should start from0to100.

strength The intensity of the wave effect.

Example

<html>
<head>
</head>

<body>
<p>Image Example:</p>

<img src="/css/images/logo.png"
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>
</body>

</html>

It will produce the following result −


X-Ray Effect
X-Ray effect grayscales and flattens the color depth. The following parameter is used in this filter:

Parameter Description

xray Grayscales and flattens the color depth.

Example

<html>
<head>
</head>

<body>
<p>Image Example:</p>

<img src="/css/images/logo.png"
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>
</body>

</html>

It will produce the following result −

Loading [MathJax]/jax/output/HTML-CSS/jax.js

You might also like