Archive for the ‘CSS’ Category

Generador de fuentes para @font-face

Escrito por Víctor Mundet en 25/05/2011

Hoy os presentamos “Font Squirrel @font-face Generator”, un servicio online para generar kits de tipografías para @font-face, para todos los navegadores. Muy útil para cualquier proyecto web donde debamos introducir una tipografía poco común.

Es posible que ya conociéseis de antes Font Squirrel, desde dónde se puede se pueden descargar tipos de fuente gratuïtamente para uso comercial (y personal, obviamente). Pero de lo que hoy hablaremos es del generador de fuentes que ofrecen de forma gratuïta, es tan simple como entrar aquí, subir una o varias fuentes y generar el kit, que incluye:

Sorprendentemente, esto nos permite cambiar el tipo de letra en practicamente todos los navegadores, ya que funciona desde Internet Explorer 4+, incluyendo Opera, Firefox, Chrome, Safari, y por lo que parece, también en dispositivos móviles. Por lo que gracias a este sistema, podemos crear sin problemas un proyecto con un tipo de fuente no habitual en cualquier PC, normalmente la tipografía del cliente.

Pasos a seguir para generar vuestro kit:

  1. Entráis en la página del generador de Font Squirrel
  2. Añadís los tipos de fuente en el listado
  3. Seleccionáis ‘Optimal’ (o ‘Expert’ si queréis toquitear opciones)
  4. Y descargáis vuestro kit
  5. Una vez descargado y descomprimido, hay un .html de ‘demo’
  6. Copiad los archivos y el contenido del ’stylesheet.css’ a vuestro proyecto
  7. Ya podéis cambiar el tipo de letra vía css con ‘font-family’ como si la tipografía existiese en el propio PC

Espero que os sea de utilidad y que haya quedado todo claro, en caso de dudas, podéis comentar y os responderé en cuanto pueda!

Alternar el color de las filas con CSS3

Escrito por Oriol Navascuez en 03/05/2011

Los que trabajamos programando o diseñando front-end i/o back-end nos hemos dado muchas veces con la necesidad de, a la hora de generar una tabla, que esta intercale los colores de sus filas de forma automática.  Y cuando digo automática, me refiero a que no lo tengamos que hacer mediante programación en la creación de la tabla.

Si alguna vez habéis participado en la mejora de un site, o habéis visto el código de webs que no son vuestras, quizá hayáis dado con alguna que solucione esto de la siguiente forma:


<tbody>
	<tr class="odd">
		<td>Contenido</td>
	</tr>
	<tr class="even">
		<td>Contenido</td>
	</tr>
	<tr class="odd">
		<td>Contenido</td>
	</tr>
	<tr class="even">
		<td>Contenido</td>
	</tr>
</tbody>

Muchas veces se crean dos clases “odd” (impar) y “even” (par), para dar un color distinto a cada fila, y así al generar la tabla se intercala la clase a medida que se genera. Es una solución, pero no la mejor de ellas. Sin contar en que tenemos que crear una condición en el bucle de la programación para que itere entre las dos opciones si es par o impar.

La mejor solución, y que para eso existe, es usando selectores de tercer nivel que nos ofrece CSS3.
Si ahora mismo no sabéis de que estoy hablando, seguro que este trocito de código os suena:

a:hover{}

:hover es un selector de tercer nivel, clasificado como una pseudo-clase de acción, ya que se encarga de cambiar el formato de un elemento según pase el ratón por encima.

Y ahora que sabemos bien que son los selectores de tercer nivel, os enseñamos como hacer el cambio de color de las filas, usando :nth-child, que es una pseudo-clase estructural.

:nth-child(n): Este selector selecciona el elemento indicado con la condición de que sea el hijo enésimo de su padre. Es útil para seleccionar el segundo elemento de una lista, el quinto párrafo de un texto, etc.

La explicación matemática es la siguiente:
Representamos el elemento que queremos seleccionar con la expresión (an+b) e identificaremos una lista con “a” elementos en la que queremos destacar el elemento “b“.

EJEMPLO:

tr:nth-child(2n+1) /* representa cada fila impar de una tabla HTML */

tr:nth-child(odd)  /* igual al anterior */

tr:nth-child(2n+0) /* representa cada fila par de una tabla HTML */

tr:nth-child(even) /* igual al anterior */</pre>

Podemos jugar tanto como queramos con esto, por ejemplo, si queremos seleccionar un elemento de cada nueve de una lista infinita. Sería algo como (10n-1) o (10n+9):

:nth-child(10n-1)  /* representa el 9, 19, 29, etc, elementos */

:nth-child(10n+9)  /* igual al anterior */</pre>

Si lo queréis ver ejemplificado, aquí podéis ver una demo en acción:
DEMO

Más info:
Selectors Level 3 [W3C]

No pagas, no hay web!

Escrito por Oriol Navascuez en 31/03/2011

Cuantas veces te has encontrado en esa situación en la que le haces la web a un cliente, y este no hace más que retrasar el pago una y otra vez? O no solo retrasar el pago, sino simplemente no pagar.

Para aquellos momentos en los que ya hemos entregado el proyecto pero no lo hemos cobrado, y además el cliente ha cambiado usuarios y/o contraseñas del FTP para que no le borremos nada y él poder disfrutar de algo que no ha pagado, aquí os traemos una solución.

Se llama CSS Killswitch, y lo que nos hace es dejar la pagina del cliente moroso completamente negra, anulando así los estilos que hubiera previamente y dejando la web inservible, aun sin tener acceso al FTP.

Como funciona?
Killswitch te facilita una URL a una hoja de estilos remota, del estilo “http://cssksw.com/2novatos” que en principio no contiene nada. Esto lo ponemos en las cabeceras de la web que estamos haciendo, o si queremos ser más discretos, lo hacemos mediante una llamada en las CSS con esto:

@import url("http://cssksw.com/2novatos");

Una vez puesto esto, entregado el proyecto y en el caso de ver que la cosa no va por buen camino, es tan fácil como entrar al panel que nos facilita el servicio (por cierto, es gratuito) y activar el Killswitch, dejando la pantalla del “amigo” completamente negra.

Método casero.
Aun que si queremos hacerlo nosotros mismos, desde nuestro servidor si lo tenemos, por tenerlo más a mano… es tan facil como crear una hoja de estilos en blanco para cada proyecto, y añadirlo como hemos puesto anteriormente. Y en caso de que el cliente no pague, modificamos la hoja de estilos que esta en blanco poniendo lo siguiente:

body { background: black !important; }
body * { display: none !important; }

Aun que una buena solución, espero que no lo tengáis que usar.

Enlace: CSS Killswitch

The Square Grid

Escrito por Oriol Navascuez en 04/12/2010

Si aun no has probado un framework para hacer tus CSS, puedes comenzar con este. Dividido en 35 columnas que suman un total de 994px de ancho. A ver que te parece!

ENLACE DIRECTO

Pasa de PX a EM

Escrito por Oriol Navascuez en 06/06/2010

En el anterior artículo te dábamos nuestra opinión sobre que medida es mejor usar px o em, y te comentábamos que haríamos un segundo artículo para comprender el uso de los em’s y como pasar nuestra web de píxeles a em sin sufrir demasiado. Pues bien, ya ha llegado la hora de daros las claves básicas para ello.

Pero antes de empezar a trabajar con los em en nuestras CSS, necesitamos saber el tamaño de fuente por defecto del navegador. Por suerte, esto es fácil de saber. Todos los navegadores tienen por defecto el tamaño de fuente en 16px, o lo que es lo mismo, 1em.

Muchos diseñadores modifican el tamaño de la fuente a 10px (0.625em o 62.5%) en el <body>, para así seleccionar más fácilmente el tamaño de fuente de los hijos. Pero a nuestro parecer, nos parece más correcto dejar la fuente por defecto a 16px, y transformar la medida únicamente en los elementos que lo necesitemos, ya que así, sabremos en todo momento, que el tamaño por defecto será 16px, el mismo que los navegadores. Y así, si alguien ha modificado el tamaño por defecto del navegador, nuestro interface elástico no se romperá y seguirá ajustado perfectamente.
Para conseguir esto definimos esto en nuestra hoja de estilos:

body {
    font-size:1em;
}

El problema, como casi siempre, es Internet Explorer. IE, tiene un problema, y es que redimensiona el texto em de forma mucho mayor de lo normal. Por lo que es necesario colocar la siguiente línea en nuestras CSS:

html {
    font-size:100%;
}

Con esta línea, incluso IE redimensionará correctamente nuestra web.

Ahora viene lo “duro”, como convertimos de px a em nuestro diseño?

Como seguramente no somos expertos en matemáticas… será bueno apuntarnos o recordar solo una fórmula, no? No te asustes aun, que es facilita. Si eres diseñador/a seguro que conoces bien a los píxeles, por lo que partimos sobre esta base.

1 ÷ tamaño de fuente del padre × tamaño deseado en píxeles = valor en em

Esta fórmula funciona de la siguiente manera, calculamos cuanto mide un píxel en ems y lo multiplicamos por el tamaño en píxeles que necesitemos para obtener cada medida en ems.

Es decir, que si queremos crear un <div> que tenga de ancho 540px, sabiendo que el tamaño por defecto no lo hemos modificado, aplicaremos la fórmula así:

1 ÷ 16 × 540 = 33.75em

Pero si te quieres ayudar un poco con una tabla de conversión en la que seleccionando el tamaño de fuente por defecto, te devuelve la tabla con proporciones a esa medida… te recomendamos visitar, PXtoEM.

Pues creo que con esto ya tenéis la base para empezar a pasar vuestros diseños a ems. Es algo más de trabajo, pero mejora mucho la accesibilidad a la página web y a sus contenidos.
Suerte con los próximos diseños!

¿Qué usar, px o em?

Escrito por Oriol Navascuez en 25/05/2010

PX vs EMMucho se habla y se ha hablado sobre la accesibilidad web. En si hay que hacer las webs de forma que todo tipo de personas puedan visitarlas, pero para llegar a hacer una web 100% accesible no nos podemos limitar a cumplir solamente uno de los puntos de la accesibilidad.  Hoy, dejamos escrito un pequeño artículo de uno de los puntos claves en la accesibilidad. La lucha de píxeles o ems.

¿Qué diferencia hay entre píxeles y ems?

La principal diferencia se basa en el problema de los píxeles. Cuando nos llega el diseño en photoshop, fireworks,… de la web que tenemos que maquetar, ésta suele estar medida o cortada en píxeles. Y cual es el problema? Pues es que algunos navegadores interpretan los píxeles ligeramente diferente a sus homólogos lo que hace que una web se pueda ver distinta de un navegador a otro. Este problema nos lo solemos encontrar no solo con esto, sino con muchas otras cosas, como propiedades de CSS que se interpretan de forma distinta en cada navegador. Hay que tener en cuanta, que el pixel es una medida relativa al lienzo, en comparación con el em, que os lo contamos a continuación.

En cambio la medida en em  es una medida flexible. Me explico. Cuando abrimos una web que ha sido maquetada con valores em y queremos ampliarla para ver el texto más grande, ya sea por problema de visión, por comodidad, etc, no solo nos crecerá el texto, sino que toda la web se ampliará de forma homogénea, ampliando o reduciendo todo el inteface web. Así, si un usuario ha modificado los valores por defecto de su explorador, para ver el texto más grande, no solo se le ampliará el texto, sino toda la interface, haciendo más cómoda la navegación por el sitio, ya que los em cogen como referencia la altura de la fuente definida en el documento, consiguiendo de esta forma que si un usuario aumenta el tamaño del texto, todo se ampliará de igual forma.

Esto no quiere decir que una web maquetada en px esté mal maquetada. Ni muchísimo menos. Pero siemrpe estará mejor hecha una web la que permita la flexibilidad que ofrece el estar maquetada con valores em, ya que cualquier usuario podrá ampliar y reducir el texto sin distorsionar la interface de la web.

Nosotros por ahora en el blog contamos solo con las fuentes en em, y esperamos poco a poco adaptarlo todo a em, así como implementar poco a poco el HTML5. Así que os animamos a que probéis a hacer vuestros diseños en em, en futuros artículos os daremos unos consejos para controlar a la perfección los valores em, y no tener problemas al pasar de px a em.