Archive for May, 2011

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]