24ways1

Trabajando con transparencias y gradientes vía CSS.

La manera en que manipulas el color en tus diseños web está a punto de cambiar. Tal vez eres de los que ha practicado con valores de color hexadecimales desde que eras un pequeño web-bebé, si era así ¡prepárate para crecer rápido! CSS3 es más que un hecho y tu paleta está a punto de crecer inmensamente.

Comparado con lo que viene, se dice que los diseñadores hemos estado hasta el momento “daltónicos“, trabajando sólo con una milésima de la mínima parte del espectro cromático. Por supuesto que dicho término es una broma y no es porque vayan a surgirle nuevos matices al arco iris.

Lo que va a suceder es que los valores de color van a ser definidos en nuevas formas, será agregado todo el espectro de niveles de opacidad y además serán lanzados gradientes basados en puro CSS en lugar de imágenes.

Algunos sitios que poseen la vista bien larga, como el impresionante 24 Ways to Impress Your Friends (24 maneras de impresionar a tus amigos) ya están jugando con RGBa para lograr efectos de texto y fondo —y los resultados son impresionantes.

24ways.org hace uso de la opacidad y del RGBa para crear su curioso diseño.

Pregunta rápida: ¿Qué es RGBa?

No serás ni escéptico ni ignorante por no saberlo, no obstante si no conoces qué es exactamente RGBa aquí te tenemos la respuesta.

Según los chicos de ConClase.net RGBa no es más que, cito:

Se trata del mismo modelo RGB, pero con otra propiedad: canal alfa. Este canal se usa como un índice de transparencia en un píxel. Esto nos sirve a la hora de mezclar varios colores designados para un solo píxel. Este modelo es más reciente y se suele usar para crear efectos y técnicas visuales como el suavizado de imagen (anti-aliasing), niebla, llamas, y objetos semi-transparentes: cristal, agua, vidrieras, etc.

No obstante si te interesa ampliar un poco más sobre este término, por así decirle, los chicos de DesarrolloWeb tienen el concepto mucho más ampliado.

La verdad sobre HEX.

El modelo RGB lleva bastante tiempo activo en la web. Los valores de color RGB funcionan en cada navegador que te puedas imaginar, por lo que no son cosa nueva. Es solo que muchos desarrolladores (y diseñadores) han preferido definir los colores en HEX sin tener la más mínima razón para cambiar de parecer. Créanme, ahora la tienen.

Los sistemas HEX y RGB definen los millones de colores disponibles en tu pantalla de similar manera:

Cada uno de estos valores de color producen el mismo resultado.

HEX posee un pequeño punto a favor respecto RGB: es compacto —mucho más si escribes de manera taquigráfica. Esto es altamente significativo si eres un desarrollador que emplea de manera estricta cada código en busca de la optimización divina. Por lo único que es bueno escribir taquigráficamente con HEX es debido a sus colores seguros. Si hasta el momento has sido de los que se limita a usar colores seguros únicamente, es tiempo de que sigas adelante con lo nuevo.

Nuevo RGB totalmente mejorado: ¡Ahora con Alfa!

Aquí tienes una razón para comenzar a usar valores RGB: éstos pueden incluir un valor alfa para crear opacidad. Agregar un valor alfa dentro de un color RGB es así de sencillo:

o:

Ambos valores producen color rojo pero a un 50% de opacidad. Cuando uses RGBa, asegúrate de especificar rgba() como el valor (no la a), y a continuación agrega los valores alfa como un cuarto valor separado por comas estableciendo un rango desde 0 (transparente) hasta 1.0 (opaco). El valor de 0 es equivalente al valor de color transparente.

Valores de color, desde opaco hasta transparente.

¿Por que HEX no puede soportar similar configuración? Bueno, realmente si puede, como podremos ver más adelante, pero sucede que, aparentemente, el W3C no tiene planes de agregarla dentro de sus especificaciones de color en la web.

En tanto los navegadores soporten CSS3, podrás hacer uso de un valor RGBa para obtener transparencia donde quiera que exista un valor de color: en textos, fondos, bordes, sombreado de texto, etc. —donde sea. La única pregunta que queda en el aire es ¿que hay sobre los navegadores que no soportan RGBa? He oído por ahí que existe un navegador que algunas personas aún usan (digamos de 70% a 75% del público web), y no soporta CSS3, incluyendo RGBa. No es casualidad que ¡ese navegador sea Internet Explorer!

¿Qué hacer con IE?

Si un navegador se encuentra un valor que no entiende, se supone que lo ignore y procese cualquier otro valor que esté configurado para dicha propiedad. El siguiente código CSS debería cubrir IE:

Ajustar los colores de manera tal que más menos luzcan como transparentes, es posible. Por ejemplo, si sabes que un bloque de texto aparecerá en un fondo blanco, puedes hacer uso del valor rgb(255, 127, 127) para que se vea un 50% transparente. En cambio si el fondo cambia, la diferencia será evidente:

El valor rosado simula lo que luce un rojo con transparencia al 50%. Pero en la medida en que sitúes el texto en un fondo oscuro, la ilusión queda al descubierto.

No es una solución perfecta porque realmente no es transparente. Eso no se puede arreglar. En cambio puedo compartir unos trucos sobre cómo poner colores transparentes en el fondo de cualquier elemento en cualquier navegador moderno.

I: Colores transparentes en tus fondos.

Un pequeño capricho de Internet Explorer es que incluye muchos “filters”. Dichos filtros no son parte del standard que estima el lenguaje CSS… y de hecho nunca lo será, en cambio podemos explotarlos de interesantes maneras para obtener resultados similares a algunas de las características de CSS3.

Con uno de estos filtros de IE podemos agregar un gradiente al fondo de un elemento e incluir colores transparentes haciendo uso de notación hexadecimal. El primer valor dentro de la cadena de valores de HEX es para la opacidad del color, y hace un rango desde 00 (opaco) hasta ff (transparente). Esto nos aporta un interesante hueco, ya que configurando los valores inicial y final del gradiente para que sean el mismo color, podremos establecer de manera efectiva un color de fondo transparente:

Tenemos que usar el filtro dos veces: una para versiones antiguas de IE (lt se usa por “menor que”) y otra para IE8 y superior (gte se usa por “mayor que o igual que”), el cual usa el nuevo prefijo -ms para identificarse a sí mismo como extensiones de Microsoft. Esto agrega un 50% de fondo de transparencia a ambos estándares compatibles de dichos navegadores.

Esto debe verse igual en la mayoría de los navegadores. Mira este ejemplo.

II: Gradientes en tus fondos.

Lo que estamos buscando es una solución cross-browser que nos permita agregar gradientes en el fondo usando nada más que CSS: nada de imágenes, gráficos, PNGs transparentes, sobretodo no más molestia con Photoshop cada vez que a un cliente se le ocurre cambiar una sombra morada a un poco más azul. Puedes hacer esto con Firefox 3.6, Safari 4 y Chrome 5.

Eso si, no creas que la aplicación de gradientes es cosa fácil, existe una pequeña complicación que, lo creas o no, no proviene de Internet Explorer. El W3C recientemente ha comenzado a desarrollar una sintaxis de gradiente para CSS, y luce muy lejos de estar completada, sin embargo Mozilla (Firefox) y Webkit (Safari) han agregado sus propias especificaciones (conflictivas). El intento de estas “extensiones” es para llevar la industria a un siguiente nivel adicionando necesarias y deseables características, mucho más allá de las que posee actualmente el W3C.

No todo está perdido. Cada versión tiene su propio prefijo de extensión, así que si agregamos todas las sintaxis de gradientes a nuestro código, entonces todos los navegadores jugarán limpio:

Este es un gradiente vertical linear que funciona en IE 5.5+, Firefox 3.6+, Chrome 5+ y Safari 4. Mira el ejemplo.

Para poder cambiar la dirección del gradiente, Webkit define las esquinas de comienzo y de finalizado, Mozilla define el lado de la esquina dónde el gradiente comienza, y IE simplemente define 0 (vertical) o 1 (horizontal). Así que, para girar nuestro gradiente a 90°, codificamos lo siguiente:

Un gradiente horizontal linear que funciona en IE, Firefox, Chrome y Safari. Mira el ejemplo.

Webkit y Mozilla permiten mucha variedad en sus gradientes, incluyendo gradiente radial y de múltiples colores. Las sintaxis pueden resultar complejas, pero dejémoslo de manera sencilla momentáneamente ya que IE solo soporta gradientes verticales y horizontales.

Agrégale color a tu vida.

Abrir nuestras mentes a nosotros mismos no es más que la solución eventual a cualquier problema u obstáculo que te encuentres en el tratado de color en el diseño web. Los inventos poco ortodoxos a los que acudimos hoy día para poder obtener el tan ansiado color transparente, desaparecerán. Comenzaremos a presenciar muchos más diseños, esta esfera irá creciendo hasta volverse en una tendencia y el uso de RGBa será de uso constante.

Conoce un poco más.

Vía | WebDesigner Depot

Dejanos un comentario