Programação criativa: crie colagem em CSS

1. Crie uma colagem de CSS - intrino: Olá, sou Aga e mal posso esperar para convidá-lo para as minhas aulas. Criamos colagem CSS com código simples. Vamos usar um pouco de magia CSS. Vamos criar uma colagem CSS. Não se preocupe se você acha que precisa ter Photoshop ou qualquer outro editor gráfico de software. Vamos usar apenas o poder do código. Com um par de linhas de código, vamos criar um fato realmente interessante em seu navegador web. Por favor, não se esqueça de postar seu trabalho na seção do projeto. Vejo você na próxima lição. Tchau. 2. Ferramentas: Vamos falar sobre ferramentas que vamos usar nessas aulas. Primeiro de tudo, vamos usar nosso navegador favorito. Eu costumo usar o Chrome. Também podemos usar o Firefox. Vamos usar muito ferramentas de desenvolvimento. Quais são as nossas ferramentas de desenvolvimento? Estas são ferramentas de desenvolvimento web, e são incorporadas diretamente em todos os navegadores. Gosto muito de usar ferramentas de desenvolvimento no Chrome, mas talvez você tenha preferências diferentes. Vamos ver como podemos lançá-los e o que realmente está dentro. Temos o Chrome aberto. Nós clicamos com o botão direito, inspecionamos e batemos , temos as ferramentas de desenvolvimento abertas no nosso lado direito da janela. O que você pode ver aqui é todo o código, HTML do nosso site seguro. Temos este site da Skillshare aberto. Você pode apenas verificar qual parte do código é responsável pela camada para fora. Por exemplo, se você quiser descobrir em código onde a navegação está, basta clicar nesta seta e navegar até ela. Agora você sabe que este pedaço de código é responsável por renderizar a navegação. Aqui, temos estilos, que possamos chegar ao arquivo CSS. Podemos voltar aos elementos, então nosso código HTML e ver quais estilos são aplicados aqui. Por enquanto, pode parecer complicado, mas não se preocupe, vou explicar tudo passo a passo. Se você gostaria de ter esta janela em outra posição, você pode decidir se ela deve ser cavada para a esquerda ou talvez ela deveria estar em uma janela separada. Também podemos abrir ferramentas de desenvolvimento no Firefox. A regra é o mesmo clique com o botão direito do mouse, inspecionar elemento e você pode ver a janela das ferramentas de desenvolvimento, que fazem parte do navegador web Firefox. Novamente, temos o código HTML, temos CSS. Também podemos mudar a posição das ferramentas de desenvolvimento. Por exemplo, cavou-os para a direita. A outra coisa que precisamos é de um editor de código. Eu recomendo que você use Atom. Você pode baixá-lo gratuitamente no site, atom.io. Está disponível para Mac OS e Windows. Talvez como outros editores de código como Sublime Text, sinta-se livre para usar o que se adapte às suas necessidades. Resumindo, vamos usar, navegador web, as ferramentas de desenvolvimento e editor de código. Lembre-se de fazer o download do pacote. Está na seção do seu projeto. 3. HTML e CSS: Se você não está familiarizado com HTML e CSS, eu recomendo vivamente que você visite minhas aulas sobre codificar seu próprio site. Estou mostrando aqui como criar classes CSS, explicando o que nossos seletores CSS. Eu também recomendaria que você confira animação SVG com código CSS simples, então, minhas classes de editor onde eu estou mostrando também como criar seletores, seletores CSS, classes CSS. Então você tem tudo aqui. 4. Caminho de ponta: Nesta lição, nós vamos aprender o que o clip-path faz. Clip-path é uma propriedade CSS. Em geral, isso nos ajuda a cortar algumas formas. Clip-path é apenas um limite de formas. O recorte define qual área da imagem deve ser visível. O recorte é semelhante a cortar pedaços de papel. Qualquer coisa fora do caminho será escondida enquanto qualquer coisa dentro do caminho será visível. Por exemplo, se uma função de círculo definir uma máscara de recorte sobre a parte superior de uma imagem, você verá a parte da imagem que está dentro do círculo. Vamos verificar como o clip-path funciona na realidade. Estamos tendo uma div simples com um fundo. O fundo são azulejos rosa, gostaríamos de aplicar aqui clique caminho, que irá cortar um círculo fora deste quadrado. Estou escrevendo Clip-path na classe dos azulejos. Você pode ver que esta div tem telhas de classe e para este seletor, estamos escrevendo clip-path, círculo. Eu gostaria de ter o raio do círculo para ser a metade da altura e largura deste quadrado. Não precisamos usar o Photoshop para cortar elementos. Além de círculos e retângulos que são formas muito básicas e simples, também podemos aplicar algo mais complicado. Vamos verificar, estou colando agora o pedaço de código. Temos clip-path e polígono definido. Cada um desses elementos são as coordenadas. Graças a eles, podemos criar uma forma. Neste exemplo, temos três vértices. Este é o resultado final, que é um triângulo. Agora você pode perguntar como eu posso criar tal forma? Tenho que experimentar os números para encontrar a forma perfeita? Claro, você não precisa. Há muitas ferramentas. Este é um dos exemplos de uma ferramenta muito legal que você pode usar para criar formas mais complicadas. Isso é chamado de criador de caminho de clipe CSS. Você pode realmente escolher algo das formas já preparadas como octógono, hexágono pentágono, etc Com esta ferramenta, você também pode personalizar a forma. Você pode simplesmente arrastar os pontos e alterar suas coordenadas. Vamos aplicar esta mensagem porque é muito divertido. Vamos torná-lo mais distorcido assim. O que tenho que fazer é copiar o código. Estou aqui, nos meus arquivos locais. Eu refresco isso. Ainda tenho o retângulo. Aqui eu colar o código como CSS e eu tenho a minha forma. Simplesmente fácil assim. Só para resumir, usamos clip-path para cortar alguns elementos. Fazemos algumas partes da imagem visíveis e outras escondidas. Tudo depende da forma que definimos. Começamos com círculo simples, onde acabamos de definir um raio do círculo e no segundo exemplo, estávamos usando polígono. Na próxima lição, aprenderemos como aplicar formas personalizadas criadas, por exemplo, no Illustrator. Vamos usar a função URL. 5. Caminho de ponta: Vamos fazer o exercício com clip-path e função URL. Estamos abrindo a pasta chamada glitter-clip. Vamos clicar duas vezes no índice HTML para ver o que está dentro. Então, dentro temos o arquivo que já está preparado para você. Este é o arquivo HTML, e se lançarmos ferramentas div, podemos ver que esta é a seção com o div chamado classe glitter, glitter-shadow e texto. Eu gostaria de aplicar a forma aqui. Eu gostaria de cortar deste retângulo um respingo. Se abrirmos imagens, subpasta veremos que há splash.svg, que já sabemos. Tudo o que temos a fazer é que temos que aplicar esta forma svg usando a propriedade clip-path. O que é interessante aqui é que temos um arquivo GIF. Então está se movendo, é realmente glitter. Isto é o que eu gosto sobre este exemplo que podemos aplicar gifs e clip-path funciona nele. Isso é ótimo. Eu também adicionei uma forma por pseudo-classe. Se você não sabe o que são pseudo-classes e CSS, não se preocupe. Eu vou criar outra aula dedicada a este tópico, mas por enquanto vamos dar por certo. Estamos abrindo a pasta inteira, é um clipe de glitter. Temos index.html, e como no exemplo anterior, eu já preparei esqueleto para você svg esqueleto onde você pode adicionar clip-path. Vejo que falta um traço de caminho de clipe aqui, então vou adicioná-lo. Aqui eu vou adicionar nossa forma definida no arquivo svg. Isso é comum a um HTML Se você não estiver familiarizado com ele, isso significa que ele não será renderizado na página, é apenas a informação para mim [inaudível]. Vamos abrir splash.svg. No exemplo anterior, copiamos apenas o caminho e o colamos entre o caminho do clip-path, desculpe, ele deve estar abrindo, então alterando-o também. Colando, eu posso remover id e classe porque nós não precisamos dele. Nós o salvamos, e agora é a hora de aplicar clip-path para uma determinada classe. Se eu atualizá-lo, nada mudou. Queremos aplicar clip-path nesta div. Esta é a classe Div chamada Glitter. Se eu escrever aqui clip-path URL função temos que fazer referência à forma que ele está definido no documento HTML, em referência ao id, por isso é hash eo nome do nosso id. Vamos codificar. Estávamos verificando index.html. Não há nada definido, então temos que definir id. Isso é chamado splash, nada de novo, e atualizar novamente porque fizemos uma mudança. Clip-path, função URL e nome do splash id, e ele funciona. Como você pode ver, o splash é aplicado ao glitter, que tem o gif glitter como fundo. Se descomandarmos, verá que o glitter sumiu. Mas também temos que aplicar este clip-path para a próxima classe, a pseudo-classe de antes. O que eu estou fazendo agora, é eu estou abrindo brilho sombra e aqui estou eu clicando na pseudo-classe antes da pseudo-classe. Se desclicarmos no plano de fundo, você verá que ele desaparece. Este é o lugar certo. Queremos aplicar aqui um clip-path, aplicando-o também. Agora temos um efeito muito interessante. Lembre-se do fato de que se você alterar algo nas ferramentas div, ele só é mantido em seu navegador, e é mantido apenas nesta sessão que você tem seu navegador aberto. Se eu atualizar a página, minhas alterações desaparecerão. Então temos que adicioná-los em nosso arquivo CSS. Vamos abrir o arquivo CSS. Nós estávamos adicionando clip-path para glitter e para glitter-shadow pseudo classe antes. Vamos salvá-lo, atualizar, e ele funciona. Lembre-se de salvar o arquivo HTML e styles.css. Porque muitas vezes essa é a razão pela qual suas alterações não são refletidas no navegador da web. Agora temos o glitter cortado nesta bela forma de respingo. 6. Caminho de ponta - função de url: Como lembrete, para uma propriedade de caminho de clipe, podemos usar formas básicas que já estão definidas no navegador da web. Podemos, por exemplo, usar inserções, que fará um retângulo fora do nosso quadrado e também podemos ter cantos redondos, também podemos ter círculo, elipse, polígono para formas mais complicadas. Para formas personalizadas, podemos usar SVG. SVG significa Scalable Vector Graphics, e podemos criá-lo em software de gráficos vetoriais como Catch, Adobe Illustrator ou Inkscape. Esta é uma ótima solução porque podemos decidir qual deve ser a forma que podemos desenhá-lo no editor de gráficos e é muito conveniente para nós mais tarde aplicar para modelar código HTML e CSS. Como devemos fazê-lo. Está na hora da função URL. Vou mostrar-lhe como fazê-lo fazendo o exercício. Então agora podemos abrir a pasta chamada url-function, que é a pasta onde podemos fazer o exercício. Eu já preparei o esqueleto, esqueleto HTML para você. Vamos verificar o que está lá dentro clicando duas vezes. Então ele abre no navegador da web e, como você pode ver, é apenas um retângulo com uma imagem. Podemos ver o que está acontecendo no código clicando com o botão direito do mouse, inspecionar. Então estamos lançando as ferramentas de desenvolvimento e aqui está o código HTML. Como você pode ver, temos a div com uma classe chamada splash e aqui temos um estilos CSS aplicados para esta classe. Então temos o fundo, temos a largura e altura definidas e algumas propriedades de fundo. Agora gostaríamos de aplicar caminho SVG que irá recortar, splash fora deste retângulo. Então vamos abrir toda a pasta com os arquivos de função URL no editor de código. Estou usando o Atom. Aqui estão os arquivos. Como você pode ver, você tem a subpasta de imagens, estilos e índice HTML. Então, podemos ver o esqueleto do HTML e aqui está SVG tag no entanto, ele está vazio. Não há nada escrito aqui e aqui gostaríamos de aplicar nosso caminho SVG. Então, se você verificar na pasta, temos imagens e gostaríamos de aplicar esta forma para cortar o splash fora do retângulo. Então vamos usar o caminho do Clip. Então estamos abrindo essa forma SVG, desculpe. Então, estamos abrindo splash SVG e aqui está o código SVG. É parece HTML, mas é XML porque SVG é formato baseado em XML, e o que estamos interessados é essa tag path, então nós apenas copiamos a tag path e colamos entre devs. Devs significa definição. Isso significa que este SVG não será renderizado na página. Então você não verá o splash no documento HTML. Se atualizarmos a página, você verá que nada mudou no entanto, temos este SVG no código. O que está faltando aqui é a tag e o ID do caminho do clipe. Temos que fechar o caminho do clipe também não se esqueça disso. Pode ficar com a etiqueta aqui. Então você pode ver que esta tag está se abrindo e tem a tag de fechamento, ID, vamos chamá-la de splash. Podemos remover ID e classe porque ela é gerada pelo Adobe Illustrator e não a usamos. Só precisamos de todas as coordenadas que definam a nossa forma. Então o que temos que fazer agora é que temos que fazer referência de alguma forma a partir do nosso CSS, que está na pasta de estilos e temos que aplicar esta forma e Clip propriedade caminho. Então todos nós sabemos como o caminho do clipe deve ser escrito. Nós apenas escrever caminho clipe e aqui em vez de círculo ou elipse ou inserção, escrevemos função URL e aqui temos a escrever a definição, da forma. Nossa forma já está definida em index.html e o ID é splash. Então o que temos que fazer é apenas fazer referência a ele ID. Então hash significa ID e CSS e o nome deste ID, é splash. Só temos que salvá-lo. Nós também podemos salvar index.html e agora vamos refere-se à página e bang algo mudou. Finalmente. Se formos para splash, classe, splash dev, e verificar a janela com os estilos, para que possamos ver que este caminho de clipe é aplicado. Se entrarmos nele ainda vemos o retangular. Se entrarmos agora vemos que o retângulo, fácil como isso. Então vamos fazer outro exercício. Em nossa pasta, há outra forma, forma SVG. Então, em vez de splash, queremos ter forma SVG. Então o que fazemos é copiar a tag path da mesma forma com o que fizemos com splash SVG. Nós colamos em index.html em vez de nosso caminho anterior. Você ainda pode ter a ID splash. Nós removemos código desnecessário, salvá-lo e atualizá-lo e agora temos a forma que é definida para splash. Então resumindo, o que temos que fazer é abrir código SVG, copiar a parte do código que é responsável por gerar a forma. Então, aqui está a tag caminho que colamos para arquivo HTML, para SVG, que já está definido para a definição. Temos o caminho do clipe e o caminho do clipe tem o ID criado. Podemos escrevê-lo o nome, o que queremos, para que ele possa ser ainda elemento e mais tarde em CSS, nós só temos que fazer referência a ele na propriedade caminho clipe usando a função URL. Então, em vez splash, temos que escrever elemento aqui e se atualizarmos, nada mudou apenas o nome da forma que estamos referindo. 7. Caminho de clip - exercício de –: Então vamos fazer o exercício com clip-path e função URL. Estamos abrindo a pasta chamada “Glitter-clip”. Vamos clicar duas vezes em “index.html” para ver o que está dentro. Dentro temos o arquivo que já estão preparados para você, este é o arquivo HTML. Se lançarmos ferramentas de desenvolvimento, podemos ver que esta é a seção com o div chamado glitter com um pouco de classe glitter, glitter- sombra e texto. Eu gostaria de aplicar a forma aqui. Eu gostaria de cortar deste retângulo um respingo. Se abrirmos subpasta imagens veremos que há splash.svg, que já sabemos. Tudo o que temos a fazer é que temos que aplicar esta forma svg, usando a propriedade clip-path. O que é interessante aqui é que temos arquivo GIF. Está se movendo, na verdade é glitter. Isto é o que eu realmente gosto sobre este exemplo que podemos aplicar gifs e clip-path funciona nele. Isso é ótimo. Eu também adicionei uma forma por pseudo-classe. Se você não sabe o que é pseudo-classe está em CSS, não se preocupe. Vou criar outra aula dedicada a este tópico. Mas, por enquanto, vamos tomar isso como garantido. Estamos abrindo a pasta inteira. É um clipe de glitter. Temos index.HTML. Como melhora exemplo, Eu já preparei esqueleto para você, svg esqueleto onde você pode adicionar clip-path. Eu vejo aquele puxador de clip-path. Um rebocador de caminho de clipe está faltando aqui, então vou adicioná-lo. Aqui eu vou adicionar nossa forma, definir um “arquivo svg”. Este é um comentário em HTML, se você não estiver familiarizado com ele. Isso significa que ele não será renderizado na página. É só essa informação para mim ou para o código ou com o codificador. Vamos abrir splash.svg. No exemplo anterior, copiamos apenas o caminho e colamos entre o caminho do clip-path. Desculpe, deveria estar abrindo. Mudando também. Colando, eu posso remover ID e classe porque não precisamos dele. Nós salvamo-lo. Agora é a hora de aplicar clip-path para uma determinada classe. Se eu atualizá-lo e nada mudou, queremos aplicar clip-path nesta div. Esta é a classe Div chamada Glitter. Se eu escrever aqui clip-path URL função, temos que fazer referência à forma que é a definição de um documento HTML, e você referência a ID, por isso é hash e o nome do nosso ID, vamos verificar, vamos codificar. Estávamos verificando index.HTML. Não há nada definido, então temos que definir ID, que se chama Splash, nada de novo. Atualize novamente porque fizemos uma alteração, então clip-path, função URL e nome do splash ID. Funciona. Como você pode ver, o desprazer é aplicado ao glitter, que tem o gif glitter como fundo. Se descomentar, verá que o glitter sumiu. Mas também temos que aplicar este clip-path para a próxima classe, a pseudo-classe de antes. O que eu estou fazendo agora, é eu estou abrindo brilho sombra e aqui estou clicando na pseudo-classe, antes da pseudo-classe. Se desclicarmos no fundo, você verá que ele desaparece, então este é o lugar certo. Queremos aplicar aqui no clip-path. Aplicando também. Agora temos um efeito muito interessante. Lembre-se do fato de que, se você alterar algo nas ferramentas de desenvolvimento, ele só será mantido em seu navegador da Web. É mantido apenas nesta sessão que você tem seu navegador aberto. Se eu atualizar a página, minhas alterações desaparecerão. Temos que adicioná-los em nosso arquivo CSS. Vamos abrir o arquivo CSS. Nós estávamos adicionando clip-path para glitter e para glitter-shadow pseudo classe antes, vamos salvá-lo, atualizar, e ele funciona. Lembre-se de salvar o arquivo HTML e styles.css porque muitas vezes esta é a razão pela qual suas alterações não são refletidas no navegador da web. Agora temos o glitter cortado nesta bela forma de respingo. 8. MÁSCARA: Estávamos aprendendo a usar a propriedade Clip-path e quais são as diferentes possibilidades. Já é hora de saber mais sobre mascaramento, especialmente a propriedade de imagem de máscara. Máscaras são usadas para mostrar ou ocultar algumas partes dos elementos, algumas partes da imagem. Claro que soa como recorte, então qual é a diferença? A principal diferença é que as máscaras são imagens e clipes são caminhos. Falarei sobre as diferenças na próxima seção. Por enquanto, vamos ver quais são as possibilidades com o mascaramento. Vamos abrir a pasta chamada Máscara. Dentro temos index.html, estilos e imagens. O que tem dentro? Este é o arquivo HTML que eu preferi para você também para esse exercício clip-path. Mas aqui vamos aplicar uma máscara, então vamos lançar as ferramentas de desenvolvimento. Agora gostaríamos de aplicar a esta div, com o brilho da classe, uma imagem de máscara. Tudo o que você precisa saber é que a propriedade é chamada de imagem de máscara. Agora podemos adicionar a função URL. Estamos a referir-nos a um ficheiro e às imagens. Se abrirmos essa pasta, podemos ver que em Imagens temos dois arquivos: o gradiente de máscara, você pode ver aqui que temos a transparência, e a máscara de círculo, apenas um círculo. Este é um arquivo PNG, então significa que é um gráfico raster. Estou digitando a função URL. O caminho para a imagem, imagens de modo, e nome do arquivo que é circle-mask.png. O que você pode ver é que a máscara não é aplicada e a razão é que temos que usar prefixos de fornecedor. Isso significa que temos que adicionar webkit porque estamos usando o Chrome. Para o Firefox, é moz da Mozilla. Estou digitando a mesma propriedade apenas com o webkit prefixo, então imagem de máscara e exatamente a mesma coisa. Images/circle-mask.png e o círculo é aplicado. Funciona quase da mesma forma que um recorte, mas aqui estamos usando o arquivo raster. Se olharmos mais de perto, você verá pixels, o efeito pixelado. Vamos falar sobre este efeito e compará-lo ao recorte daqui a pouco. O que você pode ver é que o círculo é cortado no fundo. É porque a imagem não se encaixa inteiramente neste quadrado. Felizmente, temos algo como a propriedade de tamanho de máscara e podemos definir. Estes são os mesmos valores que para fundo em CSS. Podemos usar conter, isso significa que toda a máscara será contida aqui. Temos também de aplicar isto à nossa sombra. Nós estamos indo para pseudo-classe, colando o código, e você vai ver que a máscara é aplicada. Algo estranho está acontecendo aqui. Isso ocorre porque a máscara é repetida. Se definirmos o tamanho da máscara para um menor, se adicionarmos aqui como 50 pixels, você verá que temos toneladas de máscaras pequenas aplicadas ao nosso retangular. Também podemos fazer isso para sombra, digitando 50 pixels. É um efeito muito interessante. Você pode realmente experimentar muito com isso. Se você não gosta de repetir a máscara, há uma propriedade CSS chamada mask-repeat. Podemos decidir se queremos repetir, se queremos repetir apenas no eixo X ou em Y. Vamos fazer isso mais uma vez. Lembre-se que para o Chrome você tem que sempre adicionar prefixo webkit, mas também temos que adicionar apenas a propriedade sem adicionar prefixos para o outro navegador. Máscara de repetição e temos repetição-x. Ele será riscado aqui porque não funciona no Chrome, mas para outro navegador pode funcionar. Vou copiar isto para o brilho da sombra. Vamos fazer o contrário, há aplicação Y, então temos algo assim. Você pode criar efeitos realmente loucos. Você também pode adicionar nenhuma repetição, o que significa que a máscara pode ser aplicada apenas em um lugar. Não repita aqui. Glitter Shadow, não repita. Temos um menor. Também podemos alterar o tamanho para fazer com que a máscara inteira se encaixe na imagem. Repita e contenha. 9. Mascaração - parte 2.: Vamos fazer uma breve recapitulação sobre mascaramento. O que sabemos é que aplicamos propriedade mask-image, a fim de ocultar ou mostrar alguns elementos relativos à máscara. Para um adulto, temos que lembrar sobre o prefixo webkit porque caso contrário ele não vai funcionar. Por favor, lembre-se sobre isso. Outra coisa sobre mascaramento é que podemos aplicar o tamanho da máscara para definir qual deve ser o tamanho da máscara. A máscara inteira pode caber na imagem ou no elemento. Também podemos aplicar uma máscara de repetição, a fim de repetir o padrão sobre a máscara. Portanto, estas são as propriedades que também podem ser aplicadas para fundo em CSS. Então podemos dizer que a máscara está de alguma forma relacionada com o fundo, e obviamente podemos lembrar sobre prefixos webkit para essas propriedades também. As máscaras podem ser imagens rasterizadas com diferentes níveis de transparência. Então, o melhor formato é arquivo png, e vamos aplicar png com transparências apenas em um minuto. Em nossa pasta de exercícios, temos também círculo de mascara-gradiente. Então o que podemos ver aqui é que, no círculo, o fundo está desaparecendo. Vamos tentar aplicar esse tipo de máscara. Então, no exemplo anterior, estávamos aplicando apenas uma imagem simples e opaca. Vamos fazê-lo agora claramente no editor de código. Então estamos tendo nossa div glitter, sombra glitter. Estamos a receber a mensagem. 10. Exercício final - colagem de água: É hora do último exercício com mascaramento e recorte. Espero que você realmente goste de jogar e experimentar com essas propriedades CSS. Vamos abrir a pasta colagem-água. Podemos verificar o que está no índice html. Bem, há alguns retângulos, algumas fotos e o título. No entanto, o efeito que gostaríamos de alcançar no final é este. Então o que você pode ver é que nós aplicamos um splash, nós cortamos alguns elementos da imagem usando recorte e mascaramento. Vou fazer esse exercício com você passo a passo. Então eu estou abrindo toda a pasta no editor de código Atom e se eu olhar para html, eu posso ver que eu já tenho alguma estrutura construída. Eu tenho o lugar para colar código svg para os caminhos do clipe e também tenho uma pasta com imagens. Se formos para a página, você verá que temos que aplicar este splash para o recipiente com este gradiente. Então, podemos usar DevTools para verificar o que é o nome da classe que gera este bloco com gradiente. Na verdade, é antes, esta pseudo-classe aplicada ao contêiner. Você pode ver que este é o plano de fundo e para este contêiner, para este bloco, temos que aplicar nosso caminho de clipe, este. Então, se abrirmos imagens, podemos ver que esse flash é algo, isso é algo que aplicamos ao nosso contêiner. Então o nome é classe splash-2.svg. Então estamos abrindo, copiamos o caminho. Claro que temos que criar tag de caminho de clipe, fechá-lo e colar o caminho dentro. Claro, podemos nos livrar das coisas que não usaremos. Por exemplo id, nós salvá-lo e temos que adicionar id para o caminho do clipe porque vamos fazer referência a ele em CSS. Podemos adicionar respingo à esquerda porque está no lado esquerdo. Eu posso ver que eu fiz a digitação então eu tenho que corrigi-lo. Sim, agora está correto, salvando e, em seguida, temos que aplicar clipe para recipiente antes. Então é o caminho do clipe, função url e dentro estamos escrevendo splash esquerda, e, claro, ponto-e-vírgula no final da linha e atualizar a página. Posso ver que minha forma é aplicada. As outras formas que tenho que cortar são estas duas. Novamente, podemos usar recorte, mas também podemos tentar mascará-lo, ele fará o mesmo. A razão pela qual sugiro recortar é porque temos arquivos SVG. Faremos o pequeno bônus para este exercício com mascaramento, mas por enquanto vamos usar recorte. No canto superior direito estamos tendo essa forma, então é splash dash um. Então eu estou abrindo aqui, copiar caminho, colá-lo para indexar html com a mesma coisa. Então tag ClipPath, id, vamos colocá-lo splash, superior direito. Vamos fechar a etiqueta, sem erros de digitação agora. Colando caminho, desculpe, colando caminho, removendo id, salvando. Vamos verificar usando DevTools para qual classe temos que aplicar esta reprodução. É só a água. Então, estamos procurando água primeiro é aqui. Estamos aplicando caminho de link, função url, splash, direitos superiores, salvando, atualizando. Estamos aplicando nosso splash. O último. Então este é o splash dash livre, cópia, ClipPath, id, botão splash direita, colando e, claro, fechando a guia. A última coisa é que temos de nos candidatar. Vamos ver qual aula, porque não tenho certeza. Chama-se água em segundo lugar. Então eu estou procurando água em segundo lugar no meu arquivo CSS. O mesmo, apenas aplicando ClipPath, função url, vamos apenas espaço aqui. É respingo, inferior direito. Refresque, e o exercício é feito. O que eu gostaria de mencionar aqui é que, este é o recipiente. Vamos comentar isso por um tempo. Este é o recipiente com o fundo. Eu também adicionei anexo de fundo fixo. Então o fundo é fixo e temos esse tipo de efeitos paralelos no movimento. É por isso que acho que é diferente e interessante. Você pode ter isso em mente ao fazer seus projetos. Isto está feito. Então a última coisa é o pequeno bônus para este exercício. 11. Bônus de exercício: Acabei de criar máscaras. Estes são arquivos PNG. Podemos ver que eles são transparentes aqui no fundo. Vamos aplicar esses dois salpicos. Em vez de recorte, vamos adicionar mascaramento. Arquivos PNG, é imagem de máscara, função de URL, imagens, splash- 2 PNG, e, claro, adicionando prefixo de fornecedor, que é webkit. Vamos atualizar a página. Podemos ver que o respingo é suave e desfocado de alguma forma, mas a máscara é repetida. Claro que temos que adicionar máscara repetida, sem repetir. Desculpe. Claro que com o prefixo do fornecedor e o tamanho da máscara, vamos adicionar contêm, e o mesmo com o webkit. Claro, as mesmas propriedades que podemos aplicar à nossa classe de água. Em vez de clipe, estamos adicionando barra 1. Salvando, refrescante, e este é o mesmo efeito desfocado. Claro, você pode experimentar muito com isso. Podemos fazer alguns buracos dentro da máscara. Tudo depende da sua criatividade e do efeito final que você gostaria de alcançar. Não se esqueça de pressionar seu projeto.