Aplicar filtros de fotos de Instagram a imágenes usando Pure CSS/CSS3
| Autor: | agillette |
|---|---|
| Views Total: | 1,781 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 21, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución CSS ultra pequeña que crea filtros fotográficos de estilo Instagram & efectos usando CSS3 Filter Property y : After pseudo Element. Actualmente soporta los filtros Amaro y Brennan.
Funcionamiento
Cargue la hoja de estilos requerida en el documento.
<link rel="stylesheet" href="style.css">
Para aplicar los filtros de Instagram a las imágenes, simplemente Envuelva la imagen en un contenedor con la clase CSS adecuada.
<div class="amaro"><img src="1.jpg"> <div class="brennan"><img src="1.jpg"></div>
También puede agregar más filtros & efectos usted mismo en el CSS como este.
.custom-filter {
position: relative;
display: inline-block;
}
.custom-filter img {
filter: ...;
-webkit-filter: ...;
-moz-filter: ...;
}
.custom-filter:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: ...;
z-index: 9;
-webkit-box-shadow: ...;
-moz-box-shadow: ...;
box-shadow: ...;
}
