The hr tag has been around for quite some time to provide a nice horizontal line to visually separate content.  To achieve a vertical line, it's typically been accomplished via border-left or border-right.  However, this is when you can get into height issues or columns that don't extend the whole way, etc…  Instead CSS3 allows for the rotation of elements and allow for vertical or diagonal lines to be created with some basic CSS.

As more and more browsers support HTML5 and more importantly CSS3, it begins to allow us much more freedom using standard text without the need of images.  Not only does this speed up page load times, it also lowers bandwidth costs as well.  Using CSS3, many standard DOM (Document Object Model) objects can easily be rotated, such as: images, text, block elements, etc…

Do you have a nice background image that you don't want hidden by a solid color and your content?  With some CSS3, a background color can be set with an opacity value so that the content or image beneath will be visible through it.

Do you see the gradient blue above for the title of this article?  If you don't then your browser doesn't support CSS3 gradients.  However, if you do see it, you'll be happy to know that I saved you and me some bandwidth by not using an image!  Instead, some CSS3 is used.  So next time a designer provides you a PSD with a bunch of gradient images forget "chopping" them out and use the following example instead.

In a previous article, I demonstrated how you can use jQuery to Transition AJAX Content into view with $.animate(). In this article, we are going to remove the jQuery animation and use CSS3 instead.  Currently this is not supported by Internet Explorer and Opera.