Aprenda código criando arte: desenvolvendo habilidades em CSS no CodePen

1. Introdução: Ei, todo mundo. Meu nome é Christina Gorton e sou uma desenvolvedora remota. Eu também sou um desenvolvedor autodidata, e uma das maneiras que aprendi a codificar foi através de codificação criativa. Neste curso, vamos passar por um monte de propriedades CSS avançadas e intermediárias, mas vamos aplicá-las de forma divertida ao longo do curso em um projeto de imagem CSS. Trabalharemos juntos na CodePen e, no final do curso, você terá uma imagem e uma animação para compartilhar. Vamos começar. 2. Projeto de classe: Neste vídeo eu gostaria de descrever brevemente o que são imagens CSS e então vamos falar sobre o que nosso projeto vai ser nesta classe. As imagens CSS são qualquer imagem que você cria com CSS e HTML. Como você pode ver aqui no CodePen, há muitas imagens CSS e um monte de coisas que você pode fazer com CSS. Você pode até criar uma imagem CSS com um único elemento div que permite propriedades CSS como você vê aqui no site Lynn Fisher em singlediv.com. Vou compartilhar vários links para sites e perfis da CodePen com imagens inspiradoras em nosso documento fonte de sala de aula. Agora, para este curso, vamos criar esta imagem CSS. Em cada lição, apresentarei um novo conceito de CSS, então aplicaremos o que aprendemos ao nosso projeto de classe. No final do curso você terá aprendido e aplicado várias novas propriedades CSS e teremos esta imagem CSS concluída com animação para compartilhar. Eu adoraria se vocês compartilhassem seu trabalho durante todo o curso em nossa seção de projetos de classe. Para aqueles de vocês que gostariam, estarei coletando e compartilhando os projetos finais em uma coleção de classe CodePen. Você pode até ser criativo e mudar cores, formas, sombra de caixa, o que você quiser fazer ou até mesmo apenas criar uma imagem completamente diferente e eu ainda gostaria de compartilhar isso, tanto em nossa coleção CodePen classe, e na minha conta do Twitter. Vamos começar. 3. Como ficar em sassy: Neste vídeo, vamos fazer uma breve introdução ao Sass. Não vou entrar em tudo sobre Sass. Tem muito a ver com Sass. Mas para o nosso projeto vamos estar usando Sass para algumas coisas como variáveis e aninhamento. Então eu gostaria de passar por cima deles. Eles são muito úteis. Eles são uma boa introdução ao Sass, e a partir daí você pode seguir em frente e aprender parciais mixins e loops e todos os tipos de coisas divertidas que Sass oferece. Um pré-processador CSS só permite que você pegue uma linguagem e compile-a em CSS para que você possa usar os recursos que estão nessa linguagem, neste caso, Sass. Há também menos estilistas, mas Sass parece ser o pré-processador mais popular para usar no desenvolvimento web agora. Sass tem duas sintaxes diferentes, na verdade. O que você verá mais comumente agora é SCSS, que você pode ver aqui em cima, e CodePen, você pode simplesmente, ir para configurações e você pode escolher seu pré-processador. São Sass, SCSS, Stylus, PostCSS. Nós vamos estar usando SCSS e isso é porque ele é mais parecido com CSS regular. Se você estiver usando Sass regular e não Sassy CSS, que é SCSS, você não precisa fazer colchetes, mas você tem que se preocupar com indention. Há certas maneiras que você tem que recuar e você não pode simplesmente pegar qualquer código CSS que você tem e começar a usá-lo. Com Sass, você teria que voltar e reformatar todo o seu CSS. Aqui estão alguns exemplos de Sass que você pode ver em nosso projeto. Então vamos passar e apenas alguns minutos em nosso próximo vídeo, e vamos escolher cores e criar variáveis com elas. Então variáveis são úteis porque você pode escrever o código uma vez aqui eu tenho minha cor. Estes são azuis diferentes, e eu posso colocá-lo em todo o meu projeto. Neste pequeno projeto pode não parecer grande coisa ter que escrever a cor cada vez. Mas quando você está fazendo um grande projeto, se você mudar essa cor, um designer volta e diz, “Ei, eu quero que esta cor seja vermelha em vez de azul.” É muito mais fácil apenas aqui para escrever, vermelho, e então em qualquer lugar que eu coloquei essa cor azul que vai mudar ao longo de todo o meu projeto. Então, se eu tivesse títulos, bordas [inaudíveis], se eu tivesse algo que fosse daquela cor azul, todos mudariam para vermelho agora. Super útil. Você também verá as pessoas usá-la para itens como cabeçalhos ou pontos de interrupção. Em qualquer lugar onde você vai escrever algo várias vezes onde você pode estar usando o mesmo tipo de fonte de cabeçalho ou os mesmos pontos de interrupção em diferentes consultas de mídia. Você quer colocar isso em uma variável para que você tenha apenas um lugar para mudá-la e você não está tendo que passar por todas as suas folhas de estilo e procurá-la. Uma das outras coisas que você verá em nosso projeto é o aninhamento. O aninhamento é realmente útil. Quando você pensa em HTML, você tem clara hierarquia aninhada e visual de seus elementos HTML. CSS realmente não oferece isso. Mas com o aninhamento, algo como um nav onde você teria um UL e LI e ligação âncora. Agora você pode ver que aqui, eles estão todos juntos, eles fazem sentido. Isso é muito fácil de manter, enquanto aqui você está se repetindo, nav ul, nav li, nav a. Quando realmente é apenas mais fácil mantê-los todos juntos. Você pode ninho sobre coisas, isso pode se tornar complicado para substituir e manter, então você tem que ter cuidado com isso, mas com algo como um nav, faz sentido manter todas as suas coisas juntas em aninhamento. Outra coisa legal que você pode usar com Sass é operadores, e eu costumo usar operadores muito. Eu vou fazer algumas contas para descobrir minhas larguras dependendo do que eu estou fazendo, mas eu usá-los muito com cores. Então, se eu tiver uma cor que é a mesma, essas duas cores estão ambas em Brown, e eu quero que uma seja um pouco mais clara e outra seja um pouco mais escura. Vou multiplicá-los. Se você subir, passe um que o torne mais leve. Se você descer por baixo de um que torna mais escuro e isso é apenas uma maneira fácil, e tipo de ter que ir e procurar por outra cor e colocar isso, você pode simplesmente multiplicá-la. Então isso é muito legal. No próximo vídeo, eu vou mostrar como eu normalmente gero cores, como eu encontrar uma paleta de cores, e então vamos adicionar algumas de nossas cores usando as variáveis Sass, e, em seguida, ao longo de nosso projeto, estaremos usando mais alguns Sass, para que você a veja no resto do projeto. Vamos começar. Neste vídeo eu vou falar sobre como eu poderia gerar cores se eu não tiver um programa como Sketch ou produtos Adobe. Então este é apenas um site gratuito que eu uso muito. É muito legal. Chama-se coolers dot com, e eu vou ter um link para isso em nossos recursos de classe. O que isso faz é, ele permite que você gere paletas de cores. Se eu apenas clicar nesta barra de espaço no meu teclado, eu posso passar e ver o grupo para as paletas de cores. Posso levá-los, encontrar paletas de cores que combinem com isso. Mas o que eu costumo fazer com minhas imagens CSS é encontrar uma imagem que eu possa querer recriar online, e então eu posso ir aqui, e se eu tiver uma captura de tela dela ou se eu tiver o URL, eu posso soltar isso e eu posso obter o paleta de cores desta forma. Então, se eu mover isso, eu fico com o azul. Eu posso clicar neste e então eu posso colocá-lo onde eu quiser. Posso pegar uma cor marrom e clicar neste. Posso ter essa cor de sotaque aqui. É muito fixe. Neste ponto você pode então gerar as cores, que eu tenho minha paleta de cores aqui. Super útil. Você pode exportar isso se quiser. Você pode pegar as cores, você pode fazer isso. Você pode copiá-los e colocar as cores sobre. Você pode até exportá-los e eles os exportarão como variáveis para você. Este é um site gratuito. Você não tem que se inscrever. Se você se inscrever, ele só salva paletas de cores para você. Eu uso isso o tempo todo. É muito útil e eu queria compartilhar isso com vocês. Então vamos em frente e começar a adicionar algumas de nossas cores em nosso projeto usando variáveis Sass. Se este fosse um projeto onde eu estava trabalhando no trabalho, eu provavelmente não estaria nomeando coisas céu e madeira ou coisas assim para minhas variáveis, eu estaria nomeando-as como texto principal, coisas que fazem sentido para outros desenvolvedores entrarem e usar também, mas quando você está criando imagens CSS, você pode nomeá-las, o que faz sentido para você. Então, para nós, temos nossa cor do céu. Vamos acrescentar, temos nossa cor de madeira. Temos uma cor branca. Temos um buraco negro aqui. Temos a cor do acento, temos o local, e depois temos uma borda, e estas serão as nossas cores que vamos usar para todos os nossos projetos. Você verá que vamos adicioná-los mais tarde, e eu posso mostrar-lhe como fazer isso se você quiser começar com uma das cores, podemos ir em frente e adicioná-lo ao nosso fundo, céu de fundo. Não se preocupe com essas coisas ainda. O quadro ou o HTML aqui, vamos fazer isso em nosso próximo vídeo com posicionamento. Então, por agora, apenas esboçar suas variáveis e, em seguida, colocar seu plano de fundo como Sky, e então nós vamos chegar ao nosso vídeo de posicionamento em seguida. 4. Como enquadrar: Sempre que começo uma nova imagem CSS, a primeira coisa que costumo fazer é configurar um quadro para essa imagem. O enquadramento da imagem nos dá uma boa oportunidade de rever o posicionamento em CSS. Portanto, há seis valores para a propriedade position, eles são estáticos, relativos, absolutos, fixos, pegajosos e herdados. Então esta aula nós vamos estar passando sobre o posicionamento relativo e absoluto. Algumas das coisas complicadas para saber sobre o posicionamento relativo e absoluto são, é se temos um elemento filho com uma posição absoluta, o elemento pai irá ignorá-lo. Então, a fim de tornar o elemento filho posicionado absoluto com base no elemento pai, precisamos primeiro definir a posição dos pais para relativo. Vou mostrar-lhe um exemplo aqui. Neste exemplo, temos dois elementos pai e dois filhos. Um dos pais tem a posição relativa aplicada a ele e o outro não. Então, quando adicionamos o posicionamento do top 0 a este elemento filho, ele é posicionado em relação ao seu pai, enquanto este é ignorado por seu pai e seu posicionado em relação ao corpo do documento. Então, se descomentar este código aqui, veremos que o elemento filho está agora posicionado em relação à sua casa pai. Assim, para o nosso projeto, queremos que todo o conteúdo seja posicionado em relação ao quadro que adicionamos e não ao corpo do documento. Então, adicionamos a posição relativa ao quadro de classe. Então vamos fazer isso agora aqui no nosso projeto. Algumas das outras coisas aqui são apenas coisas que normalmente faço em cada projeto. Eu dou ao nosso quadro uma largura e uma altura. Eu disse estouro escondido se eu não quiser mostrar nada fora do quadro e eu faço margem 0 auto para que ele está no centro aqui. Então, para o nosso projeto, as primeiras coisas que vamos fazer são esses círculos aqui. Em nosso projeto lá chamado border_1, border_2, fronteira três, e, em seguida, um buraco. Vamos em frente e adicionar o primeiro border_1 ao nosso projeto. Só uma nota rápida na caneta de código. Há um plugin embutido que você também pode obter em um monte de editores de texto chamados emit. Vou usá-lo durante todo o curso. Ele apenas melhora muito o fluxo de trabalho HTML e CSS. Torna muito mais fácil. Então, quando você me ver fazendo algumas coisas, eu vou apontar no início, mas vamos usá-lo durante todo o curso. Então com ele em tudo que eu tenho que fazer se eu quiser outra div é que eu posso fazer ponto e então eu posso colocar o nome da classe já boarder_1 e então eu posso apertar “Tab”, e então eu tenho div classe border_1 já aqui com a tag div fechamento. Então vamos começar a adicionar o código para nossa primeira borda e eu costumo começar com uma largura e uma altura, que você não verá até darmos uma cor de borda. Então vamos fazer fronteira. Dois pixels sólidos e, em seguida, nossa borda de cor que pegamos anteriormente. Neste momento, é um quadrado e, por isso, se quisermos torná-lo redondo como no nosso exemplo, damos-lhe um raio de fronteira, 50 por cento, e isso vai torná-lo perfeitamente redondo. Quando você tem uma largura e uma altura que são iguais em tamanho. Então queremos fazer posição absoluta. Vamos para a esquerda cerca de 30% e falar sobre o 21º. As imagens CSS, este posicionamento da esquerda e superior, é apenas algo que você tem que jogar. Se eu colocá-lo mais de 50 por cento esquerda, seria sobre apenas um pouco longe demais e eu quero que tudo seja centrado em relação ao elemento pai, que neste caso é o quadro. Então eu fiz os 30 por cento. Como temos posição relativa sobre o pai, isso é deixado 30 por cento do ancestral mais próximo, que seria nosso elemento pai aqui, o quadro. Então ele está indo 30% sobre o nosso quadro. Só para mostrar que um pouco melhor, eu coloquei uma borda, dois pixels sólidos para cercar nosso quadro rapidamente e eu posso realmente ver que 30% não está realmente centrado. Acabou um pouco. Então, se formos talvez 25 por cento, acho que seríamos um pouco mais e centros. Por isso, às vezes é bom adicionar um pequeno quadro à sua imagem para que você possa ver exatamente o que seria central com o seu posicionamento aqui. Então podemos ir em frente e tirar isso de volta e podemos trabalhar para adicionar nosso próximo trimestre. Então, novamente, vamos fazer ponto ordem dois hit “Tab”, e novamente temos uma abertura e fechamento div com a classe já. Este border_2 também vai ter uma borda de dois pixels, sólido e, em seguida, a cor da borda, e também vai ter um raio de borda de 50%. Então, em vez de fazer isso duas vezes em nosso código, podemos manter nosso código um pouco mais seco por putting.border_1, em seguida, colocar uma vírgula e então.border_2, e, em seguida, apenas adicionar nosso código aqui e tirá-lo daqui. Isso aplicará a borda ao border_1 e ao border_2. Então, para o nosso border_2, nós vamos querer ter uma largura que é apenas um pouco menor do que a nossa primeira fronteira. Então eu vou experimentar com 23rem e altura 23rem. Então queremos dar essa cor. Essa é a cor do nosso sotaque. Então vamos fazer sotaque de fundo. Então queremos que acabe um pouco. Então eu fui em frente e fiz margem 0.3rem. Novamente, isso foi apenas brincar com ele e ver o que iria centrá-lo dentro da border_1. Você pode ver que eu pulei à frente um pouco porque border_3 e o todo são muito semelhantes ao que acabamos de fazer com border_1 e border_2. Então, novamente, nós só queríamos ter um pouco menor largura e altura em ambos e então nós queríamos ter a margem que eu tinha que brincar com ele um pouco. Este tinha 0,5rem e este tinha 0,2, e para manter nosso código seco, porque teríamos que repetir esta borda, dois pixels, borda sólida e raio de fronteira 50 por cento quatro vezes diferentes. Então nós apenas adicioná-lo aqui e colocar cada nome de classe bem aqui para ser aplicado a ele. Em seguida, os próximos dois vídeos eu vou estar mostrando como usar os pseudo elementos antes e depois, e como usar o caminho do clipe e um pouco mais sobre o raio da borda. Vamos começar. 5. Elementos do Pseudo: Agora vamos falar sobre pseudo-elementos, que uma vez que você aprender, você vai descobrir que você realmente pode usar o tempo todo. Eu uso pseudo elementos praticamente todos os dias, em cada projeto que uso, várias vezes, eles são super úteis. Pseudo elementos antes e depois criam um pseudo elemento que se insere antes do elemento ou depois do elemento alvo. Na verdade, não está no DOM. Você não está colocando isso no HTML em nenhum lugar. Tudo isso está no CSS e vou mostrar a vocês como isso é feito. No nosso exemplo, temos um botão e no nosso HTML temos apenas um div, temos o nosso botão e temos as palavras, Clique em mim. Não há mais nada aqui. Mas como verão quando tivermos o botão sobre, temos um emoji de unicórnio e uma flecha. Estes são aplicados com apenas depois e antes de pseudo elementos. Como você pode ver em nosso código, nós direcionamos nosso botão com o antes e o depois. Para fazer isso em pairar, é um pouco complicado. Na verdade, fiz isso errado na primeira vez que tive que procurar. Você está baseando isso no pairar do pai. Então o pairar viria antes do antes aqui. Então, quando temos um pairar, agora temos o emoji e a flecha. O emoji é o antes, é antes do clique em mim, e a seta é o depois que vem depois do texto aqui. Em nosso próximo vídeo, vamos aplicar o que aprendemos aqui em nosso projeto de aula. Vamos começar com isso. Nosso projeto, vamos usar pseudo elementos em dois lugares. Nós vamos usá-lo para esta base de ponte parte suave que sai aqui. Este é o nosso depois e, em seguida, nós também usá-lo em nossas estacas, e então o pequeno ponto que está dentro de nossas cavilhas é o depois. Vamos em frente e fazer isso no nosso projeto. Você pode ver em nosso HTML eu adicionei uma div com a base de ponte de classe, e então eu adicionei em alguns CSS aqui. Temos fundo e ouvimos que estamos usando madeira. Então aqui novamente está nossa classe SAS ou variáveis SAS, desculpe. Então temos uma largura e uma altura. Isso é apenas algo com que eu brinquei e adivinhei. Fizemos a posição absoluta para que pudéssemos posicioná-la onde queríamos, e já que está aqui embaixo , sua posição em relação ao quadro, e então temos um top 60% do quadro, é deixado 27% do quadro. Ele tem uma borda superior para torná-lo um pouco mais leve e realmente precisa comentar a sombra da caixa. Isso é algo que vamos entrar em outro vídeo. Mas agora que temos esta base aqui, podemos então adicionar o nosso, o que eu coloquei como um antes apenas para mostrar a vocês o antes de estarmos posicionando absoluto. Neste caso, não importa se é um antes ou um depois. Mas como estamos usando um depois mais tarde, eu fui em frente e usei o antes. Então, sempre que você usar os pseudo elementos, você tem que ter um conteúdo, e isso pode ter conteúdo nele, se você quiser. Mas já que não precisamos adicionar nada, deixamos em branco. Mas isso é necessário que o posicionemos absoluto e isso é posicionado em relação à base da ponte, e então fazemos fundo, negativo 48 por cento, esquerda 10 por cento, fazemos uma largura e uma altura e um fundo de madeira escura. Vamos em frente e tirar isso e ele vai realmente aparecer aqui. Você pode ver que ele aparece por baixo aqui. Neste momento, ele realmente não se parece com como nós tê-lo em nosso produto acabado, porque nós ainda não repassamos clipe. Por enquanto vou deixar assim, tudo bem. Voltaremos e consertaremos e ficará mais bonito assim que passarmos por cima do clipe. Vamos em frente e adicionar as cavilhas também. Ok, eu fui em frente e adicionei os pinos em nosso HTML. Eu não vou sentar aqui e codificar cada um para vocês verem. Acho que vocês sabem pelo menos como codificar HTML em CSS. Então, queremos chegar ao que estamos fazendo aqui com eles. Então, para este exemplo, eu fiz peg e dei a cada um outra classe, peg 1, peg 2, peg 3, peg 4, peg 5, peg 6 e eu vou mostrar a vocês por que em nosso CSS em apenas um minuto. Então, para todos eles em toda parte para fazer o nosso secador de código, eu dei-lhes o peg da classe porque todos eles vão ter um raio de fronteira de 50%, todos eles vão ter a mesma largura, a mesma altura, a mesma fundo nosso fundo é o sotaque variável, a posição absoluta, e todos eles vão estar 50 por cento do topo desta base aqui. Mais uma vez, entraremos na sombra da caixa em outra. Então, por enquanto, tudo vai parecer muito plano. Quando fazemos o nosso depois, tudo isso está fazendo é adicionar aquele pequeno ponto que tínhamos em nossa foto. Isso pode parecer estranho agora, e é porque eles estão todos em cima um do outro. Estão todos posicionados absolutamente. Estão todos no mesmo lugar. É por isso que eu fiz a classe extra de peg 1, peg 2, etc Porque agora podemos apenas ter que escrever a propriedade esquerda que queremos aqui e até onde queremos que vá para a esquerda. Vamos comentar isso e você pode ver do que estou falando aqui. Agora eles estão posicionados de forma diferente um do outro. Eles estão todos sobrepostos um pouco, e todos eles têm seu pequeno lugar aqui, que é o nosso depois. Então é assim que usamos o depois neste caso, nós não precisávamos entrar e escrever um monte mais divs que acabariam sendo pequenos pontos que fizemos posicionados absolutos e depois colocar em cima dos pontos, fomos capazes de fazê-lo sem ter que colocar outro elemento HTML. Isso é realmente incrível, é por isso que antes e depois podem ser muito úteis. No próximo vídeo eu vou falar sobre o nível da trilha. Vou mostrar-lhe um exemplo de como você pode realmente usá-lo em produção, e então nós vamos realmente fazer nossa pequena base aqui parecer um pouco melhor. Então vamos a isso. 6. Clip-Path e raio de de de: Clip-path é uma propriedade interessante que eu tenho é aqui de indiano porque eles fazem um bom trabalho de apenas ter algumas demos aqui para mostrar a você. Este é um exemplo de como seria um círculo. Você pode fazer um círculo de caminho de clipe que é uma propriedade que eles têm, elipse caminho de clipe e, em seguida, você colocar em alguns pontos aqui ou você pode fazer polígono e novamente colocar em alguns pontos que vamos passar por cima em apenas um segundo o que alguns destes significam. Se você ajustar isso, você pode ver que a forma desta imagem pode ter sido maior. Cinquenta por cento, que é o que você normalmente pensaria se você está fazendo raio de fronteira, o seno mais profundo. Se algo tem a mesma largura e altura fará um círculo. Mas se não é a mesma largura e altura, isso não vai fazer um círculo, então aqui era 40 por cento. Isso é algo que você pode continuar e você pode brincar. Vou tentar remover o link para isso em nossos recursos de classe. A sintaxe pode ser um pouco difícil de se acostumar no início, mas você pode fazer como vimos em indiano você pode colocar uma forma básica como círculo ou elipse. Você pode fazer fonte de elipse, que pode ser um URL se você já tiver uma imagem ou você pode fazer uma caixa de geometria. Agora, se olharmos aqui, é assim que as faço muitas vezes. Isso é apenas um polígono e então você tem todos esses números. Quais são esses números? Ele irá cortar todas as imagens na forma de um losango aqui. Mas por quê? Tudo depende dos valores do que é chamado de vértices. No diagrama a seguir aqui faz um bom trabalho de mostrar isso para que é por isso que eu fui para este site. Este é o ponto no local. Ele é chamado introduzindo propriedade de caminho de clipe CSS. Aqui temos 50%, zero por cento dos dois primeiros pontos. Estamos mais de 50 por cento em nosso x e estamos zero por cento em nosso y que é todo o caminho para cima. Nós fomos 100 por cento em nosso y que você vê aqui em baixo e 50 por cento, isso chega ao fim. São os nossos pontos aqui. Estamos 100 por cento em nosso x aqui e apenas 50 por cento aqui em nosso y e novamente aqui estamos em 0 por cento em nosso x e 50 por cento em nosso y. isso é algo com que você pode brincar. Você pode tentar descobrir seus números, mas um grande recurso que muitas pessoas gostam de usar, eu uso o tempo todo, torna super simples, é chamado de clippy. Deixa-me mostrar-te. Isto é Clippy. Clippy você pode escolher uma forma que você pode querer. Se quiséssemos um trapézio e você pode vir aqui e consertar se quiser formas estranhas, desça, venha, o que quiser fazer e então copie o código aqui. Já tem todos os pontos para você. Copia-o e coloca-o no que quer que esteja a usar, que quer que esteja a tentar clicar. É tão fácil. É muito bom de usar. Você pode fazer todos os tipos de formas. Muitas pessoas gostam de usar esse recurso, então vou me certificar de colocar isso em nossos recursos de classe para você ver. Caso usado comum para o caminho do clipe que você verá na web em todo o lugar agora é este pequeno ângulo que você obtém em uma imagem de herói. Tudo o que você tem a fazer é ter sua imagem e, em seguida dentro da mesma área onde você tem sua imagem de fundo, neste caso é no meu cabeçalho, você iria adicionar o caminho do clipe e, em seguida, você mudaria os pontos para coincidir com isso. Se eu alterar alguns desses pontos, você pode ver que ele pode mudar drasticamente onde o caminho do clipe está. Aqui eu mudei 100 por cento para zero. Você pode ver o quanto isso mudou. Lá poderíamos mudar isso para talvez 50 por cento. No entanto, em todos os tipos de imagens loucas, é realmente fácil de brincar com em seu inspetor ou como eu disse no site, clippy. Vamos em frente e adicionar esse pequeno caminho de clipe ao nosso projeto aqui. Vamos descer até a base da ponte e o antes. Então eu tenho um webkit aqui porque o caminho do clipe não é realmente muito suportado. No entanto, os caminhos de clipe SVG são muito mais suportados. Quando eu uso material de produção, na verdade, muitas vezes uso caminhos de clipe SVG. Mas para fazer essas imagens da maneira que a maioria das pessoas cria imagens CSS no CodePen, você as verá usando o caminho do clipe como este. Eu quero falar rapidamente sobre outra maneira que você pode criar formas e que é com raio de fronteira ou fronteira. Em muitas das minhas imagens, eu não estou necessariamente sempre usando clippy. Acho que usei um caminho de clipe aqui. Na verdade, muitas vezes uso uma borda para criar todas essas formas. Se olharmos bem aqui, estes são todos divs quadrados onde usei um raio de fronteira. Podemos fazer o dedo rolar grande, torná-lo muito pequeno. Você pode alterar drasticamente as formas em suas imagens com apenas um raio de borda ou uma borda. Para um bom exemplo de algumas das formas que você pode apenas criar com uma borda, você pode conferir CSS TRICKS. Eles criaram uma forma de CSS e muitas dessas formas. Este é um raio de fronteira. São fronteiras. Todas essas formas são criadas com apenas bordas diferentes, onde há apenas um quarto mostrando em um lado, mas você tem um monte de pixels ou um par de lados de todo o lote de pixels e não aparece em outros lados e é assim que você cria esses triângulos. Você vê um monte on-line que vão sob como menus ou diferentes bandeiras. Você pode criar todos os tipos de formas com apenas uma borda ou um raio de borda. É um pouco tedioso. Muitas pessoas não querem criar essas formas com um raio de borda ou uma borda, então muitas pessoas vão usar o caminho de clipe SVG ou clippy. No próximo vídeo, vou falar com vocês sobre todas as coisas que podem fazer com sombra de caixa. Há um monte de coisas que você pode fazer com sombra de caixa. Estou animado para mostrar alguns exemplos de pixel que criei com sombra de caixa. Alguns dos efeitos legais que você pode criar em coisas como botões e como vamos adicionar um pouco de profundidade ao nosso projeto para que ele não seja tão plana usando sombra de caixa então vamos começar a isso agora. 7. Como adicionar profundidade com sombra de caixa: Neste vídeo vamos falar sobre caixa-sombra. Quando você pensa em caixa-sombra, você pode pensar em adicionar um pouco de sombra embaixo de algo para fazê-lo estourar um pouco. Só acrescenta um pouco de profundidade. Mas há um monte de coisas que você pode fazer com caixa-sombra que é muito legal. Vejamos a caixa de sombra por um segundo. Há mais caixa de sombra. Na caixa de sombra, você tem um deslocamento horizontal, você tem um deslocamento vertical, um raio de desfoque e, em seguida, você tem um raio de dispersão opcional e uma cor. Se você quiser alterar a cor padrão é preto. Vejamos um exemplo bem rápido, que mostra isso muito bem. Isto é apenas um gerador de caixas de sombra online. Você pode usar isso para gerar suas sombras de caixa, se você não quiser ter que descobrir todas as propriedades diferentes aqui. Só para mostrar um exemplo, nosso comprimento horizontal vai ao longo do eixo x aqui, nosso comprimento vertical vai ao longo do eixo y. Borrão é o quão embaçado você quer. Se você quer que ele seja completamente nítido ou você quer que ele realmente pareça um pouco mais como uma sombra, e então se espalhe para espalhá-lo para fora. Você pode mudar sua cor. Há todas as coisas que você pode fazer com caixa-sombra, só para ter algo atrás e dar um pouco mais de profundidade. Mas vejamos algumas outras maneiras que você pode usar caixa-sombra. Estes são alguns efeitos simples que você pode fazer com box-shadow. Verás isto online por todo o lado. Este é feito por Giana. Acho que viu o nome dela na CodePen. Se olharmos para isto, podes ver que faz tudo. Os que estão entrando, estes estão animando uma caixa de sombra inserida, e os que estão saindo são a caixa de sombra normal. Outra coisa legal que você pode fazer com box-shadow indo junto com nossas imagens CSS aqui, é que você pode criar pixel art com box-shadow. A premissa aqui é que você pode desenhar pixel art dentro de um único elemento usando um grande e complicado caixa-sombra. Se você vê neste exemplo simples aqui, você tem três pequenos quadrados. Porque, se você declarar um deslocamento vertical e horizontal para a caixa de sombra, mas não um borrão, você obtém esses quadrados realmente nítidos, esses pretos, a caixa de sombra original. Então estes estão saindo da esquerda e da direita. Você pode fazer um desenho inteiro como este aqui com a sombra da caixa assim. Você pode até animar caixa-sombra. Olha como este morcego é fixe. Você pode ver a grande e complicada sombra de caixa aqui. Eles têm isso em uma animação, que vamos repassar, animações de quadros-chave, um pouco mais tarde. Esta é uma pequena demonstração rápida da diferença entre box-shadow regular e inset box-shadow. Sua caixa de sombra normal sairá de qualquer que seja o seu elemento e a inserção irá para dentro. No próximo vídeo, vamos em frente e começar a aplicar alguns dos box-shadow em nosso projeto, para que você possa ver como ele faz os diferentes elementos pop. Dá-lhes muito mais profundidade. Neste momento, a nossa imagem é muito plana. À medida que avançamos e terminamos o projeto, continuaremos adicionando box-shadow aos nossos diferentes elementos que adicionamos. Vamos chegar a ele. Agora vamos passar e vamos adicionar um pouco de sombra para algumas das coisas que já temos aqui. Temos nossa base de ponte, e se adicionarmos uma pequena sombra de caixa, você pode ver que ela aparece um pouco. Não é tão plana. Na verdade, parece que está saindo da página um pouco, o que é legal. Parece que a ponte está saindo do que seria a nossa guitarra. Quero mostrar a vocês aqui, no inspetor isso pode parecer se eu mudar um pouco. Agora eu tenho como um pixel, um pixel e três pixels. Digamos que fizemos cinco pixels, isso vai sair para a esquerda muito mais. Em vez de ser centrado como eu tinha antes, onde ele está saindo um pouco para que pareça que a luz está vindo de um lado porque é sobre a esquerda e não para a direita, mas não parece tão drástica aqui. Parece que talvez a luz esteja vindo de um lado e para baixo um pouco, que é o que queremos à nossa imagem. Este aqui é o nosso borrão para que possamos torná-lo realmente embaçado, você poderia fazer cinco, sete oito. Você poderia continuar com isso e isso faz com que ele ainda mais pop. Mas eu gosto das três. Acho que parece legal. Acho que parece bem. Isso é com você. Você pode mudar sempre por aí, você pode brincar com ele. Vocês podem fazer essas imagens, suas. Agora vamos fazer o mesmo com o depois e com nossos pinos para que pareçam que estão aparecendo um pouco. Deitado em nosso código, sinto muito, este era o nosso antes. Agora podemos decolar e adicionar nossa caixa de sombra. Aguarde um segundo para carregar. Você vai ver agora que ele faz parecer que ele está inclinado um pouco para baixo como uma ponte faria em uma guitarra. Então, quando o adicionarmos aos nossos pinos, vai fazê-los aparecer um pouco também e dar-lhes um pouco de profundidade. Você pode brincar com isso. Você pode gostar que pareça um pouco diferente. Você pode encontrar uma cor diferente aqui, talvez mais marrom em vez de preto. Isto é um pouco marrom. É só um castanho escuro. Tem a mesma cor que a mancha. Vou te dar um segundo para olhar o código. Então nós vamos adicioná-lo a mais um lugar e nós vamos realmente fazer inset desta vez. Aqui está o nosso buraco, vamos adicioná-lo aqui. Em seguida, tome um segundo para que ele possa carregar. Agora você pode ver por causa da inserção, parece que isso está indo para baixo agora. Parece mais um buraco real, em vez de apenas uma mancha negra que está no meio da página aqui. Essa é toda a sombra de caixa que vamos adicionar por enquanto. Nós vamos adicionar um pouco mais e nosso projeto, depois de adicionar mais alguns elementos. 8. Transformas e transições e transições: Neste vídeo, vamos falar sobre transformações e transições. Um pouco mais tarde, vamos falar sobre animações, mas para chegar lá, primeiro, vamos falar sobre transições e transformações. Quando falamos sobre animação, falarei com vocês sobre como se transforma, e a opacidade são as formas mais eficientes de animar. Isso pode parecer um pouco limitante no início, mas uma vez que você entende todas as coisas que você pode fazer com as transformações, você verá que não é realmente limitante. Vamos começar a aprender isso um pouco. Além disso, eu quero fazer uma nota rápida e apenas dizer que eu construí alguns desses exemplos ao longo do curso que eu tenho mostrado a todos vocês, e esses estarão em uma coleção que eu estarei compartilhando em nossos recursos do curso para que você pode voltar e você pode brincar com eles e mudar as coisas e aprender um pouco mais dessa maneira também. Vejamos a primeira transformação que temos aqui. Temos escala de transformação, e isso será escalonamento tanto no eixo x quanto no eixo y quando nós tê-lo desta maneira. Está a aumentar duas vezes o seu tamanho. Vamos passar aqui e ver sua escala. Aqui vai ele, dimensionando tanto o x quanto o y. Se quiséssemos que ele fosse apenas o x, poderíamos escrevê-lo desta forma, 'scalex', e ele estará escalando através do eixo x aqui duas vezes seu tamanho. Você pode fazer o mesmo para o y quando você estiver usando escala, e isso será realmente reduzi-lo, então, se você for acima de um, você está aumentando o tamanho. Isto vai ser metade do seu tamanho fazendo 0,5 aqui. Você pode ver que está encolhendo agora. Se eu tivesse subido , teria crescido para cima. O próximo é distorcido. Você pode fazer tanto skewx ou distorcido, e você usa graus para isso. Desta forma, você vai fazer skewx 40 graus. Você pode usar números negativos ou positivos. Vamos ver como é com distorção aqui, e isso está inclinando 25 graus negativos no eixo y. Nossa próxima transformação é girar. Isso está girando 30 graus. Você poderia fazer 30 graus negativos se você quiser. Você pode girar apenas no eixo y, que irá girá-lo. Como se você vê cartões agora online. As pessoas têm cartões diferentes, então use uma face traseira e ofereça visibilidade facial, e você pode ver a parte de trás de um cartão como o que eles são chamados quando você os usa na web. Podemos fazer o mesmo com o x, e eu vou virar para o outro lado, então rotatex, agora está virando para cima e para baixo. Depois há transformação: rotatez. Isso está girando 90 graus. Nossa última transformação é traduzir. Isso vai estar se movendo tanto no eixo x quanto no eixo y. Você vai vê-lo passar mais de 50 enquanto também vai para baixo 20 pixels. Se só quisesses passar por cima, podias fazer Transformx. Isso está indo na direção negativa. Você poderia fazer o positivo se você quiser que eu faça apenas o Y. Agora ele iria para baixo, e se colocássemos um negativo aqui, ele iria subir. Você pode ver, mesmo que haja apenas quatro coisas que você pode transformar, você poderia realmente fazer muito com cada um. Tendo o x diferente e o y e as diferentes maneiras que você pode transformar neles, ele apenas cria uma série de oportunidades para tentar diferentes transformações. Se voltarmos ao nosso código aqui, verão que eu tive uma transição nisso o tempo todo. Eu tive transição tudo, e se eu não tivesse uma transição sobre eles, vamos ver qual é o efeito. Você pode ver agora quando eu pairo que tudo acontece imediatamente. Não há nenhuma flexibilização acontecendo que apenas dá uma melhor experiência de usuário quando você tem um pouco de tempo no meio. Isto é chocante. É para isso que usamos transições. Vindo aqui para truques CSS, podemos olhar para o que cada uma dessas propriedades são. Você pode ver que eu estava escrevendo a propriedade abreviada para a transição. Você pode realmente escrevê-lo fora propriedade de transição e, em seguida, dar-lhe o seu valor , duração de transição, dar-lhe o seu valor, mas na maioria das vezes, você verá que é abreviado como este. Vamos rever quais são esses valores. Propriedade de transição é qualquer coisa que você está tentando fazer transição. Se você está tentando fazer a transição de sua cor de fundo, então você colocaria isso aqui. Eu tinha transição tudo o que seria fazer a transição de qualquer coisa que eu coloquei o efeito sobre, enquanto estamos pairando sobre. Então temos a duração da transição. Quanto tempo você quer que ele dure, e aqui está 0,5 segundos. Você também pode colocar cinco milissegundos se você quiser usar, ou 500 milissegundos, se você está querendo usar milissegundos, então temos função de temporização de transição, e isso é facilitar. Você pode usar as funções de atenuação embutidas há facilidade, facilidade linear dentro, facilidade para fora, e facilidade para fora, eu acredito, mas você também pode criar o seu próprio com algo chamado um cubic-bezier. Vamos dar uma olhada nesses rapidinho. Este é apenas um criador cubic-bezier online. Estão por todo o lado. Você pode apenas Google cubic-bezier, e você provavelmente verá um pop-up. Vou tentar lembrar de colocar um em nossos recursos de classe, para que você possa brincar com ele lá também. Em nosso projeto tivemos facilidade em, e se você seguir este aqui embaixo, você verá o que a facilidade faz, ele apenas diminui no início e então vai rápido. Se você quiser criar sua própria facilidade, você pode mover essas pequenas alças ao redor e então assistir a rosa aqui em cima. Você vai ver que ele é mais lento para o meio, que é o que acontece quando você tem isso assim. Se trouxermos isso até o fim, você verá que vai muito rápido. Se o derrubarmos, só muda de novo. Você pode brincar com isso. Você pode fazer facilidade para fora, você pode fazer facilidade em, você pode ver o que parece se você fizer um linear ou facilidade. Você então copiaria esse cubic-bezier, essa coisa toda aqui, e então você colocaria em, então vamos copiar. Eu poderia colocá-lo em vez da facilidade, eu iria colocá-lo aqui mesmo. Agora temos a nossa facilidade personalizada. Eu sei que este vídeo foi um pouco mais longo, mas eu queria ter certeza de que eu realmente revi transformações e transições com vocês, porque nós vamos aplicá-los agora ao nosso projeto e então um pouco mais mais tarde também quando fazemos algumas de nossas animações. Vamos falar disso agora com o nosso projeto. Pessoal, tenham cuidado comigo um pouco neste vídeo, porque vamos adicionar um monte de código. Eu já adicionei muito dele no meu, que nós não levemos muito tempo comigo apenas digitando o código, mas eu vou revê-lo com você, e eu não quero que você se preocupe muito com isso porque eu tenho cada um destes em um exemplo que estará em nossos recursos de classe. Haverá uma coleção que terá cada vídeo e onde o código começa e onde o código termina. Em seguida, haverá um projeto final que você pode passar e certificar-se de que todo o seu código está bem. Mas vamos em frente e falar sobre transformar e traduzir agora mesmo. No meu HTML, todo o caminho após o meu último peg, você pode ignorar a string por enquanto, mas algo que eu vou adicionar em alguns minutos. Depois do meu último peg, meu peg 6, eu adicionei esta ponte classe div. A ponte é bem aqui. É o que suas cordas estariam passando em uma guitarra. Quando você costuma olhar para um instrumento, estes geralmente são ligeiramente inclinados de uma maneira. Eles não estão perfeitamente em linha reta assim. Isso é o que vamos fazer aqui com a nossa transformação, e vamos traduzir essa ponte só um pouquinho. Em seu CSS, vá em frente e adicione sua classe bridge. Vamos fazer o fundo e é a cor que é o sotaque. Fiz 13,9 rems. Eu fiz a altura, 0.6 rems, posição, absoluto. Eu queria o parente absoluto da base aqui. Então nós fizemos os 25 por cento, ele está caindo 25 por cento e é deixado 22 por cento. Então eu dei um pouco de um raio de borda de 10 pixels. Agora aqui vamos adicionar em nossa transformação. Eu adicionei prefixos de fornecedor porque a transformação não é necessariamente suportada em todos os navegadores. Para uma boa medida, colocamos os prefixos do fornecedor -webkit- em -ms-. Se descermos e olharmos, veremos que parece muito leve. É apenas 0,5 graus. Não é muito de uma rotação aqui. Agora percebo que continuava dizendo “traduza”. Não estamos traduzindo, estamos girando. Nós giramos a 0,5 graus. Poderíamos fazer uma rotação mais drástica. Você poderia fazer dois graus negativos. Você vai ver que isso é um pouco mais. Eu só não achei que parecia tão legal. Mais uma vez, preferência pessoal. Se você quer que ele fique mais alto, você quer que ele seja inclinado mais, você pode fazer isso. Vou colocá-lo de volta 2,5 graus aqui. O próximo código que vamos adicionar são nossas strings que estão em nosso projeto final. Quando estamos fazendo eles em nosso projeto agora, você não vai realmente vê-los porque nós vamos ter eles acima de zero por cento. Isso é para que quando nós realmente fazemos a animação, nós podemos fazê-lo crescer de baixo, todo o caminho de baixo, até um monte inteiro. É aí que você obtém aquela animação das cordas animando. Faremos isso daqui a pouco. Mas como estamos colocando neste código, você pode não ver as cadeias de caracteres reais e está tudo bem. Vamos vê-los quando adicionarmos a animação. Se voltarmos para o nosso HTML aqui, dentro de cada peg div, por favor coloque cadeia de classe div. Então você pode adicionar o atraso agora ou você pode ignorar isso. Isso é o que vamos usar quando estamos fazendo as animações. Se você quiser adicioná-lo agora, você pode ou você pode esperar até que façamos as animações em um pouco. Mas vamos ter seis cordas. Eles só precisam do mesmo nome de classe. Não temos que fazer uma corda 1,2 ou algo assim agora. Apenas corda abaixo de cada cavilha aqui. Se você quiser pontuar string em seu CSS, você pode ignorar esse atraso por enquanto. Vamos voltar a chamá-lo de sotaque de fundo. Nós estamos dando uma largura muito pequena, então largura 0,1 rem, ele vai ser zero superior. Está todo o caminho até aqui agora. Vai ser posição absoluta, esquerda 40 por cento, e tudo isso é relativo aos nossos pinos, porque está dentro dos nossos pinos. Está 40 por cento dentro da nossa cavilha. Então eu percebi, enquanto eu estava filmando isso, que eu tenho o índice z 3. Deixe-me mostrar por que fiz isso. Aqui no nosso projeto completo, você pode ver que as cordas parecem estar no topo da ponte, como se fosse em uma guitarra. Se eu tirasse o índice z 3, eles iriam para debaixo da ponte assim, que não é o efeito que eu queria. Mas então eu percebi que eu poderia realmente usar o posicionamento no HTML para fazer isso. Na verdade, não precisamos do índice z 3. Se quisermos não adicionar isso, você terá que adicionar isso quando voltarmos ao nosso CSS. Mas em seu HTML, se você for aqui e pegar a ponte de baixo da última cavilha e, em seguida, trazê-la para cima e colocá-lo sob a base da ponte, ele está agora sob o índice z dos pinos de qualquer maneira, então nós não tem que colocar um índice z. Se algo está vindo primeiro, a ponte, que quer que esteja a seguir estará em cima disso no seu HTML no z-index, de modo que você não tenha que colocar no z-index 3 para o que quer que esteja fazendo com o índice, desde que você tenha a ponte antes de As cavilhas. Vamos em frente e tirar isso da nossa corda aqui. Nossa corda terá uma sombra de caixa. Você não vai ver agora, então não precisamos adicionar isso agora. Queremos colocar um pouco de sombra em nossa ponte, que ela não pareça tão plana. Se você voltar para a ponte que adicionamos apenas um pouco atrás, e então eu fiz uma caixa de sombra um pixel, três pixels, cinco pixels, e então eu escolhi cor acastanhada novamente. Isso só faz parecer que a ponte está saindo da base da ponte aqui e não parece tão plana. Então, quando nossas cordas passarem por cima dele e eles tiverem a sombra da caixa sobre eles, eles novamente vão parecer que eles estão pulando fora disso apenas um pouco. Parece mais realista, parece mais uma guitarra. Eu sei que nós não passamos por muitas transformações neste vídeo em particular, mas nós estaremos aplicando mais em nossas animações para o nosso avião em apenas um pouco. No próximo vídeo, vamos rever alguns SVGs, e então vamos fazer animações CSS. 9. Como usar o SVG: Vamos falar sobre SVG. SVGs são gráficos vetoriais escaláveis. Eles são uma linguagem de marcação baseada em XML, e as coisas boas sobre SVG são que eles podem ser pesquisados, indexados, scripts e compactados, e você pode criá-los em um editor de texto ou qualquer software de desenho. Muitas vezes faço o meu no Sketch ou no Affinity Designer. Outras pessoas fazem isso na Adobe, então você pode exportá-las. Eu otimizar o meu geralmente com um programa chamado SVGOMG e, em seguida, eu colocá-los em meus arquivos. Existem alguns outros motivos pelos quais você pode usar SVG. SVG são legais porque não importa o quão grande você faz sua foto ou quão pequeno você faz seu SVG, você sempre vai ficar bonito. Eles sempre parecem crocantes. Eles nunca parecem tamanhos de tela diferentes e como é uma imagem baseada em XML, você pode animar praticamente qualquer peça de borrados como imagens emtamanhos de tela diferentes e como é uma imagem baseada em XML, você pode animar praticamente qualquer peça de um SVG que você pode encontrar e tirar do DOM. Aqui estou animando com uma biblioteca chamada GSAP. Nosso projeto, estará fazendo animações CSS com o SVG, mas eu só quero mostrar algumas das coisas que você poderia fazer com SVG. Aqui estou eu a animar todas estas diferentes peças individuais. Mudam as cores e traduzem. Outra razão pela qual eu poderia usar um SVG, digamos como em minhas imagens CSS, é porque eu poderia querer criar algumas formas legais que são difíceis de fazer com CSS. Eu posso ser capaz de fazê-los com CSS, mas eles vão levar muito tempo. Lembra-te que sou mãe de três pequeninos, por isso não tenho muito tempo. Se eu quiser criar algo legal às vezes eu vou fazê-lo com no SVG. Tudo o resto aqui é CSS. É tudo feito com CSS, mas isso aqui, especialmente com esses ângulos, isso é feito com um SVG. Se você tem seguido junto com o projeto e você pegar isso fora de nossos recursos do curso. Temos um SVG que é comentado. Agora podemos usar este SVG. Envolvi-o numa aula chamada Jet. Vamos em frente e começar a aplicar isso ao nosso projeto. Antes da nossa última div de fechamento aqui, vamos começar a adicionar nossos jatos. Haverá um jato, jato um, jato dois como temos com nossas cavilhas. Vamos repetir o SVG seis vezes. Deixe-me mostrar-lhe aqui, agora eu apenas despejo isso lá dentro. Então temos jato, jato um, jato dois, jato três, e assim por diante até o jato seis. Vá em frente e repita seus SVGs dentro de uma classe div seis vezes e então você pode adicionar o jato, o jato um, o jato dois, jato três, o jato quatro, jato cinco e o jato seis. A primeira coisa que vamos fazer é usar apenas aquela classe de jato que está em todos eles e vamos posicionar tudo absoluto. O bom de gravar isto é que posso encontrar coisas que fiz de errado da primeira vez e posso tirá-las. Acabei de perceber de novo, e não preciso do índice z desta vez. Uma vez que eu tirei o z-index da string, eu não precisava mais dele para colocar o SVG em cima da string. Podemos tirar isso. Na verdade, não precisamos disso. Então eu vou fazer outro pequeno despejo de código aqui, mas nós vamos revê-lo. Agora temos cada um dos nossos jatos, jato um, jato dois, e assim por diante, e então estamos posicionando todos à esquerda. Deixou 36,5 por cento. Sei que isto fica muito preciso. Este é um monte de mim apenas indo para as “Ferramentas de Desenvolvimento” e inspecionando e , em seguida, movê-lo até que eu sinto que ele está alinhado com as cavilhas, e a corda e a corda vem acima com animação. Era tudo o que tínhamos a ver com isto agora. No nosso próximo vídeo, vamos começar a animar. Vamos animar nossa corda e animar nossos SVGs. Então vamos acabar com isso e estamos quase terminando o projeto. Vamos começar com o próximo. 10. Animações CSS: Tudo bem. Agora vamos falar sobre animações CSS. As animações CSS são muito divertidas. Vamos chegar a isso aqui. Há muitas propriedades na animação, mas elas são muito parecidas com as transições que passamos antes. Teríamos um nome, isto é, este chama-se Stretch. Teríamos uma duração de animação como tivemos em nossas transições, então este está fazendo isso em um segundo. Função de temporização, este é fácil de sair. Poderíamos fazer o cubic-bezier que passamos antes. Temos um atraso, então se eu quisesse atrasar a animação, eu poderia colocar um número aqui maior que 0. Temos uma direção de animação. Este está alternando agora, está indo e voltando. Eu poderia apenas movê-lo para a frente, ou eu poderia apenas movê-lo para trás. Temos infinito. Isso está repetindo e repetindo, essa é nossa contagem de iteração. Eu poderia colocar um ou dois e a animação só aconteceria qualquer que fosse o número que eu coloquei aqui, 20, 30, o que você quiser fazer. Nosso modo de filme de animação é, se você tiver sua animação não rodando. Aqui, se eu colocar 2 e ele foi 1, 2, e então eu colocar para a frente, ele começa de volta onde começou. Então temos que correr. Neste momento, a animação está em execução. Estava rodando quando carregamos a página. Se colocarmos pausa, ela não executaria a animação quando carregamos a página ou se às vezes você pode apenas querer colocar pausa porque você está tentando depurar sua animação um pouco, então você pode colocar pausa para que a animação não continuar e você pode mudar as coisas ao redor. Então, esta é a mão longa para a animação. Se quiséssemos fazer a abreviação para animação, assim como nossa transição, como está a abreviação? Você pode fazer assim. Seria animação, dois pontos, e então teríamos nosso nome de animação, nossa duração, nossa função de atenuação, nosso atraso, nossa direção, nossa contagem, se ele tem um modo de preenchimento ou não, e então nós poderíamos tê-lo em execução. Escrever isso não vai te dar nenhuma animação. Você tem que ter o seu porta-chaves aqui. Adicionar quadros-chave e, em seguida, temos o nosso nome de animação. Isto é o que nos diz qual será a animação. Aqui temos ele transformando, traduzindo X, 50 pixels, o raio da borda, e então temos ele fazendo a cor. Mais uma vez, estamos traduzindo o Y e depois a cor novamente. Você pode fazer de e para. Essas podem ser propriedades que você tem aqui, e então você teria que, e então você teria um colchete e, em seguida, dizer para onde você quer que ele vá. Dizendo isso, eu percebo que isso é errado, você realmente faria de e depois para. Você quer começar por onde você está começando e depois para onde você está indo. Ou você pode fazer porcentagens, como aqui, nós temos 0 por cento, 50 por cento, 100 por cento. Você pode fazer 0, 10, 20, você pode ir até o fim se quiser, você pode fazer 12 por cento. Você não tem que fazer 0, 50 e 100. Este é apenas um exemplo aqui. Então, entre esses parênteses, você está dizendo o que você está querendo mudar as horas extras aqui. Entre 0 e 100 por cento de um segundo, queremos mudar essas coisas. Agora vou mostrar alguns exemplos de onde você pode ver algumas animações CSS. Um bom exemplo é com um ícone. Este é o nosso ícone de menu e está animando a transformação que está acontecendo. Então temos alguns carregadores aqui que estão sendo animados com CSS também. Todos eles estão sendo animados com opacidade ou transformação. Você pode ver que você realmente não é limitado, se esses são o que você está usando. Você pode fazer coisas como fundo, como tivemos em nosso primeiro exemplo, mas aqueles não são convidados desempenho. É sugerido que você tente apenas animar sua opacidade e, em seguida, suas transformações. Mas você pode ver, há muita coisa que você pode fazer com isso aqui. Esse cara aqui é só uma animação divertida. Você pode ver que, se você estiver fazendo algumas imagens CSS, você pode trazê-las à vida depois de criá-las com apenas uma animação. Sinto muito, minha internet é um pouco lenta, então isso está atrasando aqui, mas você pode ver a animação agora. Ele é bonitinho, trazendo-os à vida. Isso poderia ser apenas uma imagem e não ter qualquer animação, ainda vai ser bonito, mas é bom adicionar a animação também. No próximo vídeo, a coisa que vamos animar são, nossas cordas e nossos aviões. Eles vão subir e vai haver um pequeno atraso. Estas cordas virão primeiro do que estas também e depois as externas, juntamente com os aviões que as seguem. Neste vídeo, vamos agora adicionar nossa animação e vamos apenas terminar qualquer coisa onde talvez tenhamos perdido uma sombra de caixa que possamos querer ou em qualquer lugar onde queremos adicionar um pouco mais de detalhes, nossa animação e vamos apenas terminar qualquer coisa onde talvez tenhamos perdido uma sombra de caixa que possamos querer ou em qualquer lugar onde queremos adicionar um pouco mais de detalhes, vai terminar isso neste vídeo também. Nossa animação, nossa primeira, eu chamei de cauda. São as nossas cordas, eles deveriam estar imitando a cauda de um avião enquanto ele voava. Como eu disse no vídeo anterior, se você já tem onde sua posição está no início onde você quer que ele vá, você não precisa colocar o zero por cento. Você pode ir direto para os 100 por cento, porque eu quero que ele vá de um ponto direto para o 100 por cento. Eu não tenho que fazer zero por cento ou 50% ou nada disso. Eu sei que isso parece um número louco, top negativo 3.800 por cento, mas se você pensar sobre nossa corda aqui em baixo, é em relação à cavilha, então se eu colocar top 100 por cento, ele só iria até o topo da cavilha aqui. Se eu quiser subir todo o caminho, eu tenho que dar uma grande altura e eu tenho que dar a ele esta grande porcentagem aqui, 3,800 por cento negativos. Isso trará as cordas até aqui. Agora a próxima coisa que faremos é derrubar nossos aviões. Estavam aqui em cima, queremos que estivessem em cima das estacas. Transformamos, traduzimos Y, estamos apenas nos movendo no eixo y, 500 pixels. Isto é outra vez algo que acabei de testar. Eu olhei para o meu inspetor aqui e eu brinquei com os números até que eu vi que ele estava sobre os pinos e 500 pixels estava sobre os pinos aqui. Para a nossa animação, vamos apenas trazê-lo até zero de volta onde tinha estado. Não precisamos dos 50% ou dos zero por cento. Estamos indo do fundo onde colocamos o avião todo o caminho para cima, então podemos ir direto e colocar 100 por cento, então vamos transformá-lo, o Y, novamente transformar Y, zero pixels. Isso não significa mover zero pixels, significa movê-lo no eixo y dos 500 pixels que está agora, até zero pixels. Se você se lembra que eu disse, nós vamos voltar e vamos adicionar em nosso HTML, um atraso se você já não tivesse feito isso. Em cada avião, queremos adicionar um atraso para que eles estejam subindo em momentos diferentes. Plano 1, eu não tenho nada aqui, e então eu tenho atraso 2 para o segundo, atraso 3 para o terceiro, atraso 4, atraso 5 e atraso 6. Passando por isso, eu realmente quero voltar por um segundo porque eu percebi que nós podemos realmente tornar nosso código um pouco mais seco. Eu não fiz isso no meu original, mas esse é o positivo sobre voltar ao seu código, é que você pode ver onde você pode fazer melhorias. Onde tínhamos apenas o avião, podemos ficar com isso. Então temos atraso 2, atraso 3, então podemos ter este também ser um atraso 3. Porque eles vão estar indo na mesma taxa, nós podemos fazer este o atraso 2, em vez de atraso 5, porque ele vai estar indo na mesma taxa que a segunda string. Então, nosso último, não precisamos ter nada porque ambos os aviões estão indo por último e eles não têm nenhum atraso neles. O que eu estava mostrando a vocês lá, eu estava apenas mudando no meu original, é por isso que você viu a animação acontecendo com as cordas também, mas vá em frente e mude isso em seu código para que ele possa ser um pouco mais seco. Você não precisa ter todos os atrasos diferentes, como eu disse originalmente. Quando vamos colocá-lo em nosso CSS, também podemos tornar nosso CSS um pouco mais seco também, o que é bom. A primeira coisa que vamos fazer é adicionar a animação à nossa classe de avião aqui. A nossa animação, chamávamos-lhe voar. Então queremos ir 1,5 segundos, estamos diminuindo, então 0,6 segundos é o atraso aqui. Está indo para a frente, então é só ficar no topo. Quando vemos nossa animação, vemos que todos eles estão indo ao mesmo tempo agora. Ainda não há atraso. Queremos fazer com que pareça que estes dois vão primeiro, depois estes dois, e depois o último. Vamos em frente e fazer isso aqui. Temos o nosso atraso 2, e este vai ter o mesmo nome de animação, 1,5 segundos é quanto tempo vai demorar, a duração e vai ter a facilidade de entrada. Mas desta vez só estamos esperando 0,5 segundos e então vamos para frente novamente. No atraso 3, que são esses dois, queremos que eles vão ainda mais rápido, então estamos apenas tendo um atraso de 0,4 segundos. Essas classes de atraso que criamos, agora podemos adicioná-las também às nossas cordas para que elas possam corresponder com os planos que temos aqui. Nosso primeiro não terá nenhuma classe especial, e nós vamos apenas adicionar animação para a classe string que já está lá, e então em nossa segunda e quinta cordas sob o peg 5, vamos colocar um atraso 2 e, em seguida, sob nosso peg 3 e peg 4 cordas, vamos colocar o atraso 3. Todos eles vão ao mesmo ritmo que os aviões. Vamos olhar para o nosso código aqui e ir em frente e adicionar nossa animação à nossa classe string. Aqui está a nossa classe string, e vamos adicionar a cauda de animação para isso. Queremos fazer 1,5 segundos, queremos aliviar em 0,6 segundos e, em seguida, encaminhar. Agora também podemos adicionar essa sombra de caixa para nossas cordas para fazê-los parecer que eles estão um pouco acima. Isso só dá às cordas um pouco mais de profundidade. Eles parecem um pouco mais grossos agora com a sombra também e eles parecem que eles estão no topo da ponte aqui um pouco melhor. É isso. Agora temos uma imagem CSS completa e animação. A partir daqui, você pode mudar isso se quiser. Você pode tentar brincar com os atrasos aqui, fazer isso ir mais lento ou mais rápido, você pode refazer completamente. Eu vi esta imagem em que é realmente folhas crescendo. São estoques e depois folhas saindo e pássaros. Você pode se sentir livre para fazer isso e compartilhar isso com a turma, isso seria maravilhoso. 11. Empacotando para: Se você chegou até aqui, isso significa que agora você tem uma imagem CSS incrível e uma animação. Espero que tenha gostado de aprender CSS através de codificação criativa. Eu gostei de ensiná-lo todo este caminho e se você completou o projeto, ou você mudou o projeto, ou você fez uma imagem totalmente diferente, eu adoraria que vocês compartilhassem em nossos projetos de classe, e também em os comentários, deixe-me saber se eu posso compartilhar em nossa coleção CodePen e também na minha conta do Twitter.