Día 85: CSS Color Keywords

Día 85: CSS Color Keywords

La ruta del desarrollador web frontend autónomo🤹‍♂️


Esta página explicará las palabras clave transparent, currentcolor y inherit.


La palabra clave transparent

La palabra clave transparent se utiliza para hacer que un color sea transparente. Esto se usa a menudo para hacer un color de fondo transparente para un elemento.

Ejemplo:

Aquí, el color de fondo del elemento <div> será totalmente transparente y la imagen de fondo se mostrará:

body {
  background-image: url("paper.gif");
}

div {
  background-color: transparent;
}

Ver ejemplo

Nota: La palabra clave transparent es equivalente a rgba(0,0,0,0). Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad de un color.


La palabra clave currentcolor

La palabra clave currentcolor es como una variable que contiene el valor actual de la propiedad de color de un elemento.

Esta palabra clave puede ser útil si desea que un color específico sea consistente en un elemento o una página.

Ejemplo:

En este ejemplo, el color del borde del elemento <div> será azul, porque el color del texto del elemento <div> es azul:

div {
  color: blue;
  border: 10px solid currentcolor;
}

Ver ejemplo


Ejemplo:

En este ejemplo, el color de fondo del elemento <div> se establece en el valor de color actual del elemento body:

body {
  color: purple;
}

div {
  background-color: currentcolor;
}

Ver ejemplo


Ejemplo:

En este ejemplo, el color del borde y el color de la sombra de <div> se establecen en el valor de color actual del elemento body:

body {
 color: green;
}

div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

Ver ejemplo


La palabra clave inherit

La palabra clave inherit especifica que una propiedad debe heredar su valor de su elemento principal.

La palabra clave inherit se puede utilizar para cualquier propiedad CSS y en cualquier elemento HTML.

Ejemplo:

En este ejemplo, la configuración del borde del elemento <span> heredará del elemento principal:

div {
  border: 2px solid red;
}

span {
  border: inherit;
}

Ver ejemplo


Resumen

La palabra clave transparent se utiliza para hacer que un color sea transparente, currentcolor es como una variable que contiene el valor actual de la propiedad de color de un elemento y inherit especifica que una propiedad debe heredar su valor de su elemento principal. Estas palabras clave se pueden utilizar en cualquier propiedad CSS y en cualquier elemento HTML.


Traducido con 💚 desde W3Schools.com

Did you find this article valuable?

Support Santos Romero by becoming a sponsor. Any amount is appreciated!