Artistas Digitales

Filtros de imágenes mediante css3

CSS3, Desarrollo Web No Comments on Filtros de imágenes mediante css3
Filtros de imágenes mediante css3

Hoy vamos a presentarles una de las inovaciones mas divertidas de CSS3  la manipulación de imagenes mediante filtros, aunque esta en fase experimental dentro de Google Chrome ya podemos empezar a jugar con ellos.

Estsos ejemplos son solo una pequeña probada de lo que podras hacer con estos nuevos tags:

Imagen Original

EJEMPLOS

Desenfoque mediante CSS3

Filtros con CSS3 y HTML

.desenfoque{ -webkit-filter: blur(10px); }

Brillo mediante CSS3

Filtros con CSS3 y HTML

.brillo {-webkit-filter: brightness(0.27);}

Ajustar Contraste mediante CSS3

Filtros con CSS3 y HTML

.contraste {-webkit-filter: contrast(136%);}

Escala de grises mediante CSS3

Filtros con CSS3 y HTML

.escala-grises {-webkit-filter: grayscale(100%);}

Transformada de HUE

Filtros con CSS3 y HTML

.huerotate {-webkit-filter: hue-rotate(180deg);}

Invertir Colores

Filtros con CSS3 y HTML

.invertir {-webkit-filter: invert(100%);}

Aplicar transparencia a elementos

Filtros con CSS3 y HTML

.transparenicia {-webkit-filter: opacity(47%);}

Modificar la saturacion de color

Filtros con CSS3 y HTML

.saturacion {-webkit-filter: saturate(4);}

Convertir imagen a tonos sepia

Filtros con CSS3 y HTML

.sepia {-webkit-filter: sepia(100%);}

EJEMPLO: IMPLEMENTACION DE FILTROS EN UN SOLO ARCHIVO

<html>
<body>
<style>
.desenfoque{ -webkit-filter: blur(10px); }

.brillo {-webkit-filter: brightness(0.27);}

.contraste {-webkit-filter: contrast(136%);}

.escala-grises {-webkit-filter: grayscale(100%);}

.huerotate {-webkit-filter: hue-rotate(180deg);}

.invertir {-webkit-filter: invert(100%);}

.transparenicia {-webkit-filter: opacity(47%);}

.saturacion {-webkit-filter: saturate(4);}

.sepia {-webkit-filter: sepia(100%);}
</style>

<img src="imagen_original.png"><br>
<h2> Desenfoque mediante CSS3</h2>
<img src="imagen_original.png"><br>
<h2>Brillo mediante CSS3</h2>
<img src="imagen_original.png"><br>
<h2>Ajustar Contraste mediante CSS3</h2>
<img src="imagen_original.png"><br>
<h2>Escala de grises mediante CSS3</h2>
<img src="imagen_original.png"><br>
<h2>Transformada de Hue mediante CSS3</h2>
<img src="imagen_original.png"><br>
<h2>Invertir colores mediante CSS3</h2>
<img src="imagen_original.png"><br>
<h2>Aplicar transparencia mediante CSS3</h2>
<img src="imagen_original.png"><br>
<h2>Saturacion de Color mediante CSS3</h2>
<img src="imagen_original.png"><br>
<h2>Convertir a tonos sepia mediante CSS3</h2>
<img src="imagen_original.png"><br>

</body>
</html>

¿Te gusto el artículo? Compartelo!!

Acerca del autor

Dejar un comentario