Establece el color con el que se muestra el texto contenido en un elemento. El color de la letra no puede ser transparente, ya que se debe indicar explícitamente un color mediante cualquiera de las diferentes formas de indicar un color en CSS.

Sintaxis de JavaScript: object.style.color="#0000FF"

Sintaxis CSS: color: color | initial | inherit;

Posibles valores:

• color - Especifica el color del texto. Nombre del color (inglés) | #xxxxxx
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div class="ejemplo">
    <h2>Propiedad CSS color: #000000</h2>
</div>

.ejemplo{
    color: 
        #000000
        #0000ff
        #00ff00
        #fdcf02
        red
        hotpink
        purple
        rgb(255, 165, 0)
        rgb(0, 255, 0)
        rgb(0, 247, 255)
    ;
}

La propiedad de filter define efectos visuales (como desenfoque y saturación) en un elemento (a menudo ).

Valor por defecto: none

Sintaxis de JavaScript: object.style.filter="grayscale(100%)"

Sintaxis: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Sugerencia: Para utilizar varios filtros, separe cada filtro con un espacio

Funciones de filter:

Nota: Los filtros que usan valores porcentuales (es decir, 75%), también aceptan el valor como decimal (es decir, 0,75).

• none - Valor por defecto. Especifica ningún efecto.
• blur(px) - Aplica un efecto borroso a la imagen.
  • Un valor mayor creará más desenfoque.
  • Si no se especifica ningún valor, se utiliza 0.
• brightness(%) - Ajusta el brillo de la imagen.
  • 0% hará que la imagen sea completamente negra.
  • 100% (1) es el valor predeterminado y representa la imagen original.
  • Los valores superiores al 100% proporcionarán resultados más brillantes.
• contrast(%) - Ajusta el contraste de la imagen.
  • 0% hará que la imagen sea completamente negra.
  • 100% (1) es el valor predeterminado y representa la imagen original.
  • Los valores superiores al 100% proporcionarán resultados con menos contraste.
• drop-shadow(h-shadow v-shadow blur spread color) - Aplica un efecto de sombra a la imagen.
  • Valores posibles:
    • h-shadow - Necesario. Especifica un valor de píxel para la sombra horizontal. Los valores negativos colocan la sombra a la izquierda de la imagen.
    • v-shadow - Obligatorio. Especifica un valor de píxel para la sombra vertical. Los valores negativos colocan la sombra sobre la imagen.
    • blur - Opcional. Este es el tercer valor, y debe estar en píxeles. Agrega un efecto borroso a la sombra. Un valor mayor creará más desenfoque (la sombra se hace más grande y más clara). No se permiten valores negativos. Si no se especifica ningún valor, se utiliza 0 (el borde de la sombra es agudo).
    • spread - Opcional. Este es el cuarto valor, y debe estar en píxeles. Los valores positivos harán que la sombra se expanda y crezca, y los valores negativos harán que la sombra se contraiga. Si no se especifica, será 0 (la sombra será del mismo tamaño que el elemento).
      Nota: Chrome, Safari y Opera, y tal vez otros navegadores, no admiten esta cuarta longitud; No se procesará si se agrega.
    • color - Opcional. Añade un color a la sombra. Si no se especifica, el color depende del navegador (a menudo negro).
  • Sugerencia: Este filtro es similar a la propiedad de box-shadow.
• grayscale(%) - Convierte la imagen a escala de grises.
  • 0% (0) es el valor predeterminado y representa la imagen original.
  • 100% hará que la imagen sea completamente gris (se utiliza para imágenes en blanco y negro).
  • Nota: No se permiten valores negativos.
• hue-rotate(deg) - Aplica una rotación de matiz en la imagen. El valor define el número de grados alrededor del círculo de color que se ajustarán las muestras de imagen.
  • 0deg es el valor predeterminado y representa la imagen original.
  • El valor máximo es 360deg.
• invert(%) - Invertir las muestras en la imagen.
  • 0% (0) es el valor predeterminado y representa la imagen original.
  • 100% hará la imagen completamente invertida.
  • No se permiten valores negativos.
• opacity(%) - Establece el nivel de opacidad para la imagen. El nivel de opacidad describe el nivel de transparencia, donde:
  • 0% es completamente transparente.
  • 100% (1) es el valor predeterminado y representa la imagen original (sin transparencia).
    Nota: No se permiten valores negativos.
    Sugerencia: Este filtro es similar a la propiedad de opacity.
• saturate(%) - Satura la imagen.
  • 0% (0) hará que la imagen sea completamente no saturada.
  • 100% es el valor predeterminado y representa la imagen original.
    Los valores superiores al 100% proporcionan resultados super saturados.
    Nota: No se permiten valores negativos.
• sepia(%) - Convierte la imagen en sepia.
  • 0% (0) es el valor predeterminado y representa la imagen original.
  • 100% hará la imagen completamente sepia.
    Nota: No se permiten valores negativos.
• url() - La función url () toma la ubicación de un archivo XML que especifica un filtro SVG y puede incluir un ancla a un elemento de filtro específico.
  • Ejemplo:
    filter: url(svg-url#element-id)
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <img src="URL-IMAGEN">
</div>

img {
    -webkit-filter: none; /* Safari 6.0 - 9.0 */
    filter: 
        none
        blur(5px)
        brightness(200%)
        contrast(200%)
        drop-shadow(8px 8px 10px red)
        grayscale(100%)
        hue-rotate(90deg)
        invert(100%)
        opacity(30%)
        saturate(8)
        sepia(100%)
        contrast(200%) brightness(150%)
        initial
    
}

La propiedad opacity establece el nivel de opacidad para un elemento.

El nivel de opacidad describe el nivel de transparencia, donde 1 no es transparente en absoluto, 0,5 es 50% de transparencia y 0 es completamente transparente.

Nota: Cuando se utiliza la propiedad opacity para añadir transparencia al fondo de un elemento, todos sus elementos secundarios también se vuelven transparentes. Esto puede hacer que el texto dentro de un elemento completamente transparente sea difícil de leer. Si no desea aplicar opacidad a elementos secundarios, utilice valores de color RGBA en su lugar.

Valor por defecto: 1

Sintaxis de JavaScript: object.style.opacity="0.5"

Sintaxis CSS: opacity: number | initial | inherit;

Posibles valores:

• number - Especifica la opacidad. Desde 0,0 (totalmente transparente) hasta 1,0 (completamente opaco).
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div class="ejm-opacity">
    <h2>Propiedad opacity</h2>
    <p>Cambiar la opacidad de myDIV.</p>
    <img src="img/gen/AtardecerDelta.jpg" width="136" height="100" alt="AtardecerDelta"/>
</div>

.ejm-opacity {
    text-align:center;
    opacity: 
        1
        0.9
        0.8
        0.7
        0.6
        0.5
        0.4
        0.3
        0.2
        0.1
        0
        initial
    
}