The CSS filter attribute allows you to add effects to any element within a container element. Effects that previously could only have been achieved using a graphic image.
Unfortunately this attribute only works with Internet Explorer so isn't recommended where browser compatibility is required. However there are several effects that can be achieved that are compatible with most browsers.
Transparent Elements
The opacity of an element can be set anywhere between completely transparent and completely opaque.
In the case of Internet Explorer this is denoted by a number between 0 and 100 and in the case of Mozilla between 0 and 1.
To be certain that transparency works in both browser types, a style declaration for each should be included.
For Internet Explorer - filter:alpha(opacity=30);
For Mozilla - -moz-opacity:0.3;
The declaration above produces an opacity of 30% and is included in the style declaration below, which should be applied to a container element.
The Style Sheet Document Called effects.css
/* Anything within transparent will be affected */
.transparent {
width:100%;
font-face: verdana,arial,helvetica;
background-color: #ffffff;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 8px;
color: #ff0000;
font-size: 48px;
filter:alpha(opacity=30);
-moz-opacity:0.3;
}
/* A background image on which to place the element*/
.background {
background: url(graphics/tile_marble.jpg);
background-repeat: repeat;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 16px;
}
The HTML Document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="effects.css" type="text/css">
</head>
<body>
<div class="background">;
<div class="transparent">Transparent</div>
</div>
</body>
</html>
The Result
Transparent
Note: You must include either a width or a height for the transparent element or the effect will not work with Internet Explorer.
You also must include a background color or background url for the transparent element or any text will appear blocky in Internet Explorer.
Drop Shadows
Drop shadows are available using the filter attribute but to ensure compatibility an alternative can be used.
The shadow is a little crude, since it doesn't fade too well toward the edge, but does create a reasonable effect.
It relies on using HTML div elements as boxes successively overlaid with an offset.
The first box has a background in a light shadow colour and is overlaid with another box with a darker shadow colour then finally overlaid with the text box.
The shadow colours are set to a darker shade of the page background colour.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="effects.css" type="text/css">
</head>
<body>
<div class="shadow_edge">
<div class="shadow">
<div class="text_box">
This produces a text box with a drop shadow that's compatible with Internet Explorer and Mozilla. However the shadow is a little crude.
</div>
</div>
</div>
</body>
</html>
The Result
This produces a text box with a drop shadow that's compatible with Internet Explorer and Mozilla. However the shadow is a little crude.
Note: This effect can be applied to text but it means repeating the text and this might be considered spamdexing by some search engines.
Rounded Corners
There are a number of techniques to produce boxes with rounded corners. Many rely on using images or JavaScript.
This technique uses only CSS and consists of a series of bold tags, set to display: block with decreasing side margins and a border.
The result isn't anti-aliased but with carefully chosen colours it produces a good result.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="effects.css" type="text/css">
</head>
<body>
<b class="b1"></b><b class="b2"></b>
<b class="b3"></b><b class="b4"></b>
<div class="bubble"><div>
This produces a box with rounded corners. Although the corners aren't anti-aliased the result is pretty good.
</div></div>
<b class="b4"></b><b class="b3"></b>
<b class="b2"></b><b class="b1"></b>
</body>
</html>
The Result
This produces a box with rounded corners. Although the corners aren't anti-aliased the result is pretty good.
Free Web Design Tutorials
Special Effects
