Gracias a las aplicaciones de edición de imágenes móviles como Instagram, la moda de cambio de falso inclinación parece estar en su apogeo. ¿Pero por qué deberíamos dejar que los iPhones se diviertan? Vamos a sacar un efecto de cambio de inclinación utilizando CSS puro.
En este tutorial, aprenderemos todo sobre los nuevos filtros CSS en Webkit y cómo implementar una máscara de imagen en CSS. Luego usaremos estas técnicas para nuestro efecto de cambio de inclinación final. Vamos a encontrar todo tipo de cosas locas, así que sigue leyendo y nos divertiremos un poco.
Vistazo
¿Quieres ver lo que estamos construyendo? Salte adelante y mire la demostración, luego regrese y vea cómo hacer esto usted mismo.
Manifestación: Haga clic aquí para lanzar.
Cumplir con los filtros webkit
En los últimos años, CSS ha ido tomando lentamente las áreas que solíamos usar para Photoshop: gradientes, esquinas redondeadas, sombras, etc. Recientemente, Webkit dio un gran paso adelante en esta área con la introducción de CSS Filtros de imagen.
¿Qué pasaría si pudieras alterar la saturación, el contraste o incluso el desenfoque de una imagen usando CSS puro? Las posibilidades serían impresionantes. Prepárese, porque puede hacer exactamente eso con una línea rápida de código.
Imagen de arranque
Necesitaremos una imagen para mostrar todas las técnicas con las que vamos a jugar, así que agarré la foto aérea de Nueva York del fotógrafo Nathan Siemers.
Brillo
El brillo puede aceptar un porcentaje (10%) o un decimal (0.1). El cero es igual al brillo normal, por lo que el 5% aumenta el brillo y el -5% en realidad oscurece la imagen.
Difuminar
El filtro de desenfoque acepta un valor de píxel similar al desenfoque en una sombra de cuadro. Cuanto mayor sea el valor de píxel, más intenso será el desenfoque.
Contraste
El contraste acepta un valor basado en porcentaje. El 100% es normal, cualquier cosa por encima que agregue contraste, cualquier cosa por debajo disminuye el contraste.
Escala de grises
La escala de grises le permite desaturar gradualmente una imagen con porcentajes. 0% es a todo color, 100% es en escala de grises. El siguiente ejemplo muestra nuestra imagen al 50%.
Hue Rotate
La rotación de tono le permite cambiar el tono a través de la metáfora de una rueda de color. Ajusta la rotación en grados, siendo cero el valor normal no ajustado.
Invertir
Hace exactamente lo que parece, acepta un porcentaje de cero (predeterminado) a 100%;
Sepia
¿Blanco y negro no lo haces por ti? Añade un poco de edad con el filtro Sepia. El cero por ciento no contiene ninguno de los efectos, el 100% es potencia completa.
Soporte del navegador
Actualmente, no hay mucho soporte para los filtros CSS3. De acuerdo con CanIUse, deberían funcionar en Chrome, Safari 6, iOS Safari 6 y Blackberry Browser 10. Todos estos requieren el? -Webkit? prefijo, pero para probarlo en el futuro, es posible que desee agregar los demás:
Paso 1: Tilt Shift HTML
Ahora que sabemos qué filtros CSS están disponibles para nosotros, podemos comenzar a construir nuestra demostración de cambio de inclinación. Para comenzar, coloque el siguiente HTML en su editor de código favorito:
Verlo en acción
¡Eso es todo al respecto! Ahora tenemos un pequeño efecto de cambio de inclinación de CSS puro. Echa un vistazo a la versión en vivo en la demo a continuación.
Manifestación: Haga clic aquí para lanzar.
tiltShift.js
Los talentosos desarrolladores Noel Tock y Adam Yanalunas han creado un complemento jQuery fácil de usar que te ayuda a usar los filtros CSS para crear un efecto de cambio de inclinación similar. Descarga tiltShift.js y dale una oportunidad.
Conclusión: ¿Por qué molestarse?
Los tutoriales de este tipo siempre plantean una gran pregunta: ¿deberíamos utilizar las propiedades de Webkit solo en los flujos de trabajo de desarrollo profesional? La respuesta es siempre la misma: no. Este es un experimento, una forma divertida de aprender sobre las posibilidades para el futuro de CSS. Un día, los filtros CSS podrían ser una característica estándar. Por ahora, son solo una idea.
Lo triste es que tantos desarrolladores cancelan completamente cosas como esta hasta que alcanzan un estado más oficial. Como miembro de la comunidad de desarrollo web, debe probar nuevas funciones potenciales para ver cómo se están implementando y expresar su opinión. Incluso si sientes que eres una voz sin importancia, recuerda que tu opinión sí importa y que eres parte de un todo más grande que puede y afecta el futuro de la web.
En esa nota, ¿qué piensas de los filtros CSS? Deja un comentario a continuación y házmelo saber. Personalmente creo que son una maravilla y podrían llevar a muchos proyectos geniales. ¿Debería todo esto hacerse con CSS? Dígame usted.