ZetaLight
Learn, Share, Inspire, Ideas.

CSS and HTML are really old technologies. There has hardly been any new Web Standard Specifications for both the technologies. Even though there seems to be a lot of talk about both HTML 5 and CSS 3.0 it will take a long time before any of these standards are drafted and agreed upon. That hasn’t stopped Browser vendors from implementing some of CSS3 features, but most of them have a proprietary browser specific coding syntax.

I have made use of some of these elements while designing ZetaLight, its hard to achieve Cross Browser Support for CSS 3 since only the latest browsers have implemented the most of CSS 3 features correctly. One rule of Web Development and Design is progressive enhancements, the key factor here is a website should not break down if a browser doesn’t support any of CSS 3 features. Hence the adoption of CSS3 Shadow, Rounded Corners using CSS Border Radius and Gradients have become widespread since these are purely aesthetic enhancements and if a browser lacks support it still renders in some form without breaking the layout or design.

CSS 3 Shadow

CSS3 Text Shadow

Most browsers support Text Shadow by default except for IE. No version of IE supports text shadows

     p.test { text-shadow: 3px 2px 1px #444; } /*FireFox 3+ Opera 9+ Safari 2+ Chrome*/

In CSS 3 text-shadow has four values

  1. The First Value is the X-Coordinate of the Text-shadow (3px), relative to the text
  2. The Second Value is the Y-coordinate of the text-shadow (2px), relative to the text
  3. The Third Value is blur radius of the Text-shadow (2px), this is the amount of space the shadow text is ‘stretched’, causing a blur effect. 0 means: no blur.
  4. The fourth Value the color of the Text-shadow (#444)

Using Text Shadow.

Keep the shadow value subtle and use a color that is slightly darker than background this effect looks good only on a light background. this helps give your text a subtle shadow which is easy on the eye. You can see my site as an example of it on ZetaLight. Example code is given below, do not position the shadow more than 2px away from the text.

Drop Shadow Inset Embossed Apple text
Drop Shadow Inset Embossed Apple text
 body { text-shadow:#AAA 1px 1px  1px; }

Embossed Inset effect using Text Shadow.

If you are a mac user, you’ll know that Apple loves to use the embossed inset effect on all its text, a perfect example is the main Apple.com site, the Menu on top uses the same effect. To achieve this effect use a color that is lighter than the background this effect looks good only on a dark background. Example code is given below, do not position the shadow more than 2px away from the text.

Apple Inset embossed Text CSS 3.0
Apple Inset embossed Text CSS 3.0
 body { text-shadow:#FFF 0px 1px  0px; }

CSS3 Box Shadow

Box-Shadow is similar to Text-Shadow except it can be used to apply a shadow to all block elements. You can have box shadows in IE too but they make use of non – standard CSS syntax using Microsoft Filters.

.box_shadow
 {
	-moz-box-shadow: 1px 2px 4px #ffffff; /* Firefox F3.5+ */
	-webkit-box-shadow: 1px 2px 4px #ffffff; /* Safari3.0+, Chrome */
	 box-shadow: 1px 2px 4px #ffffff; /* Opera 10.5, IE 9.0 */
	 filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff'); /* IE6, IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff')"; /* IE8 */
}
  1. The X-Coordinate of the Box-shadow (1px), relative to the Box
  2. The Y-coordinate of the Box-shadow (2px), relative to the Box
  3. The blur radius of the Box-shadow (4px), this is the amount of space the shadow box is ‘stretched’, causing a blur effect. 0 means: no blur.
  4. The color of the box-shadow (#345)

CSS 3 Rounded Corners : Border-Radius

Rounded corners using CSS3.0 is pretty straight forward, you just need to specify a value for the radius of the edges of a box.

.box_round
{
	-moz-border-radius: 4px; /* FireFox 1+ */
	-webkit-border-radius: 4px; /* Safari 3+, Chrome */
	 border-radius: 4px; /* Opera 10.5, IE 9 */
}

Try to keep the value of the radius less, a slight subtle radius looks much better. Use it sparingly in your design elements.

CSS 3 Gradient

Thee CSS 3 gradient syntax is the only one that is different for different browsers. the one used by FireFox seems to be the easiest

.box_gradient
{
	/* FireFox 3.6 */
	background-image: -moz-linear-gradient(top, #444444, #999999);
	/* Safari4+, Chrome */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999));
	/* IE6,IE7 */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999');
	/* IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
}

Resources and Links css3please css3.info

One Comments
  1. I guess it will be more clear to readers if you add some screen shots of web pages that specified codes applied. Especially the last 3 features. Thanks for the tut anyway.