Una de las cosas que realmente me interesan de CSS es la nueva función de modificación de color. Nos dará la posibilidad de realizar manipulaciones de color directamente en el navegador. Por ejemplo, al pasar el cursor sobre un botón, puede cambiar el color con algo como color: color(black darkness(50%));, sin el uso de ningún preprocesador CSS como Sass.
Pero como el soporte de estas funciones de color CSS es cero hoy en día, podemos usar temporalmente PostCSS y compilarlos como colores regulares. O podemos experimentar y descubrir el poder de CSS rgba() funciones de color para cambiar colores sobre la marcha! Veamos cómo podemos usarlo.
Cómo funciona
En una aplicación de diseño, cuando colocamos cuadros en blanco y negro sobre un cuadro más grande con un color de fondo azul (como en el ejemplo), el resultado será un azul más claro y más oscuro, respectivamente.
Eso es porque al disminuir la opacidad, los colores se mezclarán en función de si es blanco o negro. ¿Puede esperar lo que sucederá si cambiamos el fondo azul a verde? ¡Lo adivinaste!
Como puede ver, al cambiar el color de fondo a verde, los cuadros pequeños se ven diferentes ahora. Tenemos verde claro y oscuro. También podemos cambiar el valor de opacidad para elegir un color más oscuro o más claro. Trabajemos con esta premisa básica para sumergirnos en algunos ejemplos del mundo real.
Aplicando el concepto
Para mantener el ejemplo anterior conciso, jugamos con la opacidad. En nuestro diseño real, necesitaremos usar rgba() valor alfa.
.header {
background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}Usaremos el fondo en lugar de la opacidad aquí porque si usamos el valor de opacidad, todos los elementos secundarios se verán afectados, que no es lo que queremos lograr. Si usamos el canal alfa de la propiedad de fondo, estamos seguros de que solo actualizaremos el elemento que nos gustaría cambiar.
Nota: en las demostraciones usaremos Sass rgba() función para hacer las cosas más rápido. Por ejemplo:
.elem {
background: rgba(white, 0.5);
}será traducido a:
.elem {
background: rgba(255, 255, 255, 0.5);
}Crear un tema para el encabezado de un sitio web
El primer caso de uso para rgba() es el tema de un encabezado de aplicación web. En Trello están usando un color de fondo con rgba() para los elementos secundarios del encabezado (logotipo, entrada de búsqueda, botones):
.search {
background: rgba(255, 255, 255, 0.5); /* White with 50% alpha */
}
Con eso en su lugar, tendremos la capacidad de cambiar el tema del encabezado solo cambiando su fondo, y luego los elementos secundarios también cambiarán.
En nuestro ejemplo, haremos algo similar al encabezado de Trello y jugaremos con el fondo de las herramientas de desarrollo.
Observe cómo el color de fondo de los elementos secundarios es diferente en los 2 encabezados. Si queremos inspeccionar el elemento y cambiar el fondo principal, podemos crear un tema para nuestro encabezado muy fácilmente.
Consulte el encabezado del lápiz de Ahmad Shadeed (@shadeed) en CodePen.
Encabezado del artículo
En este ejemplo, usando rgba() será beneficioso para:
- Bordes en los bordes superior e inferior.
- Color de fondo para el contenedor centrado.
- Color de fondo para el enlace de categoría.
.parent {
background: #5aaf4c; /* parent background */
box-shadow:
inset 0 8px 0 0 rgba(255, 255, 255, 0.5),
inset 0 -8px 0 0 rgba(255, 255, 255, 0.5); /* top and bottom borders */
}
.contain {
background: rgba(0, 0, 0, 0.1);
}
.category {
background: rgba(255, 255, 255, 0.5);
}Consulte el encabezado del artículo de Pen por Ahmad Shadeed (@shadeed) en CodePen.
Botones
Al tematizar botones, podemos usar rgba() para hacer los efectos de desplazamiento y enfoque para cosas como bordes, sombras.
.button {
background: #026aa7;
box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
}
.button:hover {
box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.6), 0 0 8px 0 rgba(0, 0, 0, 0.5);
}
.button:focus {
box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}Vea los botones de lápiz de Ahmad Shadeed (@shadeed) en CodePen.
Gradientes
Otro caso de uso útil es agregar el fondo como un color sólido y luego usar un pseudo elemento con un rgba() colores para el color degradado se detiene.
.elem {
background: green;
}
.elem:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7));
}Esto también nos dará la capacidad de animar los degradados cambiando solo el color de fondo.
.elem {
/* other styles */
animation: bg 2s ease-out alternate infinite;
}
@keyframes bg
to {
background: green;
}
}Vea los degradados de lápiz de Ahmad Shadeed (@shadeed) en CodePen.
Elemento secundario
Si tenemos una lista de navegación dentro de un elemento de encabezado, podemos agregar un color de fondo con rgba() a la navegación. Esto hará que el fondo sea un poco transparente y se combinará con el fondo principal.
Vea el elemento Pen Sub de Ahmad Shadeed (@shadeed) en CodePen.
Y lo mismo podría usarse para hacer efectos dinámicos de desplazamiento:
Vea el efecto Pen Hover de Ahmad Shadeed (@shadeed) en CodePen.
Variaciones oscuras / claras de una paleta de colores
Podemos utilizar este concepto para generar diferentes tonos de una paleta de colores específica colocando un pseudo elemento en cada cuadro de color con un rgba() valor.
Vea la paleta de colores de la pluma de Ahmad Shadeed (@shadeed) en CodePen.
Efectos de imagen
Si queremos hacer una imagen más oscura o más clara, podemos usar un pseudo elemento con rgba() antecedentes.
Al usar un fondo de color, podemos crear un efecto de tinte de color. Aparte de eso, podemos usar mix-blend-mode propiedad para mezclar el fondo con la imagen para que podamos obtener diferentes resultados.
Es importante verificar las tablas de soporte antes de usar mix-blend-mode:
.elem:before {
background: rgba(0, 0, 0, 1);
mix-blend-mode: color;
}Si mix-blend-mode no es compatible, la imagen será negra y el usuario no la obtendrá. Es mejor trabajar en efectos como una mejora, pero no dependa de ellos. Para hacerlo, puede utilizar @support o Modernizr.
@supports (mix-blend-mode: color) {
/* your enhanced styles go there */
}Vea las imágenes de la pluma de Ahmad Shadeed (@shadeed) en CodePen.
Tematización con variables CSS
Al usar variables CSS (propiedades personalizadas) para los elementos principales, cuando se cambia la variable, todos los elementos secundarios se verán afectados. Por ejemplo:
:root {
--brand-color: #026aa7;
}
/* Checking for the support of CSS Variables */
@supports (--color: red) {
.elem {
background: var(--brand-color);
}
}var colors = ["#026aa7", "#5aaf4c", "#00bcd4", "#af4c4c"];
var colorOptions = document.querySelectorAll(".option");
var colorLabels = document.querySelectorAll(".option + label");
for (var i = 0; i < colorOptions.length; i++) {
/* Add an event listener to each radio button */
colorOptions[i].addEventListener('click', changeColor);
/* Add a value to each radio button based on colors[] array */
colorOptions[i].value = colors[i];
colorLabels[i].style.background = colors[i];
}
function changeColor(e) {
/* calling the root element and set the value of a specific property. In our case: --brand-color */
document.documentElement.style.setProperty('--brand-color', e.target.value);
}Combinando variables CSS y rgba(), podemos hacer que nuestros diseños y colores sean un poco más dinámicos sin tener que volver a definir un nuevo color para cada elemento.
Consulte el encabezado del lápiz: variables CSS de Ahmad Shadeed (@shadeed) en CodePen.
Cosas a tener en cuenta
Color de respaldo
Aunque la compatibilidad global para los colores CSS es del 97,39%, es importante proporcionar un respaldo para los navegadores no compatibles.
.elem {
background: #fff;
background: rgba(255, 255, 255, 0.5); /* non supporting browsers will ignore this declaration */
}Verificación de contraste de color
Debemos asegurarnos de que el contraste entre elementos cumpla con las pautas de accesibilidad. A veces, usando rgba() puede resultar en un color deficiente que es muy difícil de leer. Puede utilizar herramientas como la verificación de contraste de Lea Verou para ayudar a determinar si los colores cumplen con los estándares de accesibilidad.