Se realizo un previo en el aula de clase sobre lo publicado en la web
Para una imagen ----- <img src="imagren/1.jpg"> ; tambien existen archivos de imagen con la extensión jpg, jpeg, gif, bmp, wnp, png.
- Los espacios en blanco, linux los toma como %20
- Jpg, tiene mejor resolucion
- Png, es mas grandeque jpg y permite transparencias
Para que un archivo se abra en otra pestaña ---- target="blank"
Para que se abra en la misma pestaña --- target="self"
Para poner un borde a una imagen --- border="10"
Tarea:
Investigar: ¿Como cambiar los filtros de las imagenes en html?
Tarea:
Investigar: ¿Como cambiar los filtros de las imagenes en html?
En este tutorial veremos cómo modificar el aspecto de una imagen usando la propiedad filter de CSS3 y el prefijo -webkit, que es el único que cuenta con soporte para filtros, pero seguramente se sumen en próximas ediciones Firefox y Opera, por ese motivo usaré "provisionalmente" este prefijo para que se puedan testear los ejemplos.

El prefijo -webkit- y sólo funciona con Chrome, Safari y iOS (Safari).
Los prefijos según el navegador
Código :
-webkit-filter:/* Chrome y Safari */ -moz-filter:/* Mozilla */ -ms-filter:/* Internet Explorer */ -o-filter:/* Opera */
La propiedad filter en CSS3
Esta propiedad afecta a cualquier elemento, ya sea texto, imagen o video. Dentro de filter podemos añadir uno o varios filtros que existen para esta propiedad, sin un máximo, simplemente separándolos por espacios.
Código :
-webkit-filter: [Filtro] [Filtro];
Estos son los distintos tipos de filtros que podemos usar con nuestras imágenes o con cualquier elemento de nuestra página. Vale aclarar que podemos darle todo tipo de valores intermedios, por ejemplo: 0 / 0.5 / 1.
Blur (desenfoque)
Código :
-webkit-filter: blur(0px); /* Sin desenfoque */ -webkit-filter: blur(5px); /* 5px de desenfoque */

Grayscale (escala de grises)
Código :
-webkit-filter: grayscale(0); /* Color */ -webkit-filter: grayscale(0.5); /* 50% color */ -webkit-filter: grayscale(1); /* Blanco y negro */

Sepia (sepia)
Código :
-webkit-filter: sepia(0); /* Normal */ -webkit-filter: sepia(0.5); /* 50% sepia */ -webkit-filter: sepia(1); /* Sepia */

Brightness (brillo)
Código :
-webkit-filter: brightness(0); /* Normal */ -webkit-filter: brightness(0.5); /* Imagen clara */ -webkit-filter: brightness(1); /* Blanco */
:

Contrast (contraste)
Código :
-webkit-filter: contrast(0); /* Bajo contraste (gris) */ -webkit-filter: contrast(1); /* Normal */ -webkit-filter: contrast(10); /* Alto contraste */

Hue-rotate (rotar matriz de color)
Código :
-webkit-filter: hue-rotate(0deg); /* Normal */ -webkit-filter: hue-rotate(180deg); /* Rotar la matriz 180 grados */ -webkit-filter: hue-rotate(270deg); /* Rotar la matriz 270 grados */

Invert (invertir)
Código :
-webkit-filter: invert(0); /* Normal */ -webkit-filter: invert(0.5); /* Gris */ -webkit-filter: invert(1); /* Color invertido */

Saturate (saturación)
Código :
-webkit-filter: saturate(0); /* Sin color */ -webkit-filter: saturate(1); /* Normal */ -webkit-filter: saturate(10); /* Alta saturación */

Opacity (opacidad)
Código :
-webkit-filter: opacity(0); /* Transparente */ -webkit-filter: opacity(0.5); /* 50% transparente */ -webkit-filter: opacity(1); /* Normal */

No hay comentarios:
Publicar un comentario