es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Cómo aplicar filtros de Instagram en imágenes de la Web

A muchos les encanta usar Instagram y los filtros que vienen con la aplicación, para que sus fotos sean más interesantes y bellas. Hasta ahora, el uso de estos filtros está restringido para usarse dentro de la aplicación. ¿Qué sucede si desea utilizar filtros de Instagram en imágenes web, fuera de la aplicación, como fotos que desea colocar en su blog o sitio web personal?

Bueno, puedes usar CSSGram, una pequeña biblioteca que te permite editar tus fotos con filtros que son similares a los que puedes encontrar en la aplicación de Instagram . A diferencia de Photoshop, donde las ediciones son manuales o se realizan a través de acciones de Photoshop, con CSSGram, todo el proceso se realiza a través de CSS.

Cómo funciona

Para generar el efecto, CSSGram utiliza filtros CSS y el modo de mezcla de CSS, básicamente combina los efectos hasta el punto en que imita el filtro de Instagram que desea. Los efectos se aplican al contenedor de imágenes, a través de pseudo-elementos. Veamos cómo se hace esto con este ejemplo de "1977":

Aquí está el pseudo-elemento agregado.

 ._1977 {position: relative; } ._1977: after {content: ''; bloqueo de pantalla; altura: 100%; ancho: 100%; arriba: 0; izquierda: 0; posición: absoluta; } 

Y este es el filtro CSS y Blend agregado:

 ._1977 {-webkit-filter: contraste (1.1) brillo (1.1) saturación (1.3); filtro: contraste (1.1) brillo (1.1) saturación (1.3); } ._1977: después de {background: rgba (243, 106, 188, 0.3); mix-blend-mode: pantalla; } 

Cómo utilizar

No podemos agregar la clase de filtro directamente al elemento de imagen, debe agregarse al contenedor o clase principal, por ejemplo con

como un contenedor.

El código se verá así:

No olvide incluir la biblioteca de CSSgram (obténgalo aquí) en su documento HTML.

Creé la demo de imágenes antes y después de agregar filtro y el resultado es muy bueno. Hay 13 filtros incluidos en la biblioteca en este momento. A continuación puede ver las diferencias entre la imagen original y la imagen bajo los filtros " 1977 ", " Aden " y " Gingham ".

Vea el Pen rOKPmW

Si solo está interesado en utilizar cualquiera de los estilos, puede cargar los archivos CSS individuales en consecuencia.

Usando SCSS

Si desea agregar los filtros a su clase actual de contenedor de imágenes sin un cambio de nombre, puede hacerlo ampliando el efecto de filtro dentro de sus archivos SCSS. He aquí cómo hacerlo.

Primero descarga el archivo fuente SCSS e importa tu archivo SCSS.

 @import 'proveedor / cssgram'; 

Supongamos que tiene la estructura HTML como a continuación:

Luego, en su style.scss, extienda el filtro así:

 .my-class {... @extend% _1977; } 

Más publicaciones de Instagram

  • 40 herramientas y aplicaciones para mejorar tu cuenta de Instagram
  • 20 aplicaciones útiles para aprovechar al máximo Instagram
  • 10 consejos y trucos útiles de Instagram que debes saber

Fotografía de día lluvioso: 35 ejemplos deslumbrantes

Fotografía de día lluvioso: 35 ejemplos deslumbrantes

Muchos fotógrafos consideran que el mal tiempo es una de las peores cosas para sacar fotos de alta calidad afuera. En mi opinión, no hay mal ni buen clima para tomar fotografías, ya que cada clima tiene su propia belleza. El mal tiempo, especialmente el tiempo de lluvia, es el mejor momento para probar y tomar algunas obras raras y hermosas en su cartera.Di

(Consejos de tecnología y diseño)

Cómo optimizar la tasa de conversión con un diseño web persuasivo

Cómo optimizar la tasa de conversión con un diseño web persuasivo

Cuando las personas piensan en un diseño web efectivo, generalmente consideran la estética y el atractivo visual. Sin embargo, aparte del aspecto visual, un diseño web también debe tener una buena experiencia de usuario .La combinación de atractivo visual y experiencia de usuario eficiente compensa un diseño web persuasivo. Un d

(Consejos de tecnología y diseño)