Este blog está libre de NOFOLLOW!

Links con iconos usando condicionales CSS

en CSS, Desarrollo web, Diseño web, HTML, Tutoriales / Junio 25, 2009 / 3 Comentarios

css_html_tricks

Algo que queda muy bien y sirve para guiar a los usuarios: iconos distintos para links a tipos de archivo específicos: Un ícono para los PDF, otro para los ZIP, y hasta para links salientes a otros sitios. Obviamente lo ideal es que los íconos aparezcan automáticamente para cada link, y no estar cargándolos manualmente.

Si no sabías cómo hacer esto usando solamente CSS, te comento que resulta estúpidamente sencillo:

Lo principal es entender el simple funcionamiento de los condicionales^” y “$“. El condicional “^” significa empieza con, y “$” significa termina con.

Sabiendo eso puedes añadir iconos a los links salientes, que son los que empiezan con http://

a[href^="http://"] {

estilos para los links salientes

}

Y también puedes añadir cualquier cosa a los links con extensiones específicas, en este caso daremos un estilo diferente a todos los links que terminan en .rar:

a[href$=".rar"] {

estilos para los links a archivos .rar

}

El resto es solo cuestión de experimentar un poco, los condicionales funcionan con cualquier navegador medianamente nuevo.

Todas las herramientas SEO en una sola web

en Alexa, CSS, Desarrollo web, HTML, SEO / Junio 4, 2009 / 2 Comentarios

Hacer SEO puede resultar bastante tedioso y estresante. Es por eso que los webmasters agradecemos infinitamente herramientas como la que provee dnframe.com, con más de 60 datos acerca del dominio que desees: Page Rank, Alexa Rank, una calificación entre 1 y 10 para tus etiquetas title y tus keywords, Page Rank. Alexa Rank. Calidad del [...]

Menú manuscrito grunge con css

en CSS, Diseño web, HTML, Tutoriales / Marzo 31, 2009 / 1 Comentario

Es muy común ver en webs con diseño grunge esos menús con tipografía manuscrita que se subrayan al pasar el cursor encima. Una técnica para lograr esto consiste en usar 2 imágenes: una para el menú no activado y otra para cuando pasamos el mouse encima, en este caso con los ítems subrayados. Usar la [...]

Convertir divs en links o botones

en CSS, Desarrollo web, Diseño web, HTML / Marzo 25, 2009 / 2 Comentarios

Algo que muchas personas preguntan (principalmente en foros) es cómo hacer cuando quieren convertir en link un div que tiene imagen de fondo, algo así como convertirlo en un botón. El ejemplo que presento es para un div con imagen de fondo que se transforma en link al colocar dentro un link de texto oculto, [...]