{"id":2126,"date":"2016-12-04T16:08:20","date_gmt":"2016-12-04T16:08:20","guid":{"rendered":"http:\/\/cssreset.com\/?p=2126"},"modified":"2016-12-04T16:08:20","modified_gmt":"2016-12-04T16:08:20","slug":"css-snippets-list-styles","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-snippets-list-styles\/","title":{"rendered":"CSS Snippets: List Styles"},"content":{"rendered":"

One of the great things about HTML lists is that they’re really versatile. You can completely customize and manipulate them using CSS so that they’re almost unrecognizable as the basic <ul> or <ol> elements that they really are. We’ve curated a collection of snippets of all the different ways to style lists, from the most simple and basic stylings to the much more complex ways to change the appearance of a standard list. Check them out below:<\/p>\n

1. Ordered List with Stylized Numbers<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

This snippet is a simple take on the standard organized list. By making the numbers larger, italic, and a slightly lighter color than the text, the list becomes modern and stylish. This snippet is completely customizable and its style would merge with almost any project.<\/p>\n

2. Ordered List Styles with Shapes<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This snippet shows you how to add style to your ordered lists that place the numbers into shapes (squares and circles) and adds a little style to the list text as well. Don’t forget to customize the colors to your liking!<\/p>\n

3. Styling Unordered Lists with Icons<\/a><\/p>\n

\"Screen<\/p>\n

This tutorial shows you \u00a0how to use Font Awesome<\/a> icons in place of the bullets, discs, and squares that CSS allows you to choose from when styling your unordered lists.<\/p>\n

4. Responsive List with Flip Effect<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This is a snippet for manipulating the structure of a basic list to create responsive tiles that utilize CSS transitions to achieve a flip effect that occurs when the tiles are hovered upon.<\/p>\n

5. Interactive To-Do List<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This to-do list tutorial is a cool, interactive take on the standard unordered list. The code creates a list of items that can be separated into the “done” and “not done” categories. The list is interactive, so if you check off a list item in the “not done” category, it’ll be moved to the “done” column.<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

One of the great things about HTML lists is that they’re really versatile. You can completely customize and manipulate them using CSS so that they’re almost unrecognizable as the basic <ul> or <ol> elements that they really are. We’ve curated […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2137,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2126"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2126"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2126\/revisions"}],"predecessor-version":[{"id":2138,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2126\/revisions\/2138"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2137"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}