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
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/macosx.gif) bottom left no-repeat;
List-style:none;
}
.clickideas {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/cli.gif) bottom left no-repeat;
List-style:none;
}
.pownce {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/pow.gif) bottom left no-repeat;
List-style:none;
}
.flickr {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/flickr.gif) bottom left no-repeat;
List-style:none;
}
.wordpress {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/wordpress.gif) bottom left no-repeat;
List-style:none;
}
.blog {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/blog.gif) bottom left no-repeat;
List-style:none;
}
.mail {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/mail.gif) bottom left no-repeat;
List-style:none;
}
.tarjeta {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/tarjeta.gif) bottom left no-repeat;
List-style:none;
}
.info {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/info.gif) bottom left no-repeat;
List-style:none;
}
Estructura
<li class="mac">Usando <a href="http://www.apple.com">Macintosh</a></li>
<li class="wordpress">Powered by <a href="http://www.wordpress.org">Wordpress</a></li>
<li class="clickideas">Design by <a href="http://www.clickideas.net">Clickideas</a></li>
<li class="pownce">My <a href="http://www.pownce.com/nikko">Pownce</a></li>
<li class="flickr">My Photos <a href="http://www.flickr.com/photos/14412260@N08/">Flickr</a></li>
<li class="blog">My <a href="http://www.xyberneticos.com/">blog</a></li>
<li class="mail">My <a href="http://www.xyberneticos.com/index.php/contacto/">E-mail</a></li>
<li class="tarjeta">My <a href="http://www.xyberneticos.com/index.php/acerca-de/">vcard</a></li>
<li class="info">More <a href="http://www.xyberneticos.com/index.php/acerca-de/">Info</a></li>
</ul>
Loading ...
Jorge H.
12-04-2008
Permalink
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.
byBartus
12-04-2008
Permalink
que tal usar "list-style-image:"?
Diego Ignacio
12-04-2008
Permalink
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
kerberoS
12-04-2008
Permalink
Exacto, como dijo Diego el
list-style-imageno 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.
Infected
12-04-2008
Permalink
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!
Juan
12-04-2008
Permalink
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
Juan
12-04-2008
Permalink
oops me olvide de un par de caracteres
correccion:
#featured li.mac {background-postion: 0 0}
#featured li.clickideas {background-postion: 0 18px}
Angelfire
12-04-2008
Permalink
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.