Editando Imágenes en CSS: Filtros

() translation by (you can also view the original English article)

Considere una situación en donde usted tiene alto contraste, una versión borrosa o brillante de imágenes en particular en su sitio web. Previo a los filtros CSS, usted solamente contaba con las opciones ya sea de subir una imagen en diferentes versiones de estas imágenes o manipular las imágenes con JavaScript.

Salvo que quiera manipular los pixeles en la imagen original, los filtros CSS ofrecen una manera fácil de solucionarlo. Comencemos este tutorial con una breve discusión de todos los filtros que tenemos disponibles.

Filtro Blur

Este filtro aplica un desenfoque Gaussiano a sus imágenes. Tendrá que proporcionar un valor de longitud, el cual determinará cuántos pixeles necesitan combinarse entre si. Esto implica que valores grandes proporcionarán una imagen más borrosa. Tenga en cuenta que no puede usar porcentajes para determinar el radio de desenfoque. Si no específica un parámetro, entonces el valor usado es 0. La sintaxis adecuada para usar este filtro es:

1	filter: blur( <length> )

El filtro blur() no acepta valores negativos.

Filtro Brightness

Este filtro aplica un reproductor lineal a sus imágenes, haciéndolas más brillantes o más tenues en comparación al original. Este filtro acepta un número, así como también valores en porcentajes. A 0% conseguirá una imagen completamente negra. Al 100% conseguirá la imagen original sin ningún cambio. Valores más altos darán como resultado imágenes más brillantes. Un valor bastante alto volverá la imagen más blanca. La sintaxis apropiada para usar este filtro es:

1	filter : brightness( [ <number> \| <percentage> ] )

Este filtro, tampoco acepta ningún valor negativo.

Filtro Constrast

Este filtro cambia el contraste de sus imágenes. Tal como el filtro brillo, éste acepta un número, así como también valores en porcentajes. Un valor de 0% dará como resultado una imagen totalmente gris. Al ajustar el valor a 100% no tendrá ningún efecto. Los valores más altos que 100%, producirán imágenes con alto contraste. No tiene permitido usar valores negativos con el filtro contrast(). La sintaxis apropiada para usar este filtro es:

1	filter : contrast( [ <number> \| <percentage> ] )

Filtro Drop-Shadow

Casi todos ustedes podría haber usado sombras paralelas al menos una vez. El problema con las sombras paralelas es que son muy cuadradas. No puede usarlas para crear sombras de formas irregulares. Por otra parte, el filtro drop-shadow crea sombras alrededor de los límites de una imagen. Es, básicamente, una versión desenfocada de la máscara alfa de la imagen de entrada. La sintaxis apropiada para usar drop-shadow es:

1	filter : drop-shadow( <length>{2,3} <color>? )

Los primeros dos valores son necesarios, ya que ajustan el desplazamiento vertical y horizontal de la sombra. El tercer valor <blur-radios> es opcional. Un valor más grande creará una sombra más clara. La siguiente demostración, muestra este filtro en acción. Si usted mantiene el cursos sobre el pinguino, verá que el color de la sombra cambiará desde anaranjado hasta rojo.

Filtro Grayscale

Este filtro convertirá sus imágenes en escala de grises. Un valor del 0% dejará la imagen sin cambio, mientras que un valor 100% hará la imagen completamente gris. Cualquier valor entre estos dos efectos será un multiplicador lineal de este método. Usted no puede usar valores negativos con el filtro grayscale(). La sintaxis apropiada para usar este filtro es:

1	filter : grayscale( [ <number> \| <percentage> ] )

Filtro Hue-Rotate

Este filtro aplica una rotación de tono en sus imágenes. El parámetro (pasado como un ángulo) determinará el número de grados alrededor del círculo de color de las imágenes que serán ajustados. Con un valor de 0deg, la imagen final estará sin cambios. Si usted especifica un valor más allá de 360deg, entonces el filtro solamente se enrollará. La sintaxis apropiada para usar este filtro es:

1	filter : hue-rotate( <angle> )

Filtro Invert

Este filtro invertirá su imagen. La cantidad de inversión depende del valor del parámetro que usted pasa. Una inversión del 0% no tendrá ningún efecto sobre la imagen. Por otra parte, un valor de 100% completamente invertirá la imagen. Un valor del 50% producirá una imagen completamente gris. Cualquier valor entre los extremos será un multiplicador lineal del efecto. El filtro no acepta valores negativos. La sintaxis apropiada para usar el filtro invert() es:

1	filter : invert( [ <number> \| <percentage> ] )

Filtro Opacity

El filtro opacidad aplica transparencia a la imagen de entrada. Un valor de 0% implica que usted quiere una opacidad de 0%, lo cual resulta en completa transparencia. De forma similar, un valor de 100% resulta en una imagen completamente opaca.

El filtro es igual a la propiedad opacidad en CSS. La única diferencia es que en este caso algunos navegadores pueden proporcionar aceleración de hardware para mejorar el desempeño. La sintaxis apropiada para usar este filtro es:

1	filter: opacity( [ <number> \| <percentage> ] );

Filtro Saturate

Este filtro determina la saturación de sus imágenes. La saturación depende del valor del parámetro. No puede usar valores negativos, con este filtro. Al 0%, el mínimo valor posible, la imagen estará completamente sin saturación. Con un valor de saturación del 100%, la imagen quedará sin cambios. Para conseguir imágenes super-saturadas, usted tendrá que usar valores por encima del 100%. La sintaxis apropiada para usar este filtro es:

1	filter : saturate( [ <number> \| <percentage> ] )

Filtro Sepia

Este filtro transformará sus imágenes originales a un color sepia. Al 100%, usted conseguirá un sepia completo, y un valor al 0% la imagen no será afectada de ninguna manera. Todos los otros valores que están en medio serán multiplicadores lineales de este filtro. No tiene permitido usar valores negativos con este filtro. La sintaxis apropiada para usar el filtro sepia() es:

1	filter : sepia( [ <number> \| <percentage> ] )

Filtro URL

Puede haber situaciones cuando usted quiere usar sus propios filtros en las imágenes. Bueno, el filtro url tomará la ubicación de un archivo XML que especifica un filtro SVG. También acepta un anclaje para un elemento de filtro específico. Aquí está un ejemplo cuyo resultado es una posterización de nuestra imagen:

// The filter

<svg>
  <filter id="posterize">
    <feComponentTransfer>
      <feFuncR type="discrete" tableValues="0 0.33 0.66 0.99" />
      <feFuncG type="discrete" tableValues="0 0.33 0.66 0.99" />
      <feFuncB type="discrete" tableValues="0 0.33 0.66 0.99" />
    </feComponentTransfer>
  </filter>
</svg>

// Required CSS to apply this filter

filter: url(#posterize);

El resultado final después de aplicar el filtro se vería similar a la siguiente imagen:

Usando Múltiples Filtros

Si no está satisfecho con la cantidad de un filtro individual, usted puede aplicar una combinación de ambos en una sola imagen. El orden en el cual usted aplica los filtros puede producir diferentes resultados. Los filtros multiplicadores pueden ser aplicados en la siguiente manera:

1	filter : sepia(0.8) contrast(2);
2	filter : saturate(0.5) hue-rotate(90deg) brightness(1.8);

Cuando use los filtros juntos, el primer filtro funcionará en la lista que está aplicado en la imagen original. Filtros subsecuentes son aplicados a la salida del filtro anterior. Esta demostración muestra dos combinaciones de filtros diferentes en acción.

En algunas circunstancias en especial, el orden de los filtros puede producir resultados completamente diferentes. Por ejemplo, usando el filtro sepia() después del filtro grayscale() producirá una salida sepia(), y usando grayscale() después del sepia() resultará en una salida en escala de gris.

Animando los Filtros

Las propiedades de los filtros pueden ser animadas. Con la combinación correcta de imágenes y filtros, usted puede explotar ésta característica para crear algunos efectos atractivos. Analice el siguiente fragmento de código:

@keyframes day-night {
  0% {
    filter: hue-rotate(0deg) brightness(120%);
  }
  10% {
    filter: hue-rotate(0deg) brightness(120%);
  }
  20% {
    filter: hue-rotate(0deg) brightness(150%);
  }
  90% {
    filter: hue-rotate(180deg) brightness(10%);
  }
  100% {
    filter: hue-rotate(180deg) brightness(5%);
  }
}

Estoy usando los filtro hue-rotate() y brightness() para crear la ilusión de día y noche. La imagen original tiene un tono color naranja. Para compensar el 20% de la animación, yo incremento el brillo gradualmente y mantengo hue-rotation en cero. Esto crea el efecto de un día soleado. Al momento que la animación termine, yo he rotado el tono en 180 grados. El resultado es un tono azul. Combinando esto con valores mucho más bajos de brillos crea el efecto de la noche.

Consideraciones Finales

Además de los 11 filtros que hemos discutido anteriormente, hay un filtro custom(). Este le permite crear tipos completamente diferentes de efectos usando tonos. Sin embargo, hay algunos problemas con los filtros custom() los cuales ha detenido su desarrollo. Adobe está trabajando activamente para sacar una solución a los problemas que aparecen cuando usamos los filtros custom(). Por fortuna, estarán disponibles muy pronto para los programadores para que los puedan usar en sus proyectos.

Ahora, volvamos a nuestro rumbo. Los filtros son aplicados en todas partes de los elementos objetivos, incluyendo cualquier texto, fondo y borde. Aquí está una demostración básica para que usted prueba una combinación de filtros en varias imágenes.

Como vio en las últimas dos secciones, los filtros CSS pueden cambiar completamente las imágenes a las que son aplicadas. Sin embargo, a veces eso no es suficiente. En la siguiente parte de la serie, discutiré como usar los modos de mezcla para editar imágenes.