Filtros
Buenos dias a todas las personas que rebisan este blog ya me e dado cuenta que nos visitan de parte muy lejanas asi que sere breve ¡Muchas GRACIAS!.En esta entrada les enseñare como crear filtros, lo se parece que solo los programas de edicion de fotografia lo tenian no? pues no la programacion en HTML es basicamente imaginar tener muy buena creatividad para realizar lo que tu decees desde un menu hasta un citio completo, los filtros o el retoque a la imagen aunque no se puede guardar el resultado quedan muy bien en nuestras paginas web, agarrando las imagenes base y editandolas mediante las hojas de estilo CSS3.
Existen muchas maneras de crear filtros o modificar una imagen a gusto y preferencia,bueno sin mas por el momento epezemos.
En muchas ocasiones cuando un desarrollador o diseñador web lleva a cabo la maquetación de un proyecto, necesita aplicar determinados efectos en algunas imágenes. Vamos a mostrar unos filtros para aplicar los efectos más populares usando únicamente código CSS.
Antes de empezar, hay que tener en cuenta que algunos de estos filtros solo son compatibles con los navegadores Google Chrome y Safari, aunque se prevé que en futuras versiones de los otros navegadores más usados la compatibilidad con los filtros mejorará. De momento es posible aplicar estos filtros en otros navegadores usando SVG.
Esta es la imagen que usaremos en las pruebas de los filtros
Efecto de desenfoque: tendremos que indicar un número de píxeles, proporcional a la intensidad del efecto.
.desenfoque {
filter : blur(3px);
-webkit-filter : blur(3px);
}
<div class="desenfoque"></div>
filter : blur(3px);
-webkit-filter : blur(3px);
}
<div class="desenfoque"></div>
Escala a grises: indicaremos el porcentaje de la decoloracion.
.escala-grises {
filter : grayscale(100%);
-webkit-filter : grayscale(100%);
}
<div class="escala-grises"></div>
filter : grayscale(100%);
-webkit-filter : grayscale(100%);
}
<div class="escala-grises"></div>
Invertir:invierte el color, la saturación y el brillo. Indicaremos el porcentaje de aplicación.
.invertir {
filter : invert(100%);
-webkit-filter : invert(100%);
}
<div class="invertir"></div>
filter : invert(100%);
-webkit-filter : invert(100%);
}
<div class="invertir"></div>
Tono sepia:indicaremos un porcentaje de aplicación del típico efecto “vintage”.
.tono-sepia {
filter : sepia(100%);
-webkit-filter : sepia(100%);
}
<div class="tono-sepia"></div>
filter : sepia(100%);
-webkit-filter : sepia(100%);
}
<div class="tono-sepia"></div>
Rotando el color:¿te imaginabas poder rotar el color de la imagen unos cuantos grados? Pues sí se puede, indicando los grados a rotar.
.rot-color {
filter : hue-rotate(45deg);
-webkit-filter : hue-rotate(45deg);
}
<div class="rot-color"></div>
filter : hue-rotate(45deg);
-webkit-filter : hue-rotate(45deg);
}
<div class="rot-color"></div>
Brillo:indicaremos el porcentaje de brillo que queramos darle a la imagen.
.brillo {
filter :brightness(50%);
-webkit-filter :brightness(50%);
}
<div class="brillo"></div>
filter :brightness(50%);
-webkit-filter :brightness(50%);
}
<div class="brillo"></div>
Contraste:igual que en el caso anterior, indicaremos el porcentaje de contraste que nos interese.
.contraste {
filter :contrast(200%);
-webkit-filter :contrast(200%);
}
<div class="contraste"></div>
filter :contrast(200%);
-webkit-filter :contrast(200%);
}
<div class="contraste"></div>
Saturación:este es un efecto bastante popular que sirve para incrementar la saturación de color en imágenes subexpuestas. Indicaremos un porcentaje.
.saturacion {
filter :saturate(250%);
-webkit-filter :saturate(250%);
}
<div class="saturacion"></div>
filter :saturate(250%);
-webkit-filter :saturate(250%);
}
<div class="saturacion"></div>
Aplicando múltiples filtros:Si queremos aplicar más de un filtro de manera simultánea, podemos hacerlo separando los efectos que queramos usar con un espacio. Por ejemplo:
.mi-filtro {
filter :saturate(150%) hue-rotate(45deg) blur(1px);
-webkit-filter :saturate(150%) hue-rotate(45deg) blur(1px);
}
<div class="mi-filtro"></div>
filter :saturate(150%) hue-rotate(45deg) blur(1px);
-webkit-filter :saturate(150%) hue-rotate(45deg) blur(1px);
}
<div class="mi-filtro"></div>
Si requieren descargar esta informacion en un archivo PDF lo pueden hacer pasando a la pestaña de "recursos" esto y muchas cosas mas pueden encontrar.
recuerden comentar que efecto es el que quieren aprender (si se puede hacer en CSS yo se los podria enseñar de una manera mas sencilla).
Descargar
Descargar