Post thumbnail: 10 CSS Lists

10 CSS Lists

Collection of hand-picked free HTML and CSS list code examples.


Author

  • vikas singh

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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