10 CSS Snippets for Adding Creativity to HTML Lists | list css template
TheHTMLlistisoneofthetruesurvivorsinthethrowawayworldofwebdesign.Trendscomeandgo,butbothordered
- andunordered
- listsarestillasusefulasever.LikemostbasicHTMLelements,theseold-timersarequiteboringtolookatwhenusedwithinasite’scontent(asopposedtonavigation[1],wheremuchmoreeffortgoesintostyling).EvenwithalittlebitofbasicCSSapplied,theydon’treallyquickenthepulse.Butthereisatonofpotentialtodomore(andwehaveproof).Weformedasearchpartytoscourtheweb,lookingforsignsofcreativeHTMLlists.It...
The HTML list is one of the true survivors in the throwaway world of web design. Trends come and go, but both ordered <ol> and unordered <ul> lists are still as useful as ever.
Like most basic HTML elements, these old-timers are quite boring to look at when used within a site’s content (as opposed to navigation[1], where much more effort goes into styling). Even with a little bit of basic CSS applied, they don’t really quicken the pulse. But there is a ton of potential to do more (and we have proof).
We formed a search party to scour the web, looking for signs of creative HTML lists. It turns out that some talented designers are indeed going beyond simple bullets and numbers. Take a look!
Color and DimensionOne potential problem for a long list is that it can be difficult to make each item stand out. That’s the beauty of this example. Each number is highlighted with a bold font and gradient background. What’s more, each piece of con...