Photoshop en los estilos: Introducción a los Filtros Css. Css filter y animation 30.5.12

Photoshop en los estilos: Introducción a los Filtros Css. Css filter y animation

Photoshop en los estilos: Introducción a los Filtros Css. Css filter y animation Los filtros Css son otra herramienta, en pleno proceso de desarrollo, que te permitirá llevar un punto más allá tus páginas webs. De forma simplista: los filtros Css te van a permitir prescindir del photoshop para realizar una serie de efectos y no sólo sobre las imágenes
Pero para hacer uso de ellos, primero debes entenderlos.
Y este es el objetivo de este artículo. Darte a conocer qué puedes hacer con ellos y cómo.

Filter Css según la especificación

Nota previa para los más veteranos. Los filter Css no son ni tienen nada que ver con los filters que utilizaba Microsoft en sus navegadores IE. Esos están desaprobados (deprecated) e incluso el mismo Microsoft los ha abandonado en las nuevas versiones.

Los filtros actuales nacieron dentro de la especificación SVG (Scalable Vector Graphics) y al verse su potencialidad en estos momentos son objeto de un grupo mixto de trabajo del consorcio: SVG y CSS.

Los filtros de Css (Css filter) se aplican no sólo al elemento que se declaran, sino a todo su contenido. Y no sólo a las imágenes, afecta a todo.

Sintaxis y valores de los filtros Css

La sintaxis para Css Filters es como la de cualquier otra propiedad de css:


.elemento {
  filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

Dos anotaciones al respecto.
✥ Primera: Como verás se pueden combinar distintos filtros Css en un mismo elemento.
✥ Segunda: cada filtro admite un rango de valor. No es todo o nada. Por ejemplo, el filter: grayscale(.X) te permite graduar "cuánto gris" quieres, desde nada (0) a todo (1).

Los valores recogido hasta el momento para la propiedad filter de Css son:

Filter: grayscale(cantidad)

Muestra la imagen en escala de grises. La "cantidad" indica el grado de conversión al gris. Desde 0% ó 0 (sin modificar los colores) hasta 100% ó 1 (total conversión).

Filter: sepia(cantidad)

Optienes el elemento en color sepia y el valor de "cantidad" indica el grado de conversión. Valores en % o de 0 a 1.

Filter: saturate(cantidad)

El resultado obtenido es una saturación de los colores del elemento. 0 ó 0% da como resultado un elemento monocromático en escala de grises. De 0 a 1 (0% a 100%) irás obteniendo color y con un valor mayor comienza la saturación de los colores.

Filter: hue-rotate(angulo)

Define el ángulo de rotación en el tono de los colores del elemento. Un valor de 0deg no produce alteración.

Filter: invert(cantidad)

Este filtro invierte los colores del elemento. 0 ó 0% no aplica inversión 1, 100% o ausencia de valor realiza una inversión de los colores total.

Filter: opacity(cantidad)

Exactamente igual que la propiedad opacity. Admite valores en %.

Filter: brightness(cantidad)

Aumenta o disminuye el brillo del elemento

Filter: contrast(cantidad)

Afecta al contraste: la diferencia entre los colores oscuros y claros del elemento. Admite valores superiores a 1 ó 100%.

Filter: blur(radio)

Aplica un desenfoque gausiano al elemento. Valores en cualquier unidad de tamaños, pero no están permitidos valores en %. Cuando más alto el valor, más "borroso" sale el elemento.

Filter: drop-shadow(sombra)

Otra alternativa a box-shadow y el valor los definidos para esa propiedad en el módulo "CSS3 Backgrounds". El valor "inset" no está permitido

Además de los valores anteriores para la propiedad filter, en estos momentos el documento de trabajo recoge la posibilidad de utilizar elementos como filtros enlazandolos por su id (#): filter: url(commonfilters.xml#large-blur).


<filter id=”filtro”>...</filter>

div {filter: url(#filter);}

Mezclando filter Css y propiedades avanzadas:

Sí. Es posible añadir una pizca de los filtros Css con cualquier propiedad, por ejemplo con las animation Css o las transform Css:

Los código de los efectos del vídeo:


<div id="filters">   
   <img id="blur" src="../filter_css2.jpg" alt="" /> 
   <img id="filtro" src="../filter_css.jpg" alt="" />
</div>


#sepia {
  animation: sepia-anim 1.5s ease-in-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
#blur {
  animation: blur-anim 1.5s linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
@keyframes sepia-anim {
  from {filter: sepia(0); }
  to   {filter: sepia(1); }
}
@keyframes blur-anim {
  from {filter: blur(0); }
  to   {filter: blur(10px); }
}

Advertencias, soporte y lo que tienes que ver:

Algunos de estos filtros se aplican de forma rápida y sin apenas carga para el navegador y la máquina, pero otros suponen un trabajo extra que deberías sopesar y valorar antes de su uso.

Algunos como greyscale, sepia, contrast es muy rápido o veloz su aplicación, pero otros como blur o drop-shadow pueden ralentizar la carga de la página.

En cuanto al soporte, en estos momentos sólo por webkit. Firefox admite los filtros basados en url.

Páginas para ampliar este artículo

✥ Documento del consorcio
✥ Página para probar en vivo los filtros Css
✥ Css filters por David Walsh
✥ Ejemplo de página usando Filters Css

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.