Alfa, currentColor y opacity
En esta lección trabajás con tres herramientas para controlar la transparencia y la coherencia del color: el canal alfa de rgba(), la keyword currentColor, y la propiedad opacity.
Canal alfa — rgba()
rgba() agrega un cuarto valor al rgb(): el canal alfa, que controla la opacidad de ese color específico. Va de 0 (totalmente transparente) a 1 (totalmente opaco):
.overlay { background-color: rgba(0, 0, 0, 0.5); } /* negro al 50% */
.tarjeta { background-color: rgba(37, 99, 235, 0.15); } /* azul muy tenue */
.badge { background-color: rgba(220, 38, 38, 0.8); } /* rojo casi opaco */El canal alfa afecta solo ese color de esa propiedad — el resto del elemento queda intacto.
currentColor — heredar el valor de color
currentColor es una keyword especial que toma el valor de la propiedad color del elemento:
.boton {
color: teal;
border: 2px solid currentColor; /* el borde toma el color del texto: teal */
}El caso de uso principal es mantener coherencia visual sin repetir el valor:
/* Cuando el estado cambia, el borde cambia automáticamente con el texto */
.enlace { color: navy; }
.enlace:hover { color: teal; }
/* border-color: currentColor siempre coincide — sin repetir el valor en cada estado */Qué computa currentColor: el navegador lo resuelve al valor computado de color en el momento de aplicarlo. En getComputedStyle, border-color muestra el rgb(...) resultante, no la cadena literal "currentColor".
Para que
currentColorsea predecible en los ejercicios, siempre fijarcolorexplícitamente en el elemento target. Sincolorpropio,currentColordepende del color heredado del padre (que puede variar).
opacity — opacidad de todo el elemento
opacity controla la transparencia de todo el elemento: contenido, padding, borde e hijos incluidos:
.tarjeta-disabled { opacity: 0.4; } /* todo el elemento al 40% */
.oculto { opacity: 0; } /* invisible — pero sigue ocupando espacio */Rango: 0 (completamente transparente) a 1 (completamente opaco). Valor inicial: 1.
La distinción central: opacity vs canal alfa de rgba()
Esta es la diferencia más importante de la lección:
Canal alfa de rgba() | opacity | |
|---|---|---|
| Afecta | Solo ese color de esa propiedad | Todo el elemento (contenido, hijos, borde, fondo) |
| Hijos | No se ven afectados | Sí — los hijos también quedan semitransparentes |
| Uso típico | Fondo semitransparente con texto opaco | Elemento entero desvanecido (loading, disabled) |
/* rgba — solo el fondo es semitransparente; el texto queda opaco */
.banner {
background-color: rgba(37, 99, 235, 0.15); /* fondo azul tenue */
color: rgb(30, 30, 30); /* texto completamente opaco */
}
/* opacity — fondo Y texto quedan semitransparentes */
.tarjeta-disabled {
opacity: 0.35; /* todo el elemento al 35% */
}Podés ver la diferencia en el ejercicio: .banner muestra texto opaco sobre un fondo tenue; .tarjeta-deshabilitada tiene todo su contenido atenuado.
Una nota sobre contraste y accesibilidad
Al usar colores tenues o opacity baja, asegurate de que el contraste entre texto y fondo siga siendo suficiente para leer el contenido. WCAG define ratios mínimos de contraste — el módulo de accesibilidad lo cubre en detalle.
Nota del validador: el motor compara el efecto computado, no el texto. Si escribís
border-color: currentColoro directamenteborder-color: teal, el check deborder-colorpasa igual — ambas producen el mismorgb(0, 128, 128). El valor decurrentColorestá en que el borde se actualiza automáticamente cuando cambiáscolor.
Tu turno: completá las tres tareas y verificá con “Comprobar”. Observá en el preview la diferencia entre el texto opaco del .banner y el elemento completo atenuado de .tarjeta-deshabilitada.
Transparencia y coherencia de color en Tienda Nómade
Tres herramientas para controlar visibilidad y coherencia de color: **1.** `.banner`: `background-color: rgba(37, 99, 235, 0.15)` — fondo azul tenue (alfa = 0.15, casi transparente). El texto dentro del banner queda completamente opaco. **2.** `.boton`: ya tiene `color: teal` en el starter. Agregá `border: 2px solid currentColor` — el borde usará el mismo color que el texto (teal), automáticamente. **3.** `.tarjeta-deshabilitada`: `opacity: 0.35` — el elemento completo (fondo, texto, hijos) queda al 35% de visibilidad. **Diferencia clave:** en la tarea 1, el texto dentro de `.banner` permanece opaco (el alfa afectó solo el fondo). En la tarea 3, TODO lo que hay dentro de `.tarjeta-deshabilitada` se atenúa igual.
Preview