Sharing is caring : Cute ordered list styles

Hello Wonderful World

Today I would like to share the coding  for CSS3 ordered list styles from RedTeamDesign, as you can see, I change the code a bit so that it can be used in HTML widget (and you can also use it as tutorial list in your post) instead of putting the code in your template (its one of the way to use the code but oh well, who know people like this way than the other, plus it can be used in post).

The original coding is not mine, so you may use and share it, the coding from this site.

Here's demo for the rounded-list

1. Hey hey hey, I'm the rounded list
2. pfff I am awesome
3. *insert your title*
4. poptart will rule the world with nyan cat
5. coming soon

Copy this coding for the rounded-list

</style>
<link href="http://fonts.googleapis.com/css?family=Short+Stack" rel="stylesheet" type="text/css"></link>
<style text="css">

.classes{font-family:times news roman; margin-bottom:9px; margin-top:6px; font-size:12px; color:#fdd9e6; background:; text-shadow:1px 1px 0px #858382; text-align: center; padding-left:12px; margin-left:-9px; margin-right:-9px;}


@font-face{font-family:pacifico;src:url('http://static.tumblr.com/eq1rpir/jtom54asr/pacifico.ttf')}

@font-face {font-family: "PF Tempesta Seven Condensed";
src: url('http://static.tumblr.com/8yo5xxv/b5cm22t2y/pf_tempesta_seven_condensed.ttf'); format("truetype");}
@font-face {font-family: "pf arma five";src: url('http://static.tumblr.com/bigjj8s/1tmm7vjp6/pf_arma_five.ttf');}

ol{
counter-reset: li; /* initiate a counter */
list-style: none; /* remove default numbering */
*list-style: decimal; /* keep using default numbering for ie6/7 */
font: 15px 'times news roman';
padding:0;
margin-bottom: 4em;
       
}

ol ol{
margin: 0 0 0 2em; /* add some left margin for inner lists */
}

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

.rounded-list a:hover{
    background: #eee;
}

.rounded-list a:hover:before{
    transform: rotate(360deg);   
}

.rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;   
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

</style>

<ol class="rounded-list">
<li><a href="insert your url">Hey hey hey, I'm the rounded list</a></li>
<li><a href="insert your url">pfff I am awesome</a></li>
<li><a href="insert your url">*insert your title*</a></li>
<li><a href="insert your url">poptart will rule the world with nyan cat</a></li>
<li><a href="insert your url">coming soon</a></li>
</ol>

 Now for the rectangle-list demo

1. Hey hey hey, I'm the rectangle list
2. pfff I am awesome
3. *insert your title*
4. banana will rule the world with minions
5. coming soon

Copy this code for the rectangle-list code 

</style>
<link href="http://fonts.googleapis.com/css?family=Short+Stack" rel="stylesheet" type="text/css"></link>
<style text="css">

.classes{font-family:times news roman; margin-bottom:9px; margin-top:6px; font-size:12px; color:#fdd9e6; background:; text-shadow:1px 1px 0px #858382; text-align: center; padding-left:12px; margin-left:-9px; margin-right:-9px;}


@font-face{font-family:pacifico;src:url('http://static.tumblr.com/eq1rpir/jtom54asr/pacifico.ttf')}

@font-face {font-family: "PF Tempesta Seven Condensed";
src: url('http://static.tumblr.com/8yo5xxv/b5cm22t2y/pf_tempesta_seven_condensed.ttf'); format("truetype");}
@font-face {font-family: "pf arma five";src: url('http://static.tumblr.com/bigjj8s/1tmm7vjp6/pf_arma_five.ttf');}

ol{
counter-reset: li; /* initiate a counter */
list-style: none; /* remove default numbering */
*list-style: decimal; /* keep using default numbering for ie6/7 */
font: 15px 'times news roman';
padding:0;
margin-bottom: 4em;
       
}

ol ol{
margin: 0 0 0 2em; /* add some left margin for inner lists */
}

.rectangle-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    transition: all .3s ease-out;   
}

.rectangle-list a:hover{
    background: #eee;
}   

.rectangle-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;   
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #fa8072;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}

.rectangle-list a:after{
    position: absolute;   
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;               
}

.rectangle-list a:hover:after{
    left: -.5em;
    border-left-color: #fa8072;               
}

</style>

<ol class="rectangle-list">
<li><a href="insert your url">Hey hey hey, I'm the rectangle list</a></li>
<li><a href="insert your url">pfff I am awesome</a></li>
<li><a href="insert your url">*insert your title*</a></li>
<li><a href="insert your url">banana will rule the world with minions</a></li>
<li><a href="insert your url">coming soon</a></li>
</ol>

Well, you must know how to change font and background color right? And if you want to use image as your background, simply replace #insert color code; to url ('insert bakground url');. You can leave your question via comment section, thank you and have a delightful day everyone.

---

Life is a tragedy for those who feel, but a comedy to those who think. Don't you think so?

---