Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

CSS3 VII

Transparencias

Colores transparentes: rgba

Una de las maneras de definir los colores en CSS es RGB. En RGB el color lo definimos de la siguiente manera:

color: rgb(255, 0, 0)

Donde cada uno de los tres números representa el grado de presencia de los tres colores básicos: rojo, verde y azul. Los valores de cada color van desde el 0 al 255.

Basándose en este sistema de definir colores, se crean los colores RGBA, para ello se añade un cuarto número, llamado canal alfa, y que indica el grado de transparencia del color.

Los valores del canal alfa son números decimales del 0 al 1, siendo el 0 la transparencia total y el 1 la opacidad total. Para hacer ejemplo anterior semitransparente escribiremos:

color: rgba(255, 0, 0, 0.5);

Los colores semitransparentes dejan entrever, según su grado de opacidad, los elementos que tienen debajo. El sistema de colores RGBA está disponible ya en las últimas versiones de los principales navegadores excepto en Internet Explorer. Puedes ver un ejemplo, con su código fuente en el siguiente enlace:

Colores semitransparentes RGBA


Colores HSL.

En CSS3 hay una nueva forma de definir los colores, la cual ya se usa en otros programas de dibujo o de tratamiento de imágenes, es los colores HSL, Hay tres factores que intervienen para definir el color: matiz, saturación, y luminosidad.

Para saber más sobre el color en HSL consultar en Wikipedia: Modelo de color HSV

Estos serían los colores básicos en el modelo HSL:

Rojo : color: hsl(0, 100%, 50%);

Verde : color: hsl(120, 100%, 50%);

Azul : color: hsl(240, 100%, 50%);

Navegadores: los colores HSL pueden usarse ya en las versiones más recientes de los navegadores Firefox, Safari, Chrome y Opera. Internet Explorer no acepta esta nomenclatura.

Colores HSLA

A la forma anterior de definir los colores se le añade el canal alfa o transparencia, con lo que tenemos los colores en HSLA. La forma de definir los colores es igual que para HSL, pero añadiendole un nuevo número, que define el grado de transparencia.

Como en los colores RGBA, el grado de transparencia se define mediante un número decimal del 0 al 1, donde 0 será la transparencia total, y el 1 la opacidad total.

Estos serían los colores básicos en el modelo HSLA en modo semitransparente:

Rojo : color: hsla(0, 100%, 50%, 0.5);

Verde : color: hsla(120, 100%, 50%, 0.5);

Azul : color: hsla(240, 100%, 50%, 0.5);

Los colores en HSLA están disponibles en las últimas veriones de los navegadores Firefox, Safari, Chrome y Opera. Internet Explorer no acepta este sistema de colores.

En el siguiente enlace vemos un ejemplo en el que usamos colores en HSLA, y su código fuente:

Colores semitransparentes HSLA

Transparencia en elementos.

Podemos conseguir que cualquier elemento tenga también un cierto grado de transparencia. Para ello CSS3 incluye la propiedad opacity. Esta propiedad tiene un único valor que será un número decimal entre 0.0 (transparencia total) y 1.0 (opacidad total). Correspondiendo el 0.5 a un elemento semitransparente. Los valores son los mismos que para el canal alfa de colores.

#capa1 {opacity: 0.5}

Los navegadores Firefox, Safari, Chrome y Opera aceptan desde hace algun tiempo esta propiedad.

Internet Explorer no acepta esta propiedad, sin embargo tiene unos mecanismos llamados filtros, que funcionan como propiedades CSS. En la página anterior ya hemos usado alguno de ellos para crear sombras, y hemos visto cómo funcionan. El filtro "alpha" permite dar transparencia a cualquier elemento en Internet Explorer. su sintaxis es la siguiente:

filter: alpha(opacity=50)

Donde el valor de "opacity" es un número comprendido entre el 0 (transparencia total) y el 100 (opacidad total).

Combinando la propiedad opacity y el filtro "alpha", podemos hacer que un elemento se vea con transparencia en prácticamente la mayoría de los navegadores.

#capa1 {opacity: 0.5; filter: alpha(opacity=50)}

Cada navegador interpertará el código que acepta, ignorando el resto.






En la siguiente página veremos otra novedad de CSS3: poder dividir un texto en columnas.

Múltiples columnas



Manual CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo