12 CSS Lists Styling - csshint

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

1.CSS Gradient Counter List

See the Pen <a href='https://codepen.io/equinusocio/pen/OqpBKJ/'>CSS Gradient Counter List</a> by Mattia Astorino (<a href='https://codepen.io/equinusocio'>@equinusocio</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Mattia Astorino

Made with

HTML (Pug) / CSS (PostCSS)

demo and code Get Hosting

2.To-do list

See the Pen <a href='https://codepen.io/_Sabine/pen/mvWxeK/'>To-do list</a> by Sabine Robart (<a href='https://codepen.io/_Sabine'>@_Sabine</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Sabine Robart

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

3.File manger selectable list

See the Pen <a href='https://codepen.io/ahmedhosna95/pen/MZjyxg/'>File manger selectable list (VanillaJS)</a> by Ahmed Nasr (<a href='https://codepen.io/ahmedhosna95'>@ahmedhosna95</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Ahmed Nasr

Made with

HTML / CSS (SCSS) / JavaScript

demo and code Get Hosting

4.Full Circle Note Taking

See the Pen <a href='https://codepen.io/banik/pen/RYKdZK/'>Full Circle Note Taking</a> by Tony Banik (<a href='https://codepen.io/banik'>@banik</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Tony Banik

Made with

HTML (Slim) / CSS (SCSS) / JavaScript

demo and code Get Hosting

5.Cards – ListView

See the Pen <a href='https://codepen.io/sowmyaseshadri/pen/PdajzN/'>Cards – ListView </a> by Sowmya Seshadri (<a href='https://codepen.io/sowmyaseshadri'>@sowmyaseshadri</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Sowmya Seshadri

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

6.scss #TO-DO LIST

See the Pen <a href='https://codepen.io/INapta/pen/KJWJOL/'>100dayscss #27</a> by Daiane Assen (<a href='https://codepen.io/INapta'>@INapta</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Daiane Assen

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

7.List UI

See the Pen <a href='https://codepen.io/collinscode/pen/qYdxKp/'>List UI</a> by Collin Smith (<a href='https://codepen.io/collinscode'>@collinscode</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Collin Smith

Made with

HTML (Pug) / CSS (Stylus)

demo and code Get Hosting

8.nice List styles

See the Pen <a href='https://codepen.io/vikassingh1111/pen/xBPmbL/'>Transfrom Skew Property and nice List styles</a> by vikas singh (<a href='https://codepen.io/vikassingh1111'>@vikassingh1111</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

vikas singh

Made with

HTML / CSS

demo and code Get Hosting

9.CSS-only numbered lists

See the Pen <a href='https://codepen.io/ines/pen/qXrYQO/'>CSS-only numbered lists with "drop" shapes</a> by Ines Montani (<a href='https://codepen.io/ines'>@ines</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Ines Montani

Made with

HTML (Pug) / CSS

demo and code Get Hosting

10.Css List Playground

See the Pen <a href='https://codepen.io/iresheep/pen/dZrKpp/'>Css List Playground</a> by iresheep (<a href='https://codepen.io/iresheep'>@iresheep</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

iresheep

Made with

HTML / CSS

demo and code Get Hosting

11.Big Numbers Ordered List

See the Pen <a href='https://codepen.io/yying6/pen/qzlop/'>Big Numbers Ordered List</a> by yying6 (<a href='https://codepen.io/yying6'>@yying6</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

yying6

Made with

HTML / CSS

demo and code Get Hosting

12.CSS Lists

See the Pen <a href='https://codepen.io/jasondavis/pen/daJKe/'>CSS Lists</a> by Jason Davis (<a href='https://codepen.io/jasondavis'>@jasondavis</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Jason Davis

Made with

HTML / CSS

demo and code Get Hosting

1.CSS Gradient Counter List

Author

Made with

2.To-do list

Author

Made with

3.File manger selectable list

Author

Made with

4.Full Circle Note Taking

Author

Made with

5.Cards – ListView

Author

Made with

6.scss #TO-DO LIST

Author

Made with

7.List UI

Author

Made with

8.nice List styles

Author

Made with

9.CSS-only numbered lists

Author

Made with

10.Css List Playground

Author

Made with

11.Big Numbers Ordered List

Author

Made with

12.CSS Lists

Author

Made with

You may also like