Using Custom Data Attributes and Pseudo-Elements

A tutorial to show you some simple CSS tricks using data attributes and pseudo-elements. The aim is to create an image caption using only an anchor and an image as markup…

Modern Block Quote Styles

Some nice examples of modern blockquote styling that you can use for testimonials, quotes etc. The blockquote designs use graphics, gradients and textures making use of pseudo-elements…

How to Center Anything With CSS

How to center something horizontally or vertically with CSS…

Another CSS image replacement technique

A new image replacement technique was recently added to the HTML5 Boilerplate project. This post explains how it works and how it compares to alternative image replacement techniques…

CSS3 breadcrumbs

Breadcrumb navigation allows visitors to easily navigate through a site’s hierarchical structure. Here’s a tutorial with a few examples of CSS breadcrumb menus…

Take advantage of the CSS background-size property

A variety of innovative uses for the new CSS3 background-size property. More control than you’ve ever had before…

Tabs with Round Out Borders

A detailed tutorial explaining how to create a tab based menu where the tabs are rounded on top and rounded-out on the bottom…

CSS Techniques for Horizontal Rules

Code examples for displaying more elaborate horisontal rules in your designs. Examples use background gradients for webkit and mozilla. All versions of IE just show the solid rule…

CSS3 Progress Bars

CSS3 progress bars using no images, just CSS3 fancies. They fall back to an acceptable experience in browsers that don’t support CSS3…

A new micro clearfix hack

The clearfix hack is a popular way to clear floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required…

Next Page »