Home > CSS Tips and Tricks > CSS Special Effectsprinter version

CSS Special Effects

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.

The Style Sheet Document Called effects.css

.text_box {
position: relative;
background-color: #cccccc;
bottom: 2px;
right: 2px;
}
.shadow {
position: relative;
background-color: #cccccc;
bottom: 2px;
right: 2px;
}
.shadow_edge {
position: relative;
background-color: #dddddd;
bottom: 4px;
right: 4px;
}
.text_box {
background-color: #ffffff;
color: #000000;
border: 1px solid #000000;
padding: 4px;
}

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="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.

The Style Sheet Document Called effects.css

.b1, .b2, .b3, .b4{
font-size:1px;
overflow:hidden;
display:block;
}
.b1 {
height:1px;
background:#bbbbbb;
margin:0 5px;
}
.b2 {
height:1px;
background:#c6ffe7;
border-right:2px solid #bbbbbb;
border-left:2px solid #bbbbbb; margin:0 3px;
}
.b3 {
height:1px;
background:#c6ffe7;
border-right:1px solid #bbbbbb;
border-left:1px solid #bbbbbb; margin:0 2px;
}
.b4 {
height:2px;
background:#c6ffe7;
border-right:1px solid #bbbbbb;
border-left:1px solid #bbbbbb; margin:0 1px;
}
.bubble {
background: #c6ffe7;
border-right:1px solid #bbbbbb;
border-left:1px solid #bbbbbb;
}
.bubble div {
margin-left: 5px;
margin-right: 5px;
color: #000000; text-align: left;
font-size: 1em;
}

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