1 00:00:00,500 --> 00:00:09,179 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? 2 00:00:09,279 --> 00:00:11,320 Y también para ver sombreado. 3 00:00:11,960 --> 00:00:13,720 Vamos a empezar primero con la opacidad. 4 00:00:14,820 --> 00:00:20,460 Es importante que sepamos que por defecto todos los elementos que metemos en HTML son completamente opacos, ¿vale? 5 00:00:20,460 --> 00:00:23,480 Es decir, que se ven, que no dejarían pasar luz, ¿vale? 6 00:00:23,480 --> 00:00:45,979 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. 7 00:00:45,979 --> 00:00:47,439 esto era 8 00:00:47,439 --> 00:00:49,679 overflow, ¿vale? 9 00:00:50,000 --> 00:00:52,020 y ahora lo voy a volver a guardar, archivo 10 00:00:52,020 --> 00:00:54,219 guardar como, y a esto lo vamos 11 00:00:54,219 --> 00:00:56,200 a llamar opacidad 12 00:00:56,200 --> 00:00:58,219 barra baja, sombreado 13 00:00:58,219 --> 00:00:58,820 punto 14 00:00:58,820 --> 00:01:02,299 html, ¿vale? 15 00:01:04,659 --> 00:01:05,700 y vamos a 16 00:01:05,700 --> 00:01:07,239 borrar todo este contenido 17 00:01:07,239 --> 00:01:11,519 vamos a borrar también 18 00:01:11,519 --> 00:01:13,620 todo lo que habíamos definido 19 00:01:13,620 --> 00:01:14,920 antes del estilos 20 00:01:14,920 --> 00:01:17,620 y como título vamos a 21 00:01:17,620 --> 00:01:17,980 poner 22 00:01:17,980 --> 00:01:21,659 opacidad y sombreado 23 00:01:21,659 --> 00:01:23,939 con CSS y eso nos lo vamos a llevar 24 00:01:23,939 --> 00:01:25,680 también a la etiqueta 25 00:01:25,680 --> 00:01:27,400 H1 26 00:01:27,400 --> 00:01:28,459 ¿vale? 27 00:01:29,900 --> 00:01:31,079 tal que así 28 00:01:31,079 --> 00:01:33,280 perfecto ¿vale? 29 00:01:33,819 --> 00:01:36,299 y ahora vamos a 30 00:01:36,299 --> 00:01:39,659 meter una etiqueta H2 31 00:01:39,659 --> 00:01:41,760 que la vamos a llamar opacidad 32 00:01:41,760 --> 00:01:43,939 y transparencia ¿vale? 33 00:01:44,060 --> 00:01:45,719 que va a ser lo primero que vamos a ver 34 00:01:45,719 --> 00:01:47,739 entonces 35 00:01:48,480 --> 00:01:54,379 Fijaros, para hacer esto, yo me he descargado una imagen de Pixabay, 36 00:01:54,560 --> 00:01:56,599 la he vuelto a meter en mi carpeta de imágenes, ¿vale? 37 00:01:57,120 --> 00:02:00,680 Esa imagen se llama vivienda.jpg, ¿vale? 38 00:02:00,939 --> 00:02:02,140 Que es con la que voy a trabajar. 39 00:02:03,120 --> 00:02:11,180 Entonces, fijaros que lo que voy a hacer aquí dentro es que voy a añadir tres imágenes, ¿vale? 40 00:02:12,960 --> 00:02:16,139 Entonces pongo img por tres, tabulador, ¿vale? 41 00:02:16,139 --> 00:02:37,620 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. 42 00:02:37,620 --> 00:02:53,080 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? 43 00:02:53,520 --> 00:02:59,979 Ya tengo mis tres imágenes definidas, entonces ahora me voy a ir directamente a modificar el estilo, ¿vale? 44 00:02:59,979 --> 00:03:04,080 En primer lugar, vamos a modificar el estilo de todas las imágenes 45 00:03:04,080 --> 00:03:04,759 ¿Vale? 46 00:03:05,039 --> 00:03:06,780 Y lo que vamos a hacer es modificar 47 00:03:06,780 --> 00:03:09,099 No se llama imagen, perdón, se llama IMG 48 00:03:09,099 --> 00:03:09,340 ¿Vale? 49 00:03:10,280 --> 00:03:10,719 Así 50 00:03:10,719 --> 00:03:13,879 Y vamos a modificar el tamaño 51 00:03:13,879 --> 00:03:16,300 Para que me queden un poquito más... 52 00:03:16,300 --> 00:03:18,860 Mejor ubicadas todas, ¿vale? 53 00:03:18,860 --> 00:03:20,580 Voy a modificar la anchura 54 00:03:20,580 --> 00:03:24,060 Le voy a poner un 33%, ¿vale? 55 00:03:24,800 --> 00:03:27,020 O le podéis poner un 33% 56 00:03:27,020 --> 00:03:30,039 y a la altura la voy a poner automática 57 00:03:30,039 --> 00:03:31,900 ¿vale? entonces fijaros 58 00:03:31,900 --> 00:03:32,819 que ahora me aparecen 59 00:03:32,819 --> 00:03:35,520 no me aparecen las tres imágenes 60 00:03:35,520 --> 00:03:37,960 seguidas una de la otra 61 00:03:37,960 --> 00:03:39,379 ¿vale? porque 62 00:03:39,379 --> 00:03:41,800 lo diré 63 00:03:41,800 --> 00:03:43,860 porque tengo la ventana 64 00:03:43,860 --> 00:03:46,080 más pequeñita ¿vale? si yo aumento el tamaño 65 00:03:46,080 --> 00:03:48,300 de la ventana, no sé si lo veréis vosotros 66 00:03:48,300 --> 00:03:49,979 es... bueno 67 00:03:49,979 --> 00:03:51,479 voy a ver si puedo hacer, ¿veis? 68 00:03:51,879 --> 00:03:54,000 he aumentado el tamaño de la ventana y ahora 69 00:03:54,000 --> 00:03:54,699 si sale ¿vale? 70 00:03:54,699 --> 00:04:03,080 Pero bueno, voy a poner un porcentaje más pequeño para que se vea tal y como yo estoy trabajando ahora mismo, ¿vale? 71 00:04:04,379 --> 00:04:07,020 En teoría a vosotros se os debería de ver bien. 72 00:04:09,099 --> 00:04:11,699 Vale, voy a poner ahora mismo, por ejemplo, un 20%. 73 00:04:13,439 --> 00:04:16,699 ¿Vale? Incluso lo puedo poner un poquito más grande, 30%. 74 00:04:17,600 --> 00:04:22,680 Venga, sí, a un 30, 33 se me va, al 32 me encuadra, ¿vale? 75 00:04:22,920 --> 00:04:23,879 Ahí veis la imagen. 76 00:04:24,699 --> 00:04:37,660 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. 77 00:04:37,660 --> 00:04:52,420 ¿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? 78 00:04:52,420 --> 00:05:24,959 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? 79 00:05:24,959 --> 00:05:43,800 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? 80 00:05:43,800 --> 00:05:46,540 fijaros que al hacer eso 81 00:05:46,540 --> 00:05:48,639 mi imagen 1 se queda exactamente igual 82 00:05:48,639 --> 00:05:50,639 ¿vale? vamos a irnos 83 00:05:50,639 --> 00:05:51,920 a la imagen 2 84 00:05:51,920 --> 00:05:56,740 ¿vale? y ponemos opacity 85 00:05:56,740 --> 00:05:58,740 y en este caso como valor 86 00:05:58,740 --> 00:05:59,980 le vamos a poner por ejemplo 87 00:05:59,980 --> 00:06:02,540 pues 88 00:06:02,540 --> 00:06:03,920 0,4 ¿vale? 89 00:06:05,699 --> 00:06:06,620 y ahora 90 00:06:06,620 --> 00:06:08,699 vamos a ponerle la misma propiedad 91 00:06:08,699 --> 00:06:10,779 pero como hemos 92 00:06:10,779 --> 00:06:12,680 puesto 0,4 pues ponemos 40 93 00:06:12,680 --> 00:06:14,579 ¿vale? y por último 94 00:06:14,579 --> 00:06:24,399 Nos vamos a la imagen 3 y ponemos un opacity de 0,1 y en el filter ponemos 10, ¿vale? 95 00:06:24,680 --> 00:06:30,040 Y entonces veis como cada una de las imágenes tiene una transparencia mayor, ¿vale? 96 00:06:31,519 --> 00:06:38,220 Esta propiedad se utiliza mucho junto con el pseudo selector que ya vimos que era el hover, ¿vale? 97 00:06:39,579 --> 00:06:43,000 Vamos a ver un ejemplo, por ejemplo para la imagen 1, ¿vale? 98 00:06:43,000 --> 00:06:48,959 Nosotros ponemos imagen 1, dos puntos y pondríamos hover, ¿vale? 99 00:06:49,480 --> 00:06:53,699 Y lo que vamos a poner es un opacity de 0.45. 100 00:06:55,079 --> 00:07:01,139 Y aquí abajo volveríamos a replicar la expresión para la compatibilidad y ponemos 45. 101 00:07:01,480 --> 00:07:03,079 ¿Qué hacía esto? ¿Qué hacía el hover? 102 00:07:03,079 --> 00:07:12,079 Pues hace que cuando nosotros pasemos el ratón encima de la imagen, esta se vuelva un poquito transparente, al 45% de transparencia. 103 00:07:13,639 --> 00:07:14,160 ¿Vale? 104 00:07:14,759 --> 00:07:20,649 Una cosita que tenemos que saber de este tema de la opacidad, ¿vale? 105 00:07:21,029 --> 00:07:24,290 El tema de caja, cómo hacer cajas realmente transparentes. 106 00:07:24,569 --> 00:07:27,410 Esto ya medio lo explicamos cuando vimos el tema de colores, ¿vale? 107 00:07:27,829 --> 00:07:32,430 Vamos a meter un elemento contenedor, un div, ¿vale? 108 00:07:33,269 --> 00:07:37,189 Con el texto, con el id, perdón, caja, ¿vale? 109 00:07:37,329 --> 00:07:40,250 Y dentro le vamos a poner un texto lore-nipsum, ¿vale? 110 00:07:40,250 --> 00:07:43,870 Y vamos a modificar ese elemento caja. 111 00:07:44,569 --> 00:07:56,930 Le vamos a poner un color que sea FF a 500, que como veis, si pongo el retorno encima, es una especie de naranja. 112 00:07:58,149 --> 00:08:01,709 Le vamos a poner un margen superior de 40 píxeles. 113 00:08:01,709 --> 00:08:09,709 Le vamos a poner un margen inferior de 10 píxeles y un relleno de 50 píxeles. 114 00:08:11,029 --> 00:08:14,689 Aparte, le vamos a poner una anchura de 600 píxeles. 115 00:08:16,069 --> 00:08:21,750 Y le vamos a poner una opacidad de 0.45, ¿vale? 116 00:08:21,750 --> 00:08:29,850 Y de la misma forma, recuerdo, le tenemos que poner el filter a 45, ¿vale? 117 00:08:30,149 --> 00:08:41,750 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? 118 00:08:41,750 --> 00:09:10,750 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. 119 00:09:11,750 --> 00:09:36,129 ¿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? 120 00:09:36,129 --> 00:09:54,019 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? 121 00:09:54,019 --> 00:10:11,679 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? 122 00:10:11,679 --> 00:10:32,779 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? 123 00:10:32,779 --> 00:10:49,720 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? 124 00:10:49,720 --> 00:11:05,740 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? 125 00:11:05,740 --> 00:11:25,059 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. 126 00:11:25,059 --> 00:11:30,200 Y finalmente podemos poner la propiedad inset, ¿vale? 127 00:11:30,500 --> 00:11:36,720 Que ya veremos que es para que la sombra sea una sombra al interior, ¿vale? 128 00:11:37,399 --> 00:11:40,279 Vamos a ir probándolo y lo vamos viendo, ¿vale? 129 00:11:40,379 --> 00:11:43,460 Yo pongo ahora box shadow, ¿vale? 130 00:11:43,879 --> 00:11:54,860 Y pongo por ejemplo 12 píxeles de horizontal, 10 píxeles de vertical, 5 píxeles de difuminado, perdón. 131 00:11:55,059 --> 00:11:59,940 y 4 píxeles del tamaño de la sombra, ¿vale? 132 00:12:00,039 --> 00:12:03,080 Y le voy a poner un colorcito gris, ¿vale? 133 00:12:03,720 --> 00:12:08,840 Y fijaros que en la caja me aparece la sombra a la derecha y abajo. 134 00:12:09,279 --> 00:12:14,399 Si yo pongo aquí un símbolo menos, la sombra se iría a la izquierda, ¿vale? 135 00:12:14,399 --> 00:12:19,000 Y si pongo aquí un símbolo menos, la sombra se iría hacia arriba, ¿vale? 136 00:12:19,759 --> 00:12:24,399 Yo, si aquí ahora pongo una coma, puedo poner muchas más sombras, ¿vale? 137 00:12:24,399 --> 00:12:35,399 Yo ahora mismo podría, por ejemplo, pues poner una sombra que estuviera en menos 8 píxeles, un píxel, ¿vale? 138 00:12:35,399 --> 00:12:40,759 Voy a poner un poco aquí también de márgenes para que sea más fácil visualizarlo, ¿vale? 139 00:12:41,440 --> 00:12:42,559 De 15 píxeles. 140 00:12:44,360 --> 00:12:51,820 Menos 8, un píxel y 10 píxeles de difuminado y de color vamos a poner 0, 0, 1, 0, 1, 1. 141 00:12:51,820 --> 00:13:07,620 Pongo otra coma y pongo 5 píxeles menos 3 píxeles, 15 píxeles de difuminado y de color DFE20A, ¿vale? 142 00:13:07,620 --> 00:13:16,899 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? 143 00:13:17,000 --> 00:13:21,500 Y tengo diferentes sombras en cada uno de los lados, ¿vale? 144 00:13:21,820 --> 00:13:44,419 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? 145 00:13:44,419 --> 00:14:08,100 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? 146 00:14:08,100 --> 00:14:09,340 tal que así 147 00:14:09,340 --> 00:14:11,779 voy a cambiarle un poco de color 148 00:14:11,779 --> 00:14:13,980 para que destaque un poco más 149 00:14:13,980 --> 00:14:15,759 ¿vale? 150 00:14:15,980 --> 00:14:17,139 por ejemplo pongo ese rosa 151 00:14:17,139 --> 00:14:19,580 y le vamos a poner un tamaño más pequeñito 152 00:14:19,580 --> 00:14:21,379 ¿vale? 300 píxeles 153 00:14:21,379 --> 00:14:24,179 ok, pues entonces 154 00:14:24,179 --> 00:14:25,700 yo ahora pondría box 155 00:14:25,700 --> 00:14:28,019 shadow y pondría 156 00:14:28,019 --> 00:14:28,919 una sombra de 157 00:14:28,919 --> 00:14:30,659 10 píxeles 158 00:14:30,659 --> 00:14:33,639 de 5 píxeles en el eje vertical 159 00:14:33,639 --> 00:14:34,519 ¿vale? 160 00:14:34,960 --> 00:14:37,539 de un difuminado de 3 píxeles 161 00:14:37,539 --> 00:14:56,159 ¿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. 162 00:14:56,159 --> 00:14:58,940 Le voy a poner un difuminado mayor para que destaque aún más. 163 00:14:59,679 --> 00:14:59,779 ¿Vale? 164 00:14:59,940 --> 00:15:00,360 Ahora. 165 00:15:01,700 --> 00:15:01,940 ¿Ok? 166 00:15:02,279 --> 00:15:04,539 Y el sombreado me lo pone dentro de la figura. 167 00:15:05,500 --> 00:15:05,960 ¿Vale? 168 00:15:07,299 --> 00:15:15,899 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.