Archivo de la etiqueta: css

Iconos vectoriales para Web

El otro día descubrí un sitio que permite descargarte iconos vectoriales para web.

Se llama fontawesome y te ofrece iconos altamente personalizables – tamaño, color, sombra y cualquier otra cosa en base a css.

En realidad lo que te descargas es una fuente en distintos formatos (svg, ttf, otf, woff, eot)  que te asegura la legibilidad en prácticamente el 100% de navegadores. La fuente  contiene más de 300 iconos representados por un identificador en su propiedad content de css:


.fa-envelope-o:before {
content: "\f003";
}

También contiene los ficheros para estilos dinámicos con sass y less.

Es muy sencillo de utilizar y personalmente los considero muy apropiados para muchas webs. El problema que veo es que este estilo de iconos se están poniendo muy de moda en muchos sitios web haciendo que parezcan todos muy similares.

text-decoration none no funciona

El otro día tuve un problema con un enlace en html cuyo text-decoration none no funciona.

Quería que el enlace en cuestión quitara el subrayado cuando el ratón pasara por encima y le apliqué el siguiente estilo css a su clase:


...

text-decoration:none;

...

Era muy extraño pero esto no funcionaba así que decidí aplicárselo al elemento directamente con firebug pero… ¡seguía sin funcionar!

Después de darle muchas vueltas llegué a pensar que se le estaba aplicando este estilo a través de javascript pero la solución era la hoja de estilos ya que no me había percatado de que se le estaba poniendo un border-bottom:


...

border-bottom: 1px solid black;

...

Simplemente le quité esta propiedad y conseguí solucionar el problema.

Fallo tonto 🙂

Como usar fuentes woff en mi sitio web

Lo primero es ubicar en el sistema de archivos del sitio web los archivos fuente woff. Lo recomendable es crear un directorio fonts dentro de tu hoja de estilos css.

Lo siguiente sería definir en el archivo css las fuentes:


@font-face {     
font-family: "mifuente";     
src: url("fonts/fuente.woff") format('woff'); 
}

@font-face {     
font-family: "mifuente";     
src: url("fonts/fuente-bold.woff") format('woff');     
font-weight: bold; 
}

@font-face {     
font-family: "mifuente";     
src: url("fonts/fuente-boldoblique.woff") format('woff');     
font-weight: bold;     
font-style: italic; 
}

@font-face {     
font-family: "mifuente";     
src: url("fonts/fuente-oblique.woff") format('woff');     
font-style: italic; 
}

Por último para aplicar la fuente en código html, en este caso en un div:

<div class="micapa">
    <b>Esto esta escrito con fuente-bold.woff</b>
    <br/>
    <b><i>Esto está escrito con fuente-boldoblique.woff</i></b>
    <br/>
    <i>Esto está escrito con fuente-oblique.woff</i>
    <br/>
    Esto está escrito con fuente.woff
</div>

y en el css:

.micapa{
    font-family: mifuente;
}

Cambiar color del menu hamburguesa (hamburger menu) en Foundation

Si utilizas el framework Foundation y te preguntas como cambiar el color del menú que aparece para dispositivos móviles o de baja resolución de pantalla (hamburger menu).

Menu-Hamburguesa-Foundation

Mediante css, en el archivo foundation.css.Encuentra el menu-icon span donde cambiaras la propiedad box-shadow estableciendo los colores que deseas para tu menú hamburguesa.

Mediante este cambio podrás cambiar color del menu hamburguesa tan especial que aparece en los dispositivos móviles.