Google ha anunciado su nuevo API para fuentes, incluyendo un directorio de fuentes y una herramienta para visualizarlas. Esto nos permitirá incluir en nuestra web fuentes diferentes de las tradicionales (las que están incluídas en el directorio de fuentes de Google). La gran ventaja es su facilidad de uso. Símplemente hay que incluir un enlace al CSS de la fuente en Google y luego asignar la fuente al elemento que deseemos desde nuestra hoja de estilos.

Como vemos se trata símplemente de aplicar @font-face, pero con la ventaja de cargar la fuente desde Google, lo cual permite mejorar la velocidad de carga y reducir el consumo de ancho de banda (es como cargar jQuery desde Google).

Vamos con un ejemplo. Elejimos una fuente desde el directorio de fuentes de Google, por ejemplo Josefin Sans Std Light. Vemos que al poner el ratón sobre la misma aparece un botón que dice Click to embed Josefin Sans Std Light. Al hacer click iremos a una página que nos muestra los distintos tamaños y estilos disponibles para la fuente, una descripción y el set de caracteres. Además hay una pestaña que dice Get the Code. Si hacemos click sobre la misma vemos que nos dice que tenemos que pegar dentro del head de nuestra página:

1

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css' />

Ojo que la etiqueta en Google viene sin cerrar. Arriba yo la he cerrado para que valide bien la página.

Luego, en nuestra hoja de estilos, si queremos asignar esta fuente a los elementos h1 haríamos:

1

h1 { font-family: 'Josefin Sans Std Light', arial, serif; }

Y eso es todo! Según nos dicen en Google este sistema es compatible con Google Chrome: versión 4.249.4+, Mozilla Firefox: versión: 3.5+, Apple Safari: versión 3.1+ y Microsoft Internet Explorer: versión 6+.
No soportado por iPhone, iPad, iPod, o Android.

Aquí podéis ver la demo. Esperemos que el número de fuentes se vaya incrementando.

Otras lecturas de interés

Anuncio de Google sobre el API de fuentes (en Inglés)
Directorio de fuentes de Google

De todos es conocido el quebradero de cabeza que supone adaptar nuestras webs a Internet Explorer 6. Todos tenemos nuestros trucos para intentar aliviar lo máximo posible las diferencias entre este navegador y los demás. Sin duda mi favorito es asignar en la hoja de estilo alternativa para este navegador la instrucción de CSS display: inline a todos los elementos a los que hayamos asignado un float y un margen.

Supongamos que asignamos un float a un elemento con un margen, por ejemplo:

1
2
3
4
5
6
7

.elemento {
  float: left;
  width: 100px;
  height: 100px;
  margin-left: 100px;
  /* Aplicamos 100px al margen izquierdo */
  }

El problema es que mientras con todos los navegadores el margen izquierdo que en este caso hemos establecido en 100px será el esperado, con Internet Explorer 6 el margen será el doble, es decir 200px.

Pero si añadimos display: inline el problema está solucionado:

1
2
3
4
5
6
7
8

.elemento {
  display: inline;
  float: left;
  width: 100px;
  height: 100px;
  margin-left: 100px;
  /* Aplicamos 100px al margen izquierdo */
  }

Este es un viejo truco, conocido hace tiempo, pero que estoy utilizando ahora con bastante frecuencia en una web que estoy haciendo. Por ello pensé que sería interesante recordarlo mientras esperamos a que Internet Explorer 6 desaparezca para siempre de nuestras vidas…….

Una de las grandes limitaciones actuales en el diseño y desarrollo web es la limitada lista de fuentes que se pueden utilizar de forma segura Con “forma segura” entendemos que la fuente que hemos escogido esté instalada en todos (o la mayoría) de los ordenadores de los usuarios que van a entrar en nuestra web. Hay muy pocas fuentes que sean “seguras”. Quizás las fuentes seguras más conocidas sean Arial y Verdana. (Ver lista de fuentes seguras).

Se han desarrollado distintas soluciones para poder utilizar cualquier fuente “no segura”, ya sea utilizando Flash (sIFR), o Javascript (Cufón). Pero el futuro está en CSS3 y su declaración @font-face.

Para ver cómo funciona lo mejor es poner un ejemplo.

Vamos a comenzar por escoger una fuente gratuita. He seleccionado Cookies (http://www.dafont.com/cookies.font).

Lo primero que haremos en nuestra hoja de estilos es crear una declaración que defina la fuente que vamos a utilizar:

1
2
3
4

@font-face { 
   font-family: cookies; 
   src: url(fuentes/cookies.ttf) format('truetype');
 }

Si la fuente en vez de ser TrueType (.ttf) fuera OpenType (.otf), pondríamos “opentype” en vez de “truetype”.

Con esta declaración conseguimos dos cosas: en primer lugar damos un nombre a la fuente que vamos a utilizar (en este caso cookies), en segundo lugar asociamos ese nombre al enlace directo de la fuente que vamos a utilizar bajo ese nombre (en este caso la fuente cookies que se encuentra en formato truetype dentro del directorio fuentes).

Ahora que ya hemos definido la fuente podremos utilizarla como cualquier otra fuente en nuestra hoja de estilos:

1
2
3
4
5

body { 	
    font-family: cookies, Verdana, Tahoma, Geneva, sans-serif; 
    font-size: 62.5%; 
    color: #333;
}

Veámoslo en un ejemplo (ojo: sólo lo veremos bien en Safari 3.1+, Firefox 3.5+, Chrome y Opera 10. ¿Internet Explorer? En seguida veremos cómo hacerlo): Ver demo de utilización de @font-face. Podéis descargar el código aquí: Descargar Demo 1

Hasta aquí todo muy fácil. Sin embargo hay dos problemas:

1) El problema legal. Hay muchas fuentes (especialmente las comerciales) que no permiten que se las use utilizando @font-face. La razón probablemente sea que entonces serían muy fácilmente pirateables. Hay que tener por lo tanto mucho cuidado con las fuentes que se utilizan. Lo primero que hay que leer es su documento de licencia (incluso si son fuentes gratuitas) y ver si permiten su uso mediante font-face, y si lo permiten ver bajo qué condiciones (en ocasiones sólo hay que hay que hacer una mención a la fuente y a su autor en la hoja de estilos, por ejemplo).

Hay algunos sitios muy útiles que nos ofrecen fuentes gratuitas señalando incluso cuales se pueden utilizar con @font-face, como Font Squirrel, Kernest o Webfonts.

2) El problema de la compatibilidad. Hemos hablado hasta ahora que @font-face es sólo compatible con Safari, Chrome, Firefox y Opera. Pero, ¿qué pasa con Internet Explorer? Pues resulta que @font-face lo soporta Internet Explorer desde su versión 4. Sorprendente ¿verdad? El único problema reside en que Internet Explorer, de momento, sólo soporta un formato propietario de Microsoft llamado Embedded Open Type (.eot). Por ello necesitamos incluir dos ficheros si queremos que @font-face funcione en todos los navegadores: uno TrueType o OpenType para Safari, Chrome, Opera o Firefox y otro EOT para Microsoft Explorer.

No hay muchas fuentes disponibles en formato .eot de Microsoft. Hay una herramienta muy fácil de usar llamada ttf2 que convierte fuentes TrueType a EOT. Para convertir fuentes OpenType hay que convertirlas primero a TrueType (se puede hacer con FontForge).

De nuevo, hay sitios web como Font Squirrel que nos ofrecen ya fuentes gratuitas en formato EOT en lo que llaman @font-face kit (que incluye todos los formatos). Font Squirrel tiene incluso un generador de @font-face.

Vamos a ver un ejemplo utilizando una fuente en formato EOT. De Font Squirrel he bajado la fuente Cartoonish Hand, y de ella voy a usar dos ficheros que he grabado en la carpeta fuentes: SF_Cartoonist_Hand_SC.ttf y SF_Cartoonist_Hand_SC.eot

En la hoja de estilos haría esta vez:

1
2
3
4
5
6
7
8
9
10

@font-face {
  font-family: 'Cartoonist Hand';
 
 /* Para Internet Explorer */
	src: url('/fuentes/SF_Cartoonist_Hand_SC.eot');
 
 /*  Para el resto de navegadores */
	src: local('Cartoonist Hand'),
	     url('/fuentes/SF_Cartoonist_Hand_SC.ttf') format('truetype');
}

Vemos que primero (y es importante el orden) hemos incluído el archivo con formato .eot para Internet Explorer y luego hemos incluido la declaración para el resto de los navegadores. Como novedad, hemos incluido “src: local(‘Cartoonist Hand’)” que busca primero si la fuente está instalada en el ordenador del usuario que abre la web. Si no es así la carga desde el servidor de la web (la siguiente línea).

Luego haríamos:

1
2
3
4
5
6
7

  body  {	
    color: #333; 
    font-family: 'Cartoonist Hand', Verdana, Tahoma, Geneva, sans-serif; 
    font-size: 62.5%; 
    line-height: 1.7em; 
    text-align: center;
}

Podemos ver la demo aquí: Ver demo de @font-face con archivos .eot para Microsoft Explorer. Podéis bajar el código aquí: Descargar Demo 2

Por último es importante decir que si queremos utilizar distintas versiones de la misma fuente (su itálica o su negrita, por ejemplo) hay que cargar todos los archivos correspondientes, por ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@font-face {
  font-family: 'Cartoonist Hand';
 
 /* Para Internet Explorer */
	src: url('/fuentes/SF_Cartoonist_Hand_SC.eot');
 
 /*  Para el resto de navegadores */
	src: local('Cartoonist Hand'),
	     url('/fuentes/SF_Cartoonist_Hand_SC.ttf') format('truetype');
}
@font-face {
  font-family: 'Cartoonist Hand Bold';
 
 /* Para Internet Explorer */
	src: url('/fuentes/SF_Cartoonist_Hand_SC_Bold.eot');
 
 /*  Para el resto de navegadores */
	src: local('Cartoonist Hand'),
	     url('/fuentes/SF_Cartoonist_Hand_SC_Bold.ttf') format('truetype');
}

Como podéis ver el uso de @font-face es muy sencillo. Una vez se solucionen los problemas legales sobre su uso e Internet Explorer soporte TrueType y OpenType (que seguramente lo hará con Internet Explorer 9) @font-face solucionará el problema del uso de la fuente que deseemos en nuestra web. De todas formas, hay ya muchos sitios web que utilizan ya @font-face, que como habéis visto se puede usar con facilidad con fuentes gratuitas.

Más lecturas recomendadas

Themeforest, How to achieve cross-browser @font-face support
Snook.ca, Becoming a Font Embedding Master
Paul Irish, Bulletproof @font-face syntax
User Agent Man, @font-face in Depth
AllCreatives.net, ofrece un sistema para mejorar cómo se ven las fuentes en IE7 e IE8 utilizando @font-face
spyrestudios, nos ofrece 21 fuentes disponibles para @font-face: 21 Awesome @font-face Embeddable Typefaces
Podemos ver más información sobre los navegadores que soportan @font-face en webfonts.

Vamos a ver hoy otra posibilidad que nos ofrece CSS3 y que soportan ya Safari 3.1+, FireFox 3.5+ y Chrome 1.0+: La de utilizar imágenes en los bordes de elementos de nuestra web en lugar del borde normal, utilizando la porción de la imagen que indiquemos y estirándola también lo que indiquemos en la instrucción de CSS3.

La sintaxis a utilizar es un poco compleja, pero con los ejemplos creo que se entenderá mucho mejor (eso espero…).

La propiedad es border-image, aunque para utilizarla hoy hay que anteponer los prefijos que hemos visto para otras instrucciones de CSS3: -webkit para Safari y Chrome y -moz para Firefox:

1
2

-webkit-border-image: url(imagen) %arriba %derecha %abajo %izquierda stretch stretch;
-moz-border-image: url(imagen) %arriba %derecha %abajo %izquierda stretch stretch;

En donde pone imagen habrá que poner la ruta hasta la imagen que vayamos a utilizar en el borde. Luego hay que indicar el tamaño que se va a utilizar de cada esquina de la imagen para cada esquina del nuevo borde de nuestro elemento (en el orden de las agujas del reloj, es decir arriba, derecha, abajo e izquierda. Se pueden expresar en porcentajes o sin ninguna unidad de medida para expresar píxeles exactos, es decir por ejemplo 10 10 10 10). La última parte, donde poner stretch, determina cómo se van a escalar y cortar los bordes de los lados y superior e inferior de nuestro elemento. Hay tres posibles valores:
- stretch (estirar)
- repeat (repetir)
- round (redondear)
Si especificamos sólo un valor es como poner dos veces el mismo (por ejemplo sólo una vez stretch. Entonces será stretch tanto para los lados superior e inferior como para los lados izquierda y derecha). El valor por defecto es “stretch”.

Vamos a ver algunos ejemplos para ver cómo funciona:

Supongamos que vamos a utilizar esta imagen para crear los bordes. Es un gif de 50px por 50px que lo he llamado borde1.gif:

Ahora supongamos que tenemos un elemento DIV de 300px de ancho y 100px de alto para el que queremos poner de borde la imagen anterior. Si hacemos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<html>
<head>
  <title>border-image</title>
  <style type="text/css">
   div {
     width: 300px;
     height: 200px;
     padding: 10px; /* pongo un padding para despegar el texto de los bordes*/
     border-width: 10px;
     -webkit-border-image: url(borde1.gif) 25% stretch stretch;
     -moz-border-image: url(borde1.gif) 25% stretch stretch;
    }
</style>
</head>
<body>
    <div>
     <p>Este es un texto dentro del div sobre el que vamos a aplicar como borde una imagen</p>
    </div>
</body>
</html>

El resultado es este:

¿Qué ha sucedido? Si vemos el código, en primer lugar hemos dicho que el grosor del borde debe ser de 10px (con border-width). Esos 10 píxels de borde se van a rellenar con nuestra imagen borde1.gif. Para ello hemos aplicado border-image para los navegadores que usan webkit (Safari y Chrome) y a los de Mozilla (Firefox) con sus respectivos prefijos. Vamos a ver los parámetros que hemos elegido para border-image uno a uno:
- url(borde1.gif) : indicamos el camino y nombre de la imagen que vamos a usar para crear el borde.
- 25% : Hemos elegido el mismo valor para las cuatro esquinas (arriba, derecha, abajo e izquierda). Podríamos haber puesto cuatro valores diferentes o dos valores (arriba-abajo e izquierda-derecha). ¿Qué nos indica este 25%? Que se va a tomar para rellenar los 10 píxels de borde de la esquina superior izquierda del DIV el 25% de la imagen que usamos como borde cortando desde la esquina superior izquierda. Y lo mismo para el resto de esquinas:

- stretch stretch: indica que tanto para los lados superior-inferior como para los lados izquierda-derecha lo que se hace es alargar la imagen del borde hasta que se llegue a la siguiente esquina.

Vamos a ver otro ejemplo. Supongamos que la imagen que vamos a usar como borde es esta:

Con este código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<html>
<head>
  <title>border-image</title>
  <style type="text/css">
   div {
     width: 300px;
     height: 200px;
     padding: 10px;
     border-width: 10px;
     -webkit-border-image: url(borde2.gif) 28% stretch;
     -moz-border-image: url(borde2.gif) 28% stretch;
    }
</style>
</head>
<body>
    <div>
     <p>Este es un texto dentro del div sobre el que vamos a aplicar como borde una imagen</p>
    </div>
</body>
</html>

Se obtiene esto (ahora se ve mejor el efecto de stretch alargando la imagen del borde hasta encontrar la otra esquina):

Si hubiéramos puesto round en vez de stretch:

1
2

     -webkit-border-image: url(borde2.gif) 28% round;
     -moz-border-image: url(borde2.gif) 28% round;

tendríamos:

Es un poco difícil cogerle el truco, pero haciendo pruebas con los porcentajes y los efectos se pueden lograr cosas interesantes, por ejemplo para crear botones. Os recomiendo los artículos recomendados que siguen a continuación que, aunque estén en inglés, se ven algunos ejemplos prácticos. Además, en el de irbabe.com se nos enseña cómo conseguir aplicar imágenes a bordes con jQuery para que así funcione también con Internet Explorer.

Otras lecturas recomendadas

irbabe.com: Meet a ninja living in browsers
John Resig Bog: border-image in Firefox
css3.info: Border-image: using images for your border
elliotswan.com: 9 CSS3 properties you can use now

Seguimos con propiedades de CSS3 que podemos utilizar hoy en nuestras web, siempre teniendo en cuenta que son propiedades no soportadas por Internet Explorer. Hoy vamos a ver las sombras.

Text-shadow

En primer lugar vamos a ver text-shadow, que permite aplicar sombras a textos. Actualmente lo soportan Safari, Chrome, Opera y Firefox 3.5. Su sintaxis es:

Veamos un ejemplo:

Supongamos que tenemos un texto al que le aplicamos estos estilos:

1
2
3
4

p {
   text-shadow: 3px 3px 4px #666;
   font-size: 24px; 
}

El resultado es:

Tenemos una sombra de 3px a la derecha, 3px hacia abajo, 4px de desenfoque y con un color de sombra #666.

Hay que tener en cuenta que la utilización de text-shadow puede hacer que no se valide nuestra hoja de estilos respecto a las especificaciones de CSS 2.1, pero ¿es eso importante? Yo creo que no.

Podemos también utilizar rgba (que vimos en el anterior artículo) en vez del color en formato hexadecimal, es decir:

1
2
3
4

p {
   text-shadow: 3px 3px 4px rgba(0, 0, 0, .5);
   font-size: 24px; 
}

Por lo que en vez del gris #666 utilizamos un negro con una opacidad del 50%

Conviene jugar con las distintas combinaciones de valores de la sombra para conseguir los efectos más adecuados a lo que queremos. Podemos incluso lograr efectos de relieve interno:

1
2
3
4
5
6
7
8

p {
  text-shadow: 0px 1px 0 rgba(255,255,255, .5);
  font-size: 24px; 
  background-color: #ccc;
  color: #777;
  font-family: "Arial Black" sans-serif;
  padding: 10px;
}

Box-shadow

Otro tipo de sombra que podemos aplicar es box-shadow, que en vez de aplicarse a un texto se aplica a cualquier elemento.

Su sintaxis es como la de text-shadow:

Veamos un ejemplo, con un elemento p dentro de un elemento div, aplicando una sombra al elemento div:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<style type="text/css">
div {
	width: 300px;
	height: 60px;
	box-shadow: 3px 3px 4pc #ccc;
	-webkit-box-shadow: 3px 3px 4px #ccc;
	-moz-box-shadow: 3px 3px 4px #ccc;
	background-color: #eaeaea;
	border: 1px solid #ccc;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 10px;
}
p {
	color: #666;
	font-family: "Arial Black" sans-serif;
}
</style>
</head>
<body>
<div>
	<p>Este es un texto dentro de un DIV</p>
</div>
</body>
</html>

Vemos que hemos aplicado al elemento div una anchura de 300px, una altura de 100px, una sombra de 3px a la derecha, 3px hacia abajo, un desenfoque de 4px y un color de sombra #ccc. Vemos que hemos aplicado la instrucción box-shadow que hoy en día aún no está reconocida por los navegadores, por lo que más adelante hemos aplicado las específicas de webkit (Safari y Chrome) y Mozilla (Firefox). Además le hemos puesto un color de fondo #eaeaea, un borde de 1px sólido de color #ccc y bordes redondeados con un radio de 10px.

Otras lecturas recomendadas

vagabundia – Sombras: la propiedad text-shadow
mozilla hispano – Sombras en cajas con box-shadow

RGB (red, green, blue, es decir rojo, verde, azul) es un modelo que permite obtener cualquier color a partir de la combinación de esos tres colores. Los que conocéis CSS estáis habituados a especificar un color por su valor hexadecimal, por ejemplo #000000 para el negro. Pero todo color tiene también su valor RGB, que en el caso del negro es R:0 G:0 B:0. En el extremo contrario estaría el blanco que sería R:255 G:255 B:255.

Hasta ahora podíamos definir un color no sólo mediante su valor hexadecimal, sino también según sus valores RGB. Por ejemplo. para poner un fondo negro a un div:

1
2
3
4
5

div { 
   background: rgb(0, 0, 0); 
   width: 50px;
   height: 50px;
}

Pero gracias a CSS3 podemos incluir un valor más para cada color: su opacidad. Entonces hablaríamos de RGBA, siendo A=Alpha, que nos permitirá especificar la opacidad del color. El valor de A es un número entre 1 y 0, siendo 1 totalmente opaco y 0 totalmente transparente. Si seguimos el ejemplo anterior del fondo negro y queremos que tenga una opacidad del 50% haremos:

1
2
3
4
5

div { 
   background: rgba(0, 0, 0, .5); 
   width: 50px;
   height: 50px;
}

Como vemos hemos situado su opacidad al 50% por lo que si hubiera algo debajo de ese DIV se vería.

Existe ya una propiedad en CSS3 para conseguir la opacidad de un elemento. Se trata de opacity. Por ejemplo:

1
2
3
4
5
6

div { 
   background: #000; 
   opacity: .50;  
   width: 50px;
   height: 50px;
}

Hemos definido el color del fondo y luego le aplicamos “opacity”. El resultado parece ser el mismo:

A primera vista no hay diferencias, hasta que incluimos algo dentro del div. Vamos a verlo. Supongamos que, simplificando al máximo, tenemos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<html>
<head>
<style type="text/css">
div { 
   background: #000; 
   opacity: .50;  
   width: 50px;
   height: 50px;
}
p { 
   color: #000;
}
</style>
</head>
<body>
<div>
<p>TEXTO</p>
</div>
</body>
</html>

Es decir un elemento “div” que tiene en su interior un elemento “p” con la palabra “TEXTO”. Vemos que hemos aplicado al elemento p el color negro (#000;) lo mismo que al fondo del elemento DIV. Pero además al elemento DIV le hemos aplicado una opacidad del 50% Esto es lo que vemos:

¿Donde está el texto? No se ve por una razón: con opacity no sólo se altera la opacidad del elemento sino además se altera también la opacidad de cualquier elemento que se encuentre dentro del primero, en este caso el elemento p. Es decir, el elemento p tiene aquí también una opacidad del 50% y entonces tiene el mismo color que el elemento div y por eso no se ve.

Vamos a hacerlo ahora con RGBA:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
<head>
<style type="text/css">
div { 
   background: rgba(0,0,0,.5);  
   width: 50px;
   height: 50px;
}
p { 
   color: #000;
}
</style>
</head>
<body>
<div>
<p>TEXTO</p>
</div>
</body>
</html>

Ahora lo que veremos es esto:

Como vemos con RBGA se afecta sólo a la opacidad del elemento sobre el que se aplica la propiedad, sin afectar a los elementos que se encuentren en su interior.

La propiedad RGBA en estos momentos la soporta Safari, Chrome, Firefox 3 y Opera 10. Internet Explorer (que raro) no la soporta. Entonces si se quiere utilizar un fondo para un elemento (seguimos con el ejemplo del negro) y utilizar la propiedad RGBA para los navegadores más avanzados deberíamos establecer también el fondo para Internet Explorer:

1
2
3
4
5
6

div { 
   background: #000; /* Para Internet Explorer /*
   background: rgba(0,0,0,.5);  /* Para los navegadores que soportan RGBA */
   width: 50px;
   height: 50px;
}

Si, en Internet Explorer se verá distinto, sin opacidad. Pero si esto no afecta a la usabilidad ni a la accesibilidad del sitio es totalmente válido su uso.

Por último señalar la facilidad que nos da RGBA para el uso de una gama de colores en una web determinada. Supongamos que queremos utilizar distintas tonalidades a partir del mismo verde. Utilizando distintos niveles de opacidad podemos tener variaciones diferentes para utilizar por ejemplo como color de los enlaces y del hover de los enlaces:

1
2
3
4
5
6

a:link, a:visited {
color: rgba(20,178,120,1);
}
a:hover {
color: rgba(20,178,120,.5);
}

Otras lecturas recomendadas

Lea Verou, propone un método para poder utilizar fondos RGBA en Internet Explorer: Bulletproof, cross-browser RGBA backgrounds, today
24Ways.com: Working With RGBA Colour

Acabo de leer el libro de Dan Cederholm Handcrafted CSS, que me ha parecido muy bueno. En general el libro gira sobre dos ideas:

- Siempre hay que preguntarse cuando se desarrolla una web ¿qué pasaría si…? para estar preparado ante cualquier circunstancia que pueda alterar los distintos componentes de la web y hacerlos distintos a como nosotros los habíamos previsto (por ejemplo incrementando el tamaño del texto). Eso lo llama “web a prueba de balas” y “desarrollo artesano”, es decir, con atención al detalle.

- La idea de que no tiene por qué verse igual nuestra web en todos los navegadores. Dan Cederholm reivindica que se utilice ya CSS3, soportado por los navegadores más nuevos (en ocasiones sólo por Safari, Chrome y Firefox, e incluso sólo por Safari), siempre que no afecte a la usabilidad y accesibilidad del sitio cuando se vea con otro navegador que no soporte CSS3 (básicamente Internet Explorer). Es decir, que bajo IE6 se pueda usar y leer perfectamente nuestra web, aunque no sea tan “bonita” como cuando se usa un navegador moderno. Pero claro, para tomar una decisión como esta antes hay que conocer qué porcentaje de nuestros usuarios utilizan IE6, por ejemplo, y luego decidir si estamos dispuestos a que vean una web “más fea” siendo un porcentaje de usuarios alto los que lo usan…

Aprovechando esta última idea voy a empezar a hablar sobre las novedades más importantes que, aparte de los selectores, aporta CSS3 y que podemos empezar a utilizar ya en nuestros diseños (teniendo en cuenta que no se verán en algunos navegadores). Para no hacer muy largo el artículo voy a ir desgranando cada novedad en artículos diferentes. Hoy empezaré con los bordes redondeados, probablemente la novedad más conocida.

Bordes Redondeados

Si hasta ahora teníamos que utilizar imágenes para obtener bordes redondos en nuestros diseños ahora estos se pueden conseguir gracias a CSS3. Para ello aplicamos al elemento al que le queremos redondear los bordes la propiedad border-radius.

Sin embargo esta propiedad aún no está recogida tal cual por los navegadores. Internet Explorer no lo recoge en ninguna de sus versiones (lo han prometido para Internet Explorer 9). Sí está recogida en cambio por Safari y Chrome (utilizando el prefijo-webkit-) y por Firefox (utilizando el prefijo -moz-).

Vamos a poner un ejemplo. Supongamos que tenemos un DIV de 100px de ancho y 100px de alto con color de fondo rojo que queremos que tenga unas esquinas redondas con un radio de 10px:

1
2
3
4
5
6
7

div.cuadro {
    width: 100px;
    height: 100px;
    background-color: red;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

El resultado sería este:



Podemos redondear incluso algunas esquinas y otras no, desplegando la propiedad en todas sus esquinas. Por ejemplo, si queremos que sea redonda sólo la esquina superior derecha:

1
2
3
4
5
6
7

div.cuadro {
   width: 100px;
   height: 100px;
   background-color: red;
   -moz-border-radius-topright: 10px;
   -webkit-border-top-right-radius: 10px;
}

El resultado sería:

En el caso de alterar varias esquinas, pero no todas, podemos abreviar:

1
2
3
4
5
6
7

div.cuadro {
   width: 100px;
   height: 100px;
   background-color: red;
   -moz-border-radius: 10px 10px 0px 0px;
   -webkit-border-radius: 10px 10px 0px 0px;
}

Vemos como hay una ligera diferencia entre la expresión de webkit (Safari y Chrome) y la de Mozilla (Firefox). Aquí tenemos un detalle de todas ellas:

Yo suelo utilizar border-radius mucho en los formularios, para redondear las casillas del mismo. ¿Que en Internet Explorer se ven cuadradas? No pasa nada, no afecta al formulario. Vamos a verlo:

1
2
3
4
5
6
7
8

<form action="#" method="post">
  <fieldset>
    <p><label for="nombre">Nombre:</label><input type="text" name="nombre"  /></p>
    <p><label for="email">Email:</label><input type="text" name="email" value="" /></p>
    <p><label for="comentarios">Comentarios:</label><textarea name="comentarios"></textarea></p>
    <input type="submit" value="Enviar" class="boton" />
  </fieldset>
</form>

Y aplicando estos estilos:

1
2
3
4
5
6
7
8
9

p     		{ padding: 5px; }
label 	{ display: block;}
input,
textarea	{ width: 200px;
		   -webkit-border-radius: 8px;
		   -moz-border-radius: 8px;
		  border: 1px solid #BDC2C9;
		 }
input.boton	{  width: 70px;}

Quedaría:

Vemos que hemos redondeado los bordes de los elementos. En internet Explorer 8 se vería así:

Como se ve todo aparece sin problemas en Internet Explorer. Los bordes no aparecen redondeados, pero no supone ningún problema para el uso del formulario. Lo único que estamos haciendo es ofrecer diseños más avanzados a aquellos usuarios que utilizan navegadores más modernos, pero sin afectar a la usabilidad y accesibilidad de la web.

Seguiremos en breve con otra propiedad de CSS3, los colores utilizando RGBA.

Lecturas recomendadas

BuildInternet, Using Rounded Corners with CSS3
Smashing Magazine, CSS 3 Cheat Sheet (PDF)
Elliotswan, 9 CSS3 properties you can use now
CSS3.info, CSS3 Previews

Hay ocasiones en las que queremos que cada vez que entre un usuario a nuestra web el fondo de la misma sea elegido aleatoriamente. De esta forma podemos sorprender a nuestros usuarios con distintos diseños, distintos mensajes, etc..

Conseguirlo es muy sencillo combinando PHP y CSS.

Supongamos que tenemos una serie de imágenes para el fondo de nuestra web que se llaman: “fondo_body1.jpg” , “fondo_body2.jpg” , “fondo_body3.jpg” , “fondo_body4.jpg” , “fondo_body5.jpg”, “fondo_body6.jpg” , “fondo_body7.jpg” , “fondo_body8.jpg” , “fondo_body9.jpg” , “fondo_body10.jpg”,”fondo_body11.jpg” , “fondo_body12.jpg” , “fondo_body13.jpg” , “fondo_body14.jpg” y “fondo_body15.jpg”

¡Quince nada menos! De esta manera va a ser dificil que a un usuario le salga dos veces seguidas la misma imagen……

Vamos a ver línea por línea. Como vamos a introducir estilos dentro de Head escribiríamos:

1

<style type="text/css" media="screen">

A continuación abrimos php y creamos un número aleatorio utilizando PHP:

1
2

<?php
$valor = rand(0,14); // Uso de rand(): rand(Valor minimo, Valor maximo);

De esta forma creamos un número aleatorio entre cero y catorce y lo almacenamos en la variable $valor. ¿Por qué empezamos por cero? Porque ahora vamos a almacenar los nombres de nuestras imágenes en una array o matriz, y estas comienzan a contar desde cero. Por lo tanto como tenemos quince imágenes contaríamos desde cero a catorce.

Almacenemos nuestras imágenes en el array:

1

$imagenes = array("fondo_body1.jpg" , "fondo_body2.jpg" , "fondo_body3.jpg" , "fondo_body4.jpg" , "fondo_body5.jpg", "fondo_body6.jpg" , "fondo_body7.jpg" , "fondo_body8.jpg" , "fondo_body9.jpg" , "fondo_body10.jpg","fondo_body11.jpg" , "fondo_body12.jpg" , "fondo_body13.jpg" , "fondo_body14.jpg" , "fondo_body15.jpg");

Como veis hemos creado un array donde hemos almacenado todos los nombres de nuestras imágenes y ese array lo hemos almacenado a su vez en la variable $imagenes.

Ahora vamos a escribir la línea de CSS que va a crear el fondo para nuestra web, es decir, el fondo de body (cerrando a continuación php y style):

1
2
3

echo "body{ background: #000 url('images/".$imagenes[$valor]."') no-repeat top right fixed;}";
?> 
</style>

Como estamos aún con PHP la manera que utilizamos en PHP para escribir algo es a través de echo. A continuación sigue la instrucción de CSS que da el fondo a body pero con una peculiaridad: el nombre de la imagen que va a estar ocupando el fondo vendrá dado por las dos variables que hemos creado con anterioridad. Por ejemplo, si el número aleatorio es 3 tendremos $imagenes[3], es decir, escogerá el tercer valor del array comenzando por cero, que es fondo_body4.jpg. Hay que tener cuidado con las comillas. Añadimos la variable con un punto (que es la manera de añadir con PHP) después de interrumpir con dobles comillas la instrucción normal de CSS para introducir PHP. Si seguimos con nuestro ejemplo el resultado será:

1
2
3

<style type="text/css" media="screen">
body{ background: #000 url('images/fondo_body4.jpg') no-repeat top right fixed;}
</style>

Vamos a ver ahora todas las líneas que escribiríamos dentro de head:

1
2
3
4
5
6
7

<style type="text/css" media="screen">
<?php 
  $valor = rand(0,14); // Uso de rand(): rand(Valor minimo, Valor maximo);
  $imagenes = array("fondo_body1.jpg" , "fondo_body2.jpg" , "fondo_body3.jpg" , "fondo_body4.jpg" , "fondo_body5.jpg", "fondo_body6.jpg" , "fondo_body7.jpg" , "fondo_body8.jpg" , "fondo_body9.jpg" , "fondo_body10.jpg","fondo_body11.jpg" , "fondo_body12.jpg" , "fondo_body13.jpg" , "fondo_body14.jpg" , "fondo_body15.jpg");
  echo "body{ background: #000 url('images/".$imagenes[$valor]."') no-repeat top right fixed;}";
?> 
</style>

Podemos refinar aún más nuestro código. ¿Qué pasa si de repente en vez de tener 15 imágenes queremos que sean 16? Que tenemos que cambiar el número en rand. ¿No podemos hacer que se cuente de manera automática el número de imágenes que hay en el array? Pues sí se puede. Lo haríamos así:

1

count($imagenes)

En nuestro caso nos dará un valor de 15, ya que hay 15 imágenes en el array. Para llevar esto a la función que crea el número aleatorio haríamos:

1

 $valor = rand(0, count($imagenes)-1); // Uso de rand(): rand(Valor minimo, Valor maximo);

Vemos que a la función que nos cuenta el número de imágenes del array le hemos restado uno ¿Por qué? Recordad que se comienza siempre contando desde cero. Si hay una sola imagen $valor tendría que ser cero (un número aleatorio entre cero y cero, saldría cero, que es la primera imagen).

Ahora quedaría todo así:

1
2
3
4
5
6
7

<style type="text/css" media="screen">
  <?php 
	$imagenes = array("fondo_body1.jpg" , "fondo_body2.jpg" , "fondo_body3.jpg" , "fondo_body4.jpg" , "fondo_body5.jpg", "fondo_body6.jpg" , "fondo_body7.jpg" , "fondo_body8.jpg" , "fondo_body9.jpg" , "fondo_body10.jpg","fondo_body11.jpg" , "fondo_body12.jpg" , "fondo_body13.jpg" , "fondo_body14.jpg" , "fondo_body15.jpg");
       $valor = rand(0, count($imagenes)-1); // Uso de rand(): rand(Valor minimo, Valor maximo);
	echo "body{ background: #000 url('images/".$imagenes[$valor]."') no-repeat top right fixed;}";
?> 
</style>

Fijaros en la instrucción que he incluído en body. Por supuesto que podéis cambiar como queráis lo que he puesto yo (fondo negro -#000-, situado en la parte superior de la pantalla -top- en la parte derecha -right- y que no se desplace cuando nos desplazamos hacia abajo en la página -fixed-)

Más lecturas recomendadas

PHP.net – Arrays in PHP
Desarrolloweb.com – Creación de tablas por medio de variables tipo array. Utilidad y funciones útiles relacionadas.