Código completo para Postagens populares numeradas com efeito colorido

Views:
 /*Postagens mais lidas by Elaine Gaspareto------------------------------------------------------------------------------*/
#PopularPosts1 ul{
margin:0;
padding:5px 0;
list-style-type:none}
#PopularPosts1 ul li{
position:relative;
margin:5px 0;border:0;
padding:10px}

#PopularPosts1 ul li:first-child{
background:#ff4c54;
width:91%}

#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{
background:#ED616F;
width:88%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{
background:#ffde4c;
width:85%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{
background:#c7f25f;
width:82%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{
background:#33c9f7;
width:79%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{
background:#7ee3c7;
width:76%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li{
background:#f6993d;
width:73%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li{
background:#EDB0EE;
width:70%}

#PopularPosts1 ul li:first-child + li + li + li + li + li  + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{
background:#C0C0FF;
width:67%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li + li + li + li {
background:#C0C0C0;
width:64%}

 #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li + li + li + li +li{
background:#C0C0C0;
width:61%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li + li:after{content:"11"} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li +  li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li  + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{
position:absolute;
top:20px;
right:-15px;
border-radius:50%;
background:#ccc;
width:30px;
height:30px;
line-height:1em;
text-align:center;
font-size:20px;
padding: 1px;
padding-top: 8px;
color:#000}

#PopularPosts1 ul li .item-thumbnail{
float:left;
border:0;
margin-right:10px;
background:transparent;
padding:0;
width:40px;
height:40px}
#PopularPosts1 ul li a{
font-size:12px;
color:#444;
text-decoration:none}
 #PopularPosts  ul  li {
list-style-type:none; }
#PopularPosts1 ul li a:hover{
color:#222;
text-decoration:none}
#PopularPosts1 img{
width: 40px; height:40px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;transition:all 0.5s ease;
padding:4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#PopularPosts1 img:hover{
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage