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…
Direct link: Using Custom Data Attributes and Pseudo-Elements
Tag Archives: example
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…
Direct link: Modern Block Quote Styles
How to Center Anything With CSS
How to center something horizontally or vertically with CSS…
Direct link: How to Center Anything 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…
Direct link: Another CSS image replacement technique
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…
Direct link: CSS3 breadcrumbs
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…
Direct link: Take advantage of the CSS background-size property
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…
Direct link: Tabs with Round Out Borders
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…
Direct link: CSS Techniques for Horizontal Rules
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…
Direct link: CSS3 Progress Bars
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…
Direct link: A new micro clearfix hack