Creating Fancy Checkmark Icons with Pure CSS3

I was recently working on a personal project where I wanted to implement some cool “checkmark” icons like you see at left to spice up my unordered lists. I could’ve done it quite easily with the list-style-image property, but I was trying to keep my images and http requests to a minimum, so I wanted to figure out another way to do it plus, the challenge sounded kind of fun…

VN:F [1.9.22_1171]
Rating: +4 (from 8 votes)

Styling HTML Lists with CSS: Techniques and Resources

In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer’s toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.If you’re new to CSS, this article should provide a good overview of the different types of lists available, as well as some of the browser quirks that occur in relation to HTML lists, with some helpful advice that should prevent those quirks from becoming major road blocks to good design…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Essential CSS/HTML Lists Styling Techniques

Certain elements in HTML lend themselves to many situations when marking up a website, one of the more useful of these elements is the HTML list. Using lists, a developer can markup horizontal navigation, dropdown navigation, a list of links, and even scrolling content panels with the help of Javascript. These features can help developers build new sites and applications as well as integrate new content into existing applications…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Style a List with One Pixel

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Sexy HTML List Tricks

Behold the ubiquitous list elements, “ul” and “ol”!

These two sexy elements help millions of websites display lists of information in clean, semantic fashion. Without them, we’d be crawling around like filthy cavemen, eating dirt and howling at the moon. But these list elements aren’t just sexy, they are also extremely flexible, enabling us humble designers to create robust list configurations that are semantically versatile and highly customizable…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Styling Ordered Lists with CSS Tutorial

Recently I was working on a site where I had to style an ordered list and thought this may help some of you in future projects. The snag that some people tend to run into is that they are not sure how to separate the styles of the numbers and the actual content of the list.

It may feel easier to number each list item manually but then we end up defeating the purpose. In this tutorial I will show how to give an ordinary ordered list a face lift…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)