Collection of hand-picked free HTML and CSS list style code examples. Update of March 2019 collection. 4 new examples.

14 CSS Lists

Collection of hand-picked free HTML and CSS list style code examples. Update of March 2019 collection. 4 new examples.

Related Articles

  1. CSS Responsive List With Tooltips

Author

  • Milan Raring

Made with

  • HTML / CSS (SCSS)

About a code

Checklist Animation - Only CSS

Simple checklist animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Gabriele Corti

Made with

  • HTML / CSS (SCSS)

About a code

12nth Selectors

CSS list with custom counter and scroll effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Gradient Ordered List

Author

  • Erin E. Sullivan

Made with

  • HTML / CSS (SCSS)

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Simple CSS Check List

Author

  • Garrett

Made with

  • HTML / CSS

About a code

Simple CSS Check List

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • vikas singh

Made with

  • HTML / CSS

About the code

Nice List Styles

transfrom: skew property and nice list styles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mattia Astorino

Made with

  • HTML (Pug) / CSS (PostCSS)

About the code

CSS Gradient Counter List

An example of CSS counter with a fixed background gradient.

Compatible browsers: Chrome, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Sabine Robart

Made with

  • HTML / CSS (SCSS)

About the code

To-Do List

Animated checkmark UI.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Daiane Assen

Made with

  • HTML / CSS (SCSS)

About the code

To-Do List

To-Do list with UI animation and microinteractions.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ahmed Nasr

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

File Manger Selectable List

Click on a list item to select it. Hold Ctrl to multiselect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sowmya Seshadri

Made with

  • HTML / CSS (SCSS)

About the code

Cards - ListView

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Tony Banik

Made with

  • HTML (Slim) / CSS (SCSS) / JavaScript

About the code

Full Circle Note Taking

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Collin Smith

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

List UI

Simple ordered list UI concept. Making use of pseudo elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS-Only Numbered Lists with Drop Shapes

Author

  • Ines Montani

Made with

  • HTML (Pug) / CSS

About the code

CSS-Only Numbered Lists with Drop Shapes

Styled numbered list using CSS counters and pseudo elements for drop-shaped backgrounds.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Ordered List with Leading Zero

Author

  • Sven Wolfermann

Made with

  • HTML / CSS (SCSS)

About the code

CSS Ordered List with Leading Zero

CSS ordered list with leading zero and different number color.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

back to top