Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo usar el canal alpha que define la transparencia de los colores para cambiar todos los colores de un diseño modificando una sola línea de un CSS.

Recuerda que en CSS3 la opacidad de un color se puede incluir en el esquema RGB, añadiéndole un cuarto canal conocido como alpha. Este canal puede tomar valores entre 0 y 1, siendo 0 completamente transparente y 1 completamente opaco.

Aquí te muestro el típico diseño de una barra de herramientas de un sitio web compuesta por un enlace que navega a la página principal, un cuadro de texto para introducir un término a buscar y un botón etiquetado con el signo más para activar alguna opción. Lo que te voy a mostrar es cómo lograr que todo el diseño cambie, que por ejemplo, se base en un color azul, o se base en un color verde simplemente cambiando una línea del código CSS. Fíjate que no sólo cambia el color de fondo de la barra, cambia el color de todos los elementos que componen la barra de herramientas.

Además, en el código que te voy a mostrar, se ha definido un efecto para cuando el cursor del ratón se sitúe encima del enlace o reciba el foco. Ese mismo efecto también se produce en el cuadro de texto y en el botón con el signo más.

Aquí te muestro el código HTML de la página. Como puedes ver, la página es muy sencilla, se compone de un encabezado h1 y un formulario que posee el cuadro de texto y el botón. Para que lo entiendas mejor, aquí te muestro la página web sin aplicarse un CSS.

Ahora te voy a mostrar el código CSS. El cambio del color de la barra de herramientas y de todos sus componentes lo realizo simplemente cambiando esta línea. Sólo cambiando esta línea, puedo lograr que todos los colores de la barra de herramientas se ajusten al nuevo color de fondo de la misma.

¿Cómo se hace? La clave está en usar el canal alpha, donde 0 es completamente transparente y 1 completamente opaco. Por ejemplo, para los enlaces, se ha definido como color de fondo el blanco con un nivel de transparencia 0.6, es decir, más opaco que transparente. Sin embargo, para el color de fondo del cuadro de texto y del botón también se ha definido un color de fondo blanco, pero con un nivel de transparencia de 0.3, es decir, más transparente que opaco.

La diferencia la podemos apreciar en esta imagen: el color de fondo del enlace es más blanco, es decir, más opaco, que el color de fondo del cuadro de texto y del botón.

Por último, para lograr el efecto en el enlace, se ha empleado la propiedad transition para cuando se produzca un cambio en la propiedad background-color del enlace. Como vemos aquí, se produce un cambio de la propiedad background-color con las pseudoclases hover y focus aplicadas al enlace.

Para lograr el efecto en el cuadro de texto y en el botón con el signo más, se ha empleado otra vez la propiedad transition para cuando se produzca un cambio en la propiedad background-color del cuadro de texto y del botón. El cambio en esta propiedad se produce con las pseudoclases hover y focus, es decir, cuando el cursor del ratón se sitúa encima del elemento o cuando el elemento recibe el foco del teclado.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.