Programación creativa: crea collage de CSS

1. Crea el collage de CSS : introducción: Hola, soy Aga y no puedo esperar para invitarte a mis clases. Creamos collage CSS con código simple. Vamos a usar algo de magia CSS. Vamos a crear un collage CSS. No te preocupes si crees que necesitas tener Photoshop o cualquier otro editor gráfico de software. Nosotros vamos a utilizar sólo el poder del código. Con un par de líneas de código, vamos a crear unos hechos realmente interesantes en tu navegador web. Por favor, no olvides publicar tu trabajo en la sección de proyectos. Nos vemos en la siguiente lección. Adiós. 2. HERRAMIENTAS: Hablemos de herramientas que vamos a utilizar en estas clases. En primer lugar, vamos a utilizar nuestro navegador web favorito. Normalmente uso Chrome. También podemos usar Firefox. Vamos a usar mucho las herramientas de desarrollo. ¿ Cuáles son nuestras herramientas de desarrollo? Estas son herramientas para desarrolladores web, y están integradas directamente en cada navegador. Me gusta mucho usar herramientas de desarrollo en Chrome, pero tal vez tengas diferentes preferencias. Veamos cómo podemos lanzarlos y qué es lo que realmente hay dentro. Tenemos el Chrome abierto. Hacemos clic derecho, inspeccionamos y golpeamos, tenemos las herramientas de desarrollo abiertas en nuestro lado derecho de la ventana. Lo que puedes ver aquí es todo el código, HTML de nuestro sitio web seguro. Tenemos este sitio web de Skillshare abierto. Simplemente puedes comprobar qué parte del código es responsable de la capa hacia fuera. Por caso, si quieres averiguar en código dónde está la navegación, solo tienes que hacer clic en esta flecha y simplemente navegar hasta ella. Ahora ya sabes que esta pieza de código se encarga de renderizar la navegación. Aquí, tenemos estilos, por lo que podemos llegar al archivo CSS. Podemos volver a los elementos, por lo que nuestro código HTML y ver qué estilos se aplican aquí. Por ahora, podría parecer complicado, pero no te preocupes, te lo explicaré todo paso a paso. Si te gustaría tener esta ventana en otra posición, puedes decidir si se debe cavar a izquierda o tal vez debería estar en una ventana separada. También podemos abrir herramientas de desarrollo en Firefox. La regla es la misma clic derecho, inspeccionar elemento y se puede ver la Ventana de las herramientas dev, que forman parte del navegador web Firefox. De nuevo, tenemos el código HTML, tenemos CSS. También podemos cambiar la posición de las herramientas de desarrollo. Por instancia, los cavó a la derecha. Otra cosa que necesitamos tener es un editor de código. Te recomiendo usar Atom. Se puede descargar de forma gratuita desde el sitio web, atom.io. Está disponible para Mac OS y Windows. Tal vez como otros editores de código como Sublime Text, siéntete libre de usar lo que se adapte a tus necesidades. En resumen vamos a usar, navegador web, las herramientas de desarrollo y editor de código. Por favor recuerda sobre la descarga del paquete. Está bajo la sección de tu proyecto. 3. HTML y CSS: Si no estás familiarizado con HTML y CSS, te recomiendo encarecidamente que visites mis clases sobre la codificación de tu propia página web. Aquí estoy mostrando cómo crear clases CSS, explicando lo que nuestros selectores CSS. También te recomendaría que revises la animación SVG con código CSS simple, entonces, mis clases de editor donde estoy mostrando también cómo crear selectores, selectores CSS, clases CSS. Entonces lo consigues todo aquí. 4. Trato de recorte: formas básicas: En esta lección, vamos a aprender lo que hace clip-path. Clip-path es una propiedad CSS. En general, nos ayuda a recortar algunas formas. Clip-path es sólo un límite de formas. El recorte define qué área de imagen debe ser visible. El recorte es similar a cortar trozos de papel. Cualquier cosa fuera del camino se ocultará mientras cualquier cosa dentro del camino será visible. Por ejemplo, si una función de círculo establece una máscara de recorte sobre la parte superior de una imagen, verá la parte de la imagen que está dentro del círculo. Comprobemos cómo funciona el clip-path en realidad. Estamos teniendo un div simple con antecedentes. El fondo son azulejos de color rosa, nos gustaría aplicar aquí click path, que recortará un círculo fuera de esta plaza. Estoy escribiendo clip-path en la clase de los azulejos. Se puede ver que este div tiene mosaicos de clase y para este selector, estamos escribiendo clip-path, circle. Me gustaría tener el radio del círculo para ser la mitad de la altura y anchura de este cuadrado. No tenemos que usar Photoshop para cortar elementos. Aparte de los círculos y rectángulos que son formas muy básicas y simples, también podemos aplicar algo más complicado. Vamos a comprobar, estoy pegando ahora la pieza de código. Tenemos clip-path y polígono definido. Cada uno de estos elementos son las coordenadas. Gracias a ellos, podemos crear una forma. En este ejemplo, tenemos tres vértices. Este es el resultado final, que es un triángulo. Ahora te puedes preguntar ¿cómo puedo crear tal forma? ¿ Tengo que experimentar con los números para encontrar la forma perfecta? Por supuesto, no es necesario. Hay muchas herramientas. Este es uno de los ejemplos de una herramienta muy cool la cual puedes usar para crear formas más complicadas. Esto se llama CSS clip-path maker. En realidad puedes elegir algo de las formas ya preparadas como octágono, hexágono pentágono, etc. Con esta herramienta, también puedes personalizar la forma. Simplemente puedes arrastrar los puntos y cambiar sus coordenadas. Apliquemos este mensaje porque es bastante divertido. Hagámoslo más sesgado así. Lo que tengo que hacer es copiar el código. Yo estoy aquí, en mis archivos locales. Yo lo refresco. Todavía tengo el rectángulo. Aquí pego el código como CSS y tengo mi forma. Tan fácil como eso. Tan solo para resumir, usamos clip-path para recortar algunos elementos. Hacemos visibles algunas partes de la imagen y algunas ocultas. Todo depende de la forma que definamos. Empezamos con círculo simple, donde acabamos de definir un radio del círculo y en el segundo ejemplo, estábamos usando polígono. En la siguiente lección, vamos a aprender a aplicar formas personalizadas creadas, por ejemplo, en Illustrator. Vamos a utilizar la función URL. 5. Trato de recorte: ejercicio: Hagamos el ejercicio con clip-path y función URL. Estamos abriendo la carpeta llamada glitter-clip. Hagamos doble clic en el índice HTML para ver qué hay dentro. Por lo que dentro tenemos el expediente que ya están preparados para ti. Este es archivo HTML, y si lanzamos herramientas div, podemos ver que esta es la sección con el div llamado glitter class, glitter-shadow y text. Me gustaría aplicar la forma aquí. A mí me gustaría cortar de este rectángulo un chapoteo. Si abrimos imágenes, subcarpeta veremos que hay splash.svg, que ya conocemos. Todo lo que tenemos que hacer es aplicar esta forma svg usando la propiedad clip-path. Lo interesante aquí es que tenemos un archivo gif. Entonces se mueve, en realidad es glitter. Esto es lo que me gusta de este ejemplo de que podemos aplicar gifs y trabajos de clip-path en él. Esto es genial. También agregué una forma por pseudo clase. Si no sabes qué son pseudo clases y CSS, no te preocupes. Voy a crear otra clase dedicada a este tema, pero por ahora sólo tomémoslo por sentado. Estamos abriendo toda la carpeta, es glitter-clip. Tenemos index.html, y como en el ejemplo anterior, ya preparé esqueleto para ti svg skeleton donde puedes agregar clip-path. Veo que falta una tack de clip-path aquí, así que lo estoy agregando. Aquí añadiré nuestra forma definida en archivo svg. Esto es común a un HTML Si no lo estás familiarizado, significa que no se renderizará en la página, es solo la información para mí [inaudible]. Abramos splash.svg. En el ejemplo anterior, copiamos sólo la ruta y la pegamos entre clip-path, lo siento, debería estar abriendo, así que lo cambiamos también. Pegar, puedo quitar id y class porque no lo necesitamos. Lo guardamos, y ahora es el momento de aplicar clip-path a la determinada clase. Si lo refresco nada ha cambiado. Queremos aplicar clip-path en este div. Esta es la clase div llamada glitter. Si escribo aquí función URL clip-path tenemos que hacer referencia a la forma que se define en documento HTML, en referencia a id, por lo que es hash y el nombre de nuestra id. Estábamos revisando index.html. No hay nada definido, así que tenemos que definir id Eso se llama splash, nada nuevo, y refrescar de nuevo porque hicimos un cambio. Clip-path, función URL y nombre del id splash, y funciona. Como puedes ver, el chapoteo se aplica al glitter, que tiene como fondo el gif glitter. Si lo descomandamos, verás que el purpurina se ha ido. Pero también tenemos que aplicar este clip-path a la siguiente clase, la pseudo-clase de antes. Lo que estoy haciendo en este momento, es que estoy abriendo glitter shadow y aquí estoy dando click en la pseudo-clase antes pseudo-clase. Si deshacemos clic en el fondo, verás que desaparece. Este es el lugar correcto. Queremos aplicar aquí un clip-path, aplicándolo también. Ahora tenemos un efecto realmente interesante. Recuerda que si cambias algo en las herramientas div, solo se guarda en tu navegador web, y solo se mantiene en esta sesión que tienes tu navegador abierto. Si actualizo la página, mis cambios se habrán ido. Por lo que tenemos que agregarlos en nuestro archivo CSS. Abramos archivo CSS. Estábamos agregando clip-path a glitter y a la pseudo clase glitter-shadow antes. Guardémoslo, refresquemos, y funciona. Recuerda guardar el archivo HTML y styles.css. Porque muy a menudo esta es la razón por tus cambios no se reflejan en el navegador web. Ahora tenemos el brillo cortado en esta hermosa forma de chapoteo. 6. Clip-path función de url: A modo de recordatorio, para una propiedad de ruta de clip, podemos utilizar formas básicas que ya están definidas en el navegador web. Podemos, por ejemplo, usar inserto, que hará un rectángulo fuera de nuestro cuadrado y también podemos tener esquinas redondas, también podemos tener círculo, elipse, polígono para formas más complicadas. Para formas personalizadas, podemos usar SVG. SVG significa Scalable Vector Graphics, y lo podemos crear en gráficos vectoriales artículos blandos como Catch, Adobe Illustrator o Inkscape. Esta es una gran solución porque podemos decidir cuál debe ser la forma la podemos dibujar en editor de gráficos y es muy conveniente para nosotros más adelante aplicar a código HTML y CSS de forma. Cómo debemos hacerlo. Ya es hora de la función URL. Te mostraré cómo hacerlo haciendo el ejercicio. Por lo que ahora podemos abrir la carpeta llamada url-function, que es la carpeta donde podemos hacer el ejercicio. Ya preparé el esqueleto, esqueleto HTML para ti. Comprobemos lo que hay dentro haciendo doble clic. Por lo que se abre en el navegador web y como puedes ver, es solo un rectángulo con una imagen. Podemos ver lo que está sucediendo en el código haciendo clic derecho, inspeccionar. Entonces estamos lanzando las herramientas de desarrollo y aquí está el código HTML. Como puedes ver, tenemos el div con una clase llamada splash y aquí tenemos unos estilos CSS aplicados para esta clase. Entonces tenemos el fondo, tenemos el conjunto de ancho y altura y algunas propiedades de fondo. Ahora nos gustaría aplicar la ruta SVG que recortará, salpicará de este rectángulo. Entonces vamos a abrir toda la carpeta con los archivos de función URL en el editor de código. Estoy usando Atom. Entonces aquí están los expedientes. Como puedes ver, tienes la subcarpeta de imágenes, estilos e índice HTML. Entonces podemos ver el esqueleto del HTML y aquí está la etiqueta SVG sin embargo, está vacía. no hay nada escrito y aquí nos gustaría aplicar nuestro camino SVG. Entonces si revisas en la carpeta, tenemos imágenes y nos gustaría aplicar esta forma para cortar el chapoteo del rectángulo. Por lo que vamos a utilizar Clip path. Entonces estamos abriendo esta forma SVG, lo siento. Entonces estamos abriendo splash SVG y aquí está el código SVG. Parece HTML, pero es XML porque SVG es formato basado en XML, y lo que nos interesa es esa etiqueta de ruta, así que solo copiamos la etiqueta de ruta y la pegamos entre los devs. Devs significa definición. Significa que este SVG no se renderiza en la página. Por lo que no verás el chapoteo en el documento HTML. Si actualizamos la página, verás que nada ha cambiado sin embargo, tenemos este SVG en el código. Lo que falta aquí es la etiqueta de ruta de clip y ID. Tenemos que cerrar clip path así no te olvides de ello. Puedes tener la etiqueta aquí. Para que veas que esta etiqueta se está abriendo y tiene la etiqueta de cierre, ID, llamémosla splash. Podemos eliminar ID y clase porque es generado por Adobe Illustrator no lo usamos. Simplemente necesitamos todas las coordenadas que definen nuestra forma. Entonces lo que tenemos que hacer ahora es que tenemos que hacer referencia de alguna manera desde nuestro CSS, que está en la carpeta de estilos y tenemos que aplicar esta forma y la propiedad de ruta Clip. Por lo que todos sabemos cómo debe escribirse la trayectoria de clip. Simplemente escribimos ruta de clip y aquí en lugar de círculo o elipse o inserto, escribimos función URL y aquí tenemos la escritura la definición, de la forma. Nuestra forma ya está definida en index.html y el ID es splash. Entonces lo que tenemos que hacer es sólo hacer referencia a ello ID. Por lo que hash significa ID y CSS y el nombre de esta ID, es splash. Sólo tenemos que salvarlo. También podemos guardar index.html y ahora vamos a referirnos a la página y bang algo ha cambiado. Por último. Si vamos a splash, class, splash dev, y revisamos la ventana con los estilos, para que podamos ver que se aplica esta ruta de clip. Si lo venimos seguimos viendo el rectangular. Si entramos ahora vemos que el rectángulo, fácil como eso. Entonces hagamos otro ejercicio. En nuestra carpeta, hay otra forma, forma SVG. Entonces en lugar de chapoteo, queremos tener forma SVG. Entonces lo que hacemos es simplemente copiar la etiqueta de ruta igual con lo que hicimos con splash SVG. Lo pegamos a index.html en lugar de nuestra ruta anterior. Todavía puedes tener ID splash. Eliminamos código innecesario, lo guardamos y lo actualizamos y ahora tenemos la forma que se define para splash. Entonces resumiendo, lo que tenemos que hacer es abrir código SVG, copiar la parte del código que se encarga de generar la forma. Entonces aquí está la etiqueta de ruta la pegamos al archivo HTML, a SVG, eso ya está definido a la definición. Tenemos la trayectoria del clip y la trayectoria del clip tiene la ID creada. Podemos escribirle el nombre, lo que queremos, por lo que puede ser incluso elemento y más adelante en CSS, solo tenemos que hacer referencia a ello en la propiedad de ruta de clip usando la función URL. Entonces en lugar splash, tenemos que escribir elemento aquí y si actualizamos, nada ha cambiado sólo el nombre de la de la forma a la que estamos haciendo referencia. 7. Trayo: ejercicio de brillo: Entonces hagamos el ejercicio con clip-path y función URL. Estamos abriendo la carpeta llamada “Glitter-clip”. Hagamos doble clic en “index.html” para ver qué hay dentro. interior tenemos el archivo que ya están preparados para ti, este es archivo HTML. Si lanzamos herramientas dev, podemos ver que esta es la sección con el div llamado glitter con un poco de clase glitter, glitter- shadow y text. Me gustaría aplicar la forma aquí. A mí me gustaría cortar de este rectángulo un chapoteo. Si abrimos imágenes sub carpeta veremos que hay splash.svg, que ya conocemos. Todo lo que tenemos que hacer es aplicar esta forma svg, usando propiedad clip-path. Lo interesante aquí es que tenemos archivo GIF. Se mueve, en realidad es glitter. Esto es lo que realmente me gusta de este ejemplo de que podemos aplicar gifs y trabajos de clip-path en él. Esto es genial. También agregué una forma por pseudo clase. Si no sabes lo que es pseudo clase es en CSS, no te preocupes. Voy a crear otra clase dedicada a este tema. Pero por ahora sólo tomémoslo por sentado. Estamos abriendo toda la carpeta. Es glitter-clip. Tenemos index.HTML. Como mejora ejemplo, ya preparé esqueleto para ti, svg skeleton donde puedes agregar clip-path. Veo ese remolcador de clip-path. Aquí falta un remolcador de clip-path, así que lo estoy agregando. Aquí añadiré nuestra forma, definiré un “archivo svg”. Esto es comentario en HTML, si no estás familiarizado con él. Significa que no se renderizará en la página. Es sólo esa información para mí o el código o con codificador. Abramos splash.svg. En el ejemplo anterior, copiamos sólo la ruta y pegamos entre recorte. Perdón, debería estar abriendo. Cambiándolo también. Plegando, puedo quitar ID y clase porque no lo necesitamos. Nosotros lo guardamos. Ahora es el momento de aplicar clip-path a la determinada clase. Si lo refresco y nada ha cambiado, queremos aplicar clip-path en este div. Esta es la clase div llamada glitter. Si escribo aquí función URL clip-path, tenemos que hacer referencia a la forma que es la definición de un documento HTML, y te refieres a ID, por lo que es hash y el nombre de nuestra ID, vamos a comprobar, vamos a codificar. Estábamos revisando index.HTML. No hay nada definido, así que tenemos que definir ID, eso se llama Splash, nada nuevo. Refresca de nuevo porque hicimos un cambio, por lo que clip-path, función URL, y nombre del ID splash. Funciona. Como puedes ver, el descontento se aplica al glitter, que tiene como fondo el gif glitter. Si lo descomentamos, verás que el purpurina se ha ido. Pero también tenemos que aplicar este clip-path a la siguiente clase, la pseudo clase de antes. Lo que estoy haciendo en este momento, es que estoy abriendo glitter-shadow y aquí estoy dando click en la pseudo-clase, antes pseudo-clase. Si deshacemos click en el fondo, verás que desaparece, por lo que este es el lugar correcto. Queremos aplicar aquí en clip-path. Aplicándolo también. Ahora tenemos efecto realmente interesante. Recuerda que si cambias algo en las herramientas de desarrollo, solo se guarda en tu navegador web. Se mantiene sólo en esta sesión que tienes tu navegador abierto. Si actualizo la página, mis cambios se habrán ido. Tenemos que añadirlos en nuestro archivo CSS. Abramos archivo CSS. Estábamos agregando clip-path a glitter y a la pseudo clase glitter-shadow antes, vamos a guardarlo, refrescar, y funciona. Recuerda guardar archivo HTML y styles.css porque muy a menudo esta es la razón por la que tus cambios no se reflejan en el navegador web. Ahora tenemos el brillo cortado en esta hermosa forma de chapoteo. 8. Masaje: Estábamos aprendiendo a usar la propiedad Clip-path y cuáles son las diferentes posibilidades. Es hora en este momento de saber más sobre el enmascaramiento, especialmente la propiedad de máscara-imagen. Se utilizan máscaras para mostrar u ocultar algunas partes de los elementos, algunas partes de la imagen. Por supuesto que suena justo como recorte, entonces, ¿cuál es la diferencia? El principal diferencia es que las máscaras son imágenes y los clips son caminos. Estaré hablando de las diferencias en el siguiente apartado. Por ahora, veamos cuáles son las posibilidades con el enmascaramiento. Abramos la carpeta llamada Máscara. En su interior tenemos index.html, estilos, e imágenes. ¿Qué hay dentro? Este es el archivo HTML que prefiero para ti también para ese ejercicio de clip-path. Pero aquí vamos a aplicar una máscara, así que lanzemos las herramientas de desarrollo. Ahora nos gustaría aplicar a este div, con el glitter clase, una imagen de máscara. Todo lo que tienes que saber es que el inmueble se llama máscara-imagen. Ahora podemos agregar la función URL. Estamos haciendo referencia a un archivo y a las imágenes. Si abrimos esa carpeta, podemos ver que en Imágenes tenemos dos archivos: máscara-gradiente, puedes ver aquí que tenemos la transparencia, y circle-mask, solo un círculo. Este es un archivo PNG, por lo que significa que es un gráfico ráster. Estoy escribiendo función URL. El camino a la imagen, por lo que las imágenes, y el nombre del archivo que es circle-mask.png. Lo que puedes ver es que la máscara no se aplica y la razón es que tenemos que usar prefijos de proveedor. Significa que tenemos que agregar webkit porque estamos usando Chrome. Para Firefox, es moz de Mozilla. Estoy escribiendo la misma propiedad solo con el prefijo webkit, así máscark-image y exactamente lo mismo. Images/circle-mask.png y se aplica el círculo. Funciona casi igual que un recorte, pero aquí estamos usando el archivo ráster. Si echamos un vistazo más de cerca, verás los píxeles, el efecto pixelado. Vamos a hablar de este efecto y compararlo con el recorte en un tiempo. Lo que puedes ver es que el círculo está cortado en la parte inferior. Es porque la imagen no encaja enteramente en esta plaza. Afortunadamente, tenemos algo así como la propiedad mask-size y podemos establecer. Estos son los mismos valores que para el fondo en CSS. Podemos usar contener, significa que toda la máscara vamos a contener aquí. También tenemos que aplicar esto a nuestra sombra. Vamos a pseudo-clase, pegando el código, y verás que se aplica la máscara. Aquí está pasando algo extraño. Esto se debe a que la máscara se repite. Si establecemos mask-size para uno más pequeño, si agregamos aquí como 50 pixels, verás que tenemos toneladas de pequeñas máscaras aplicadas a nuestro rectangular. También podemos hacer esto para la sombra, escribiendo 50 píxeles. Es un efecto realmente interesante. En realidad puedes experimentar mucho con esto. Si no te gusta repetir la máscara, hay una propiedad CSS llamada mask-repeat. Podemos decidir si queremos repetir, si queremos repetir sólo en el eje X o en Y. Hagámoslo así una vez más. Recuerda que para Chrome siempre hay que agregar prefijo webkit, pero también tenemos que agregar solo la propiedad sin agregar prefijos para el otro navegador. Máscara-repite y nos dieron repetición-x. Se tachará aquí porque no funciona en Chrome, pero para otro navegador puede funcionar. Voy a copiar esto para la brillante-sombra. Hagamos al revés ahí está aplicando Y, así que tenemos algo así. Se pueden crear efectos realmente locos. También puedes agregar no repetición, lo que significa que la máscara podría aplicarse solo en un solo lugar. Aquí no se repite. Brillo sombra, sin repetición. Tenemos uno más pequeño. También podríamos cambiar el tamaño para que toda la máscara encajara en la imagen. Repetir y contener. 9. Masking parte 2.: Hagamos una breve recapitulación sobre el enmascaramiento. Lo que sabemos es que aplicamos propiedad mask-image con el fin de ocultar o mostrar algunos elementos respecto a la máscara. Para un crecido, hay que recordar sobre el prefijo webkit porque de lo contrario no funcionará. Por favor recuerda al respecto. Otra cosa del enmascaramiento es que podemos aplicar mask-size para definir cuál debe ser el tamaño de la máscara. Toda la máscara puede caber en la imagen o al elemento. También podemos aplicar una mask- repeat con el fin de repetir el patrón sobre la máscara. Por lo que estas son las propiedades que también se pueden aplicar para fondo en CSS. Entonces podemos decir que la máscara está de alguna manera relacionada con el fondo, y obviamente podemos recordar sobre los prefijos webkit para estas propiedades también. Las máscaras pueden ser imágenes ráster con diferentes niveles de transparencia. Entonces el mejor formato es el archivo png, y vamos a aplicar png con transparencias apenas en un minuto. En nuestra carpeta de ejercicios, tenemos también circle-mask-gradiente. Entonces lo que podemos ver aquí es que, en el círculo el fondo se está desvaneciendo. Tratemos de aplicar este tipo de máscara. Entonces en el ejemplo anterior, estábamos aplicando sólo una imagen simple, opaca. Hagámoslo ahora claramente en el editor de código. Entonces estamos teniendo nuestro div glitter, glitter shadow. Estamos teniendo el texto. 10. Ejercicio final: collage de agua: Es hora del último ejercicio con enmascaramiento y recorte. Espero que realmente disfrutes jugando y experimentando con estas propiedades CSS. Abramos carpeta colágeno-agua. Podemos comprobar lo que hay en el índice html. Bueno, hay algunos rectángulos, algunas fotos y el título. No obstante, el efecto que quisiéramos lograr al final es éste. Entonces lo que puedes ver es que aplicamos un chapoteo, recortamos algunos elementos de la imagen usando recorte y enmascaramiento. Voy a hacer este ejercicio con ustedes paso a paso. Entonces estoy abriendo toda la carpeta en el editor de código Atom y si miro en html, puedo ver que ya tengo alguna estructura construida. Tengo el lugar para pegar código svg para los recorridos de clip y además tengo una carpeta con imágenes. Si vamos a la página, verás que tenemos que aplicar este splash al contenedor con este gradiente. Por lo que podemos usar DevTools para comprobar cuál es el nombre de clase que genera este bloque con gradiente. En realidad, es antes, es esta pseudo-clase aplicada al contenedor. puede ver que este es su fondo y a este contenedor, a este bloque, tenemos que aplicar nuestra ruta de clip, este. Entonces si abrimos imágenes, podemos ver que este flash es algo, esto es algo que aplicamos a nuestro contenedor. Por lo que el nombre es clase splash-2.svg. Entonces lo estamos abriendo, copiamos el camino. Por supuesto que tenemos que crear etiqueta de ruta de clip, cerrarla, y pegar el camino dentro. Por supuesto, podemos deshacernos de las cosas que no usaremos. Por instancia id, lo guardamos y tenemos que agregar id para la ruta del clip porque vamos a hacer referencia a ella en CSS. Podemos agregar chapoteo a la izquierda porque está en el lado izquierdo. Puedo ver que hice la mecanografía así que tengo que arreglarlo. Sí, ahora es correcto, ahorrando y luego tenemos que aplicar clip para contenedor antes. Entonces es clip path, función url y dentro estamos escribiendo splash left, y por supuesto, punto y coma al final de la línea y refrescando la página. Puedo ver que se aplica mi forma. Las otras formas que tengo que cortar, son estas dos. De nuevo, podemos usar el recorte pero también podemos intentar enmascararlo, hará lo mismo. El motivo por el que sugiero recortar Es porque estamos teniendo archivos svg. Haremos el pequeño bono para este ejercicio con enmascaramiento, pero por ahora usemos el recorte. En la parte superior derecha estamos teniendo esta forma, así que es splash dash one. Entonces estoy abriendo aquí, copiar ruta, pegarlo para indexar html con lo mismo. Por lo que la etiqueta ClipPath, id, deja ponerlo chapoteo, arriba a la derecha. Cerremos la etiqueta, no hay errores tipográficos en este momento. Pegar ruta, perdón, pegar ruta, quitar id, guardar. Vamos a comprobar usando DevTools a qué clase tenemos que aplicar este play back. Es sólo el agua. Entonces buscamos agua primero su aquí. Estamos aplicando ruta de enlace, función url, splash, top rights, save, refrescante. Estamos teniendo nuestro chapoteo aplicado. El último. Entonces este es el splash dash free, copy, ClipPath, id, splash button derecho, pegando, y por supuesto cerrando la pestaña. Lo último es que tenemos que aplicar. Sólo vamos a comprobar a qué clase porque no estoy seguro. Se llama agua segunda. Por lo que busco agua en segundo lugar en mi archivo CSS. Lo mismo, solo aplicando ClipPath, función url, vamos a espacio aquí. Es chapoteo, abajo a la derecha. Refrescar, y se hace el ejercicio. Lo que quiero mencionar aquí es que, este es el contenedor. Vamos a comentar eso por un tiempo. Este es el contenedor con el fondo. También agregué adjunto de fondo fijo. Por lo que el fondo es fijo y tenemos este tipo de efectos paralelos en el movimiento. Por eso creo que es un poco diferente e interesante. Puedes tener esto en mente al hacer tus proyectos. Esto se hace. Por lo que lo último es el pequeño bono para este ejercicio. 11. Extra. bonus de ejercicios: Acabo de crear máscaras. Estos son archivos PNG. Podemos ver es que aquí en la parte inferior son transparentes. Apliquemos estas dos salpicaduras. En lugar de recortar, vamos a agregar enmascaramiento. Archivos PNG, es imagen de máscara, función URL, imágenes, splash- 2 PNG, y por supuesto, agregando prefijo de proveedor, que es webkit. Vamos a refrescar la página. Podemos ver que la salpicadura es lisa y borrosa de alguna manera, pero la máscara se repite. Por supuesto que tenemos que añadir máscara repetición, no repetición. Perdón. Por supuesto con el prefijo del proveedor y el tamaño de la máscara, vamos a agregar contener, y lo mismo con webkit. Por supuesto, las mismas propiedades que podemos aplicar a nuestra clase de agua. En lugar de clip, estamos agregando la slash 1. Ahorrar, refrescante, y esto es lo mismo borroso afecta. Por supuesto, puedes experimentar mucho con él. Podemos hacer algunos agujeros dentro de la máscara. Todo está listo para tu creatividad y el efecto final que te gustaría lograr. No olvides presionar tu proyecto.