Modelos prontos para lista numerada dos posts

Views:
CÓDIGO MODELO 1


.post ol {
counter-reset:li;
list-style: none;
font:100%;
padding:0;
margin-bottom:2em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol ol {margin: 0 0 0 2em;}
.post ol li{
position:relative;
display:block;
padding:.4em .4em .4em .8em;
margin:1.5em 0 .5em 2.5em;
background:#ffffff;
color:#404040;
text-decoration:none;
transition:all .3s ease-out;
}
.post ol li:hover{
background:#404040;
color: #ffffff !important;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
left:-2.5em;
top:50%;
margin-top:-1em;
background:#404040;
color:#ffffff;
height:2em;
width:2em;
line-height:2em;
text-align:center;
font-weight:500;
}
.post ol li:after{
position:absolute;
content:'';
border: .5em solid transparent;
left:-1em;
top:50%;
margin-top:-.5em;
transition:all .3s ease-out;
}
.post ol li:hover:after{
left:-.5em;
border-left-color:#404040;
}
.post ol li span{
position:relative;
display:block;
padding:5px 8px;
margin-bottom:10px;
background:#ffffff;
color:#404040;
text-decoration:none;
transition:all .3s ease-out;
}
.post ol li span:hover{
background:#404040;
}

CÓDIGO MODELO 2:


.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 100% /* tamanho e estilo da fonte*/
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: 1.5em 0 .5em 4.5em;
text-decoration: none;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -1em;
background: #FF9A4F; /* cor de fundo dos números*/
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #ffffff;
}
.post ol li:after{
position: absolute;
content: '';
left: 4px;
margin-top: -.5em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #FF9A4F; /* cor de fundo da seta*/
}



CÓDIGO MODELO 3:

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 100%; /* tamanho e estilo da fonte*/
padding: 0;
margin-bottom: 4em;
font-weight: none;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
*padding: .4em;
margin: 1.5em 0;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:hover:before{
transform: rotate(360deg);
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 1.8em;
color: #ffffff; /* cor do texto dos números*/
background: #FF9A4F; /* cor de fundo dos números*/
border: .2em solid #fff; /* cor da borda*/
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}


CÓDIGO MODELO 4

.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #e2e3e2; /* estilo da borda inferior dos elementos*/
background:#f2f2f2; /* cor de fundo dos elementos*/
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
font-family:'Oswald', serif;
font-size:14px; /* tamanho dos números*/
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#ffffff; /* cor dos números*/
text-align:left;
background:#FF9A4F; /* cor de fundo dos números*/
text-indent:6px;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #FF9A4F; /* color of the triangle behind */
}



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage