viernes, 20 de julio de 2012

Colores transparentes

Cuando queremos que un elemento de nuestra aplicación tenga un determinado color, establecemos ese color utilizando algún código, un valor hexadecimal, un valor expresado como RGB() o una palabra que lo identifica, por ejemplo:

  • Color: #FF0000;
  • Color: rgb(255,0,0);
  • Color: rgb(100%,0%,0%);
  • Color: red;

Todas esas definiciones harán lo mismo, mostrar algo de color rojo. Es lo que se llama el modelo RGB (Red Green Blue) donde cada color está compuesto por una parte de rojo, una parte de verde y una parte de azul y las diferentes proporciones de estos componentes generan todos los colores posibles.
Pero también se le pude dar cierta transparencia a los colores, y para ello tenemos los llamados colores RGBA (Red Green Blue Alpha), el alpha cannel indica la opacidad o transparencia del color.


En GeneXus también se pueden usar éstos colores. El único detalle es que se tiene que indicar en notación Hexadecimal. Por lo tanto, continuando con el ejemplo del color rojo, sabemos que su notación en Hexadecimal es #FF0000

Y luego, para lograr transparencia debemos indicar la intensidad de la misma con el valor alpha donde:

  • FF es que no tiene transparencia
  • 80 es la mitad
  • 00 es que es total transparente

Por lo que si queremos tener un color rojo con una intensidad de transparencia media baja, debemos realizar la siguiente notación:

#FF000040

Ahora llevémoslo a un ejemplo. Se tiene una lista de Ciudades y queremos que el fondo de cada línea tenga el color indicado anteriormente, para que se pueda visualizar la imagen de fondo. Si configuramos el color rojo sin transparencia (#FF0000) veremos algo como lo siguiente:


Para lograr la transparencia, configuramos el color RGBA en las clases Odd y Even del Grid, indicando que la propiedad Background Color = #FF000040


Así, vamos a obtener el grado de transparencia deseado y la imagen de fondo estará más visible.


2 comentarios:

  1. Muy bueno !!! siempre quise saber como lograr ese efecto... gracias :)

    Aprovechando... es posible cambiar el color de la linea gris y de la fuente por la que haces break by? en este caso el País...

    ResponderEliminar
    Respuestas
    1. Para configurar el color del break by tiene que ser en el tema que estés usando para Smart Devices.
      Allí al la clase grid le asocias una clase de Group Separator y en la clase Group Separator podes configurar tanto el color de la barra como el color de la letra y de la barra en si.

      Eliminar