martes, 15 de enero de 2013

TUNEANDO LAS LISTAS NUMERADAS

  1. Una lista numerada original ¿verdad?
  2. Un efecto  conseguido con CSS
  3. .post-outer ol{
    counter-reset:li;
    margin-left:0;
    padding-left:0
    }
    .post ol li{ /*Estilos de cada elemento*/
    position:relative;
    margin:0 0 20px 2em !important;
    padding:4px 8px !important;
    list-style:none;
    *list-style: decimal;
    border:1px solid #e2e3e2; /*Color de borde*/
    background:#f2f2f2/*Color de fondo*/
    text-indent:10px;
    }
    .post ol li:before{ /*Los estilos del Número*/
    content:counter(li);
    counter-increment:li;
    position:absolute;
    top:-5px;
    left:-5px;
    font-family:'Oswald', serif;
    font-size:14px;
    width:12px;
    margin:0 0 10px 0;
    padding:4px !important;
    color:#727272/*Color de texto*/
    text-align:left;
    background:#e2e2e2/*Color de fondo*/
    text-indent:2px
    }
    .post ol li:after{
    content:"";
    position:absolute;
    top:-5px;
    left:14px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 5px 0 0 5px;
    border-color: transparent transparent transparent#aeaeae; /*color del triangulito*/
    }
  4. Codigo que debe colocarse en Plantilla > Personalizar > Avanzado > Añadir CSS. 
  5. Encontrareis más ejemplos y una explicación más detallada en el blog que me ha proporcionado este truco COMPARTIDISIMO

2 comentarios :

  1. Su blog es muy bueno, muchos consejos que ayudan a sus lectores fantásticamente.
    Yo sigo y señalando.

    Y al igual que su visita y presencia en mi humilde blog:
    http://jonathanejonathan.blogspot.com.br/

    Abrazos

    Caio

    ResponderEliminar
    Respuestas
    1. esa es mi intención querido amigo, ayudar, ayudarnos... También sigo con entusiasmo tu blog. Un saludo

      Eliminar