Personalizando listas con CSS

CSS, Tutoriales, Diseño

listascss.jpg

Hoy en día todos los que llevamos un blog adelante, o estamos constantemente ligados a Internet por nuestro trabajo, es prácticamente común que no solo dediquemos tiempo a escribir en nuestros blog, sino que también a veces solemos buscar una forma de salir un poco de la rutina diaria participando en diferentes redes sociales, donde solemos compartir imágenes, contar lo que estamos haciendo en un determinado momento, divertirnos con amigos, en fin. Aunque también es común, que no siempre solemos brindar desde nuestro blog los enlaces a ese tipo de redes, sean: twitter, pownce, flickr etc en las cuales participamos. Pero si deseáramos hacerlo, como una forma de que nuestros usuarios nos comiencen a conocer un poco mas, no necesariamente deberemos crear enormes banner que llamen la atención de nuestros usuarios, ya que siempre existen otras alternativas, mas simples, limpias, ordenadas y agradables, que llamara de la misma forma la atención de nuestros usuarios, pero evitando arruinar el diseño de nuestro blog que tanto trabajo no haz costado. La forma más simple, es crear listas con iconos personalizados.
Ver Demo - Descarga Ejemplo

PLAIN TEXT
CSS:
  1. .mac {
  2.     font-size: 11px;
  3.     padding-left: 17px;
  4.     margin-left: 2px;
  5.     margin-bottom: 5px;
  6.     background:url(images/macosx.gif) bottom left no-repeat;
  7.     List-style:none;
  8. }
  9.  
  10.  
  11. .clickideas {
  12.     font-size: 11px;
  13.     padding-left: 17px;
  14.     margin-left: 2px;
  15.     margin-bottom: 5px;
  16.     background:url(images/cli.gif) bottom left no-repeat;
  17.     List-style:none;
  18. }
  19. .pownce {
  20.     font-size: 11px;
  21.     padding-left: 17px;
  22.     margin-left: 2px;
  23.     margin-bottom: 5px;
  24.     background:url(images/pow.gif) bottom left no-repeat;
  25.     List-style:none;
  26. }
  27. .flickr {
  28.     font-size: 11px;
  29.     padding-left: 17px;
  30.     margin-left: 2px;
  31.     margin-bottom: 5px;
  32.     background:url(images/flickr.gif) bottom left no-repeat;
  33.     List-style:none;
  34. }
  35. .wordpress {
  36.     font-size: 11px;
  37.     padding-left: 17px;
  38.     margin-left: 2px;
  39.     margin-bottom: 5px;
  40.     background:url(images/wordpress.gif) bottom left no-repeat;
  41.     List-style:none;
  42. }
  43. .blog {
  44.     font-size: 11px;
  45.     padding-left: 17px;
  46.     margin-left: 2px;
  47.     margin-bottom: 5px;
  48.     background:url(images/blog.gif) bottom left no-repeat;
  49.     List-style:none;
  50. }
  51. .mail {
  52.     font-size: 11px;
  53.     padding-left: 17px;
  54.     margin-left: 2px;
  55.     margin-bottom: 5px;
  56.     background:url(images/mail.gif) bottom left no-repeat;
  57.     List-style:none;
  58. }
  59. .tarjeta {
  60.     font-size: 11px;
  61.     padding-left: 17px;
  62.     margin-left: 2px;
  63.     margin-bottom: 5px;
  64.     background:url(images/tarjeta.gif) bottom left no-repeat;
  65.     List-style:none;
  66. }
  67. .info {
  68.     font-size: 11px;
  69.     padding-left: 17px;
  70.     margin-left: 2px;
  71.     margin-bottom: 5px;
  72.     background:url(images/info.gif) bottom left no-repeat;
  73.     List-style:none;
  74. }

Estructura

PLAIN TEXT
HTML:
  2.  
  3. <li class="mac">Usando <a href="http://www.apple.com">Macintosh</a></li>
  4. <li class="wordpress">Powered by <a href="http://www.wordpress.org">Wordpress</a></li>
  5. <li class="clickideas">Design by <a href="http://www.clickideas.net">Clickideas</a></li>
  6. <li class="pownce">My <a href="http://www.pownce.com/nikko">Pownce</a></li>
  7. <li class="flickr">My Photos <a href="http://www.flickr.com/photos/14412260@N08/">Flickr</a></li>
  8. <li class="blog">My <a href="http://www.xyberneticos.com/">blog</a></li>
  9. <li class="mail">My <a href="http://www.xyberneticos.com/index.php/contacto/">E-mail</a></li>
  10. <li class="tarjeta">My <a href="http://www.xyberneticos.com/index.php/acerca-de/">vcard</a></li>
  11. <li class="info">More <a href="http://www.xyberneticos.com/index.php/acerca-de/">Info</a></li>
  12.  
  13. </ul>

Compartelo

  1. User Gravatar

    Jorge H. said,

    Wrote on April 12, 2008 @ 14:05

    Hola: para optimizar el css puedes reunir los elementos comunes así:
    todosTusIdentificadores separados por comas {
    font-size: 11px;
    padding-left: 17px;
    margin-left: 2px;
    margin-bottom: 5px;
    list-style:none;
    }

    luego a cada identificador (id o class) le pones su background correspondiente.

  2. User Gravatar

    byBartus said,

    Wrote on April 12, 2008 @ 14:43

    que tal usar "list-style-image:"?

  3. User Gravatar

    Diego Ignacio said,

    Wrote on April 12, 2008 @ 22:18

    byBartus , el problema con list-style-image es que no se ve igual en todos los navgadores, background es poco correcto, pero da un mejor resultado.

    y por el codigo. se puede hacer mas pequeño =D

  4. User Gravatar

    kerberoS said,

    Wrote on April 14, 2008 @ 2:06

    Exacto, como dijo Diego el list-style-image no es interprerado de la misma forma en todos los navegadores.

    También es posible usar %porcentajes en remplazo de bottom, left o top. Eso nos da más control sobre la ubicación de la icono.

    Ej. background:url(images/tarjeta.gif) 1% 50% no-repeat;.

    Un abrazo.

  5. User Gravatar

    Infected said,

    Wrote on April 15, 2008 @ 1:14

    De acuerdo con Jorge, resultaría más óptimo reunir todos los elementos. Aplicándolo al ejemplo

    #featured ul{
    font-size: 11px;
    padding:0 0 0 17px;
    margin:0 0 2px 2px;
    background-position:left;
    background-repeat:no-repeat;
    }

    #featured ul li.clickideas{
    background-image:url(images/cli.gif);
    }

    #featured ul li.pownce {
    background-image:url(images/pow.gif);
    }

    Etc... etc... :) Saludos!

  6. User Gravatar

    Juan said,

    Wrote on April 18, 2008 @ 16:28

    De acuerdo con los que dijieron de juntar las reglas para usar menos css pero no se lo daria al UL, sino que a los LI. Otra forma efectiva es hacer una sola imagen con todos los iconos, para que cargue mas rapido y posicionar el background en el lugar que este el icono correspondiente.

    Por ejemplo:

    #featured li{
    font-size: 11px;
    padding:0 0 0 17px;
    margin:0 0 2px 2px;
    background-repeat:no-repeat;
    background-image:url(ruta_a_la_imagen/icons.gif);
    }

    #featured li.mac {background-postion:0 0}
    #featured li.clickideas {0 18px}

    espero que les sirva, abrazo

  7. User Gravatar

    Juan said,

    Wrote on April 18, 2008 @ 16:28

    oops me olvide de un par de caracteres
    correccion:

    #featured li.mac {background-postion: 0 0}
    #featured li.clickideas {background-postion: 0 18px}

  8. User Gravatar

    Angelfire said,

    Wrote on April 18, 2008 @ 18:41

    Que manera mas impresionante de gastar líneas de código, si todos los componentes tienen propiedades en comun lo más ĺógico es agruparlas en una clase y para ponerle los iconos simplemente un id.

Seguir comentarios por RSS · TrackBack URI

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: