Añade transparencias y degradados con CSS

Noticias - Diseño

La manera de introducir color en un diseño web está apunto de cambiar. Despues de muchos años jugando con códigos hexadecimales la manera de usar la paleta de color se hace mucho más grande, CSS3 ha llegado.

Durante mucho tiempo se ha estado trabajando con una pequeña parte del espectro cromático. Pero no, no se añaden nuevos matices al arcoiris de color.

Lo que ocurre es que en los valores de color se añaden nuevos parametros, todo el espectro de opacidad y también degradados con CSS puro en lugar de imágenes.

Ya son muchos los sitios web que, pensando hacia el futuro, juegan con valores RGBa, efectos de texto y degradados de color y los resultados están siendo excelentes.

La verdad sobre HEX

A pesar de todo esto el valor RGB existe desde hace tiempo. Los valores RGB son admitidos por cualquier navegador que se pueda imaginar, por lo que no es nada nuevo. Es sólo que la mayoría de desarrolladores y diseñadores utilizan valores HEX para definir los colores y no han tenido ninguna razón para cambiar, hasta ahora.

Los sistemas HEX y RGB pueden definir millones de colores en la pantalla igual de bien:

red
#f00
#ff0000
rgb(255,0,0)
rgb(100%,0%,0%)
Todos estos ajuste del color producen el mismo resultado.

A la hora de elegir un color directamente es más facil imaginar un valor en base diez que en base dieciseis, es más rápido hacerlo con valores de 0 a 255 o 0 a 100% que con valores desde 00 a 99 o AA a FF. A fin de cuentas somos seres humanos con diez dedos y es con lo que contamos.

HEX tiene una pequeña ventaja sobre RGB: es compacto, y lo es más si se usa el valor corto (tres valores en vez de seis). Esto es siginificativo solo si se es estricto con la optimización de código. La ventaja del valor corto es que se asegura un color Web, pero si nos limitamos al color Web es horda de pasar página.

RGB mejorado: ahora con Alpha

He aquí la razón para empezar a utilizar los valores RGB: pueden incluir un valor alpha para crear opacidad. Añadir un valor alpha a un color RGB es muy sencillo:

rgba(100%,0%,0%,0.5)
rgba(255,0,0,0.5)

Estos dos valores producen rojo al 50% de opacidad. Cuando usemos RGBa hay que asegurarse de que se especifica rgba() como el valor (nótese la a), y entonces añadir el valor alpha en el cuarto valor separado por una coma, siendo desde 0 (transparente) hasta 1.0 (opaco). El valor 0 es equivalente al valor transparente de los valores de color.

100% rgba(100%,0%,0%,1)
75% rgba(100%,0%,0%,0.75)
50% rgba(100%,0%,0%,0.5)
25% rgba(100%,0%,0%,0.25)
0% rgba(100%,0%,0%,0)
Valores de opaco a transparente

¿Por qué no admite HEX una sintaxis similiar? Bien, puede, como veremos más adelante, pero la W3C no tiene planes aparentemente de añadirla en las especificaciones de color. Esto podrá cambiar pero por ahora RGB es el futuro del color en la web.

Los navegadores actualmente están soportando CSS3, así que se puede usar el valor RGBa para obetener transparencia donde quiera que haya un valor de color: texto, fondos, bordes, sombras... donde sea.

Sólo queda una cuestión, ¿qué hay de los navegadores que no soportan RGBa? Desgraciadamente hay uno que no lo soporta y mucha gente lo sigue usando y sigue sin soportar CSS3, incluido RGBa. Hablamos de Internet Explorer.

¿Qué hacer con IE?

Cuando un navegador encuentra un valor que no entiende, lo ignora y usa cualquier otro valor que este establecido a esa propiedad.

Una manera fácil de solucionar este problema es ajustar el color de manera que simule el color con la transparencia. Si el fondo cambiara a posteriori se deberá reajustar el valor.

HOLA rgb(255,127,127)
El color rosado simula como se vería el rojo sobre un fondo blanco con 50% de transparencia

No es la solución perfecta porque no es realmente transparente. Pero es una manerá rápida de solucionarlo sin recurrir a código de teceros.

Colores transparentes en los fondos

Una peculiaridad de Internet Explorer es que incluye varios "filtros". Éstos filtros no son parte estándar del lenguaje CSS y nunca lo será, pero los podemos aprovechar de una manera interesante para obtener resultados similiares a los de algunas características de CSS.

Con uno de estos filtros específicos de IE, podemos agregar un degradado de fondo y se incluye la notación hexadecimal para crear transparencias. El primera valor en la cadena hexadecimal es la opacidad del color, y va desde 00 (opaco) hasta ff(transparente). Esto proporciona que usando mismo valor para el incio y fin del degradado podemos agregar un fondo transparente:

/* Para CSS3 */
background-color: rgba(255,0,0,.5);
/* Para anteriores a IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorstr='#88ff0000', EndColorstr='#88ff0000');
/* Para IE8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorstr='#88ff0000', EndColorstr='#88ff0000');

Tenemos que usar el filtro dos veces: una para las versiones antiguas y otra para IE8 con el prefijo -ms que lo identifica como una extensión de Microsoft. Esto añade un fondo transparente al 50% en ambos, navegadores estánder e Internet Explorer hasta la versión 5.5.

1
2
3
Ésto se debería ver igual en todos los navegadores

Degradados en los fondos

Hemos dicho que podemos añadir degradados con los filtros de Internet Explorer, ¿podemos hacerlo con CSS3? Podemos hacerlo sin gráficos, sin PNGs transparentes, sin perder tiempo en Photoshop cada vez que queramos darle un matiz diferente al degradado y de manera compatible con Firefox, Safari y Chrome.

Usar gradienes es facil, la unica complicación viene con Internet Exporer. La W3C recientemente ha empezado a trabajar con la sintaxis de gradientes para CSS y esta cerca de ser completada Mozilla (Firefox) y Webkit (Safari) tienen su propia especificación del navegador. Estas extensiones son intenciones de dar un empuje a la industria.

Cada versión tiene su propio prefijo pero usadas en cadena obtendremos un resultado identico para todos los navegadores

/* Para WebKit */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,0,0,0.5)), to(rgba(0,0,255,.25)));
/* Para Mozilla */
background: -moz-linear-gradient(top, rgba(255,0,0,0.5), rgba(0,0,255,.25));
/* Para anteriores a IE8 */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorstr='#88ff0000', EndColorstr='#3300ff00');
/* Para IE8 */
-ms-filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorstr='#88ff0000', EndColorstr='#3300ff00');

1
2
3
Degradado vertical que funciona en Internet Explorer 5.5 o superior,
Firefox, Chrome 5+ y Safari 4+

Ésto crea un gradiente vertical lineal en la mayoría de los navegadores. La gran excepción es , que no ha introducido una sintaxis de degradado, probablemente porque sus creadores están a la espera de lo que haga la W3C.

Para cambiar la dirección del gradiente, Webkit define esquinas de inicio y final, Mozilla define el lado o la esquina donde empieza el gradiente, e IE simplemente define 0(vertical) o 1(horizontal). Así pues para hacer nuestro gradiente horizontal código quedaría así:

/* Para WebKit */
background: -webkit-gradient(linear, left top, right top, from(rgba(255,0,0,0.5)), to(rgba(0,255,0,.25)));
/* Para Mozilla */
background: -moz-linear-gradient(left, rgba(255,0,0,0.5), rgba(0,255,0,.25));
/* Para enteriores a IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorstr='#88ff0000', EndColorstr='#3300ff00');
/* Para IE8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorstr='#88ff0000', EndColorstr='#3300ff00');

1
2
3
Ejemplo de gradiente horizontal que funciona con IE, Firefox, Chrome y Safari.

Webkit y Mozilla plantean una variacion en sus gradientes muy amplia, incluyendo radiales y multicolor. La sintaxis puede ser muy compleja, pero nos detemos aquí porque IE solo soporta horizontales y verticales.

Añade color a tus diseños

Se abre una revolución en la manera de tratar el color en el diseño web. Los métodos que usabamos hasta ahora para conseguir transparencias desaparecerán. Empezaremos a ver cada vez más diseños con los elementos con el valor RGBa es su propiedad de color.

Existe una herramienta web que nos permite jugar y degradados en CSS3, disfrutadla:

http://www.colorzilla.com/gradient-editor/

Lecturas recomendadas (en inglés)

Nota: No se ha usado ninguna imagen en este documento



Comentarios permitidos sólo a usuarios registrados
Acceso
Registro

Noticias ISIT Diseño