30+ CSS Lists - Free Code + Demos
Collection of 30+ CSS Lists. All items are 100% free and open-source.
1. Checklist Animation - Only CSS
Simple checklist animation
Author: Milan Raring (milanraring)
Links: Source Code / Demo, Dribbble Shot
Created on: March 5, 2020
Made with: HTML, SCSS
Tags: check, checklist, animation, css, list
2. 12 Nth Selectors
A custom counter, Position sticky, nth-child selector, SCSS loop, SVG backgrond, SVG cursor, And an entry for this week's cpc
Author: Gabriele Corti (borntofrappe)
Links: Source Code / Demo
Created on: December 6, 2019
Made with: HTML, SCSS
Tags: codepenchallenge, cpc-nth-child, sticky, christmas
3. Gradient Ordered List
A simple, styled ordered list using SCSS and HTML5. The gradient background transitions from one, to another, and back again. IE11 friendly.
Author: Erin E. Sullivan (erinesullivan)
Links: Source Code / Demo
Created on: May 15, 2019
Made with: HTML, SCSS
Tags: scss, ordered-list, gradient
4. Simple CSS Check List
Author: Garrett (gnevin)
Links: Source Code / Demo
Created on: April 4, 2019
Made with: HTML, CSS
5. Transfrom Skew Property And Nice List Styles
Author: vikas singh (vikassingh1111)
Links: Source Code / Demo
Created on: March 13, 2019
Made with: HTML, CSS
6. CSS Gradient Counter List
An example of css counter with a fixed background gradient
Author: Mattia Astorino (equinusocio)
Links: Source Code / Demo
Created on: March 7, 2019
Made with: Pug, PostCSS
CSS Pre-processor: PostCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, gradient, counter, list
7. To-do List
Author: Sabine Robart (Artemis1)
Links: Source Code / Demo, Codepen.io
Created on: February 1, 2019
Made with: HTML, SCSS, JS
8. Minimal To-do List In CSS
To-Do list with UI animation and microinteractions: - Custom Checkbox; - Pseudo-elements; - CSS Animation.
Author: Daiane Assen (INapta)
Links: Source Code / Demo
Created on: February 1, 2019
Made with: HTML, SCSS, JS
Tags: ui, microinteractions, css, checkbox, html
9. File Manger Selectable List (VanillaJS)
Author: Ahmed Nasr (ahmedhosna95)
Links: Source Code / Demo
Created on: December 17, 2018
Made with: HTML, SCSS, JS
10. Cards - ListView
Author: Sowmya Seshadri (sowmyaseshadri)
Links: Source Code / Demo
Created on: September 13, 2018
Made with: HTML, SCSS
11. Full Circle Note Taking
how i take notes when im actually trying hard
Author: Tony Banik (banik)
Links: Source Code / Demo
Created on: August 31, 2018
Made with: Slim, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: notes, todo, tasks, css, font
12. List UI
Simple Ordered list UI concept inspired by @jordanlucas. Making use of pseudo elements.
Author: Collin Smith (collinscode)
Links: Source Code / Demo
Created on: April 20, 2018
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: pseudo, list, ui, ordered, card
13. CSS-only Numbered Lists With "drop" Shapes
Originally developed for: https://prodi.gy Styled numbered list using CSS counters and pseudo elements for drop-shaped backgrounds.
Author: Ines Montani (ines)
Links: Source Code / Demo, Prodi.gy
Created on: August 8, 2017
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, list, css-only
14. CSS Ordered List With Leading Zero
CSS ordered list with leading zero and different number color
Author: Sven Wolfermann (maddesigns)
Links: Source Code / Demo
Created on: February 22, 2016
Made with: HTML, SCSS
Tags: css, counter, list, leading zero, color
15. List Style - Ol And Ul Style
ul and ol li - list style type and list style image. more info . https://goo.gl/OHXv and https://goo.gl/aFgyU
Author: WILDER TAYPE (wilder_taype)
Links: Source Code / Demo
Created on: December 22, 2016
Made with: HTML, CSS
Tags: ol, ul, li, list-style-type, list-style-image
16. Custom List Style Via Clean Css
Custom list style via clean css
Author: Serluck (serluk)
Links: Source Code / Demo
Created on: September 23, 2014
Made with: HTML, CSS
Tags: clean css, custom list, css
17. Benutzerdefinierte Listenpunkte
Dieses Beispiel zeigt eine ungeordnete Liste mit benutzerdefinierten Listenpunkten.
Author: Dennis Kovarik (denniskovarik)
Links: Source Code / Demo
Created on: March 1, 2018
Made with: HTML, SCSS
Tags: ul, li, list-style, before
18. Checklist Demo (CSS Only)
Author: Christiaan Snoei (christiaansnoei)
Links: Source Code / Demo
Created on: May 27, 2019
Made with: HTML, SCSS
Tags: html, css, check, checklist, todo
19. CSS3 Checklist
Author: Tran Nhat Anh (tran-nhat-anh)
Links: Source Code / Demo
Created on: April 19, 2019
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css3, checklist, html5, pug, sass
20. To Do List
A simple to-do list that crosses the tasks out when they are checked off as completed.
Author: Asha Holland (HollandAsh)
Links: Source Code / Demo
Created on: May 16, 2018
Made with: HTML, CSS
Tags: checklist, to-do, asha holland, checkbox
21. Flexbox Menu List
Author: aMEya (mazereeta)
Links: Source Code / Demo
Created on: August 14, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: list, dl, menu, flexbox
22. List Styles
Author: Cody McAfee (gcmcafee)
Links: Source Code / Demo
Created on: December 19, 2014
Made with: HTML, Less
Tags: list, list-style, bullet
23. Custom Unordered List Styles
Author: Prasad D. (prasad-d)
Links: Source Code / Demo
Created on: May 17, 2019
Made with: HTML, SCSS
Tags: custom list styles, list, unordered-list, ul, css
24. Custom List Numbers
Replacing the browser-generated list numbers with beautiful CSS-enhanced numbers using the ::before pseudo-class.
Author: David McFarland (sawmac)
Links: Source Code / Demo
Created on: August 25, 2014
Made with: HTML, CSS
25. Big Numbers Ordered List
Tutorial from Design Shack http://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/
Author: yying6 (yying6)
Links: Source Code / Demo
Created on: June 27, 2012
Made with: HTML, CSS
26. HTML List Demos
Author: Matt West (matt-west)
Links: Source Code / Demo
Created on: February 27, 2014
Made with: HTML, CSS
Tags: html
27. Ordered List Item Style Prefix
Prefix ordered list item numbers with a static string using CSS.
Author: Eric Rasch (ericrasch)
Links: Source Code / Demo
Created on: June 21, 2012
Made with: HTML, Less
Tags: css, ordered-list, styled
More Awesome Lists:
Share: