Some common effects used to make website more visually appealing are rounded corners, gradients and border shadows. I recently came across a theme that still implemented these effects by using extra divs and background images. There is plenty of information about creating these effects using CSS 3 but this article is more about why CSS 3 should be used now that recent browser releases all support them.

Rounded corners

For instance a common way to implement rounded corners:

The HTML markup for this uses many extra divs.

The style sheet for this is:

#roundedcorners {
  margin: 10px auto;
  height: 60px;
  width: 100px;
}

#topleft {
  position: relative;
  float: left;
  background: url('images/wrapper_corners.png') no-repeat scroll 0 0 transparent;
  height: 10px;
  width: 10px;
}

#top {
  position: relative;
  float: left;
  height: 10px;
  width: 80px;
}

#topright {
  position: relative;
  float: left;
  background: url('images/wrapper_corners.png') no-repeat scroll 100% -13px transparent;
  height: 10px;
  width: 10px;
}

#middle {
  position: relative;
  float: left;
  height: 40px;
  width: 100px;
  text-align: center;
}

#bottomleft {
  position: relative;
  float: left;
  background: url('images/wrapper_corners.png') no-repeat scroll 100% -27px transparent;
  height: 10px;
  width: 10px;
}

#bottom {
  position: relative;
  float: left;
  height: 10px;
  width: 80px;
}

#bottomright {
  position: relative;
  float: left;
  background: url('images/wrapper_corners.png') no-repeat scroll 100% -40px transparent;
  height: 10px;
  width: 10px;
}

Then there is a small image file with the four rounded corners. The extra divs harm the search ranking and the image and extra CSS slow down the page load. This is tedious and for many websites is not worth the time and/or money.

With the new crop of browsers it is getting easier to include these types of visual effects using CSS 3.  There is also increasing support for making these features work in the remaining older browsers that do not support CSS 3. Here are three elements that use different markups for achieving rounded corners.

The first element (border-radius: 10px;) should work in browser that support CSS 3 (Firefox 4.0+, Internet Explorer 9.0+, Opera 10.5+ and Safari 5.0+). The second element (-moz-border-radius: 10px;) should work in Firefox 1.0-4.0. The third element (-webkit-border-radius) should work in Chrome 0.2-4.0 and Safari 3.0-5.0. In order to include Internet Explorer 6-8 there are several projects that use DHTML Behaviors (first introduced in Internet Explorer 5.5). The latter project, Progressive Internet Explorer (PIE), supports several CSS3 features and is used in this article. Combining all the examples and PIE results in an element that should work in all major browsers.

The HTML markup for producing this is:

The style sheet is:

#allcurve {
  position: relative;
  margin: 10px auto;
  height: 40px;
  width: 100px;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: #cccccc;
  behavior: url(/sites/all/themes/gaiaes/PIE.htc);
}

Note that if the z-index is used on the website then PIE may require position: relative to properly work. Also, Internet Explorer loads the behavior URL from the HTML document and not the CSS file which makes relative paths difficult.

Internet Explorer up to version 8 has to load an additional file. There are no extra divs to confuse rankings for search engines. And the code is a lot cleaner with better separation of content, layout and style.

Gradients

A common way to implement gradients is to create a gradient image one pixel wide and then use CSS to repeat the image:

The HTML markup is not complicated in this case:

The style sheet for this is:

#gradient {
  margin: 10px auto;
  background: url(images/black1.jpg) repeat-x;
  height: 80px;
  width: 80px;
  color: #ffffff;
  text-align: center;
  line-height: 600%;
}

An image file is required which takes a bit of time to generate and slows down the page load.

Using CSS 3 to produce the same effect:

The HTML markup is similar and the style sheet has a few more lines:

#css3gradient {
  position: relative;
  margin: 10px auto;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000000), to(#ffffff));
  background: -moz-linear-gradient(#000000, #ffffff);
  background: -o-linear-gradient(#000000, #ffffff);
  background: linear-gradient(#000000, #ffffff);
  -pie-background: linear-gradient(top, #000000 0%, #ffffff 100%);
  behavior: url(/sites/all/themes/gaiaes/PIE.htc);
  height: 80px;
  width: 80px;
  color: #ffffff;
  text-align: center;
  line-height: 600%;
}

The main advantages are the gradient is easier to change and there is one less image file to load.

Box shadows

Box shadows also can be done using CSS 3. Creating a box shadow without CSS 3 would probably require nested divs and be rather tedious. And it would be difficult to get them to look as nice as those using CSS 3.

The HTML markup is just a div and the style sheet is:

#boxshadow {
  position: relative;
  background: #FFFFFF;
  margin: 10px auto;
  text-align: center;
  width: 80px;
  height: 60px;
  line-height: 450%;
  border: 1px solid #000000;
  -webkit-box-shadow: 2px 2px 3px #666;
  -moz-box-shadow: 2px 2px 3px #666;
  box-shadow: 2px 2px 3px #666;
  behavior: url(/sites/all/themes/gaiaes/PIE.htc);
}