16B - Palabras clave de color 🎨

 

---

16B - Palabras clave de color 🎨

En CSS, no solo puedes usar nombres de colores o códigos hexadecimales, sino que también existen palabras clave especiales que te permiten definir el color de una manera más dinámica y contextual. Las tres más importantes son transparent, currentcolor e inherit.

1. La palabra clave `transparent`

Como su nombre lo indica, esta palabra clave se usa para hacer que un elemento sea completamente invisible. Es el valor inicial para la propiedad background-color.

http://googleusercontent.com/image_generation_content/0

.caja {
  background-color: transparent;
  border: 2px solid green;
}

Cuando se aplica a un elemento, su color de fondo no se renderiza, permitiendo que se vea lo que está detrás.

2. La palabra clave `currentcolor`

Esta palabra clave es muy útil. Su valor es el color actual de la propiedad color de un elemento. En otras palabras, toma el color del texto y lo aplica a otra propiedad, como un borde o un fondo, sin necesidad de repetir el valor. Esto es ideal para mantener la consistencia del diseño.

Texto y borde del mismo color.

.icono-con-borde {
  color: #39a039; /* Establece el color del texto a verde */
  border: 2px solid currentcolor; /* El borde también será verde */
}

Usar currentcolor hace que el código sea más modular. Si cambias el color del texto, el color del borde se actualizará automáticamente.

3. La palabra clave `inherit`

La palabra clave inherit le dice a un elemento que herede el valor de la propiedad de su elemento padre. Es un concepto fundamental en la cascada de CSS.

http://googleusercontent.com/image_generation_content/1

.padre {
  background-color: #f0f8ff; /* Color de fondo azul claro */
}

.hijo {
  background-color: inherit; /* El hijo hereda el color de fondo del padre */
}

La mayoría de las propiedades de color (como color, background-color, etc.) no heredan su valor por defecto, por lo que inherit es la forma explícita de forzar la herencia. Esto te ayuda a crear un diseño más consistente y fácil de mantener.

   

     

        Ejemplos Visuales      

   

   
   

      `transparent`    

`currentcolor`

Este texto tiene el mismo color que el borde.

`inherit`

Este es el elemento padre con un fondo azul claro.

Este es el elemento hijo con un fondo heredado del padre.

---

Ir al índice