Código de CSS - Ejemplo de los diferentes filter de CSS sobre una imágen

Imágen de perfil

Ejemplo de los diferentes filter de CSS sobre una imágengráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 23 de Marzo del 2018 por Xavi
945 visualizaciones desde el 23 de Marzo del 2018. Una media de 28 por semana
Este simple código, muestra los diferentes efectos que generan los diferentes estilos filter sobre una imágen (grayscale, sepia, saturate, opacity, blur, brightness, contrast, invert, hue-rotate)

filter

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 23 de Marzo del 2018gráfica de visualizaciones de la versión: Versión 1
946 visualizaciones desde el 23 de Marzo del 2018. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		div {display:inline-block;}
		img {max-width:300px;}
		.gris {filter: grayscale(100%);}
		.sepia {filter: sepia(100%);}
		.saturacion {filter: saturate(200%);}
		.transparencia {filter: opacity(0.5);}
		.desenfoque {filter: blur(5px);}
		.brillo {filter: brightness(200%);}
		.contraste {filter: contrast(200%);}
		.invert {filter: invert(100%);}
		.rotate {filter: hue-rotate(90deg);}
	</style>
</head>
 
<body>
 
	<div>
		Imagen Normal
		<br><img src="imagen.jpg">
	</div>
	<div>
		Escala de grises
		<br><img src="imagen.jpg" class="gris">
	</div>
	<div>
		sepia
		<br><img src="imagen.jpg" class="sepia">
	</div>
	<div>
		saturación
		<br><img src="imagen.jpg" class="saturacion">
	</div>
	<div>
		transparencia 50%
		<br><img src="imagen.jpg" class="transparencia">
	</div>
	<div>
		desenfoque
		<br><img src="imagen.jpg" class="desenfoque">
	</div>
	<div>
		brillo
		<br><img src="imagen.jpg" class="brillo">
	</div>
	<div>
		contraste
		<br><img src="imagen.jpg" class="contraste">
	</div>
	<div>
		invertir
		<br><img src="imagen.jpg" class="invert">
	</div>
	<div>
		rotate 90º
		<br><img src="imagen.jpg" class="rotate">
	</div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (1)

Imágen de perfil
miguel
25 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4506  
Revisar política de publicidad