HTML lists appear as a bulleted (small black circles) format. Using css we can make them stylish and effective.

There are two types of list in HTML

  1. <ul> : Using unordered list items marked as bullets.
  2. <ol> : Using ordered  list items marked  as number or letters.

Using css we can make them stylish and effective, we can also use images as list item marker.

CSS List Properties

list-style : set all properties in one declaration.
list-style-type : set item marker type.
list-style-position : set list-item markers  appear inside or outside of the content.
list-style-image :  set image as the list-item marker.

In this tutorial we will learn about different css list property and how we can make a stylish and effective list using css3.


You can also refer live demo or download the Script file.
Extract the downloaded files, save it and run index.html on browser.

css3 list example


Below are the different styles for list. We have categorized as list-type1,list-type2….list-type6.

1 : List-type1

css3 list example

HTML Code :

Copy below code in your HTML file.

<div class="list-type1">
<ol>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
</ol>
</div>

CSS Code:

Copy below code in your CSS file, or inside style tag in HTML page.

.list-type1{
width:400px;
margin:0 auto;
}

.list-type1 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: 'Raleway', sans-serif;
padding: 0;
margin-bottom: 4em;
}
.list-type1 ol ol{
margin: 0 0 0 2em;
}

.list-type1 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #93C775;
color: #000;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: 10em;
transition: all .2s ease-in-out;
}

.list-type1 a:hover{
background: #d6d4d4;
text-decoration:none;
transform: scale(1.1);
}

.list-type1 a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background:#93C775;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
color:#FFF;
}

 

2 : List-type2

css3 list example

HTML Code :

Copy below code in your HTML file.

<div class="list-type2">
<ol>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
</ol>
</div>

CSS Code:

Copy below code in your CSS file, or inside style tag in HTML page.

.list-type2{
width:400px;
margin:0 auto;
}

.list-type2 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: 'Raleway', sans-serif;
padding: 0;
margin-bottom: 4em;
}

.list-type2 ol ol{
margin: 0 0 0 2em;
}

.list-type2 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #FC756F;
color: #444;
text-decoration: none;
transition: all .2s ease-in-out;
}

.list-type2 a:hover{
background: #d6d4d4;
text-decoration:none;
transform: scale(1.1);
}

.list-type2 a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background:#FC756F;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
color:#FFF;
}

 

3 : List-type3

CSS3 List Example Blue

 

HTML Code :

Copy below code in your HTML file.

<div class="list-type3">
<ol>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
</ol>
</div>

CSS Code:

Copy below code in your CSS file, or inside style tag in HTML page.

.list-type3{
margin:0 auto;
width:500px;
}
.list-type3 li, .list-type3 a{
float:left;
height:35px;
line-height:35px;
position:relative;
font-size:15px;
margin-bottom: 12px;
font-family: 'Raleway', sans-serif;
transition: background-color 1.5s ease;
}
.list-type3 a{
padding:0 60px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}

.list-type3 a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width: 18px 12px 18px 0;
}

.list-type3 a:after{
content:"";
position:absolute;
top:15px;
left:0;
float:left;
width:6px;
height:6px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.list-type3 a:hover{
background:#555;
}

.list-type3 a:hover:before{
border-color:transparent #0089e0 transparent transparent;
}

 

4 : List-type4

css3 list example

HTML Code :

Copy below code in your HTML file.

<div class="list-type4">
<ol>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
</ol>
</div>

CSS Code:

Copy below code in your CSS file, or inside style tag in HTML page.

.list-type4{
width:410px;
margin:0 auto;
}

.list-type4 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: 'Raleway', sans-serif;
padding: 0;
margin-bottom: 4em;
}
.list-type4 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #5975D9;
color: white;
text-decoration: none;
box-shadow:inset 0.5em 0 black;
-webkit-transition: box-shadow 1s; /* For Safari 3.1 to 6.0 */
transition: box-shadow 1s;
}

.list-type4 a:hover{
box-shadow:inset 2em 0 black;
}

 

5 : List-type5

css3 list example

HTML Code :

Copy below code in your HTML file.

<div class="list-type5">
<ol>
<li><a href="#">Formget Online Form Builder Create Online </a></li>
<li><a href="#">Formget Online Form Builder Create Online </a></li>
<li><a href="#">Formget Online Form Builder Create Online </a></li>
</ol>
</div

CSS Code:

Copy below code in your CSS file, or inside style tag in HTML page.

.list-type5{
width:410px;
margin:0 auto;
}
.list-type5 ol {
list-style-type: none;
list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 1em;
padding: 0;
counter-reset: li-counter;
}
.list-type5 ol li{
position: relative;
margin-bottom: 1.5em;
padding: 0.5em;
background-color: #F0D756;
padding-left: 58px;
}

.list-type5 a{
text-decoration:none;
color:black;
font-size:15px;
font-family: 'Raleway', sans-serif;
}

.list-type5 li:hover{
box-shadow:inset -1em 0 #6CD6CC;
-webkit-transition: box-shadow 0.5s; /* For Safari 3.1 to 6.0 */
transition: box-shadow 0.5s;
}

.list-type5 ol li:before {
position: absolute;
top: -0.3em;
left: -0.5em;
width: 1.8em;
height: 1.2em;
font-size: 2em;
line-height: 1.2;
font-weight: bold;
text-align: center;
color: white;
background-color: #6CD6CC;
transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
z-index: 99;
overflow: hidden;
content: counter(li-counter);
counter-increment: li-counter;
}

6 : List-type6

css3 list example

HTML Code :

Copy below code in your HTML file.

<div class="list-type6">
<ul>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
</ul>
</div>

CSS Code:

Copy below code in your CSS file, or inside style tag in HTML page.

.list-type6{
width:410px;
margin:0 auto;
}
/* LIST #8 */
.list-type6 { }
.list-type6 ul {
list-style:none;
}
.list-type6 ul li {
font-size:15px;
font-family: 'Raleway', sans-serif;
}
.list-type6 ul li a {
display:block;
width:390px;
margin-left: -40px;
height:24px;
background-color:#03B3CB;
border-left:5px solid #222;
border-right:5px solid #222;
padding-left:10px;
padding-top:7px;
text-decoration:none;
color:white;
margin-bottom: 7px;
transition: all .2s ease-in-out;
}
.list-type6 ul li a:hover {
-moz-transform:rotate(-5deg);
-moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg);
-webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg);
box-shadow:10px 10px 20px #000000;
}

Conclusion:

In this tutorial we have learned about, how we can make stylish and attractive list designs. Hope you have benefited from it. Keep visiting our websites for more knowledge and information.