{"id":1351,"date":"2016-07-31T21:14:14","date_gmt":"2016-07-31T11:14:14","guid":{"rendered":"http:\/\/codemyui.com\/?p=1351"},"modified":"2018-05-17T12:17:48","modified_gmt":"2018-05-17T02:17:48","slug":"card-style-list-pure-css","status":"publish","type":"post","link":"https:\/\/codemyui.com\/card-style-list-pure-css\/","title":{"rendered":"Card Style List in Pure CSS"},"content":{"rendered":"<p>This is a colourful way to style up your <a href=\"https:\/\/codemyui.com\/tag\/list\/\">lists<\/a>. In this <a href=\"http:\/\/webdesign.tutsplus.com\/tutorials\/quick-tip-using-css-counters-to-style-incremental-elements--cms-23497\" target=\"_blank\" rel=\"noopener\">tutorial<\/a> on <a href=\"https:\/\/twitter.com\/tutsplus\" target=\"_blank\" rel=\"noopener\">Tuts+<\/a>, you can learn how to use CSS counters to style an ordered list. CSS counters are commonly used in the sidebars on online newspapers to show a list of news articles. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/fe546f0c2f2735e6df432baa0cf98508\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='777' data-theme-id='0' data-slug-hash='dMKKgV' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Styling CSS Counters  by Envato Tuts+ (@tutsplus) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is a colourful way to style up your lists. In this tutorial on Tuts+, you can learn how to use CSS counters to style an ordered list. CSS counters are commonly used in the sidebars on online newspapers to show a list of news articles.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/card-style-list-pure-css\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":1352,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[177948406,14608,30305495],"class_list":["post-1351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-card-ui","tag-list","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/card-style-list-in-pure-css.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29746,"url":"https:\/\/codemyui.com\/cool-to-warm-gradient-color-for-unordered-list-numbers-in-pure-css\/","url_meta":{"origin":1351,"position":0},"title":"Cool To Warm Gradient Color for Unordered List Numbers in Pure CSS","author":"Saijo George","date":"April 27, 2020","format":false,"excerpt":"Code by: Mattia Astorino from Codepen If you are having trouble with the pen, try the archived copy on GitHub Gradient ul Snippet","rel":"","context":"In \"list\"","block_context":{"text":"list","link":"https:\/\/codemyui.com\/tag\/list\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Cool-To-Warm-Gradient-Color-for-Unordered-List-Numbers-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Cool-To-Warm-Gradient-Color-for-Unordered-List-Numbers-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Cool-To-Warm-Gradient-Color-for-Unordered-List-Numbers-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Cool-To-Warm-Gradient-Color-for-Unordered-List-Numbers-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29126,"url":"https:\/\/codemyui.com\/css-only-numbered-list-with-multi-gradient-color\/","url_meta":{"origin":1351,"position":1},"title":"CSS Only Numbered List with Multi Gradient Color","author":"Saijo George","date":"January 6, 2020","format":false,"excerpt":"With this CSS only snippet by Erin E. Sullivan you can style your numbered list to have a multi gradient background for the numbers in the list. The list also has a card UI layout. If you are having trouble with the pen, try the archived copy on GitHub Gradient\u2026","rel":"","context":"In \"list\"","block_context":{"text":"list","link":"https:\/\/codemyui.com\/tag\/list\/"},"img":{"alt_text":"CSS Only Numbered List with Gradient Color","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Numbered-List-with-Gradient-Color.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Numbered-List-with-Gradient-Color.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Numbered-List-with-Gradient-Color.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Numbered-List-with-Gradient-Color.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29211,"url":"https:\/\/codemyui.com\/ascii-art-and-css-styled-directory-structure\/","url_meta":{"origin":1351,"position":2},"title":"ASCII Art and CSS Styled Directory Structure","author":"Saijo George","date":"January 13, 2020","format":false,"excerpt":"Need to markup a list into a neatly laid out directory structure? You can do it using ASCII art repeated over and over or using this CSS snippet by Patrick H. Lauke to get it done. This snippet has up to six levels nested structure that you can add and\u2026","rel":"","context":"In \"file structure\"","block_context":{"text":"file structure","link":"https:\/\/codemyui.com\/tag\/file-structure\/"},"img":{"alt_text":"ASCII Art and CSS Styled Directory Structure","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/ASCII-Art-and-CSS-Styled-Directory-Structure.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/ASCII-Art-and-CSS-Styled-Directory-Structure.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/ASCII-Art-and-CSS-Styled-Directory-Structure.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/ASCII-Art-and-CSS-Styled-Directory-Structure.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3092,"url":"https:\/\/codemyui.com\/table-content-page-number-using-css-pseudo-element\/","url_meta":{"origin":1351,"position":3},"title":"Table of Content with Page Number Using CSS pseudo-element","author":"Hima Vincent","date":"October 21, 2016","format":false,"excerpt":"In this snippet by Matthieu Bu\u00e9 we see how we can add page numbers to a table of content using pseudo-elements. The styling is applied to an unordered list to make it look like a table of content. This will be great for sites where you want to break up\u2026","rel":"","context":"In \"list\"","block_context":{"text":"list","link":"https:\/\/codemyui.com\/tag\/list\/"},"img":{"alt_text":"Table of Content in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/table-of-content-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/table-of-content-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/table-of-content-in-pure-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/table-of-content-in-pure-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26677,"url":"https:\/\/codemyui.com\/pure-css-cartoon-style-angled-button\/","url_meta":{"origin":1351,"position":4},"title":"Pure CSS Cartoon Style Angled Button","author":"Saijo George","date":"July 15, 2018","format":false,"excerpt":"Here is an epic cartoon style button for websites designed by Imran Pardes, it has got an amazing hover effect too. If you are having trouble with the pen, try the archived copy on GitHub CSS Cartoon Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Pure CSS Cartoon Style Angled Button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Pure-CSS-Cartoon-Style-Angled-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Pure-CSS-Cartoon-Style-Angled-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Pure-CSS-Cartoon-Style-Angled-Button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Pure-CSS-Cartoon-Style-Angled-Button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30442,"url":"https:\/\/codemyui.com\/style-your-page-like-an-open-book-using-pure-css\/","url_meta":{"origin":1351,"position":5},"title":"Style Your Page Like An Open Book Using Pure CSS","author":"Hima Vincent","date":"June 10, 2021","format":false,"excerpt":"Code by: Erin E. Sullivan If you are having trouble with the pen, try the archived copy on GitHub. Pure CSS Open Book Layout Snippet","rel":"","context":"In \"book inspired\"","block_context":{"text":"book inspired","link":"https:\/\/codemyui.com\/tag\/css-flip-book\/"},"img":{"alt_text":"Style Your Page Like An Open Book Using Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Style-Your-Page-Like-An-Open-Book-Using-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Style-Your-Page-Like-An-Open-Book-Using-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Style-Your-Page-Like-An-Open-Book-Using-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Style-Your-Page-Like-An-Open-Book-Using-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=1351"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1351\/revisions"}],"predecessor-version":[{"id":26094,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1351\/revisions\/26094"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/1352"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=1351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=1351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=1351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}