CSS Lists Styling Archives - csshint - A designer hub

CSS Lists Styling Archives - csshint - A designer hub https://csshint.com/tag/css-lists-styling/ Sun, 19 Feb 2023 15:51:16 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 12 CSS Lists Styling https://csshint.com/css-lists/ Tue, 14 May 2019 17:59:41 +0000 http://csshint.com/?p=852 Collection of hand-picked free HTML and CSS list Styling examples. 1.CSS Gradient Counter List See the Pen CSS Gradient Counter List by Mattia Astorino (@equinusocio) on CodePen. Author Mattia Astorino Made with HTML (Pug) / CSS (PostCSS) demo and code Get Hosting 2.To-do list See the Pen To-do list by Sabine Robart (@_Sabine) on CodePen. […]

The post 12 CSS Lists Styling appeared first on csshint - A designer hub.

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

1.CSS Gradient Counter List

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

Author

Mattia Astorino

Made with

HTML (Pug) / CSS (PostCSS)

demo and code Get Hosting

2.To-do list

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

Author

Sabine Robart

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

3.File manger selectable list

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

Author

Ahmed Nasr

Made with

HTML / CSS (SCSS) / JavaScript

demo and code Get Hosting

4.Full Circle Note Taking

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

Author

Tony Banik

Made with

HTML (Slim) / CSS (SCSS) / JavaScript

demo and code Get Hosting

5.Cards – ListView

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

Author

Sowmya Seshadri

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

6.scss #TO-DO LIST

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

Author

Daiane Assen

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

7.List UI

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

Author

Collin Smith

Made with

HTML (Pug) / CSS (Stylus)

demo and code Get Hosting

8.nice List styles

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

Author

vikas singh

Made with

HTML / CSS

demo and code Get Hosting

9.CSS-only numbered lists

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

Author

Ines Montani

Made with

HTML (Pug) / CSS

demo and code Get Hosting

10.Css List Playground

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

Author

iresheep

Made with

HTML / CSS

demo and code Get Hosting

11.Big Numbers Ordered List

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

Author

yying6

Made with

HTML / CSS

demo and code Get Hosting

12.CSS Lists

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

Author

Jason Davis

Made with

HTML / CSS

demo and code Get Hosting

The post 12 CSS Lists Styling appeared first on csshint - A designer hub.

]]>