Ordenar hojas de estilo CSS con lintingNoticias 

Colores RGBA en CSS 3

Colores RGBA en CSS 3

Veremos qué son los colores RGBA y su notación, que se incluyen en la especificación de Hojas de Estilo en Cascada CSS 3.

Como sabemos, los colores en HTML se expresan en valores RGB, igual que en CSS, que admite diversas notaciones para definir el color, a través de números en hexadecimal e incluso en decimal. Todo esto suponemos no será un misterio para los lectores, que sin duda habrán experimentado con CSS y probablemente estén familiarizados con las distintas notaciones para especificar color en las hojas de estilo.

Ahora queremos hablar de una nueva notación, que no es simplemente una manera nueva de expresar lo mismo, sino una que nos permite definir colores por medio de valores adicionales. Se trata de la notación RGBA, que a partir de CSS 3 está disponible para los desarrolladores.

La notación RGBA es una manera de especificar colores en la que se definen cuatro valores. Los tres primeros son los bien conocidos canales RGB (rojo, verde y azul) y el cuarto parámetro es el canal Alpha, que no es más que el grado de transparencia u opacidad del color. El canal Alpha es un valor entre cero y uno, siendo 0 totalmente transparente y 1 totalmente opaco.

En el mundo del diseño quizás ya habremos visto otros formatos o sistemas que soportan colores con canal Alpha y por ello puede que estemos familiarizados con este parámetro. El formato de imagen PNG, que tanto nos gusta por soportar transparencia que se ve correctamente en todos los fondos posibles, implementa justamente este canal alpha en la definición del color para conseguir una transparencia ideal.

Ahora, por medio de los colores en RGBA en CSS 3, podremos aplicar nuevas transparencias a los colores que especificamos con CSS, abriendo nuevas posibilidades a los diseñadores sin necesidad de complicarse con pequeños trucos como el uso de imágenes de fondo semitransparentes en PNG, etc. Además, como los colores RGBA se pueden aplicar a cualquier elemento que soporte asignación de color, las aplicaciones aumentan todavía más. El único pero, al menos a la hora de escribir este artículo, es que CSS 3 no está ampliamente soportado por todos los navegadores. Por ejemplo Internet Explorer 8 no lo soporta por el momento.

Notación de color RGBA

Para definir un color RGBA, se deben especificar cuatro valores, de la siguiente manera:

rgba(255, 125, 0, 0.5);

Los tres primeros valores son números en sistema decimal, que corresponden con los valores de rojo, verde y azul. Siempre tienen que ser números entre 0 y 255.

El cuarto valor es un número entre 0 y 1. Por ejemplo 0 sería totalmente transparente, 1 sería totalmente opaco y 0.5 sería una transparencia al 50%, es decir, mitad opaco mitad transparente.

Ejemplos de estilos CSS con colores definidos por RGBA

Ahora veamos varios ejemplos de colores definidos con CSS y la notación RGBA.

<div style=”background-color: rgba(0, 0, 255, 0.1);”>Esta capa tiene fondo azul, casi transparente</div>

<span style=”color: rgba(0,255,0,0.8);”>Este texto es verde y tiene un poco de transparencia</span>

Código de ejemplo:

<html>
<head>
   <title>Colores RGBA con CSS 3</title>
<style type=”text/css”>
div.cuadrado{
   width: 150px;
   height: 40px;
   border: 1px solid #dddddd;
   margin: 5px;
}
div.textogrande{
   font-family: verdana, arial, helvetica; 
   font-weight: bold; 
   font-size: 40pt;
}
</style>
</head>

<body>
<h1>Colores RGBA con CSS 3</h1>

<h2>Ejemplo de capas con fondo azul y varias transparencias</h2>
<div class=”cuadrado” style=”background-color: rgba(0, 0, 255, 0.1);”></div>
<div class=”cuadrado” style=”background-color: rgba(0, 0, 255, 0.4);”></div>
<div class=”cuadrado” style=”background-color: rgba(0, 0, 255, 0.7);”></div>
<div class=”cuadrado” style=”background-color: rgba(0, 0, 255, 1);”></div>

<h2>Ejemplo de capas con fondo verde y varias transparencias, sobre una capa con fondo amarillo</h2>
<div style=”background-color: #ff3; padding: 10px;”>
<div class=”cuadrado” style=”background-color: rgba(0, 255, 0, 0.1);”></div>
<div class=”cuadrado” style=”background-color: rgba(0, 255, 0, 0.4);”></div>
<div class=”cuadrado” style=”background-color: rgba(0, 255, 0, 0.7);”></div>
<div class=”cuadrado” style=”background-color: rgba(0, 255, 0, 1);”></div>
</div>

<h2>Ejemplo de capas con fondo naranja y varias transparencias, sobre una capa con una imagen de fondo</h2>
<div style=”background-image: url(https://www.desarrolloweb.com/articulos/ejemplos/photoshop/fondo-nieve/nieve.gif); padding: 10px;”>
<div class=”cuadrado” style=”background-color: rgba(255, 125, 0, 0.1);”></div>
<div class=”cuadrado” style=”background-color: rgba(255, 125, 0, 0.4);”></div>
<div class=”cuadrado” style=”background-color: rgba(255, 125, 0, 0.7);”></div>
<div class=”cuadrado” style=”background-color: rgba(255, 125, 0, 1);”></div>
</div>

<h2>Ejemplo de texto de color rojo y varias transparencias, sobre una capa con una imagen de fondo</h2>
<div style=”background-image: url(https://www.desarrolloweb.com/articulos/ejemplos/photoshop/fondo-nieve/nieve.gif); padding: 10px;”>
<div class=”textogrande” style=”color: rgba(200, 0, 0, 0.3);”>Este texto está para que se vea que puede ser también medio transparente</div>
<div class=”textogrande” style=”color: rgba(200, 0, 0, 0.7);”>Este texto está para que se vea que puede ser también medio transparente</div>
</div>

</body>
</html>


 

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Entradas relacionadas