Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Opacidad y sombreado - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 22 de febrero de 2021 por Fernando M.

66 visualizaciones

Más información Transcripción

Descargar la transcripción

Vale, pues ahora vamos a ver otras propiedades que es para modificar la opacidad, es decir, cómo de transparente o cómo de opaco se ve un elemento, ¿vale? 00:00:00
Y también para ver sombreado. 00:00:09
Vamos a empezar primero con la opacidad. 00:00:11
Es importante que sepamos que por defecto todos los elementos que metemos en HTML son completamente opacos, ¿vale? 00:00:14
Es decir, que se ven, que no dejarían pasar luz, ¿vale? 00:00:20
Entonces, nos vamos a ir a brackets, ¿vale? Y vamos a guardar este fichero, ¿vale? Le damos a archivo, guardar como, ¿vale? Este anterior no lo había guardado bien, así que lo voy a guardar ahora bien. 00:00:23
esto era 00:00:45
overflow, ¿vale? 00:00:47
y ahora lo voy a volver a guardar, archivo 00:00:50
guardar como, y a esto lo vamos 00:00:52
a llamar opacidad 00:00:54
barra baja, sombreado 00:00:56
punto 00:00:58
html, ¿vale? 00:00:58
y vamos a 00:01:04
borrar todo este contenido 00:01:05
vamos a borrar también 00:01:07
todo lo que habíamos definido 00:01:11
antes del estilos 00:01:13
y como título vamos a 00:01:14
poner 00:01:17
opacidad y sombreado 00:01:17
con CSS y eso nos lo vamos a llevar 00:01:21
también a la etiqueta 00:01:23
¿vale? 00:01:27
tal que así 00:01:29
perfecto ¿vale? 00:01:31
y ahora vamos a 00:01:33
meter una etiqueta H2 00:01:36
que la vamos a llamar opacidad 00:01:39
y transparencia ¿vale? 00:01:41
que va a ser lo primero que vamos a ver 00:01:44
entonces 00:01:45
Fijaros, para hacer esto, yo me he descargado una imagen de Pixabay, 00:01:48
la he vuelto a meter en mi carpeta de imágenes, ¿vale? 00:01:54
Esa imagen se llama vivienda.jpg, ¿vale? 00:01:57
Que es con la que voy a trabajar. 00:02:00
Entonces, fijaros que lo que voy a hacer aquí dentro es que voy a añadir tres imágenes, ¿vale? 00:02:03
Entonces pongo img por tres, tabulador, ¿vale? 00:02:12
La imagen está dentro de mi carpeta images y se llama vivienda.jpg, ¿vale? Y esto lo voy a copiar en las tres, tal que así y tal que así. Como texto voy a poner imagen de una vivienda, ¿vale? Y esto lo mismo, lo voy a copiar en las tres. 00:02:16
Y ahora a cada imagen le voy a poner un ID diferente que va a ser imagen 1, la siguiente le voy a poner un ID que va a ser imagen 2 y a la última le pongo un ID que va a ser imagen 3, ¿vale? 00:02:37
Ya tengo mis tres imágenes definidas, entonces ahora me voy a ir directamente a modificar el estilo, ¿vale? 00:02:53
En primer lugar, vamos a modificar el estilo de todas las imágenes 00:02:59
¿Vale? 00:03:04
Y lo que vamos a hacer es modificar 00:03:05
No se llama imagen, perdón, se llama IMG 00:03:06
¿Vale? 00:03:09
Así 00:03:10
Y vamos a modificar el tamaño 00:03:10
Para que me queden un poquito más... 00:03:13
Mejor ubicadas todas, ¿vale? 00:03:16
Voy a modificar la anchura 00:03:18
Le voy a poner un 33%, ¿vale? 00:03:20
O le podéis poner un 33% 00:03:24
y a la altura la voy a poner automática 00:03:27
¿vale? entonces fijaros 00:03:30
que ahora me aparecen 00:03:31
no me aparecen las tres imágenes 00:03:32
seguidas una de la otra 00:03:35
¿vale? porque 00:03:37
lo diré 00:03:39
porque tengo la ventana 00:03:41
más pequeñita ¿vale? si yo aumento el tamaño 00:03:43
de la ventana, no sé si lo veréis vosotros 00:03:46
es... bueno 00:03:48
voy a ver si puedo hacer, ¿veis? 00:03:49
he aumentado el tamaño de la ventana y ahora 00:03:51
si sale ¿vale? 00:03:54
Pero bueno, voy a poner un porcentaje más pequeño para que se vea tal y como yo estoy trabajando ahora mismo, ¿vale? 00:03:54
En teoría a vosotros se os debería de ver bien. 00:04:04
Vale, voy a poner ahora mismo, por ejemplo, un 20%. 00:04:09
¿Vale? Incluso lo puedo poner un poquito más grande, 30%. 00:04:13
Venga, sí, a un 30, 33 se me va, al 32 me encuadra, ¿vale? 00:04:17
Ahí veis la imagen. 00:04:22
Y ahora voy a modificar cada una de las imágenes de forma independiente. Nos vamos a ir primero a mi primera imagen. Voy a poner imagen 1. Como es un ID, pongo la almohadilla. 00:04:24
¿Vale? Y para modificar la transparencia, la opacidad, utilizamos la propiedad opacity, ¿vale? Que variará entre 0,0 y 1, siendo 1 el valor por defecto, ¿vale? 00:04:37
Que es totalmente opaco, ¿vale? Y vamos a poner aquí opacity 2.1, ¿vale? Y una cosa importante y es que vamos a añadir una propiedad para asegurar compatibilidad con navegadores Internet Explorer 8 o anteriores, ¿vale? 00:04:52
Y exponer la misma propiedad, hace el mismo efecto pero lo ponemos de la siguiente forma. Filter, dos puntos alfa y dentro opacity igual y ponemos 100 porque sería el 100%, es decir, como hemos puesto 1, pues lo correspondiente sería el 100%, ¿vale? 00:05:24
fijaros que al hacer eso 00:05:43
mi imagen 1 se queda exactamente igual 00:05:46
¿vale? vamos a irnos 00:05:48
a la imagen 2 00:05:50
¿vale? y ponemos opacity 00:05:51
y en este caso como valor 00:05:56
le vamos a poner por ejemplo 00:05:58
pues 00:05:59
0,4 ¿vale? 00:06:02
y ahora 00:06:05
vamos a ponerle la misma propiedad 00:06:06
pero como hemos 00:06:08
puesto 0,4 pues ponemos 40 00:06:10
¿vale? y por último 00:06:12
Nos vamos a la imagen 3 y ponemos un opacity de 0,1 y en el filter ponemos 10, ¿vale? 00:06:14
Y entonces veis como cada una de las imágenes tiene una transparencia mayor, ¿vale? 00:06:24
Esta propiedad se utiliza mucho junto con el pseudo selector que ya vimos que era el hover, ¿vale? 00:06:31
Vamos a ver un ejemplo, por ejemplo para la imagen 1, ¿vale? 00:06:39
Nosotros ponemos imagen 1, dos puntos y pondríamos hover, ¿vale? 00:06:43
Y lo que vamos a poner es un opacity de 0.45. 00:06:49
Y aquí abajo volveríamos a replicar la expresión para la compatibilidad y ponemos 45. 00:06:55
¿Qué hacía esto? ¿Qué hacía el hover? 00:07:01
Pues hace que cuando nosotros pasemos el ratón encima de la imagen, esta se vuelva un poquito transparente, al 45% de transparencia. 00:07:03
¿Vale? 00:07:13
Una cosita que tenemos que saber de este tema de la opacidad, ¿vale? 00:07:14
El tema de caja, cómo hacer cajas realmente transparentes. 00:07:21
Esto ya medio lo explicamos cuando vimos el tema de colores, ¿vale? 00:07:24
Vamos a meter un elemento contenedor, un div, ¿vale? 00:07:27
Con el texto, con el id, perdón, caja, ¿vale? 00:07:33
Y dentro le vamos a poner un texto lore-nipsum, ¿vale? 00:07:37
Y vamos a modificar ese elemento caja. 00:07:40
Le vamos a poner un color que sea FF a 500, que como veis, si pongo el retorno encima, es una especie de naranja. 00:07:44
Le vamos a poner un margen superior de 40 píxeles. 00:07:58
Le vamos a poner un margen inferior de 10 píxeles y un relleno de 50 píxeles. 00:08:01
Aparte, le vamos a poner una anchura de 600 píxeles. 00:08:11
Y le vamos a poner una opacidad de 0.45, ¿vale? 00:08:16
Y de la misma forma, recuerdo, le tenemos que poner el filter a 45, ¿vale? 00:08:21
Y fijaros que al poner yo esto, tenemos el problema que me aplica la opacidad tanto al texto como al elemento en sí, al div, ¿vale? 00:08:30
Si yo lo que quiero es que la opacidad solo la tenga el elemento contenedor, pero no lo que esté dentro, lo que tenemos que hacer es una modificación en el background color, ¿vale? Es decir, yo este elemento de opacity me lo quitaría y fijaros, voy a recopiarme esto aquí abajo, ¿vale? Me lo voy a pegar de tal forma que lo sobrescribo y tenemos que utilizar, en vez de la anotación esa decimal, tenemos que utilizar la otra anotación que vimos, que era la de RGBA. 00:08:41
¿Vale? Y aquí en el RGBA introducimos el factor de transparencia que queramos. ¿Vale? Que queramos un 0.45, pues lo bajamos a 0.45. Y fijaros ahora, ¿vale? Que al meter esta transparencia, el fondo se me queda transparente, pero la fuente sigue teniendo una opacidad total. ¿Vale? 00:09:11
Ok, y esto en cuanto a opacidad y transparencia. Ahora nos vamos a ir al tema de las sombras. Esto va a ser también muy rápido porque ya lo hemos hecho cuando vimos las sombras con los textos. Se hace de una forma muy parecida, ¿vale? 00:09:36
Vamos a poner una cabecera de nivel 2, cómo crear sombras con hojas de estilo, ¿vale? Y aquí nos vamos a meter un elemento deep que vamos a llamarle sombras, ¿vale? Sombras vacías, ¿vale? 00:09:54
Y ahora aquí abajo nos creamos ese identificador para elementos sombras, ¿vale? Y vamos a empezar, pues, por ejemplo, poniéndole un color de fondo, ¿vale? Va a tener un color y le ponemos el color FF8C3, ¿vale? 00:10:11
Le vamos a poner una anchura de 600 píxeles, le vamos a poner una altura de 150 píxeles, le vamos a poner un padding de 12 píxeles, ¿vale? 00:10:32
Y ahora, para ponerle sombra a este elemento, ¿vale? Lo que vamos a utilizar, lo voy a poner en comentarios, va a ser la propiedad Box Shadow, ¿vale? Y se hace de una forma muy parecida a lo que lo hacíamos con el texto, ¿vale? 00:10:49
Primero vamos a poner el eje horizontal, luego el eje vertical, luego el difuminado, ¿vale? Que esto es opcional. Luego vamos a poner el tamaño de la sombra, que también es opcional, ¿vale? Luego el color. 00:11:05
Y finalmente podemos poner la propiedad inset, ¿vale? 00:11:25
Que ya veremos que es para que la sombra sea una sombra al interior, ¿vale? 00:11:30
Vamos a ir probándolo y lo vamos viendo, ¿vale? 00:11:37
Yo pongo ahora box shadow, ¿vale? 00:11:40
Y pongo por ejemplo 12 píxeles de horizontal, 10 píxeles de vertical, 5 píxeles de difuminado, perdón. 00:11:43
y 4 píxeles del tamaño de la sombra, ¿vale? 00:11:55
Y le voy a poner un colorcito gris, ¿vale? 00:12:00
Y fijaros que en la caja me aparece la sombra a la derecha y abajo. 00:12:03
Si yo pongo aquí un símbolo menos, la sombra se iría a la izquierda, ¿vale? 00:12:09
Y si pongo aquí un símbolo menos, la sombra se iría hacia arriba, ¿vale? 00:12:14
Yo, si aquí ahora pongo una coma, puedo poner muchas más sombras, ¿vale? 00:12:19
Yo ahora mismo podría, por ejemplo, pues poner una sombra que estuviera en menos 8 píxeles, un píxel, ¿vale? 00:12:24
Voy a poner un poco aquí también de márgenes para que sea más fácil visualizarlo, ¿vale? 00:12:35
De 15 píxeles. 00:12:41
Menos 8, un píxel y 10 píxeles de difuminado y de color vamos a poner 0, 0, 1, 0, 1, 1. 00:12:44
Pongo otra coma y pongo 5 píxeles menos 3 píxeles, 15 píxeles de difuminado y de color DFE20A, ¿vale? 00:12:51
Y fijaros como ahora tengo una sombra gris a la derecha y abajo, una sombra así en un verde arriba y una sombra negra a la izquierda, ¿vale? 00:13:07
Y tengo diferentes sombras en cada uno de los lados, ¿vale? 00:13:17
Es importante que sepáis que esto afecta también si yo creo un elemento circular, ¿vale? Si yo ahora mismo aquí añado, por ejemplo, la propiedad que ya vimos, borde radius, yo pongo 30 píxeles, ¿vale? Fijaros que las sombras se adaptan completamente a ese borde redondeado, ¿vale? 00:13:21
Y por último vamos a ver lo que decía antes de la sombra interna, ¿vale? Si yo pongo aquí un dip y pongo id sombra interna y pongo aquí ahora sombra interna, abro llave, tiro, abro llave, me voy a copiar todo esto para ir un poquito más rápido, ¿vale? 00:13:44
tal que así 00:14:08
voy a cambiarle un poco de color 00:14:09
para que destaque un poco más 00:14:11
¿vale? 00:14:13
por ejemplo pongo ese rosa 00:14:15
y le vamos a poner un tamaño más pequeñito 00:14:17
¿vale? 300 píxeles 00:14:19
ok, pues entonces 00:14:21
yo ahora pondría box 00:14:24
shadow y pondría 00:14:25
una sombra de 00:14:28
10 píxeles 00:14:28
de 5 píxeles en el eje vertical 00:14:30
¿vale? 00:14:33
de un difuminado de 3 píxeles 00:14:34
¿Vale? Y un tamaño de la sombra de 2 píxeles. Y pondría un color de verde, por ejemplo. ¿Vale? 00FF00. Y si yo ahora pongo la palabra clave INSET, fijaros que el sombreado aparece dentro. 00:14:37
Le voy a poner un difuminado mayor para que destaque aún más. 00:14:56
¿Vale? 00:14:59
Ahora. 00:14:59
¿Ok? 00:15:01
Y el sombreado me lo pone dentro de la figura. 00:15:02
¿Vale? 00:15:05
Pues bueno, pues espero que todo el tema este de opacidad y sombreado quede claro y que lo podáis utilizar en vuestro diseño. 00:15:07
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
66
Fecha:
22 de febrero de 2021 - 21:34
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
15′ 16″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
44.46 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid