Construa mais de 30 projetos da Web com HTML, CSS, e JavaScript

1. Apresentação: Bem-vindo ao novo curso, onde você pode aprender sobre como criar modelos e projetos web modernos e bonitos. Se você deseja desenvolver e personalizar seu portfólio, tornar-se um desenvolvedor experiente e ser contratado, então este é o curso certo para você. Juntos, criaremos mais de 30 projetos web diferentes e criativos com três tecnologias principais: HTML, CSS e JavaScript. Se você tiver algum conhecimento básico dessas tecnologias. E ainda temos alguns problemas para criar seus próprios projetos web. Ou, se você quiser aumentar o nível de seus desenvolvedores e designers de perto , você veio ao lugar certo. Criamos este curso para oferecer aos alunos a melhor experiência em três tecnologias principais e permitir que eles criem os melhores projetos modernos e criativos. Construiremos mais de 30 projetos web diferentes. E eles estarão cheios de efeitos modernos, bonitos e bonitos e decidem. Começaremos com projetos relativamente simples e também passaremos por alguns projetos avançados. Podemos garantir que você dominará o desenvolvimento web de front-end. Depois de concluir este curso. Usando este curso, você pode obter as inspirações que ajudarão você a aprimorar seus projetos e personalizar seu portfólio Dominando apenas essas principais tecnologias de desenvolvimento de troncos e web Você pode criar temas incríveis e modernos e simplesmente ser contratado. Além disso, você terá conhecimento suficiente para seguir em frente e aprender outras tecnologias, como estruturas e bibliotecas de subproblemas, que hoje em dia são muito populares e altamente O curso será interessante e útil. Portanto, eu recomendo que você tente tirar o máximo proveito deste curso sem apenas copiar e colar o código Se eu estivesse no seu lugar, certeza sonharia com um curso como esse. Então junte-se a nós 2. Boas-vindas ao curso: Olá e bem-vindo ao curso. Espero que este seja o curso certo e que você goste dos projetos que construiremos ao longo deste curso. Então, como você já sabe, vamos criar mais de 30 projetos diferentes, modernos e criativos Esses projetos serão construídos com base em três tecnologias principais desenvolvimento web de front-end, HTML, CSS e Gostaria de mencionar uma coisa. Como eu disse, os projetos serão criados com base em HTML, CSS e JavaScript. Portanto, você deve ter uma compreensão básica dessas tecnologias para acompanhar as palestras e não se confundir Os projetos estarão repletos de diferentes técnicas e truques modernos. Você poderá aprender como criar efeitos e animações bonitos e bonitos, que então poderá usar como inspiração para desenvolver e personalizar seu próprio portfólio Como mencionei, estaremos construindo mais de 30 projetos. Eles são modelos independentes, então você não precisa examiná-los em ordem. Você pode criar qualquer um dos projetos que quiser na lista. Depende absolutamente de você. Alguns dos projetos são simples, mas você também conhecerá alguns projetos avançados. Por isso, incluímos todos os níveis de que o desenvolvedor precisa. Ao longo do curso, criaremos projetos como navegações, apresentações de slides, caixas de seleção personalizadas, cartões 3D e outros projetos interessantes e Então, tenho certeza que você vai gostar deles. Acho que você terá uma grande prática e experiência em desenvolvimento web de front-end, no qual HTML, CSS e JavaScript são essenciais Tudo bem, então vamos seguir em frente e começar. 3. Configuração: Olá e bem-vindo ao curso. Estamos felizes que você esteja aqui e esperamos que você aproveite o curso antes de nos aprofundarmos e começarmos a criar nossos projetos. Antes de tudo, temos que preparar nosso ambiente de trabalho. Tenho certeza de que a maioria de vocês já está preparada para escrever o código. Nesse caso, sinta-se à vontade para pular este vídeo e entrar nos projetos imediatamente. Mas se não, então esse não é o problema. Vamos prosseguir e configurar algumas ferramentas. Ao longo deste curso, precisaremos de duas ferramentas principais, que são um navegador web moderno e um editor de texto. Como navegador da web, vou usar principalmente o Google Chrome. E também, em alguns casos, precisaremos da ajuda do Mozilla Firefox. Tenho certeza de que você já sabe como instalar esses navegadores da web e acho que todos vocês já os têm. Mas de qualquer forma, vamos ver como baixá-los. Para obter o Google Chrome, precisamos acessar esse URL aqui e baixar o navegador da web. O processo de instalação é bem simples, então não vou passar por isso. Quanto ao Mozilla Firefox, você precisa usar esse URL e baixar o navegador aqui Ambos os links serão anexados a esta palestra. Tudo bem, vamos seguir em frente e falar sobre o editor de texto. Vamos usar o Visual Studio Code porque no momento, ele é um dos melhores editores de texto do mundo Obviamente, você pode se sentir à vontade e usar seu editor de texto favorito. Depende de você, mas eu recomendo usar o código VS. Para baixar o código VS, você precisa visitar este site e obter o editor de texto para Windows, Mac ou Linux. Este link também será anexado a esta palestra. O processo de instalação do visual Studio Code também é muito simples, então tenho certeza de que ele não terá problemas com ele. Tudo bem, então, depois de instalar as duas ferramentas, você estará pronto para começar Então, vamos direto aos projetos 4. Projeto 1 - Formulários 3D: Tudo bem, então é hora de criar um novo projeto. Neste projeto, criaremos formulários de login e inscrição em 3D. E o projeto será criado com base em HTML, CSS e JavaScript. Neste vídeo, vou analisar o projeto e descrevê-lo. Como você pode ver, temos aqui um formulário de login exibido por padrão com uma imagem de fundo em tela cheia No canto superior esquerdo do formulário, temos o Batson, que está exibindo o texto. Cadastre-se. Se eu clicar nele. E então o formulário girará em um ambiente 3D. E o formulário de inscrição será exibido. Se eu clicar no botão Entrar, retornaremos o formulário de login Assim, você pode alternar formulários com esses botões no espaço 3D. Ok, então é isso sobre esse projeto. Espero que seja interessante e que você goste. Então, vamos começar. Tudo bem, então estamos prontos para começar a construir o projeto. Eu criei uma nova pasta na área de trabalho chamada formulários 3D, na qual tenho outra pasta chamada imagens. Inclui a imagem de fundo. Vamos abrir essa pasta no VS Code e depois criar nossos arquivos de trabalho para HTML, CSS e JavaScript. Vou chamar os arquivos index.html, depois style.css e script.js. Em seguida, abra o arquivo index.html e crie um documento HTML básico. Para isso, vou usar amidas. Temos que colocar um ponto de exclamação e, em seguida, pressionar Tab ou responder Então, aqui temos as tags HTML básicas. Antes de tudo, vamos mudar o título. Vou chamá-los de formulários 3D. E então vou vincular os arquivos CSS e JavaScript. Vamos abrir a tag do link e especificar aqui no primeiro atributo atrial a parte do arquivo. Quanto ao arquivo JavaScript, vou abrir a tag de script logo acima da tag do corpo de fechamento. E então precisamos especificar o nome do arquivo no atributo de origem. Tudo bem, por fim, vou executar o projeto no navegador usando um pacote de código VS chamado Live Server Isso nos permite executar a vida útil do projeto e fazer as atualizações e alterações sem atualizar a página Cada vez. Antes de começarmos a escrever o código, vou colocar o editor e o navegador lado a lado Tudo bem, vamos começar a criar a marcação HTML Vou abrir uma tag div, que será o contêiner Em seguida, precisamos de outra tag div. Ele envolverá os dois formulários. Então, vou atribuir à classe o wrapper de formulários. Esse elemento consistirá em dois elementos diferentes. Quero dizer dois elementos formados diferentes. O primeiro será o formulário de assinatura. Então, vamos abrir a tag do formulário com o formulário de login da classe. Portanto, cada elemento do formulário incluirá um botão, título e as entradas Vamos abrir a tag do link que será o botão. Permite que você se inscreva na classe Signup, BTN. Eu usei aqui, inscreva-se porque essa pessoa nos ajudará a navegar até o formulário de inscrição Tudo bem, em seguida, precisamos ir. Vamos abrir a tag de cabeçalho H2 com o login do conteúdo. Depois disso, vou inserir seus elementos de entrada. Vamos abrir a tag div, que será a embalagem, projetada para comer o invólucro de entrada da classe Portanto, no geral, teremos três elementos de entrada diferentes para e-mail, senha e botão de envio. Vamos abrir a tag de entrada com um texto digitado e com atributos de espaço reservado, seu e-mail Então eu vou duplicar essa linha de código. Esses campos de entrada serão para a senha. Então, vamos alterar o atributo de tipo, torná-lo uma senha e também alterar o valor do atributo de espaço reservado Precisamos novamente da senha. O próximo elemento de entrada será para o botão de envio. Então, o tipo será enviado. Aqui não precisamos de atributos de espaço reservado. Em vez disso, precisamos de valor. Faça login. Novamente, isso é tudo sobre os primeiros elementos do formulário. Vamos continuar e duplicar o formulário inteiro e depois fazer algumas alterações Precisamos aqui do nome da turma, do formulário de inscrição que o botão vai assinar Além disso, vamos alterar o conteúdo do título. Precisamos nos inscrever. No caso do formulário de inscrição, teremos cinco entradas diferentes O primeiro será para o nome. Então, precisamos aqui do seu nome. E também teremos uma entrada para confirmação de senha. Vamos mudar aqui o espaço reservado para confirmação da senha do Instituto confirmação da senha Por fim, vamos alterar o valor do botão Enviar. Use aqui, inscreva-se. Tudo bem, vamos falar sobre a marcação HTML. Agora é hora de personalizar o projeto Abra o arquivo CSS e, antes de tudo, crie alguns padrões e redefina os estilos Vou selecionar todos os álbuns usando um asterisco. Em primeiro lugar, vou me livrar da margem e do preenchimento padrão Vamos seguir em frente e definir as duas propriedades como zero. Então eu vou fazer uma caixa de borda do tamanho de uma caixa. Além disso, vou me livrar dos elementos de link subjacentes padrão. Vamos definir o texto, a decoração não. Em seguida, altere a família da fonte. Vou usar seu telefone chamado Arial font group sensory. Ao longo deste projeto, usaremos a RAM como unidade de medida. No momento, 1 g é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 Vou converter 1 g em dez pixels. E para isso, temos que diminuir o tamanho da fonte dos elementos HTML. Vamos fazer com que seja 62,5 por cento. Tudo bem, então os elementos ficaram menores. Em seguida, vou cuidar do contêiner. Vamos selecioná-lo e definir sua largura e altura. Vou definir a largura para 100%. Quanto à altura, vou fazer com que seja 100% da janela de visualização Portanto, precisamos aqui de 100 pH. Vou definir a imagem como plano de fundo em tela cheia. Antes disso, vou usar a função de gradiente linear porque quero tornar a imagem de fundo um pouco mais escura Vamos usar aqui o valor RGBA 3177 e a opacidade 0,7. Quanto ao segundo valor RGBA, será a cor preta com a opacidade Em seguida, vou especificar o URL da imagem. Temos a pasta chamada imagens na qual armazenamos a imagem chamada p2 dot PNG A posição será centralizada. E também precisamos saber repetir. Finalmente, vou definir o tamanho do plano de fundo para cobrir. Tudo bem, então aqui temos a imagem de fundo em tela cheia e na verdade, é isso em relação ao contêiner Agora temos que começar a personalizar os formulários. Acho que seria melhor se escondêssemos um dos formulários por um tempo e estilizássemos apenas um formulário Então, vamos ocultar o segundo formulário de inscrição. Em seguida, selecione Forms wrapper. Vou enviar para a embalagem da página. Então, vamos definir sua posição como absoluta. Em seguida, temos que definir as propriedades superior e esquerda. Vamos fazer com que os dois sejam 50%. Então, para centralizar perfeitamente os elementos na página, precisamos usar o transform translate. Temos que mover os elementos em -50% em ambas as direções. Estou nos eixos x e y. Portanto, é considerado um formulário colocado no centro da página. Em seguida, vou personalizar o formulário em si. Então, vamos selecionar o wrapper de formulários, seguido pelo formulário do nome da tag Em primeiro lugar, conforme definido dentro das alturas, vou definir a largura para 50 percursos. A altura será de 35 RAM. E também altere a cor de fundo. Vou usar aqui o valor RGBA 4114108. E então a opacidade de 0,9 a cinco. Tudo bem, a seguir, vou alinhar os elementos dentro do formulário usando o flexbox Precisamos exibir o flex. Então temos que mudar a direção porque precisamos colocar os elementos verticalmente Portanto, precisamos flexionar a direção para ser coluna. Então, para criar algum espaço ao redor dos elementos de que precisamos, justifique o espaço de conteúdo ao redor E também para centralizar os elementos horizontalmente, alinhe os itens no centro os elementos horizontalmente, alinhe Por fim, vamos criar um pequeno efeito de sombra. Vou criar uma sombra nos quatro lados. Então, vou usar os seguintes valores. Precisamos de 0,1 RAM três vezes do que o colar C, C, C. E também vou usar aqui o valor chamado inserção Isso nos permite criar a sombra dentro dos elementos. Em seguida, precisamos de -0,1 grama duas vezes. Em seguida, execute 0.1 com a mesma cor CCC e com o mesmo valor definido Tudo bem, digamos que, em relação aos elementos do formulário , por enquanto , vou iniciar os elementos individuais Vamos começar com o botão de inscrição. Vou selecioná-la usando os nomes de tag form e a. Vamos definir essa posição como absoluta. Em seguida, defina as propriedades superior e esquerda, ambas como ram. Pode ver que o botão está posicionado corretamente. Vamos em frente e estilizá-lo. Em primeiro lugar, vou mudar a cor de fundo. Vamos deixá-lo branco Além disso, vou deixar o texto negrito ou usar a espessura da fonte com um valor 600. Então, vamos transformar o texto em maiúsculas. Além disso, vou mudar a cor. Vamos usar o valor RGBA 4114108. Então, crie algum espaço entre as letras. Faça questão de correr. Logo depois disso, vou criar algum espaço dentro do botão usando o preenchimento Vamos definir o preenchimento para 0,5 rem na parte superior do que um rem no lado direito, 0,5 rem na parte inferior e três rem no lado esquerdo Finalmente, precisamos mudar a forma do botão usando o raio da borda Serão necessários quatro valores diferentes. Pois o raio no canto superior esquerdo será de 100% Então teremos 0,5 rem no canto superior direito. O canto inferior direito terá 0,5 RAM, como provavelmente no canto inferior esquerdo, será 100%. Ok, isso é tudo sobre o botão. Vamos seguir em frente e personalizar o título. Selecione o formulário H2. Primeiro de tudo, vamos definir o tamanho da fonte, fazer com que seja 2.3 executada. Coloque o texto em maiúsculas. Crie também algum espaço entre as letras, faça-o apontar para a RAM e, em seguida, altere a cor, deixe-a branca. Portanto, o título é personalizado e agora temos que cuidar das entradas Vamos prosseguir e selecionar o invólucro de entrada. Precisamos colocar as entradas verticalmente umas sobre as outras Então, use a coluna de direção flexível e flexível da tela. Em seguida, vou selecionar a entrada em si. Vamos definir a largura e a altura. Vou configurar com 225 RAM. Quanto à altura, serão três rampas. E depois disso, vou criar algum espaço dentro e também fora das entradas Vamos usar o preenchimento com os valores 0,5 rem na parte superior e inferior e um rem nos lados esquerdo e direito Quanto à margem, será de 0,5 rem na parte superior e inferior e zero nos lados esquerdo e direito. Em seguida, vamos mudar a cor do plano de fundo. Eu vou fazer com que seja transparente. Além disso. Vamos criar uma borda com valores 0,1 redonda, sólida, na cor branca. Além disso, faça com que as entradas sejam arredondadas usando raio de borda com valor cinco, executou todas as entradas ou elas parecem boas, mas precisamos adicionar mais alguns estilos a Vamos mudar a cor. Faça com que seja branco. Além disso, crie algum espaço entre as letras, torne-o um ponto para uma RAM e, em seguida, elimine o padrão. Esboço. Defina-o como nenhum. Tudo bem, então isso é tudo sobre as entradas. Em seguida, vou mudar a cor do espaço reservado. Precisamos selecionar o primeiro rapper, seguido pela entrada e pelo espaço reservado para pseudoelementos Vamos definir a cor para branco e também alterar a espessura da fonte. Faça com que sejam 300. Tudo bem, por fim, vou personalizar o botão de envio Vamos selecionar a entrada com um atributo de tipo. Primeiro, vamos mudar a cor de fundo, torná-la branca. Então, a cor será o valor RGBA 4114108. Vamos aumentar a espessura da fonte. Torne a detecção mais ousada. Defina o caminho da fonte para 900. Também transforme texto em maiúsculas. M Finalmente mudou o tipo do ponteiro de fabricação mais grosseiro. Tudo bem, é isso. Em relação ao formulário de login, ele é personalizado Agora temos que exibir o formulário de inscrição e fazer com que os dois formulários funcionem Então, vamos ao arquivo index.html e exibi-lo novamente no segundo formulário. Quanto ao primeiro formulário, vou escondê-lo por um tempo. Portanto, a única coisa que precisamos fazer com o formulário de inscrição é personalizar o botão de login Temos que movê-lo para o canto superior direito do formulário. E também temos que mudar a forma do Bateson. A direção deve ser para o lado direito. No momento, temos estilos comuns para os dois botões. Então, vou selecionar os dois botões separadamente e definir seus estilos individuais. Em primeiro lugar, vou selecionar Inscrever-se UTM Em seguida, vamos pegar a propriedade esquerda dos estilos comuns Além disso, vou pegar o preenchimento e o raio da borda. Então eu vou duplicar esse código. Vamos mudar o nome da classe que precisamos aqui, login, btn. Também precisamos mudar, caindo para a direita. Então, precisamos de um preenchimento diferente. Será 0,5 rpm , 3,5 rem e uma RAM. E também precisamos de um raio de borda diferente. Os valores serão os seguintes. 0,5 rima. Então 100% duas vezes. E novamente 0,5 rampa. Tudo bem, então os dois formulários são personalizados. Vamos continuar e exibir os dois. Então, podemos ver que temos aqui as duas formas. A posição do botão não está correta no momento. É porque ele está posicionado de acordo com o invólucro do formulário e precisamos posicioná-lo de acordo com o elemento do formulário Para fazer isso, temos que atribuir ao elemento do formulário a posição absoluta Então, no momento, os formulários não estão mais centralizados na página Vamos em frente e consertar isso. Em primeiro lugar, vou me livrar do transform translate a partir daqui. E então temos que ajustar as posições superior e esquerda. A posição superior será 50% menos a metade da altura do formulário Quanto à posição esquerda, será 50% menos a metade da largura do formulário Portanto, precisamos dos seguintes cálculos. Vamos usar a função calc. A posição superior será de 50 por cento -17,5 corridas, porque a altura é igual a 35 corridas Quanto à última posição, ela terá 50% -25 RAM porque a largura do formulário é de 50 vezes Tudo bem, como você pode ver, os elementos do formulário estão centralizados Agora temos duas formas de posição no espaço 3D. Quero dizer, vou rotacionar essa inscrição, pois, como eu disse, precisamos posicionar elementos no espaço 3D para criar um ambiente 3D, temos que usar uma dessas propriedades CSS chamada prospectiva E vou atribuí-lo ao contêiner como valor. Vamos atribuir 200 rampas. Os elementos do formulário são netos do contêiner. E para aplicar um ambiente 3D às deformas, precisamos usar outra propriedade chamada estilo de transformação com 3D de preservação de valor e atribuí-la aos elementos pais dos formulários, que é um invólucro de formulários Tudo bem, agora é hora de alternar o formulário de inscrição. Vou selecioná-lo separadamente. E então use Transform com a função rotate y. E como valor, vou passar 270 graus para você. Ok, então, no momento, o formulário de inscrição não está visível porque o formulário de inscrição está E para ver melhor por que não está visível, posso alterar o valor configurá-lo para 250 graus. Então, agora podemos ver que a forma é girada. Você pode pensar que poderíamos usar aqui apenas 90 graus. Mas nesse caso, o conteúdo do formulário seria girado na direção oposta É por isso que usamos 270 graus. Tudo bem, em seguida, temos que mover o formulário de inscrição para o lado esquerdo e também diretamente no espaço 3D Para mover os elementos para o lado esquerdo, vou usar a função Translate Z com valor 25 RAM. E agora temos que mover os elementos de acordo com o eixo x com o valor -25 Ok, finalmente, vamos voltar aqui 270 graus. A única coisa que precisávamos fazer antes de programarmos os botões era girar os formulários inteiros, provavelmente os rappers Então, isso está atribuído a ele. Transforme a rotação y com o valor menos dez graus. Tudo bem, é isso. Agora temos que começar a escrever um pouco de JavaScript. Temos que anexar um clique nos ouvintes do evento para apertar os dois botões Mas antes de tudo, vou selecionar os dois botões. Vamos criar uma nova variável. Vou chamá-lo de sign up btn e, em seguida, selecionar o elemento usando o método querySelector Vamos especificar aqui o nome da classe, inscreva-se btn. Então eu vou duplicar essa linha de código. Vamos mudar o nome da variável. Vai assinar btn. Quanto ao nome da classe, precisamos fazer login entre elas. Logo depois disso, vamos conectar ouvintes de eventos a ambos. Vamos começar com o método sign-up btn add event listener com um evento E a função de retorno de chamada, que será executada assim que clicarmos no botão Inscrever-se Vamos duplicar esse código e transformar o sinal de butano no sinal Tudo bem, uma vez que clicamos nele, mas como temos que girar o invólucro de fontes, para fazer isso, vou adicionar uma nova classe deforms wrapper para fazer isso, vou adicionar uma nova Em seguida, selecionaremos o wrapper de formulários com essa classe recém-criada em CSS E definiremos a rotação do elemento. Em primeiro lugar, vou evitar as ações padrão dos botões de costura Se não fizermos isso , a página rolará para cima se tivermos algum conteúdo adicional Portanto, precisamos passar seus objetos de evento em ambos os casos. E então precisamos evitar a inadimplência. Tudo bem, então, como dissemos, temos que adicionar uma nova classe ao invólucro de deformas Em primeiro lugar, vamos selecionar esses elementos, criar uma nova variável, chamá-la de invólucro de formulários Em seguida, selecione os elementos usando o método querySelector. Precisamos aqui do invólucro de formulários className. Então, vamos adicionar uma nova classe a esses elementos. Precisamos de um wrapper de formulários, seguido pela propriedade chamada lista de classes, que inclui todas as classes que o elemento tem Então, precisamos de um método chamado add. E temos que especificar aqui o nome da classe. Digamos que mude. Tudo bem, vamos ao arquivo CSS e selecionar o invólucro de espuma com mudança de Então, quando clicamos no botão, tivemos que girar o invólucro do formulário Então, vou fazer com que você transforme a rotação y com um valor de 100 graus. Então, se clicarmos no botão , o formulário girará Mas, como você pode ver, ele mudou de posição. Portanto, precisamos definir a posição de atraso. Vamos usar novamente a função chamada. Nesse caso, precisamos de 50 por cento mais a metade da rampa de largura 25 Agora está tudo bem. Temos que tornar o efeito mais suave. Para isso, temos que usar a transição com os valores transformados em 0,5 s, que é a duração. E depois à esquerda novamente com 0,5 s. Agora, se eu clicar, o formulário girará suavemente No momento, apenas o botão Inscrever-se está funcionando. Então, vamos continuar e cuidar do segundo botão também. No caso do segundo botão, precisamos apenas remover a alteração de classe do invólucro de formulários Então, vamos pegar essa linha de código. Cole aqui embaixo, altere, adicione para remover. Então, agora tudo estava perfeito e, na verdade, com este projeto, terminamos. Se você acha que os formulários são menores em tamanhos muito grandes, basta aumentar o tamanho da fonte dos elementos HTML. Vamos mudar e fazer, digamos, 72,5 por cento Então agora eu acho que está melhor. E, na verdade, terminamos. Terminamos de trabalhar neste projeto. Espero que tenha sido interessante e útil. Então, vamos passar para o próximo projeto. 5. Projeto 2 - Casa: Tudo bem, é hora de criar nossos próximos projetos. Neste vídeo, vamos construir essa casa com HTML, CSS e JavaScript. Vamos seguir em frente e descrever os projetos. Temos aqui uma casa com algumas janelas diferentes. Além disso, há um teto azul e uma porta. Se eu clicar na porta , ela se abrirá. Além disso, se eu passar o mouse sobre a janela na parte superior da porta, ela também se abrirá Então é isso em relação a este projeto, vamos em frente e começar a construí-lo. Eu criei uma nova pasta na área de trabalho chamada casa. Vamos abri-lo no VS Code e criar nossos arquivos de trabalho para HTML, CSS e JavaScript. Vou chamá-los de index.html, style.css e scripts dot js. Em seguida, abra o arquivo index.html e crie um documento HTML básico. Para isso, vamos usar uma imagem. Precisamos colocar o ponto de exclamação da urina e seguida, pressionar Tab ou Enter Então, vamos lá. Em primeiro lugar, vou mudar o título. Vamos inserir sua casa. Em seguida, vincule arquivos CSS e JavaScript. Vou abrir a tag do link. E então vamos especificar aqui o nome do arquivo. Quanto aos trabalhos desse arquivo, vou abrir a tag de script logo acima da tag do corpo de fechamento. E então, no atributo fonte, vou especificar o nome do arquivo, script.js. Tudo bem, então todos os arquivos estão vinculados. Vamos prosseguir e executar o projeto no navegador. Vou usar o Live Server. E então vamos colocar o editor e o navegador. Assim mesmo. Estamos prontos para começar a construir um projeto. Primeiro, vou criar a marcação HTML. Vamos abrir uma tag div com um contêiner de classe. Em seguida, vou abrir outra tag div que envolverá o conteúdo Vamos atribuir a ela a casa className. Portanto, a casa consistirá em algumas partes diferentes. Teremos um teto, janelas do que o quarto e também a porta. Vamos seguir em frente e criar essas peças. Vou começar com o telhado. Vamos abrir a tag div com o teto principal da classe. Em seguida, vou criar quatro janelas diferentes. Vamos abrir a tag div. Ele terá duas classes diferentes. A primeira será a janela. Será o nome comum da classe. E então também precisamos da janela superior esquerda. Vamos duplicar essa linha de código três vezes. Portanto, a segunda janela ficará no canto superior direito. Então teremos a janela inferior esquerda. E a última será a janela inferior direita. Tudo bem, isso é tudo sobre o Windows. Em seguida, vou criar a sala que tem a tag VB aberta com a sala de aula Portanto, a sala consistirá em três partes diferentes. Teremos um teto da sala do que a janela e também a porta. Vamos abrir uma tag div com o teto da sala de aula. Em seguida, vou criar uma janela. Vamos abrir outra tag div com uma janela superior da classe. Essa janela terá duas partes diferentes, o lado esquerdo e o lado direito. Então, vamos abrir a tag div com a janela superior da classe à esquerda. Então eu vou duplicar essa linha de código e mudar o nome da classe que precisamos aqui, janela superior, certo? Ok, finalmente, vamos criar uma porta. Vou abrir a tag div, que será a embalagem, vamos chamá-la de moldura da porta Então, dentro desse elemento div, vou abrir outra tag div com a porta da classe E, finalmente, precisamos da maçaneta da porta. Portanto, está aberta, etiqueta div com a maçaneta da porta da classe. Tudo bem, é isso. Em relação à marcação HTML, vamos começar a escrever o CSS Em primeiro lugar, vou definir alguns estilos comuns e redefinidos. Vamos selecionar todos os elementos usando um asterisco. Vou me livrar da inadimplência, da margem e do preenchimento. Então, vamos definir as duas propriedades como zero. E também vou definir o tamanho da caixa de borda. Então, ao longo deste projeto, vou usar a RAM como unidade de medida. No momento, um rem é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 Quero converter uma RAM em dez pixels e, para isso, temos que diminuir o tamanho da fonte do elemento HTML. E temos que fazer com que seja 62,5%. Tudo bem, vamos cuidar do contêiner. Vou estendê-lo para a página inteira. Então, vamos selecioná-la e definir essa largura. Eu vou fazer isso 100%. Quanto à altura, será 100% da janela de visualização. Portanto, precisamos configurá-lo para 100 vh e depois alterar a cor de fundo Vou usar aqui o valor RGB 103150. E depois um, todos os três novamente. Certo? Depois disso, vamos selecionar a casa. Eu vou tornar esse elemento visível. Então, vamos definir sua largura e altura. Vou definir sua largura para 110 RAM. Quanto à altura, será de sete por RAM. E também altere a cor de fundo. Vamos usar U, E F, E, F, E F. Então aqui temos a casa. Vou colocá-lo no centro da página. E para isso, vamos usar uma grade CSS. Temos que definir a exibição como grade. E então, para colocar o elemento no centro, precisamos usar itens de posicionamento com o centro de valor. Tudo bem, como você pode ver, o elemento está colocado no centro agora. É isso sobre a casa Em seguida, vou cuidar do telhado principal. Então, vamos seguir em frente e selecionar esses elementos. Antes de tudo, vamos definir sua largura e altura. Vou definir a largura para 110%. Isso é bem alto, vai ser completo para a RAM. E depois mude a cor de fundo. Vamos usar novamente o valor RGB. Depois de passar pelo 867145. Ok? Portanto, o telhado é viável, mas podemos ver que temos que cuidar de sua posição Para isso, vou atribuir a ela uma posição absoluta, que para posicioná-la de acordo com a Casa, que é o elemento pai, vou atribuir à casa uma posição relativa E depois disso, vamos definir as propriedades superior e esquerda. Vou colocar no top dois menos dez RAM. Quanto à posição esquerda será menos cinco por cento Portanto, considera-se que o teto está posicionado, mas no momento não parece muito bom. Temos que girá-lo em um ambiente 3D. Então, temos que criar um espaço 3D. E para isso, temos que usar uma dessas propriedades CSS chamada prospectiva. Vamos configurá-lo para 200 RAM. E é isso. Vamos girar o telhado de acordo com o eixo x. Use Transform com a função girar x. Vou girar o elemento em 20 graus. Ok? Então, agora considera-se que o telhado parece muito melhor. A única coisa que vou fazer é deixar seus cantos ligeiramente arredondados. E também vou adicionar um pequeno efeito de sombra. Então, vamos usar o raio da borda. Serão necessários quatro valores. O canto superior esquerdo terá uma RAM o canto superior direito também terá um rem Quanto aos cantos inferior direito e inferior esquerdo. Vou fazer uma rampa de 0,5 para eles. E também use sombra de caixa com os valores 0,5 grama do que um rem. Rem. E a cor também. Tudo bem, então o teto principal está pronto e agora temos que cuidar das janelas Como você sabe, todas as quatro janelas terão alguns estilos comuns. Então, vou selecioná-los usando a janela comum className Primeiro, vamos definir a largura e a altura. Vou definir a largura para 12 RAM. A altura será de 15 RAM. Quanto à cor de fundo, vou usar um AAA Em seguida, vou adicionar ao Windows uma borda. Vamos atribuir dois pontos de valores para RAM em que a borda fique sólida A cor. Vamos usar 333 Depois disso, precisamos cuidar das posições das janelas. Vamos definir a posição como absoluta. E depois disso, temos que definir as posições para cada janela separadamente. Vamos começar com a parte superior dessa janela. Vamos selecioná-lo. configurar a posição para 20 para bater. Quanto à posição esquerda, será de dez RAM Em seguida, vou tirar você da janela superior direita. Então, vamos duplicar esse código. Altere o nome da classe que precisamos aqui, na janela superior direita, e também mude a posição da esquerda para a direita. Em seguida, vem uma janela inferior esquerda. Vamos duplicar novamente no código. O nome da classe será a janela inferior esquerda e as duas posições serão 43 RAM. Precisamos aqui da posição esquerda com o mesmo valor. E, finalmente, temos a janela inferior direita. Vamos duplicar esse código. Mude o nome da turma que precisamos aqui. E também mude a posição de atraso. Vamos usar corretamente. Ok, então todas as quatro janelas estão posicionadas e a próxima coisa que precisamos fazer é cuidar da forma das janelas superior esquerda e superior direita. Se dermos uma olhada no projeto finalizado, você verá que os lados superiores dessas duas janelas o cercam. Então, vamos continuar e fazer isso usando o raio da borda. Precisamos do mesmo raio de borda para ambas as janelas. O canto superior esquerdo será de 50 por cento. Então, precisamos do mesmo valor para o canto superior direito para os cantos inferior esquerdo e inferior direito, eles serão zero. Portanto, temos as janelas arredondadas. Em seguida, vou criar esses quadros. E eu farei isso usando os pseudoelementos antes e depois Primeiro, vamos criar as linhas horizontais. Vamos selecionar os pseudoelementos anteriores. Defina o conteúdo, deixe-o vazio. Depois disso, vamos definir a largura e a altura. A largura será de 100%. Quanto à altura, vou fazer referência à RAM. E também mude a cor de fundo, torne-a 333. Então, no momento, as linhas não estão visíveis porque temos que definir essa posição. Então, vamos definir a posição como absoluta. E então eu vou definir as propriedades superior e esquerda. A primeira posição será de cinco RAM. Quanto à posição esquerda, vamos defini-la como zero. Ok, então, como você pode ver, temos aqui as linhas horizontais. Vamos seguir em frente e criar as linhas verticais. Eu vou fazer isso usando os pseudoelementos posteriores. Vamos copiar esse código e mudar o antes para o depois. A largura será zero ponto para a RAM. Quanto à altura, vou fazer com que seja cem por cento, então a posição será zero. Vamos mudar a posição esquerda. Eu vou fazer com que seja 50 por cento. Na verdade, precisamos colocar as linhas verticais no centro da janela. Então, precisamos usar aqui transformar, traduzir x com valor -50% Tudo bem, como você pode ver, todas as quatro janelas são personalizadas e agora temos que seguir em frente e cuidar da sala Vamos selecionar esses elementos e definir sua largura e altura. Vou definir a largura para quatro como RAM. Quanto à altura, será de oito por cento. E depois mude a cor de fundo, torne-a branca. O quarto será colocado no centro da casa. Então, vamos cuidar de sua posição. Vamos definir a posição como absoluta. Então, precisamos que a posição esquerda seja de 50%. Em seguida, vamos definir a posição como zero. E também para colocar o elemento no centro ao se transformar, traduza X com o valor -50 por cento Ok, então é isso em relação ao quarto por enquanto. Em seguida, vou cuidar de um telhado. Vamos em frente e selecionamos o telhado do quarto. Em primeiro lugar, vou definir sua largura e altura. A largura será de 110%. Então, a altura será de 20 RAM. E também vou mudar a cor de fundo. Vamos usar aqui o valor RGB 867145. Como você pode ver, o teto está visível, mas precisamos personalizá-lo porque momento, não está com boa aparência. Antes de tudo, vamos cuidar de sua posição. Vou definir a posição como absoluta e, em seguida, vou definir as posições superior e esquerda. A propriedade superior será menos dez rimas Quanto à posição esquerda, deve ser menos cinco Depois disso, também temos que criar o ambiente 3D para esse telhado. Quero dizer, um ambiente 3D que criamos para o telhado principal da casa. Para eles, temos que usar uma propriedade chamada perspectiva. Vamos configurá-lo para 100 RAM. E então eu vou girar o telhado. Devemos girá-lo de acordo com o eixo x em 40 graus Ok. Portanto, o teto é girado , mas não é bem visível Para corrigir isso, vou usar sombra de caixa. Vamos atribuir pontos de valores 2D a ram 0,5 rem, 1,5 rem e, como cor, vou usar preto Ok, finalmente, vamos arredondar os cantos do telhado usando o raio da borda Vou definir o raio da borda no canto superior esquerdo como 0,5 RAM, e o canto superior direito também deve ser 0,5 primo Quanto aos cantos inferior direito e inferior esquerdo. Vamos configurá-los, ambos com rampa 2.3. Tudo bem, então, finalmente, terminamos com o telhado. Em seguida, vou cuidar da janela superior da sala. Vamos prosseguir e selecioná-lo. Primeiro, vamos definir a largura, a altura e a cor do plano de fundo. Vou definir a largura para 16 RAM e a altura para 17. Execute como parte da cor de fundo. Vamos configurá-lo para RGB 112 e depois 22.22. Então, temos aqui a janela, ela não está colocada corretamente no momento. Então, vamos cuidar de sua posição. Vamos definir a posição como absoluta. Em seguida, defina as propriedades superiores e arredondadas. A posição superior será de 15 RAM. Quanto à posição no laboratório, vou configurá-la para 50 por cento. E então, para colocar a janela perfeitamente no centro, vamos usar Transform, Translate X com o valor -50% Ok, a seguir, temos que fazer a parte superior em volta dela. E também vou adicionar a ela uma borda. Então, vamos definir o raio da borda para 50%. Então, novamente, se 50 por cento de zero, novamente zero. Isso é o que é a fronteira. Vamos fazer com que seja de 0,5 RAM sólido. E como cor, vamos usar 555. Tudo bem, próximo a necessidade de personalizar partes dessas janelas Todos nós já criamos dois elementos div para isso. Então, vamos selecionar a janela superior esquerda. No início. Vamos definir a largura e a altura. A largura será de 49,5%, depois a altura será Quanto à cor de fundo, vou usar o valor RGBA A cor vai ser branca. Quero dizer, precisamos 5053 vezes. E então vamos diminuir a opacidade, torná-la 0,4. Depois disso, vamos definir a posição. Vamos definir a posição como absoluta e criar as propriedades superior e esquerda, ambas zero. Tudo bem, então, como você pode ver, temos que mudar a forma desses elementos Temos que arredondá-lo no canto superior esquerdo. Então, vamos usar borda, raio superior esquerdo e configurá-lo como 50 traçados Por fim, vamos adicionar uma borda a esses elementos. Vamos definir a borda de 2,5 gramas de sólido. E como cor, vamos usar 555. Tudo bem, isso é tudo sobre o lado esquerdo. Em seguida, vou criar o mesmo no lado direito. Para isso, vamos apenas duplicar esse código e transformar a esquerda em direitos em todos os lugares Ok, então ambas as partes são criadas como as outras janelas. Também precisamos das linhas horizontais aqui. Vou criá-los novamente usando os pseudoelementos anteriores Então, vamos seguir em frente e selecionar a janela superior esquerda, seguida pelo pseudo elemento anterior Antes de tudo, vamos definir o conteúdo. Vai ficar vazio. Em seguida, vou definir a largura e a altura. Vamos definir a largura para 100% Em seguida, vou definir 2,5 rem altos e também alterar a cor de fundo. Faça com que seja 555 Que, para tornar o elemento visível, vou definir a posição. Vamos definir a posição como absoluta. Em seguida, defina a propriedade principal. Vai ser de 35 por cento. Quanto à posição de atraso, vou configurá-la para zero Tudo bem, então isso é tudo sobre o lado esquerdo. Também vou criar a mesma linha no lado direito. Vamos copiar esse código. Cole aqui embaixo, mude o nome da turma que precisamos escrever. E então mude a posição que precisamos, certo? Também. Então é isso. A janela inteira é personalizada e a única coisa que precisamos fazer é criar um efeito de foco Então, uma vez que passamos o mouse sobre os elementos que a janela deve abrir, precisamos adicionar um efeito de foco da janela e girar os dois lados Vamos continuar e começar com o lado esquerdo. Vou selecionar Janela superior com o mouse. E então vamos selecionar a janela superior esquerda. Portanto, precisamos girar o elemento de acordo com o eixo y. Então, precisamos transformar a rotação y. E como valor que vou usar aqui -50 graus Também para tornar o efeito mais suave. Vamos usar a transição com a transformação 1 s. Ok? Então, vamos considerar que o elemento está girando, mas não é isso que queremos aqui Ele deve girar do lado esquerdo. No momento, ele está girando a partir do centro porque a origem da transformação é centralizada por padrão, precisamos alterá-la e colocá-la à Então, vou usar as propriedades chamadas origem da transformação. E eu vou colocá-lo para a esquerda. Agora, como você pode ver, ele está girando corretamente, mas precisamos adicionar aqui mais uma coisa Precisamos girá-lo em um ambiente 3D. E para isso, vamos usar novamente a perspectiva. Precisamos atribuí-lo à própria janela. Nesse caso, vou definir a perspectiva para 150 rampa. Dá para ver que agora temos um resultado melhor. Vamos seguir em frente e fazer o mesmo com o lado direito. Eu vou copiar esse código. Em seguida, mude da esquerda para a direita. Além disso, precisamos nos livrar do sinal negativo a partir daqui. Então, precisamos mudar a origem da transformação. Nesse caso, precisamos transformar a origem em correta. E, finalmente, vamos usar a transição com a transformação 1 s. Então, como você pode ver, tudo funciona perfeitamente e com a janela está pronto. A única coisa que precisamos fazer neste projeto é criar a porta. Antes de tudo, precisamos criar o quadro. Então, vamos selecioná-lo e definir a largura e a altura. A largura será da marca 14. Quanto à altura, vamos configurá-la para 18 RAM. E também altere a cor de fundo. Faça isso para quatro. Em seguida, precisamos mudar sua posição. Ele deve ser colocado no centro da sala. Então, vamos definir a posição como absoluta. Em seguida, definiu a propriedade Watson, ela será zero Então, precisamos de uma posição de atraso. Deveria ser de 50 por cento. E para centralizá-los perfeitamente, temos que usar transform translate x com valor -50% Depois disso, adicionarei à moldura uma borda atribuída a ela com valores de 0,6 redonda, sólida e a cor de dois a dois. E, finalmente, vamos nos livrar da borda na parte inferior. Vamos definir a borda inferior como nenhuma. Tudo bem, então é isso em relação à moldura da porta. Em seguida, vou cuidar da porta em si. Então, vamos selecionar esses elementos. Defina a largura e a altura. Vou definir os dois como 100% e também alterar a cor de fundo. Vamos usar aqui o valor RGB 856824. Ok, então considera-se que temos a porta. A próxima coisa que precisamos fazer é criar uma maçaneta de porta. Então, vamos seguir em frente e selecionar esses elementos. Vamos definir a largura e a altura que vou definir com 23 RAM a altura será 0,7 rampa E também altere a cor de fundo. Nesse caso, vou usar 999. Então aqui temos a maçaneta da porta e agora temos que mudar sua posição. Vamos definir a posição como absoluta. Então eu vou movê-lo para baixo. Então, vamos definir a propriedade superior para 45% do que a posição esquerda será uma rodada. Portanto, considera-se que a maçaneta da porta está posicionada corretamente. E a única coisa que precisava fazer era mudar ligeiramente sua forma. Vou fazer com que seja arredondado no lado esquerdo. Então, vamos usar o raio da borda com os valores 100%, 0,5 em torno de 0,5 marrom e depois E assim por diante, é isso mesmo. Sobre a porta. Tudo está pronto para criar o efeito. Eu queria abrir essa porta. Uma vez que clicamos na porta. Para isso, vou usar um pouco de JavaScript. Vamos para o arquivo script.js. Precisamos adicionar um evento de clique à porta. Mas antes de tudo, vamos selecionar esses elementos. Vou criar uma nova variável. Vamos chamá-la de porta e, em seguida, selecionar os elementos div usando o método seletor de consulta Vamos especificar aqui o ponto do nome da classe. Depois disso, vou adicionar um ouvinte de eventos a esses elementos Então, vamos usar o método add event listener, que usa dois parâmetros O primeiro é o tipo de evento que precisamos aqui clique. Quanto ao segundo argumento, será uma função de retorno de chamada, que será executada assim que clicarmos na porta Então, quando clicarmos, vou adicionar uma nova classe à porta. Em seguida, usando essa nova classe, definiremos novos estilos e CSS, que queremos que sejam aplicados aos elementos ao clicar E então, no próximo clique, precisamos nos livrar dessa classe recém-editada. Para isso, vou usar um dos métodos chamados toggle Então, precisamos de uma lista de classes de pontos. Essa propriedade nos dá todas as classes que o elemento tem. E então eu vou usar o método chamado Toggle. Vamos chamar a mudança do nome da classe. Isso é tudo sobre o JavaScript. Em seguida, temos que escrever um pouco de CSS. Então, precisamos selecionar uma porta com mudança de classe. Eu vou girar os elementos. Então, precisamos transformar, girar de acordo com o eixo y com o valor de 30 graus Então, se clicarmos na porta , ela estará girando. Mas precisamos acrescentar algumas coisas a esse efeito. A porta deve ser girada do lado direito. Além disso, precisamos criar o ambiente 3D e fazer o modelo de efeitos. Então, precisamos mudar a origem da transformação. Vamos configurá-lo para escrever que , para criar espaço 3D, vou usar a perspectiva com valor de cem Ren. Finalmente, vamos usar transição com transformação. 1 está chegando. Então, se clicarmos na porta , ela se abrirá bem. Agora temos que fazer o mesmo com a maçaneta da porta. Vou usar a mesma técnica. Então, vamos selecionar tudo com a mudança de classe, seguida pela maçaneta da porta. Precisamos girar a maçaneta da porta de acordo com o eixo z. Então, precisamos transformar, girar Z com um valor de 20 graus. Assim como a porta, temos que mudar a origem da transformação. Vamos virar para a esquerda. E também precisamos fazer a transição com a transformação de valor de 0,5 s. Então, como você pode ver, tudo funciona bem. Eu só quero acrescentar aqui mais uma coisa. Vamos adicionar um pouco de atraso à transição da porta porque, antes de tudo, quero girar a maçaneta da porta e depois abrir a porta Então, vamos adicionar aqui 0,5 s. Ok, então agora tudo vai perfeitamente. E, na verdade, com esse projeto, terminamos. Espero que você tenha gostado. Então, vamos seguir em frente e começar a trabalhar no próximo. 6. Projeto 3 - Barra de busca: Ok, então vamos começar a trabalhar em nosso próximo projeto. Nesta seção, criaremos uma barra de pesquisa com alguns bons efeitos de animação. Vamos seguir em frente e descrever os projetos. Como você pode ver, temos aqui um ícone de pesquisa no canto superior direito da página. Se eu clicar nele, ele começará a se mover e se animar. Ele será movido para o topo da página. Então, o campo de entrada aparecerá com o x de fechamento, mas se eu clicar nele, o campo de entrada será ocultado e o ícone de pesquisa, voltaremos ao seu local padrão. Então é isso sobre esse projeto. Vai ser um pequeno projeto, mas espero que seja interessante. Eu criei uma nova pasta na área de trabalho chamada barra de pesquisa, que agora está vazia. Vamos abri-lo no código VS e criar nossos arquivos de trabalho para HTML, CSS e JavaScript. Vou chamá-los de estilo index.html dot css e script.js. Tudo bem, vamos abrir o arquivo index.html e criar um documento HTML básico Para isso, vou usar um ponto de exclamação. Então, aqui temos uma tag HTML básica. Em primeiro lugar, vou mudar o título. Vamos inserir sua barra de pesquisa. E então vou vincular arquivos CSS e JavaScript. Vamos abrir a tag do link e especificar aqui o caminho do arquivo. Quanto ao arquivo JavaScript, vou abrir a tag de script logo acima da tag do corpo de fechamento. E então precisamos do script.js e do atributo source. Na verdade, além disso, vou trazer mais um link para Font, Awesome icons. Vamos prosseguir e pesquisar Font Awesome, CDN, GIS. Então vamos copiar o primeiro link. Em seguida, precisamos abrir a tag do link e colar o link no atributo de referência h. Então, tudo está pronto. Por fim, vou executar o projeto no navegador usando um servidor ativo Esse pacote de código VS nos permite executar a vida útil do projeto no navegador. E você pode fazer alterações e atualizações sem atualizar a página Cada vez. Antes de começarmos a escrever o código, vou organizar nossos ambientes de trabalho. Vamos colocar o editor e o navegador lado a lado. Tudo bem, então, finalmente, podemos começar a escrever o código. Em primeiro lugar, vou criar uma marcação HTML. Vamos abrir o wrapper de entrada da tag div Class Search. Ele incluirá o campo de entrada de pesquisa. Então, vamos abrir outra tag div com a entrada de pesquisa da classe Vou passar dois elementos diferentes. A primeira será a entrada com o texto do tipo e com o atributo de espaço reservado com um valor, como para o segundo elemento, será fechar o botão X. Vou usar aqui Font, ícone incrível. Vamos abrir os elementos I. E designados para as turmas têm S, f, k vezes. Certo? Depois disso, precisamos criar um ícone de pesquisa. Portanto, é uma tag div aberta com o ícone de pesquisa de classe. Então vamos inserir seu ícone Font Awesome para as classes FAS, uma pesquisa. Tudo bem, isso é tudo sobre a marcação HTML. Agora, é hora de personalizar esses elementos e começar a escrever um pouco de CSS. Em primeiro lugar, vou criar alguns estilos padrão e de redefinição. Vou selecionar todos os elementos usando um asterisco. Em primeiro lugar, vou me livrar da margem e do preenchimento padrão Vamos definir as duas propriedades como zero. Em seguida, vou definir o tamanho da caixa de borda. Ao longo deste projeto. Vou usar a RAM como unidade de medida. No momento, 1 g é igual a 16 pixels porque por padrão, o tamanho da fonte do elemento HTML é igual a 16 pixels. Eu quero converter 1 g em dez pixels. E para isso, temos que diminuir o tamanho da fonte dos elementos HTML e configurá-lo para 62,5 por cento Agora, como você pode ver, todos os elementos ficaram menores. Tudo bem, primeiro de tudo, vou personalizar o projeto assim Quer dizer, vou estilizar e colocar os elementos aqui no topo da página. E então vamos falar aqui das animações. Então, vamos selecionar os elementos div do wrapper e definir sua largura e altura Eu vou definir com 200 por cento. Então, a altura será de cinco rem. E também altere a cor de fundo. Vou usar aqui o valor RGBA para 55, 69 69,5 . Em seguida, vou colocar os elementos no centro do invólucro para isso Vamos usar o flexbox. Precisamos de display flex. Então, para a centralização horizontal, vou usar justify-content Quanto à centralização vertical, precisamos alinhar o centro dos itens Tudo bem, então os elementos são colocados perfeitamente no centro Vamos seguir em frente e começar a personalizar a entrada de pesquisa. Primeiro, vou selecionar esses invólucros e definir a largura Vamos fazer com que seja 30 rodadas. Depois disso, vou selecionar o próprio elemento de entrada. Em primeiro lugar, vamos definir sua largura, fazer com que seja 27 rodadas. E também vou tornar a cor de fundo transparente. Em seguida, vou me livrar da borda padrão e deixá-la apenas na parte inferior. Portanto, precisamos de uma fronteira: nenhuma. E, em seguida, limpe a parte inferior com os valores de 0,1 RAM sólidos. E como cor vou usar 999. Tudo bem, depois disso, vamos cuidar do tamanho da fonte. Vou configurá-lo para 1,5 g. Também criarei algum espaço entre as letras. Vamos configurá-lo para 0,15 rodadas. Também vou me livrar dos padrões. Esboço. Vamos defini-lo como nenhum. Em seguida, mude a cor. Você vê aqui, 555. E, finalmente, vou criar algum espaço no lado direito. Vamos colocar a margem direita em uma rampa. Ok, então é isso em relação aos campos de entrada. Vamos começar e iniciar o botão X. Vamos selecioná-lo. Em primeiro lugar, vou definir o tamanho da fonte para 1,5 grama. Então eu vou mudar a cor. Vamos fazer com que seja 999. E faça o ponteiro do cursor. Tudo bem, antes de prosseguirmos e personalizarmos o ícone de pesquisa, quero alinhar os dois elementos verticalmente no centro E para isso, vamos usar o flexbox. Precisamos exibir a flexibilidade e, em seguida, alinhar o centro dos itens. Ok, vamos seguir em frente e personalizar o ícone de pesquisa. Vamos selecionar seus desenvolvimentos de embalagem. Primeiro, vou definir o tamanho da fonte. Vamos fazer com 1,5 RAM. E então eu vou definir a posição como absoluta. Vamos colocar o ícone de pesquisa na frente dos campos de entrada. Vou definir a posição da ponta como 1,7 rem. Quanto à posição correta, vou fazer um pequeno cálculo. Como você sabe, a largura da entrada de pesquisa é de 30 vezes. Para colocar o ícone de pesquisa na frente das entradas de pesquisa, precisamos adicionar metade da largura da entrada de pesquisa a 50 por cento Então, vou usar uma das funções chamadas calc. E então precisamos de 50 por cento mais 15 corridas. Agora, como você pode ver, o ícone é colocado na frente da entrada de pesquisa. Mas acho que precisamos de algum espaço entre eles. Então, em vez de 15 RAM, vamos usar 16 de aluguel. Tudo bem, finalmente, vamos mudar a cor do ícone. Vamos selecionar íons. Defina sua cor para 999 e também altere o cursor. Faça uma observação. Tudo bem, então tudo está pronto para criar as animações. Como você vendeu. Por padrão, temos que ocultar o campo de entrada e o botão X. E também temos que mover o ícone de pesquisa para o canto superior direito da página. Então, vamos em frente e fazer isso. Vou esconder esse invólucro de entrada de pesquisa. Para isso, vamos usar a opacidade com valor zero. E também visibilidade oculta. Em seguida, alterou a posição correta desse ícone de pesquisa. Vamos à direita, propriedade em três Ran. Ok, agora é hora de criar animação. Vamos dar uma olhada no projeto finalizado. Então, quando eu clicar no ícone, ele começará a se mover e também aumentará o tamanho. Teremos algumas etapas diferentes durante a animação. Vamos continuar e criar quadros-chave CSS. Eu vou chamá-lo de anime de ícone de pesquisa. Então, de 0% a 40%, o elemento mudará sua posição superior e também o tamanho da fonte. Então, com 0%, teremos a Posição 1.7 executada. Quanto aos 40 por cento, teremos duas posições com valor de 40%. E também o tamanho da fonte com uma rampa de valor 25. Então, de 40% a 60%, o elemento manterá sua posição superior. Mas vamos mudar a posição correta. Então, com 60%, teremos, novamente no topo, com 40%. Essa é provavelmente a posição correta. Teremos o cálculo de 50 por cento mais 16 rampa. Finalmente, de 60% a 100%, os elementos mudarão de posição, mas manteremos a posição correta. Portanto, em 100%, teremos a propriedade superior com valor 1,7 rem e a posição correta com o valor anterior. Então, os quadros-chave CSS estão prontos. Agora temos que aplicar essa animação ao elemento. Para isso, vou usar a propriedade de animação. Temos que especificar aqui o nome dos quadros-chave e depois a duração da animação Vai levar 1 s. Então como você pode ver, o ícone está se movendo e a animação funciona bem. Temos aqui um pequeno problema. Quando a animação termina , o ícone volta à posição padrão. Não precisamos disso. Temos que manter a posição que temos nos 100 por cento. Então, para fazer isso, temos que usar um dos valores chamados forwards came Agora é possível ver que tudo funciona bem. Na verdade, precisamos executar essa animação assim que clicarmos no ícone. Então, agora é hora de começar a escrever um pouco de JavaScript. Precisamos anexar um ouvinte de eventos de clique ao ícone de pesquisa Então, primeiro de tudo, vou selecionar esse ícone. Vamos criar uma nova variável e chamá-la de ícone de pesquisa. Vou selecionar esse elemento usando o método seletor de consulta Vamos especificar aqui o nome da classe, o ícone de pesquisa, seguido pelo nome da tag. Depois disso, vou adicionar um ouvinte de eventos ao ícone de pesquisa Temos que especificar aqui o evento de clique. Além disso, precisamos passar uma função de retorno de chamada, que será executada assim que clicarmos no ícone Pesquisar Então, como você sabe, temos que aplicar a propriedade de animação a esse ícone de pesquisa. Para fazer isso, vou adicionar uma nova classe ao ícone de pesquisa, quero dizer, ao elemento pai. Em seguida, selecionaremos esse elemento usando a classe recém-criada em CSS. E aplicaremos as propriedades de animação do elemento. Portanto, precisamos do ícone de pesquisa e, em seguida, temos que ter acesso aos elementos principais. Então, vou usar aqui uma propriedade chamada elementos pais. Em seguida, precisamos de outra propriedade chamada lista de classes. Ele inclui todas as classes que o elemento tem. E então eu vou usar o método chamado add. Especifique. Aqui, a turma, digamos, muda. Tudo bem, isso é tudo em relação ao JavaScript agora, vamos voltar ao arquivo CSS Então, como eu disse, agora precisamos selecionar o ícone Pesquisar com uma mudança de classe. Então, precisamos mover essa linha de código aqui. Agora, se eu clicar no ícone de pesquisa, a animação será executada. Ok, em seguida, temos que exibir o invólucro da entrada de pesquisa. No momento, está oculto. Então, da mesma forma, vou usar a mudança de classe. Primeiro, vamos selecionar um rapper, criar uma nova variável e chamá-la de invólucro de entrada de pesquisa Vou selecionar esse elemento usando novamente o método querySelector Vamos especificar aqui o nome da classe, invólucro de entrada de pesquisa. Então, vamos adicionar uma mudança de classe a esses elementos. Portanto, precisamos de entrada de pesquisa, wrapper, ponto, lista de classes, ponto, adição com uma mudança de classe Em seguida, volte para o arquivo CSS e selecione wrapper com a mudança de classe Portanto, para exibir o invólucro da entrada de pesquisa, precisamos de uma opacidade e Agora, se eu clicar no ícone de pesquisa , a entrada de pesquisa aparecerá. No momento, ele aparece sem nenhum efeito. Então, precisamos usar a transição com os valores. Toda a duração será de 0,5 s. Além disso, vou usar aqui um pequeno tempo de atraso de 1 s. Ok, então agora, como você pode ver, temos aqui um efeito muito melhor e interessante Antes de prosseguirmos e começarmos a programar o botão de fechamento, quero acrescentar mais uma coisa aqui. Depois que a entrada de pesquisa for exibida, quero que ela seja focada automaticamente. Para isso, vou usar um dos métodos chamado foco. Mas, neste caso, precisamos esperar 1 s para que apareçam os elementos. Então, primeiro, vamos selecionar os elementos de entrada, criar uma nova variável. E colegas pesquisam entradas. Vou selecionar o elemento novamente com o método querySelector Vamos especificar aqui as entradas de pesquisa do nome da classe, seguidas pela entrada do nome da tag Então, vou usar um método chamado set time out. São necessários dois parâmetros. A primeira é uma função de retorno de chamada. Vamos inserir o foco do ponto de entrada de pesquisa. Quanto ao segundo argumento será a quantidade de tempo. Nesse caso. Como dissemos, precisamos de um segundo, então vou passar aqui 1.000 milissegundos. Então, agora, se exibirmos a entrada de pesquisa , ela será focada automaticamente. Agora temos que seguir em frente e fazer o botão X funcionar. Depois de clicar nele, precisamos ocultar o invólucro da entrada de pesquisa E também temos que mover o ícone de pesquisa de volta à sua posição padrão. Primeiro de tudo, vamos selecionar o botão X. Vou criar uma nova variável. Vamos chamá-lo de ícone de fechamento. Em seguida, selecione os elementos usando o método querySelector. Quero especificar aqui o nome da classe, entradas de pesquisa, seguido pelo nome da tag I. Depois disso, temos que anexar o ouvinte de eventos de clique ao Vamos especificar aqui o tipo de evento, clique. E também precisamos de uma função de retorno de chamada. Então, quando clicamos no botão, precisamos remover a alteração de classe do invólucro de entrada de pesquisa e também do ícone de pesquisa Então, vou pegar essas duas linhas, colá-las aqui e depois alterá-las para remover. Agora, se eu clicar no botão X , os elementos se ocultarão e também o ícone de pesquisa, voltaremos ao seu lugar inicial. Na verdade, tudo funciona bem, mas precisamos adicionar alguns efeitos aqui. Primeiro, vou esconder elementos com alguma transição. Então, vamos usar a transição com o wrapper de entrada de pesquisa. Vamos atribuir valores de verdade todos e 0,5 s. Agora, como você pode ver, os elementos estão se escondendo suavemente Em seguida, vou cuidar desse ícone de pesquisa. Vamos criar uma animação separada na qual definiremos o movimento do ícone para o lado direito. Vamos criar novos quadros-chave CSS. Vou chamá-los de search, icon e M2. Teremos duas etapas diferentes, 0% e 100%. Em 0%, precisamos definir a posição correta. E temos que instituir o cálculo, 50 por cento mais 16 RAM. Isso é para os 100%. Precisamos definir a posição correta como três rodadas. Por fim, vamos aplicar essa animação ao ícone de pesquisa. Use a propriedade de animação com o valor ícone de pesquisa e m2. Então 0,5 s. E também precisamos avançar. Tudo bem, como você pode ver, tudo funciona perfeitamente. E, na verdade, com esse projeto, terminamos. Espero que você tenha gostado desse vídeo e aprenda algumas coisas novas. Vamos seguir em frente e cuidar do próximo projeto. 7. Projeto 4 - Relógio: Tudo bem, então é hora de seguir em frente e começar a construir nosso próximo projeto Neste vídeo, vamos criar um relógio com HTML, CSS e JavaScript. Será um relógio padrão, que você provavelmente tem em casa na parede. Temos aqui números de horas e também três setas diferentes que indicam as horas, minutos e segundos. Tudo bem, vamos começar a criar um projeto. Eu tenho uma nova pasta na área de trabalho chamada relógio, que agora está vazia. Vamos abri-lo no código VS e criar nossos arquivos de trabalho para HTML, CSS e JavaScript. Vou chamá-los de index.html, style.css e scripts dot js. Em seguida, abra o arquivo index.html e crie um documento HTML básico. Para isso, precisamos colocar aqui um ponto de exclamação e depois pressionar Tab ou Enter Então, aqui temos as tags HTML básicas. A primeira coisa que vou fazer é mudar o título. Vamos inserir seu relógio. E então vou vincular arquivos CSS e JavaScript. Vamos abrir a tag de link no elemento principal e especificar aqui a parte do arquivo CSS. Quanto ao JavaScript, vou abrir a tag de script logo acima da tag do corpo de fechamento. E então precisamos especificar o caminho do arquivo nos atributos de origem. Ok, então estamos prontos para começar. A última coisa que vou fazer é executar o projeto no navegador. Para isso, vou usar um dos pacotes de código do VS chamado servidor ativo. Isso nos permite executar o projeto ao vivo no navegador e fazer alterações e atualizações sem atualizar a página todas as vezes Ok, finalmente, vamos colocar o navegador e o editor lado a lado, assim. E comece. Eu vou criar a marcação HTML. Em seguida, vamos estilizá-lo. Quero dizer, faremos com que os elementos se pareçam com o relógio. E então faremos com que funcione usando JavaScript. Então, vamos começar a criar a marcação HTML. Vamos abrir a etiqueta profunda, que será o contêiner. Isso incluirá todo o conteúdo. Em seguida, vou abrir outra tag div dentro do contêiner que está atribuída ao relógio da classe O relógio consistirá em duas partes diferentes, mas teremos os números e as setas É uma tag div aberta com os números das classes. Teremos quatro números diferentes. Vamos abrir a tag div com a classe 12. E como conteúdo, vamos instituir seu 12º. Então eu vou duplicar essa linha de código três vezes e depois mudar os nomes das classes e também o conteúdo Precisamos de três. Então 6.9. Isso é tudo sobre os números. Vamos abrir a tag div, que será o invólucro das Teremos três flechas diferentes. Vamos abrir a tag div com a hora da aula. Então vou duplicá-lo duas vezes e mudar os nomes das classes Precisamos aqui, minutos e segundos. Tudo bem, isso é tudo em relação à marcação HTML. No momento, temos aqui apenas os números. Então, vamos começar a personalizar o relógio. Em primeiro lugar, vou trazer o link para as fontes do Google. Vou usar uma das fontes do Google em todo esse projeto. Então, vamos visitar o site do Google Fonts. Em seguida, pesquise uma das fontes chamada concert one. Então, agora temos aqui um texto como exemplo, mas estamos interessados em números. Assim, podemos simplesmente transformar a frase em números e ver a aparência da fonte Vamos selecionar o estilo. Para vincular a ponte, temos duas opções diferentes Você pode pegar esse link e colá-lo no elemento principal ou clicar em Importar, pegar esse URL e colá-lo no arquivo CSS. Tudo bem, então, assim que a fonte for selecionada, a seguir, vou redefinir alguns estilos padrão Vamos selecionar todos os elementos usando um asterisco e eliminar o padrão, a margem e Vou definir os dois como zero e também alterar a família de fontes para cada elemento. Vamos usar aqui o conceito de fonte Cuckoo Tudo bem, como você pode ver, agora os números parecem de uma maneira diferente Então, eu vou fazer este projeto, vou usar a RAM como unidade de medida. No momento, 1 g é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 Quero converter uma RAM em dez pixels. Portanto, temos que diminuir o tamanho da fonte dos elementos HTML e torná-lo em 62,5 por cento Então, como você pode ver, os números ficaram menores. Em seguida, vou cuidar do contêiner. Vamos selecioná-lo. E antes de tudo, vamos definir sua largura e altura. Vou definir a largura para 100 por cento. Quanto à altura, vou fazer com que seja 100% da janela de visualização Então, precisamos de 100 vh. Em seguida, vou colocar o conteúdo do contêiner no centro. E para isso, vamos usar o flexbox. Precisamos configurar a tela para flexionar. E então, para centralização horizontal e vertical, precisamos justificar o centro do conteúdo e também alinhar o centro dos e também alinhar Tudo bem, agora o conteúdo é colocado no centro e podemos personalizar o próprio relógio. Vamos selecionar Relógio e definir sua largura e altura. Vou definir os dois para 45. Corra. Também altere a cor do plano de fundo. Vou torná-lo cinza usando as cores ACA, CAC. Em seguida, vou fazer o relógio girar. Para isso, temos que usar raio de borda com valor de 50%. Então, vamos criar uma pequena borda. Vamos definir sua largura para 0,5 RAM e depois torná-la sólida. Quanto à cor, vamos usar 777. E por último, vamos criar um pequeno efeito de sombra. Nos quatro lados. Use box-shadow com os valores de 0,5 grama duas vezes que uma RAM E como cor, vamos usar 555. E então eu vou colocar aqui -0,5 rem duas vezes um quarto. E da mesma cor. Tudo bem, vamos ver isso em relação ao relógio. Em seguida, vou cuidar dos números. Vamos selecionar o elemento wrapper div e definir dentro da altura Nesse caso, precisamos herdar a mesma largura e altura do elemento pai, que é um relógio Portanto, precisamos definir a largura e a altura, ambas para herdar Tudo bem? Depois disso, vou selecionar todos os elementos div dentro dos números Então, primeiro, vamos posicionar os números. Vamos definir a posição como absoluta. Então, para posicionar os números de acordo com o elemento pai, precisamos definir a posição dos números como relativa. E depois disso, vamos aumentar o tamanho da fonte dos números. Faça com que seja 2,5 rem. Tudo bem, agora vou posicionar cada um separadamente. Vamos começar com o dia 12. Ele será colocado na parte superior do relógio. Então, vamos selecioná-lo e configurá-lo para a posição 21 da corrida. Em seguida, precisamos centralizá-lo horizontalmente. Para isso, vou definir a posição esquerda para 50 por cento. E então, para uma centralização perfeita, use Transform com a função translate x. E temos que traduzir os elementos em -50%. Tudo bem? Em seguida, temos três. Vamos selecioná-lo. No caso de três, precisamos da posição correta para ter uma RAM. E então temos que censurar os elementos verticalmente. Portanto, precisamos definir a posição para 50 por cento. E neste caso, precisamos transformar, traduzir y -50%. Vamos seguir em frente e cuidar do resto dos números. O próximo é seis. Nesse caso, precisamos colocar alguma posição para ser uma corrida. Então vamos pegar essas duas linhas a partir daqui. Quanto ao último número, que é nove, precisamos que a posição esquerda seja uma RAM. E então precisamos dessas duas linhas aqui também. Tudo bem, então todos os quatro números estão posicionados. Em seguida, vou mudar a cor. Vamos torná-lo branco. E também crie um pequeno efeito de sombra. Use sombra de texto com os valores apontando para a RAM três vezes. E a cor também. É isso em relação aos números. Vamos seguir em frente e cuidar das flechas. Primeiro, vamos definir essa largura e altura como números. Vou herdar a largura e a altura do relógio. Vamos definir os dois para herdar. Em seguida, vou definir a posição. Vamos torná-lo absoluto. Nesse caso, o elemento sairá do fluxo normal da página. E para posicioná-lo de acordo com o elemento pai, precisamos posicioná-lo em relação ao relógio. Em seguida, vamos definir as propriedades top e lag Vou definir as duas como zero As setas devemos colocar no centro do relógio? E para conseguir isso, vou usar novamente o flexbox. Precisamos exibir a flexibilidade e, em seguida, justificar conteúdo e alinhar o centro Tudo bem, isso é tudo sobre o invólucro. Em seguida, vou criar esse pequeno círculo. Ele será criado usando o pseudo elemento anterior. Então, vamos selecionar as setas seguidas pelo pseudo elemento anterior Vamos deixar o conteúdo vazio. Em seguida, definiu a largura e a altura e também a cor de fundo. Vou definir a largura e a altura para 2,5 RAM. Quanto à cor de fundo, ela será branca. Então aqui temos os elementos, agora ele tem a forma do quadrado. Então, vamos fazer um círculo. E também vamos fazer um pequeno efeito de sombra. Vamos definir também o raio da borda para 50 por cento, a sombra Vamos usar a sombra da caixa com os valores apontando para a RAM duas vezes. Em seguida, 0,5 RAM. E como cor, vamos usar 777. Tudo bem, digamos sobre um círculo. Vamos em frente e cuidar das flechas. No momento, eles não estão visíveis porque temos apenas os elementos div vazios Vamos seguir em frente e selecionar todos os elementos div dentro das setas Primeiro de tudo, como largura e altura definidas, e também a cor de fundo. Vou definir com 2,7 rem. Então, a altura será 12. Execute como parte da cor de fundo, vou usar a cor f, f, f 0, f phi Então, agora os elementos estão visíveis. Em seguida, vou cuidar de suas posições. Vou colocá-los no centro desse círculo. Então, vamos definir a posição como absoluta. E então defina a posição inferior, fazendo 50%. Depois disso, vou adicionar um pequeno efeito de sombra às setas. Vamos usar box-shadow. O valor é ponto a ser executado duas vezes, depois 0,5 RAM e a cor 777 Ok, por fim, vamos mudar a forma dos elementos para que pareçam as setas Eu vou fazer isso usando border-radius. Portanto, o raio da borda assume quatro valores diferentes. Os cantos superior esquerdo e superior direito serão 100%. S4, nos cantos inferior direito e inferior esquerdo, vou transformá-los em zeros. Então, como você pode ver, agora, os elementos se parecem com as setas. No momento, vemos aqui apenas uma seta, mas todas as três setas são exibidas Eles são colocados um em cima do outro. A próxima coisa que vou fazer é colocar as setas atrás desse círculo E para isso, podemos usar a propriedade z-index com um valor maior que zero, digamos dez Certo? Depois disso, vou personalizar as setas separadamente. Vamos começar com os segundos, porque ele é colocado em cima do resto das setas Eu vou mudar a cor de fundo. Vamos configurá-lo para C, F, E seis. No momento, nada mudou. E isso acontece porque já mudamos a cor de fundo das setas quando as selecionamos usando a tag div E tem uma precedência maior. Para substituir esse estilo, precisamos selecionar o elemento usando os elementos do pai Quero dizer flechas. Então, agora a cor de fundo foi alterada. Além disso, vou girar a seta. Vamos usar Transform com a função de rotação. E eu vou girar a seta. Tchau, digamos 270 graus. No momento, a seta é girada do centro porque por padrão, a origem da transformação está definida como centro Nesse caso, precisamos fazer a origem da transformação no centro inferior. Agora, como você pode ver, o problema está resolvido. Em seguida, vamos cuidar da hora provável. Em segundo lugar, precisamos selecioná-lo usando o elemento pai porque vamos diminuir sua altura. Vamos definir sua altura para dez RAM. E também vou girar a seta. Vamos girá-lo em 90 graus. Tudo bem, então, finalmente, o relógio está personalizado e tudo está pronto para fazer o trabalho Como dissemos, vamos fazer isso usando JavaScript. Então, vamos prosseguir e abrir o arquivo script.js. A primeira coisa que vou fazer é selecionar as três setas. Então, vamos continuar e criar uma nova variável. Vou chamá-lo de Nosso. Em seguida, selecione a seta usando o método seletor de consulta. Vamos especificar aqui a hora do nome da aula. Então eu vou duplicar essa linha de código duas vezes. Vamos mudar o nome da variável que precisamos de minutos. E também precisamos aqui do minuto da aula E, em seguida, precisamos do segundo e do nome da turma. Vamos ver, institua um segundo também. Tudo bem, depois disso, vou criar uma função. Vamos chamá-la de data definida. Dentro dessa função, conseguiremos trabalhar as setas corretamente. E então chamaremos essa função após cada segundo usando o método set interval. Em primeiro lugar, vou criar uma variável que nos dará o estado atual. Eu vou ligar para ele. Agora. Deve ser igual à nova data. Vamos ver no console ou essa variável nos dá, vou executar o console.log. Agora. Em seguida, vou chamar essa função. Mas com o método de intervalo definido. Na verdade, esse método nos permite executar a função com algumas integrais. São necessários dois argumentos. O primeiro é o nome da função. No nosso caso, é uma data definida. Na medida em que o segundo argumento é a quantidade do intervalo expresso em milissegundos. No nosso caso, serão mil milissegundos. Vamos inspecionar a página e mudar para a guia Console. Como você pode ver, estamos obtendo aqui a data e a hora atuais e também o fuso horário após cada segundo. Tudo bem, em seguida, precisamos definir os segundos, minutos e horas separadamente. Então, vamos criar uma nova variável. Vou chamá-lo de “ficar em segundo lugar”. Para obter os segundos da hora atual, precisamos usar um dos métodos de data integrados chamado get seconds. Portanto, agora precisamos obter segundos. Se verificarmos essa variável no console , obteremos segundos. Da mesma forma, temos que definir minutos e horas. Então, vamos duplicar essa linha de código duas vezes e depois mudar os nomes das variáveis e também os nomes dos métodos Nós precisamos. Obtenha minutos e obtenha horas. Tudo bem, então todas as três variáveis são criadas. Como você pode ver, nosso relógio tem a forma de um círculo e o tamanho do círculo é igual a 360 graus. Precisamos converter segundos, minutos e horas em graus para definir as partes do momento de cada seta. Vamos começar com esses segundos. Vou criar uma nova variável. Vamos chamá-lo, digamos de segundo grau. Portanto, para converter segundos em graus, precisamos usar a seguinte fórmula. Precisamos dividir a quantidade atual de segundos, Tchau 60, porque temos 60 s. E então temos que multiplicá-la por 360 Tudo bem, então agora todos nós ou eles podem fazer a segunda seta se mover Para isso, temos que girá-lo em segundo grau. Portanto, precisamos de uma segunda transformação de ponto no estilo de ponto igual à função de rotação E quanto ao valor, temos que passar aqui. Segundo grau seguido pelos graus. Então, como você pode ver, agora, se a seta estiver se movendo após cada segundo e nos mostrar os segundos atuais. Da mesma forma, temos que converter minutos e horas. Vamos duplicar essa linha de código duas vezes. Então, precisamos de minutos. Grau. Então ganha um minuto. Em seguida, precisamos do nosso diploma. E, neste caso, temos que dividir por 12 porque geral, temos 12 h. Tudo bem, finalmente, precisamos definir os valores da função de rotação para os minutos e as horas Vamos duplicar essa linha de código duas vezes. Precisamos aqui de um estilo minucioso. E também temos que aprovar seu diploma minucioso. Isso é por uma hora. Temos dois caminhos aqui, nosso diploma. Tudo bem, então podemos ver que temos aqui uma hora atual e o relógio está funcionando perfeitamente 8. Projeto 5 - Navbar: Tudo bem, então é hora de seguir em frente e começar a construir nosso próximo projeto Neste vídeo, vamos criar uma barra de navegação. À primeira vista, o projeto parece simples, mas será muito interessante e espero que você aprenda algumas coisas novas Ok, vamos continuar e descrever o projeto. Como você pode ver, temos aqui alguns itens de navegação diferentes. Eles são representados pelos ícones Font Awesome. Por padrão, o primeiro item tem uma cor diferente com fundo diferente e também com uma forma diferente. Depois de clicar em outros itens, eles mudarão essas cores e formas com efeitos agradáveis. Vamos começar a construir o projeto. Eu criei uma nova pasta na área de trabalho chamada navbar, que agora está vazia Vamos abri-lo no VS Code e depois criar nossos arquivos de trabalho. O primeiro será index.html. Então, precisamos de style.css e script.js. Em seguida, abra o arquivo index.html e crie um documento HTML básico. Para isso, vou usar amidas. Vamos colocar aqui um ponto de exclamação e, em seguida, pressionar Tab ou enter Aqui temos as tags HTML básicas. Antes de tudo, vamos mudar o título. Vou passar pela sua barra de navegação. Em seguida, vou vincular arquivos CSS e JavaScript. Vamos abrir a tag do link e especificar aqui o nome do arquivo desse usuário. Quanto ao JavaScript, vou abrir a tag de script logo acima da tag do corpo de fechamento. E então temos que especificar o caminho do arquivo no atributo source. Tudo bem, além disso, vou trazer mais um link para os ícones do Font Awesome Vamos procurar por Font Awesome. Cdn JS Em seguida, copie o primeiro link daqui. Abra a tag do link no elemento principal e cole o link CDN no atributo de referência h. Tudo bem, estamos quase prontos para começar a escrever o código. Vamos executar o projeto no navegador. Para isso, vou usar um dos pacotes de código do VS chamado Live Server. Isso nos permite executar o projeto ao vivo no navegador e fazer alterações e atualizações sem atualizar a página todas as vezes Por fim, vamos colocar o editor e o navegador lado a lado. Assim mesmo. E comece. Vou começar a criar a marcação HTML. Vamos abrir a tag de navegação HTML5 com uma classe. Agora, dentro desse elemento, teremos sete itens de navegação diferentes. Vamos abrir a tag do link com a classe agora por link. Portanto, cada elemento do link incluirá Fonte, ícone Awesome. Vamos abrir o elemento I com as classes FAS em uma casa. Em seguida, duplique essa linha de código seis vezes e altere os nomes das classes dos ícones Font, Awesome A segunda será a câmera. Em seguida, divulgaremos o calendário. O próximo será o campus. Então teremos um livro. O próximo ícone será a câmera retrô. E, finalmente, teremos fones de ouvido. Tudo bem, então é isso em relação à marcação HTML por enquanto, vamos ao arquivo CSS e personalizar o princípio dos elementos Vou criar alguns estilos padrão e redefinidos. Vamos seguir em frente e selecionar cada elemento usando um asterisco Em primeiro lugar, vou me livrar da margem e do preenchimento padrão Vamos definir as duas propriedades também. Zero. Então, precisamos do tamanho da caixa, da caixa de borda. Além disso, vou me livrar dos estilos padrão dos elementos do link usando decoração de texto, nenhum. Então, ao longo deste projeto, vamos usar a RAM como unidade de medida. No momento, 1 g é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 pixels. Por padrão, vou converter 1 g em dez pixels. E para isso, precisamos diminuir o tamanho da fonte do elemento HTML. Vamos defini-lo para 62,5 por cento. Tudo bem, depois disso, vou selecionar os elementos do corpo e definir sua largura e altura Vou definir a largura para 100%. A altura será 100% da janela de visualização, quero dizer 100 vh E também altere a cor de fundo. Vou usar o valor RGB 19124826. Em seguida, vou colocar a soneca ou no centro da página Podemos fazer isso de duas maneiras diferentes. Nesse caso, vou usar uma grade CSS. Precisamos de uma grade de exibição e, em seguida, colocar os itens no centro. Como você pode ver, os itens estão centralizados horizontal e verticalmente. Então, vamos ver os elementos do corpo. Em seguida, vou personalizar o napa. Em primeiro lugar, definiu sua largura e altura. Vou definir a largura para 70, correu. Para a altura, serão dez RAM. Além disso, vou atribuir a ela uma cor de fundo temporária para ver a aparência da barra de navegação Então, em retrocesso na cor para cinza claro CCC. No momento, os itens de navegação estavam no canto superior esquerdo da barra de navegação Temos que enviar para eles. E para isso, vamos usar o flexbox. Precisamos de display flex. Então, para centralização horizontal, precisamos justificar Vamos colocar a direção vertical. Precisamos alinhar o centro de itens. Tudo bem, isso é tudo sobre a barra de navegação. Em seguida, vou personalizar agora por link. Primeiro, vamos definir a largura e a altura. A largura será igual à RAM, quanto à altura, vou configurá-la para 100%. Além disso, vamos mudar a cor de fundo. Vou usar novamente o valor RGB 222-23-3181 e me livrar da cor de fundo temporária do Ok, em seguida, temos que posicionar os itens de navegação. Vou colocá-los horizontalmente no centro e embaixo na parte inferior do Para isso, vamos usar novamente o flexbox. Precisamos exibir o flex e, em seguida, alinhar os itens com um valor flexível e também justificar Além disso, vou criar algum espaço na parte inferior usando preenchimento Vamos colocar o fundo do estofamento em uma rampa. Certo? Isso é tudo sobre o link de Napa. Vamos seguir em frente com os ícones Font, Awesome. Vamos selecionar elementos. Em primeiro lugar, vou aumentar o tamanho da fonte. Vamos configurá-lo para a marca 2.5 e depois mudar a cor, torná-lo 333 Tudo bem, então o número está quase personalizado e agora temos que fazê-lo funcionar Vamos dar uma olhada nos projetos finalizados. O semicírculo, que você vê com o item de navegação actina criado usando o pseudo elemento anterior Então, agora eu vou criar esse elemento. Vamos selecionar agora extraindo com pseudoelementos anteriores. Antes de tudo, precisamos definir o conteúdo. Vai ficar vazio. Em seguida, defina a largura e a altura. A largura será dez. Corra. Quanto à altura, vou fazer dele um Tran. E também vou atribuir a ele uma cor de fundo temporária Digamos vermelho. Tudo bem, então aqui temos antes dos pseudoelementos. Em seguida, vou mudar sua posição. Vamos definir sua posição como absoluta. Na verdade, precisamos posicionar esse elemento de acordo com o link Navajo. Então, vamos atribuir a cada posição relativa. Em seguida, precisamos definir as posições superior e esquerda. A primeira posição será -100%. Provavelmente é a posição esquerda. Vou defini-lo como zero. E, finalmente, vamos mudar a forma do pseudo-elemento anterior usando o raio da borda Serão necessários quatro valores. O primeiro será o canto superior esquerdo. Vamos defini-lo como zero. Então, o canto superior direito será zero. canto inferior direito terá cinco RAM, enquanto o canto inferior esquerdo também terá cinco primos Tudo bem, agora estamos prontos para fazer um aplicativo funcionar. Para isso. Vou usar um pouco de JavaScript que temos para anexar agora edifícios, clique no evento. Em primeiro lugar, vamos selecionar todos os que conhecem Berlim. Vou criar uma nova variável. Vamos chamá-lo de piscar de olhos e selecionar todos os links usando o seletor de consulta. Todos os métodos. Precisamos especificar aqui o nome da classe agora por link. Em seguida, temos que examinar os links; na verdade, o método all do seletor de consulta retorna um objeto semelhante a uma matriz chamado lista de Temos que examinar essa lista e anexar um ouvinte de eventos a cada link Para examinar a lista, vou usar um dos métodos auxiliares de matriz chamado forEach Esse método funciona bem com a lista de nós. Não precisamos transformá-lo na matriz. Caso contrário, se você usar outro método auxiliar de matriz ou quiser examinar a HtmlCollection, a princípio, será necessário transformá-la em uma Ok, vamos usar o método forEach. Temos que passar uma função de retorno que terá um parâmetro Será o item atual no loop. Em seguida, precisamos anexar um ouvinte de eventos a cada link Vamos especificar aqui o tipo de clique no evento e também passar uma função de retorno de chamada que será executada assim que clicarmos no link Então, uma vez que clicamos no item, temos que mover antes do pseudo-elemento para baixo. Vou adicionar uma nova classe ao link. Em seguida, selecionaremos antes de ver a ilha com essa classe e definiremos o movimento do elemento com CSS. Então, vamos adicionar uma nova classe ao link. Precisamos aqui da propriedade da lista de classes, que inclui todas as classes que o animal tem. Em seguida, ele deve ser seguido pelo método add. E temos que especificar aqui o nome da classe. Digamos que mude. Tudo bem, vamos ao arquivo CSS e selecionar antes do pseudo-elemento com a mudança de classe e definir a posição superior E é -30%. Ok, então agora se eu clicar no item de navegação, antes que o pseudoelemento se mova para baixo, na verdade, temos aqui um pequeno problema Se clicarmos em qualquer outro item de navegação diferente do anterior , os braços se moverão para baixo, mas o anterior manterá sua posição. Então, temos que consertar isso. Precisamos substituir o nome da classe do elemento link pelo link Napa Novamente OnClick. Para isso, precisamos examinar os links e definir o nome da classe como napa link Portanto, precisamos, novamente, para cada método com uma função de retorno de chamada com um link de parâmetro Portanto, temos que definir className. E deve ser igual ao link NOPAT. Tudo bem, como você pode ver, agora o problema está resolvido Em seguida, vou mudar a cor dos ícones e também a cor de fundo. Portanto, precisamos selecionar um link de Albert com a mudança de classe. Vamos definir a cor de fundo. Vou usar aqui o valor RGB 185-19-7147. Em seguida, vou selecionar íons novamente com a mudança de classe. Vamos definir a cor. Vai ser branco. E também aumente o tamanho da fonte, faça 3,5 rem. Como você pode ver, os itens de navegação mudam de cor e tamanho. Depois de clicarmos neles, vamos dar uma olhada no projeto finalizado. Então, quando clicarmos no item de navegação do lado de seus irmãos, altere o raio da borda Então, agora temos que cuidar disso. Como a mudança de classe. Vou adicionar uma nova classe aos elementos irmãos do anel. E então definiremos estilos e CSS. Portanto, precisamos vinculá-los à propriedade chamada irmãos dos elementos anteriores Então, novamente, temos que usar a propriedade de arrendamento de classe. Bem, o método add, e eu vou especificar aqui o nome da classe. Digamos que, antes, mudança de EL. Quero dizer mudança de elemento anterior. Vamos duplicar essa linha de código. Em vez do irmão anterior, precisamos do irmão do próximo elemento E também mude o nome da turma. Precisamos da próxima mudança de elemento. Tudo bem, vamos ao arquivo CSS e selecionar eNobe ou vincular com essas classes recém-adicionadas Portanto, temos que definir aqui a borda, no canto superior direito, o raio para 1,3 rem Vamos duplicar esse código. Mude o nome da classe, precisamos da próxima mudança de elemento. E, nesse caso, precisamos despejar o raio superior esquerdo com o mesmo valor Ok? Então, para ver melhor se o raio da borda funciona bem, vamos nos livrar dessa cor de fundo vermelha temporária e usar a cor que é igual à cor de fundo do elemento do corpo Ok, agora o raio da borda está visível, mas como você pode ver, precisamos ajustar levemente a posição dos pseudoelementos anteriores porque os cantos do item não parecem muito Para fazer isso no início, vou aumentar levemente a largura dos pseudoelementos anteriores Vamos configurá-lo para dez pontos para RAM. E então precisamos mover os elementos para o lado esquerdo. Então, vamos mudar a posição em que estou na propriedade à esquerda. Precisamos de um ponto negativo para correr. Ok, então agora, como você pode ver, temos um resultado muito melhor. Na verdade, há um pequeno problema aqui. Se clicarmos no primeiro item, então no raio da borda do próximo elemento no trabalho Porque temos um erro aqui. Se eu inspecionar a página e depois mudar para a guia do console, você verá o erro dizendo que não é possível ler a lista de classes de propriedade null Isso acontece porque o primeiro item não tem o irmão anterior E o mesmo problema que temos com o último item. Não tem o próximo elemento, irmão. Para corrigir isso, vou criar novos elementos em HTML. Quero dizer, aqueles elementos que temos na frente do primeiro item e no final do número. Então, vamos abrir a tag div com uma classe agora por link Em seguida, copie essa linha de código e cole abaixo Agora temos que fazer algumas coisas porque os itens de navegação não parecem bons no início, aumentam a largura da barra de navegação Vamos configurá-lo para 90 RAM. E então precisamos desativar os eventos de ponteiro para os elementos recém-criados Porque quando clicamos neles , temos os mesmos efeitos dos itens de navegação. Vamos selecionar desenvolvimentos usando pseudoclasses de primeiro filho e último filho e, em seguida, atribuir Ok, então agora tudo funciona bem. Só precisamos adicionar alguns efeitos diferentes à barra de navegação Em primeiro lugar, vamos tornar os efeitos mais suaves em algumas transições Primeiro, vamos adicionar uma transição aos ícones Font Awesome. Precisamos dos seguintes valores. Cor 0,4 s e, em seguida, tamanho da fonte com a mesma duração. Em seguida, vamos adicionar a transição para os pseudoelementos anteriores com a mudança de classe Nesse caso, precisamos de 0,2 s. Além disso, precisamos fazer a transição para o pseudo-elemento anterior por padrão Nesse caso, precisamos de um topo com uma duração de 0,4 s e, em seguida, da cor de fundo com uma duração de 0,4 s. E também precisamos aqui de um pequeno tempo de atraso, 0,4 s. Ok, em seguida, precisamos fazer a transição para os irmãos do elemento anterior e o próximo Nesse caso, precisamos de um raio de borda com duração de 0,45 s. Agora, como você pode ver, temos Em seguida, vou usar a transição para soneca ou link. Precisamos aqui de um raio de borda, 0,2 s. Além disso, precisamos de um transbordamento oculto porque se clicarmos nele antes do pseudo-elemento na parte superior do item de navegação, ele se moverá parte superior do item de navegação, ele se moverá para baixo. Não precisamos disso. Então, vamos usar overflow hidden. Tudo bem, agora o problema está resolvido. Em seguida, vou adicionar um pequeno efeito de sombra à barra de navegação Vamos usar box-shadow com valores de 0,3 RAM três vezes e a cor AAA Em seguida, precisamos de um raio de fronteira para os desenvolvimentos. Quero dizer, começo e fim do romance. No momento, eles são selecionados juntos. Então, vou selecioná-los separadamente. Em seguida, adicione a eles. O raio do primeiro será 0,5 rem 00.5 Quanto ao segundo, será 0,5 rem, 0,5 grama. E, novamente, zero. O raio da borda é aplicado. Mas agora os cantos do Napa são visíveis por causa do efeito de sombra Portanto, também precisamos de um raio de fronteira para os Navajo. Vamos configurá-lo para 0,5 rampa. Tudo bem, a última coisa que vou fazer é ativar o primeiro item de navegação por padrão Porque se eu recarregar a página , não teremos nenhum item ativo Para fazer isso, temos que atribuir à primeira classe de desenvolvimento a alteração anterior do elemento Além disso, temos que atribuir à primeira classe de elemento de link, mudar para a segunda classe de elemento de link Próxima mudança de elemento. Agora, considera-se que, se eu recarregar a página o primeiro item de navegação ficará ativo por padrão Tudo bem, então finalmente terminamos, terminamos de trabalhar nesse projeto. Vamos seguir em frente e começar a construir o próximo. 9. Projeto 6 - Carregadores de sites: Ok, é hora de seguir em frente e criar nosso próximo projeto. Nesta seção, criaremos alguns carregadores de css diferentes Esses carregadores são usados antes que a página da web seja carregada. E hoje em dia você pode encontrá-los em todos os sites modernos. Tudo bem, vamos prosseguir e mergulhar mais fundo em nosso projeto. Portanto, no geral, temos três carregadores diferentes. Vamos descrevê-los rapidamente. O primeiro carregador consiste em nove pontos. Eles são colocados em três linhas diferentes e cada ponto tem uma animação. Existem escalas e as opacidades estão aumentando com alguns intervalos Quero dizer que a duração da animação para cada ponto é diferente. Segundo carregador, temos cinco linhas diferentes durante a animação Seus tamanhos estão aumentando com diferentes tempos de atraso. Quanto ao terceiro carregador, ele consiste em cinco círculos diferentes Cada círculo tem uma boa animação. Essas coisas mais leves são criadas usando os pseudoelementos Tudo bem, então é isso que vamos criar neste vídeo Usaremos HTML e CSS. Então, vamos começar. Eu criei uma nova pasta na área de trabalho chamada css loaders No momento, está vazio. Vamos abri-lo no código VS e criar nossos arquivos de trabalho para HTML e CSS. O primeiro será o index.html. Quanto ao segundo, será style.css. Em seguida, vou abrir o arquivo index.html e criar um documento HTML básico. Para isso, precisamos colocar aqui um ponto de exclamação e, em seguida, pressionar Enter ou tab Tudo bem, então aqui temos as tags HTML básicas. Primeiro, vamos mudar o título. Precisamos usar carregadores de css. Em seguida, vou vincular o arquivo CSS. Para isso. Vamos abrir a tag do link e especificar aqui o caminho do arquivo. Tudo bem, agora temos que executar o projeto no navegador e começar a escrever o código Para abrir o projeto no navegador, vou usar um dos pacotes de código do VS chamado servidor ativo. Isso nos permite executar o projeto ao vivo no navegador. Ok, finalmente, vamos colocar o editor e o navegador lado a lado Assim, e comece. Então, vou começar com o primeiro carregador, quero dizer, aqueles pontos marrons Então, vamos em frente e, antes de tudo, criar a marcação HTML Vou abrir a tag div com um contêiner de classe. Ele incluirá todo o conteúdo. Em seguida, vou abrir outra tag div com a tag do carregador de classes Então, no geral, teremos nove pontos. E vou criá-los usando elementos div com os pontos da classe Tudo bem, então isso é tudo sobre a marcação HTML. No momento, nada está visível na página porque temos apenas as tags div vazias Agora podemos começar a escrever o CSS. Em primeiro lugar, vou criar alguns estilos de redefinição. Vamos selecionar todos os elementos usando um asterisco. Vou me livrar da margem e do preenchimento padrão de cada elemento Então, vamos definir os dois como zero. Ao longo deste tutorial, vou usar a RAM como unidade de medida. Certo? Agora, uma RAM é igual a 16 pixels porque, por padrão, o tamanho da fonte dos elementos HTML é igual a 16 Quero converter uma RAM em dez pixels. E para isso, temos que diminuir o tamanho da fonte dos elementos HTML. Vamos defini-lo para 62,5 por cento. Tudo bem, em seguida, vou pegar aqui o contêiner. Vamos selecioná-lo e definir sua largura e altura. Vou definir a largura para 100%. Quanto à altura, será 100% da janela de visualização. E também vamos configurar a tela como flexível. Agora, vou colocar o primeiro carregador no centro Mas depois de criarmos o resto dos carregadores, alterarei um pouco o layout flexível para centralizar os elementos de que precisamos para justificar o centro de conferências e alinhar conferências Centro. Ok, então isso é tudo sobre o contêiner. Em seguida, vou selecionar e personalizar o próprio carregador. Então, vamos selecioná-lo e definir sua largura para 20 trilhas. Tudo bem, a seguir, vamos personalizar os adultos. Defina a largura e a altura, ambas com 23 RAM. Em seguida, vou arredondá-los usando o raio da borda com um valor de Também altere a cor de fundo. Faça de cinco a a, até a. Em seguida. Vou criar algum espaço ao redor dos pontos usando a margem Vamos configurá-lo para 1,6 RAM nos quatro lados. E, finalmente, mude a opacidade, torne-a 0,6. Agora os pontos estão visíveis, mas temos que alinhá-los da maneira correta. Para isso, vamos usar o flexbox. Vou configurar a exibição para flexível Em seguida, para alinhar os elementos, são três linhas Temos que embrulhá-los. Portanto, precisamos flexionar o envoltório com o rap de valor. E então vou centralizá-los usando o justify-content center centralizá-los usando o justify-content Então, como você pode ver, os pontos estão alinhados Então, agora é hora de criar a animação. Faremos isso usando quadros-chave CSS. Vamos dar uma olhada no projeto finalizado. Como você pode ver durante a animação, os adultos estão ficando maiores e também a opacidade nos Vamos continuar e criar os quadros-chave CSS. Vou chamá-lo de animate loader one. Então, durante a animação, precisamos aumentar a escala dos elementos. Então, em 0%, vou definir a escala de transformação como um. Então, com 50 por cento, vou aumentar a escala e também aumentar a opacidade Portanto, precisamos transformar a escala com um valor de 1,5. E a opacidade será de 100%. Quero dizer, no final da animação, precisamos diminuir a escala. E também precisamos diminuir a opacidade. Tudo bem, então os quadros-chave são criados e agora temos que aplicar essas regras aos elementos Para isso, temos que usar uma propriedade de animação. Como dissemos, precisamos de diferentes durações de animação para os adultos Então, vou selecioná-los usando o seletor de enésimo filho. Vamos selecionar o primeiro. Em seguida, use animação. Temos que passar aqui alguns valores diferentes. O primeiro será o nome da carga animada dos quadros-chave. O que precisamos para durar será de 1,5 s. E também precisamos de infinito porque a animação deve rodar infinitamente Então, conforme considerado, o primeiro ponto já está animado. Vamos duplicar esse código oito vezes porque, no geral, temos nove pontos Em seguida, altere os números dos seletores de enésimo filho e também as durações Para o segundo, precisamos de 1,3 s. Então o próximo será 1,7 s. Em seguida, temos o quarto elemento. A duração será 1,1 s. Em seguida, a próxima será 0,9 e depois 0,7. O próximo deve ser 0,5 s. Para o oitavo item, vou usar 1,3 s. E para o último ponto, a duração será 1,5 s. Tudo bem, então finalmente, temos aqui uma boa carga de animação Vamos ver o primeiro carregador. Vamos seguir em frente e cuidar do próximo. Como o carregador anterior. Primeiro, vou criar a marcação HTML. Então, no geral, teremos cinco linhas. Primeiro, vamos abrir a tag div com o carregador de classes para que ela seja o wrapper E depois disso, crie cinco linhas usando novamente as tags div. Então, a marcação é criada. Vamos começar a escrever o CSS. Vamos selecionar uma carga de embalagem ou duas e definir sua largura para 25 rampas Em seguida, vou estilizar as linhas como primeiro. Vamos definir largura e altura. A largura será de 1,5 RAM. Quanto à altura, será de cinco rem. Em seguida, vamos mudar a cor do plano de fundo. Faça com que seja 41, 69e1. E também faça as linhas ligeiramente arredondadas usando raio de borda com valor de Assim, é possível ver que as linhas estão visíveis. No momento, os carregadores estão colocados muito próximos uns dos outros. Eu quero criar algum espaço entre eles. Então, vamos prosseguir e alterar o valor da propriedade justify content para o contêiner Vamos espaçá-lo uniformemente. Então agora está melhor. Em seguida, vou colocar as linhas lado a lado. Para isso. Vamos usar o display flex Além disso. Vou criar espaço entre eles usando o justify content space uniformemente E também quero centralizá-los verticalmente. Para isso, precisamos alinhar o centro dos itens. Tudo bem, então as linhas estão alinhadas da maneira correta. E agora temos que criar a animação. Então, durante a animação, vou aumentar a altura das linhas. E as animações de cada linha terão um tempo de atraso diferente Em primeiro lugar, precisamos criar quadros-chave CSS. Vou chamá-la de carga animada ou duas Então, zero por cento, a altura será de cinco RAM, que é a padrão Então, com 50 por cento, a altura será de 18 RAM. E então, no final da animação, quero dizer, 100 por cento, a altura será novamente cinco. Tudo bem, então os quadros-chave são criados. Agora precisamos aplicar essas regras às linhas. Vamos selecionar uma aliança com os seletores de enésimos filhos. Selecione o primeiro. Então eu vou duplicá-lo quatro vezes e mudar os números de 1 a 5 Portanto, precisamos executar a animação para a linha média sem atrasos. Quero dizer, para a terceira linha. Então, precisamos de animação com um nome da carga animada de quadros-chave ou dois, cuja duração será de 0,5 s. E, novamente, precisamos de infinito. Então, precisamos de um tempo de atraso semelhante para a segunda e quarta linhas. Então, vamos copiar essa linha de código e atribuí-la à segunda e quarta linhas E também adicione o tempo de atraso, que será de 0,3 s. Quanto à primeira e quinta linhas, precisamos que o tempo de atraso seja igual a 0,6 s. Tudo bem, então é considerado um carregador, funciona bem com uma boa animação Na verdade, com um segundo carregador, terminamos. Vamos seguir em frente e criar um terceiro. Como sempre, vou começar com a marcação HTML. Precisamos abrir a tag div com o carregador de classes três. E então vou passar aqui cinco tags div com o círculo da classe Ok, então isso é tudo sobre a marcação HTML. Vamos seguir em frente e começar a escrever CSS. Vou selecionar sua embalagem. As cargas são três. Vamos definir sua largura para quatro para correr. Em seguida, selecione e personalize os círculos. Em primeiro lugar, conforme definido na altura, vou configurar os dois para reduzir a RAM do que precisamos para tornar o elemento arredondado. Vamos usar o raio da borda, 50 por cento. Além disso, vou mudar a cor de fundo. Será a cor de fundo temporária. Vamos torná-lo cinza claro. Então, aqui temos esses círculos. Vamos alinhá-los usando o flexbox. Precisamos de display flex. E então temos que criar algum espaço entre os círculos usando o justify content space uniformemente Tudo bem, então os efeitos de animação serão criados usando quadros-chave CSS e antes de pseudoelementos Então, esses elementos animadores estarão antes dos pseudoelementos Antes de criá-los, vou adicionar a cada círculo sua própria cor Então, vamos selecioná-los usando o enésimo seletor de filhos. A primeira cor de fundo será 9o6d. Vamos duplicar esse código quatro vezes e mudar os números e as cores A segunda cor de fundo será F9, C7 para f. Então teremos f8961 A quarta cor de fundo será f37 22c. E o último será F9 para 346. Tudo bem, agora temos que criar os pseudoelementos anteriores Então, vamos selecionar o círculo, seguido de antes. Antes de tudo, precisamos definir o conteúdo. Vai ficar vazio. Então, vamos definir a largura e a altura. Vou definir os dois em 100%. E também precisamos definir a posição. Vamos torná-lo absoluto. Posição relativa ao elemento pai, porque o círculo deve se alinhar de acordo com o elemento pai Depois disso, vamos arredondar os elementos usando raio de borda com valor de 50 por cento E também definir a opacidade Então, no momento, os elementos não estão visíveis porque não têm as cores de fundo. Se atribuirmos a eles alguma cor de fundo temporária, digamos cinza claro , você os verá claramente. Ok, agora vou atribuir a cada pseudo-elemento a cor de fundo adequada Na verdade, podemos pegar todo esse código daqui. E então precisamos adicionar a eles apenas o seletor anterior. Agora está tudo pronto e podemos criar a animação. Em primeiro lugar, vamos definir os quadros-chave do CSS. O nome será Animate Loader Three. Portanto, temos que aumentar a escala dos pseudoelementos e depois ocultá-los. As etapas devem ser seguidas. Em zero por cento, precisamos que a escala seja uma. Em seguida, adicione 50 por cento. A escala será 2,5. O próximo passo será 75%. E, novamente, precisamos que a escala seja 2,5. E depois disso, precisamos esconder os elementos. Então, com oito por cento, vou definir a opacidade E também no final da animação, em 100%, a opacidade será zero Tudo bem, então isso é tudo sobre esses quadros-chave CSS. Agora temos que usar a propriedade de animação. Vamos atribuí-lo aos pseudoelementos anteriores. Precisamos aqui do nome animate loader three. A duração será de 2 s. Além disso, vou usar aqui que uma das funções de temporização da animação está esgotada e, novamente, infinita. Por isso, considera-se que a animação funciona. A única coisa que precisamos fazer é adicionar diferentes tempos de atraso aos elementos. Portanto, para o segundo antes dos pseudoelementos, precisamos que o atraso da animação seja de 0,2 s. Vamos copiar essa linha de código Para o próximo elemento, precisamos de 0,4 s, depois de 0,6 s. E para o último elemento, precisamos de 0,8 s. Tudo bem, então é isso sobre o terceiro carregador E, na verdade, terminamos. Todos os três carregadores são criados 10. Projeto 7 - Botão Ripple: Tudo bem, então vamos começar a trabalhar em nosso próximo projeto Nesta seção, criaremos um botão com efeitos interessantes e interessantes de passar o mouse Depois de passar o mouse sobre o botão , o círculo amarelo se expandirá para toda a parte inferior Não importa de que lado você passa o mouse. O botão de. Esse elemento amarelo aparecerá de todos os lados. Tudo bem, então estamos prontos para começar a criar o botão. Eu criei uma nova pasta na área de trabalho chamada botão repo, que agora está vazia Vamos abri-lo no VS Code e criar nossos arquivos de trabalho para HTML, CSS e JavaScript. Em seguida, abra o arquivo index.html e crie o documento HTML básico. Precisamos colocar o ponto de exclamação da urina e pressionar Tab ou Enter Então, aqui temos as tags HTML básicas. Primeiro, vamos mudar o título. Vou colocar seu botão de relatório e, em seguida, vincular os arquivos CSS e JavaScript. Vou abrir a tag de link nos elementos principais. E então temos que especificar o caminho do arquivo. Quanto ao JavaScript, vou abrir a tag de script logo acima da tag do corpo de fechamento. E temos que especificar aqui o caminho do arquivo JavaScript. Tudo bem, então estamos prontos para começar a escrever o código. Antes disso, vou executar o projeto no navegador. Para isso, vou usar um dos pacotes de código do VS chamado servidor ativo. Isso nos permite executar o projeto ao vivo no navegador e fazer as alterações e atualizações sem atualizar a página. Cada vez. Vamos colocar o editor e o navegador lado a lado, assim, e Então, vou começar com a marcação HTML. Vamos abrir a tag div com um contêiner de classe. Esse elemento conterá todo o conteúdo. Quero dizer, o botão. O botão será criado usando os elementos do link. Vamos abri-lo com a classe btn e depois passar o elemento year span com um conteúdo Explorar. Tudo bem, então isso é tudo sobre a marcação HTML. Vamos começar a escrever o CSS. Em primeiro lugar, vou definir alguns estilos comuns e redefinidos. Vamos selecionar cada elemento usando um asterisco. Em primeiro lugar, vou me livrar da margem e do preenchimento padrão de todos os elementos Vamos definir os dois como zero. Além disso, vou fazer uma caixa de tamanho de caixa, caixa de borda. Em seguida, vamos eliminar o sublinhado padrão do elemento link usando nenhuma decoração de texto Além disso, vou mudar a família de fontes. Vamos configurá-lo como Courier New monospace. Tudo bem, então esses estilos são aplicados aos elementos ao longo deste projeto, vou usar a RAM como unidade de medida Por padrão, 1 g é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 Eu quero converter 1 g em dez pixels. E para isso, temos que diminuir o tamanho da fonte do elemento HTML. Vamos defini-lo para 62,5%. Como você pode ver, o tamanho da fonte do elemento de link ficou menor. Vamos começar a trabalhar no contêiner. Em primeiro lugar, vou definir sua largura e altura. Vamos definir com 200 por cento. Quanto à altura, vou fazer com que seja 100% da janela de visualização Então, precisamos de cem vh e também mudar a cor de fundo Faça com que seja cinza escuro usando 262626. Tudo bem, em seguida, vou colocar o botão no centro E para isso, vou usar o flexbox. Precisamos de display flex. Então, para centralização horizontal, vou definir justificar o conteúdo Isso é para a centralização vertical. Precisamos alinhar o centro de itens. Portanto, considera-se que o botão está colocado no centro e agora é hora de personalizá-lo. Vamos selecionar BTN. E antes de tudo, vamos definir essa posição. Eu vou tornar isso absoluto. Em seguida, vou definir a largura e altura do Bateson Vamos fazer com que os dois tenham 18 RAM. Então eu vou mudar a cor de fundo. Vamos usar 90 E 0 E. E também fazer com que o botão seja arredondado usando o raio da borda, Ok, então a próxima coisa que vou fazer em relação ao botão é criar uma borda. Vamos definir sua largura para apontar para a RAM e o estilo será pontilhado Quanto à cor, vou torná-la branca Tudo bem, é isso. Em relação ao botão. Em seguida, vou abordar aqui esse elemento de amplitude. Em primeiro lugar, vou colocá-lo no centro para isso. Vamos usar novamente o Flexbox. Vou pegar essas três linhas e colá-las aqui. Portanto, esse painel está centralizado. Vamos em frente e estilizá-lo. Selecione btn span. No início, vou definir sua posição como relativa. Em seguida, mude a cor, torne-a branca. Também vou aumentar o tamanho da fonte, torná-la redonda em 1,8. Então vou deixar o telefone mais ousado. Vamos definir a espessura da fonte para 600. Também transforme texto em maiúsculas. E, por fim, crie algum espaço entre as letras. Vamos definir o espaçamento entre pontos a serem executados. Tudo bem. Portanto, esse elemento de extensão é personalizado e terei que criar um efeito de foco Vamos dar uma olhada no projeto finalizado. Então, quando passarmos o mouse sobre o botão , o círculo amarelo cobrirá o conteúdo Parece que, do lado exato em que entramos, o mouse criará esse efeito usando animações JavaScript e CSS Vamos ao arquivo script.js e começar a escrever o código. A primeira coisa que precisamos fazer é obter as coordenadas do cursor dentro do botão. Quero dizer, precisamos obter a posição superior e esquerda do cursor medida a partir das bordas superior e esquerda do botão. Antes de fazer isso, precisamos selecionar um botão em si. Então, vamos criar uma nova variável. Eu vou chamá-lo de btn. Em seguida, selecione o botão usando o método seletor de consulta. Precisamos especificar aqui o nome da classe BTN. Depois disso, temos que anexar a ele um ouvinte de eventos com o mouse para inserir eventos Além disso, temos que passar aqui a função de retorno de chamada, que será executada quando passarmos o mouse sobre o botão Na verdade, o mouse entra em metal, dispara apenas uma vez quando passamos o mouse sobre o elemento Então, como dissemos, temos que obter as posições superiores do lado esquerdo do cursor dentro do botão Para obter essas posições, precisamos usar decline x e client. Por que propriedades? Eles nos fornecem as posições superior e esquerda do cursor, medidas a partir das bordas superior e esquerda da janela de exibição Para obter a posição do cursor dentro do botão, precisamos encontrar a diferença entre as propriedades declinar x e y e a posição superior esquerda do Então, para torná-lo mais compreensível, vamos escrever o código No começo, vou passar o objeto de evento de urina. A seguir, mostrarei como obter as informações sobre os elementos. Para isso, podemos usar um dos métodos chamados get bounding client Vamos examinar o console e ver o que esse método nos oferece. Vou passar aqui e dot, target dot, get bounding client. Certo. Em seguida, vou inspecionar a página e mudar para a guia do console Então, se eu passar o mouse sobre o botão, obteremos um objeto chamado dumb Se eu o deixar, você encontrará aqui algumas propriedades diferentes. Temos as posições em que estou, em baixo, da esquerda para a direita e em cima. Também temos aqui a largura e a altura do elemento. Além disso, você pode ver aqui as propriedades x e y. E, na verdade, elas são iguais às propriedades esquerda e superior. Podemos usar esses valores para calcular a esquerda nas posições do cursor. Dentro do botão. Para isso, vou criar uma nova variável. Vamos ligar para a esquerda. Então, precisamos aqui do cliente X, e temos que subtraí-lo Você não direciona o ponto, deixa os pontos retos delimitadores do cliente à Vamos verificar no console o que a variável esquerda nos fornece. Quando passarmos o mouse sobre o botão, obteremos a posição esquerda do cursor Mas agora dentro do botão. Quero dizer, é medido a partir da borda esquerda da caixa. Tudo bem? Da mesma forma, precisamos definir as duas posições. Podemos simplesmente duplicar esse código e, em seguida, alterar o nome da variável de que precisamos. E também precisamos aqui do cliente y em vez de x, e precisamos do seu top novamente. Tudo bem? Portanto, ambas as posições estão definidas e agora precisamos criar novos elementos nessas posições. Faremos isso usando um dos métodos chamados criar elementos. Vou declarar uma nova variável. Vamos chamá-lo de ondulação Então, abaixo, precisamos criar novos elementos div Como eu disse, vou usar o método de criação de elementos. Precisamos especificar aqui o nome da tag div. Depois disso, precisamos definir as posições superiores esquerdas da E usaremos os valores que definimos aqui. Então, precisamos aqui de um ponto de ondulação, ponto de estilo, à esquerda. E deve ser igual ao valor da variável esquerda. Da mesma forma que vou definir a posição superior. Vamos duplicar essa linha de código e mudar para o topo. Ok, então o elemento é criado, mas precisamos anexá-lo ao botão Para isso, temos que usar um dos métodos chamados prepend Precisamos de btn dot prepend. E temos que passar aqui a variável Ripple. Ok, então, para provar que o elemento está sendo criado ao passar o mouse, vamos mudar para a guia Elementos e, em seguida, passar o mouse sobre o Como você pode ver, Dede Allen é criado dentro do botão Portanto, temos aqui as posições esquerda e superior. Tudo bem, em seguida, precisamos personalizar esse elemento no arquivo CSS Vamos criar uma nova classe e chamá-la de ripple. Para fazer com que uma posição esquerda e duas posições funcionem quando é definida a posição da banheira de hidromassagem Vamos torná-lo absoluto. Em seguida, definiu a largura e a altura. Vou definir os dois em 100%. E também altere a cor de fundo. Faça com que E7 seja E 08. Tudo bem, vamos ver os estilos da ondulação Para aplicá-los aos elementos, temos que adicionar essa classe à lista de classes de elementos. Portanto, precisamos reinserir lista de classes de pontos seguida pelo método add E temos que especificar aqui o repositório. Ok? Então, se eu passar o mouse sobre o botão , o novo elemento aparecerá Se eu passar o mouse sobre o botão várias vezes , os vários elementos serão criados Mas vamos corrigir isso em breve. Primeiro de tudo, vamos fazer com que seja arredondado. Vamos usar um raio de borda de 50 por cento. E também temos que movê-lo para a mão esquerda para cima em -50 por cento. Vamos usar a transformação. Traduza com -50%. Duas vezes. Ok, agora temos melhores resultados e é hora de criar uma animação. Portanto, por padrão, a largura e a altura desse elemento serão zero. Depois de passar o mouse sobre o botão , o tamanho da república deve aumentar com a animação Então, vamos criar quadros-chave CSS. Eu vou chamá-lo de anime Ripple. No geral, teremos duas etapas diferentes. Em zero por cento, precisamos que a altura seja zero. Para 100%, devemos aumentar a largura e a altura para 100%. Tudo bem, então os quadros-chave já sabem como aplicar esses estilos aos elementos usando uma propriedade de animação Vamos fazer uma pausa aqui, anime ripple também. A duração será de 0,5 s. Então, agora, se eu passar o mouse sobre o botão, os elementos aparecerão sem problemas Mas, como você vê, temos aqui alguns problemas. Uma vez que o elemento apareça e seu tamanho seja aumentado, então em alturas. Portanto, precisamos manter os estilos que temos em 100%. Para isso, precisamos usar um valor chamado forwards. Então, agora esse problema é o elemento fixo que não tem mais altura. O próximo problema é que o tamanho do elemento não é suficiente para cobrir o fundo, então temos que aumentá-lo. Vamos fazer com que seja 200 por cento. Agora o tamanho é duas vezes maior, mas ainda não é suficiente, porque se eu entrar o mouse e pará-lo na borda do botão , a ondulação não cobrirá Então, vamos aumentar ligeiramente a altura. Eu vou fazê-los 210%. Tudo bem, agora o problema está resolvido. A próxima coisa que vou tirar você é esconder as partes externas do repositório Para isso, temos que usar o overflow hidden. Tudo bem, agora temos um resultado muito melhor. A próxima coisa que eu quero fazer é me livrar do repositório Quando o mouse sai do botão, temos que usar um dos eventos chamado saída do mouse. Vamos anexar ao botão o ouvinte de eventos. Com o mouse, evento ao vivo. Além disso, precisamos aqui de uma função de retorno de chamada. Em seguida, precisamos remover o repositório. Para isso, vou usar o método do filho removido. Temos que especificar aqui. Ok, então, finalmente, terminamos. O botão funciona perfeitamente. Tem bons efeitos e animações. Acho que foi interessante e diferente, e espero que tenham gostado. Agora, é hora de seguir em frente e começar a trabalhar no próximo projeto. 11. Projeto 8 - Barra de progresso arredondada: Neste vídeo, vamos criar uma barra de progresso com a forma de um círculo com um valor percentual. Portanto, a barra de progresso funciona em um evento de rolagem. Por padrão, temos aqui zero por cento. E quando começarmos a rolar a página para baixo, essa linha branca ao redor do círculo será preenchida suavemente com a cor vermelha E também o valor da pessoa aumentará de acordo. Então, se rolarmos para cima, o valor percentual diminuirá e recuperaremos a borda branca Este projeto faz parte do nosso próximo curso da Udemy, no qual criaremos um site avançado completo com HTML, CSS e JavaScript do zero Ele será lançado em breve, então fique ligado. Tudo bem, então é isso, o que vamos criar neste vídeo Vamos em frente e começar. Eu criei uma nova pasta na área de trabalho chamada barra de progresso circular, que agora está vazia. Vamos prosseguir e abri-lo no código VS. Vou criar nossos arquivos de trabalho. O primeiro será o index.html. Em seguida, teremos style.css e script.js. Em seguida, abra o arquivo index.html e crie um documento HTML básico. Precisamos usar Ahmed, vamos colocar aqui um ponto de exclamação e depois pressionar Tab ou Enter Ok. Em primeiro lugar, vou mudar o título. Vamos fazer com que ela circule a barra de progresso. Em seguida, vincule arquivos CSS e JavaScript. Vou abrir a tag do link no elemento principal. Vamos especificar aqui o caminho do arquivo. Quanto ao arquivo JavaScript, vou abrir a tag de script logo acima da tag do corpo de fechamento. E então, no atributo source, temos que especificar o caminho do arquivo. Certo? Depois disso, vou executar o projeto no navegador usando um servidor ativo. Em seguida, coloque o editor e o navegador lado a lado. Tudo bem, então primeiro vamos criar uma barra de progresso usando HTML e CSS Quero dizer, vamos estilizá-lo assim. E então faremos com que funcione usando JavaScript. Vamos começar com a marcação HTML. Vou abrir uma tag div, que será um contêiner Em seguida, precisamos de outra tag div que envolva todo o conteúdo atribuído à barra de progresso da classe Dentro da tag div, serão necessários quatro elementos diferentes. Agora, vamos apenas criá-los e depois explicaremos e mostraremos por que precisamos desses elementos. Então, vamos abrir uma tag div com um semicírculo de classe. Em seguida, duplique-o três vezes. Na verdade, não precisamos tocar no segundo desenvolvimento. O terceiro será um semicírculo no topo. Esse é provavelmente o último desenvolvimento. Será um círculo de barras de progresso. Como o conteúdo. Vamos inserir aqui zero por cento por padrão. Tudo bem, então isso é tudo sobre a marcação HTML. Vamos começar a escrever um pouco de CSS. Vou criar alguns estilos comuns. Vamos selecionar cada elemento para isso. Precisamos usar um asterisco. Então, primeiro de tudo, vou me livrar da margem e do preenchimento padrão de cada elemento Vamos definir os dois como zero. Então, vou fazer o dimensionamento da caixa, caixa de borda e depois mudar a família da fonte Vamos usar aqui a Helvetica aérea sans-serif. Portanto, os estilos comuns são aplicados aos elementos. Em seguida, vou mudar o tamanho da fonte do HTML. Porque ao longo deste projeto, vou usar a RAM como unidade de medida. No momento, 1 g é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 Eu quero converter 1 g em dez pixels. E para isso, temos que diminuir o tamanho da fonte do HTML. Vamos fazer com que seja 62,5%. Então eu posso ver que o texto ficou menor. Ok, a seguir, vamos cuidar do contêiner. Vamos selecioná-lo. Antes de tudo, defina sua largura e altura. Vou definir sua largura para 100%. Quanto à altura, vou criar 200% das janelas de visualização porque precisamos rolar a página para baixo Também posso mudar a cor de fundo, torná-la cinza usando 555 Tudo bem Depois disso, vou cuidar da barra de progresso em si. Quero dizer o invólucro, defina sua largura e altura Vou fazer com que os dois corram 40. Também altere a cor do plano de fundo. Torne-a branca E, em seguida, torne a barra de progresso arredondada usando o raio da borda com o valor de Portanto, a barra de progresso deve ser colocada no centro e deve ser corrigida porque, uma vez que rolamos a página para baixo, ela não deve se mover Então, vamos definir sua posição para fixar o que precisamos das propriedades superior e esquerda, ambas em 50 por cento. Então, para censurar o elemento perfeitamente, tivemos que usar Transform com a função translate Temos dois caminhos aqui, -50 por cento duas vezes. Tudo bem, isso é sobre o invólucro. Vamos seguir em frente e cuidar do círculo da barra de progresso. Vamos selecioná-lo. E antes de tudo, vamos definir sua largura e altura. Vou configurar para ambos 239,4 RAM. Em seguida, mude a cor de fundo, ela ficará preta. Também faça os elementos ao redor usando o raio da borda, Em seguida, altere a cor, torne-a branca e aumente o tamanho da fonte. Faça disso um fórum. Ok, então esse elemento foi instalado, mas temos que cuidar de sua posição. Ele deve ser colocado no centro da embalagem. E também temos que enviar para a pessoa em cada valor dentro do círculo. Em ambos os casos, vou usar o flexbox e para evitar escrever o mesmo código repetidamente , vou criar uma nova classe Vamos chamá-lo de centro e atribuir a ele algumas propriedades e valores diferentes do flexbox O primeiro será o display flex de que precisamos. Justifique o centro do conteúdo para centralização horizontal e alinhe centro dos itens para a Depois disso, temos que atribuir essa classe como barra de progresso e círculo da barra de progresso Ok, agora é possível ver que o problema foi corrigido. Então, a barra de progresso está preparada. Ele tem a aparência padrão. E agora temos que fazer seu trabalho. Como você se lembra, criamos alguns desenvolvimentos diferentes. Os dois primeiros desenvolvimentos , que têm um semicírculo de classe, conseguirão preencher a barra de progresso com a cor vermelha. Então, a primeira coisa que vou fazer é esconder o círculo preto por um tempo para explicar e demonstrar melhor as coisas que estão designadas para não mostrar nenhuma. Portanto, o círculo preto está oculto e agora temos que cuidar dos três elementos div, que nos ajudará a fazer a barra de progresso funcionar Vamos selecionar os três elementos simultaneamente. Quero dizer, precisamos de meio círculo e meio círculo no topo. Antes de tudo, vamos cuidar de suas posições. Precisamos que a posição seja absoluta. Além disso, vamos definir as propriedades superior e esquerda, ambas como zero. E depois disso, como largura e altura definidas, vou definir a largura para 40%. Quanto à altura, vamos fazer com que seja 100%. Então, no momento, eles não são viáveis. E para corrigir isso, vou atribuir a cada um deles uma cor de fundo temporária diferente Vamos selecionar o primeiro semicírculo usando o seletor enésimo filho e definir sua cor de fundo Então eu vou duplicar esse código, mudar o número que precisamos aqui para S4, a cor de fundo, vai ser azul E, finalmente, vamos selecionar a parte superior do semicírculo e definir sua cor de fundo como, digamos, laranja. Tudo bem, então todos os três desenvolvimentos são colocados um em cima do outro No início, vou fazer com que a barra de progresso funcione ao o mouse para simplificá-la de entender Em seguida, alteraremos o hover e usaremos o evento scroll usando JavaScript Então, precisamos girar o primeiro semicírculo em 180 graus. Quanto ao segundo semicírculo, temos que girá-lo 360 graus porque temos que preencher o círculo inteiro Quanto ao topo do semicírculo, quero dizer esses elementos alaranjados, temos que ocultá-lo. Então, vamos selecionar a barra de progresso com o mouse, seguida pelo primeiro semicírculo Vamos usar novamente o nono seletor de filhos que precisamos transformar com a função de rotação E, como dissemos, o valor será de 180 graus. Vamos duplicar esse código. Mude o número do enésimo filho, faça também. Quanto ao valor da função de rotação, será de 360 graus. Além disso, precisamos usar a transição para tornar a rotação mais suave Então, vamos usar a transição com a transformação de valores. A duração do primeiro semicírculo será de 1 s E também precisamos usar aqui linear. Então vamos pegar esse código colá-lo no segundo semicírculo. A única coisa que precisamos mudar é a duração. Vamos fazer 2 s. Agora, se passarmos o mouse, os elementos girarão, agora vemos aqui apenas o elemento azul porque o verde não é casado Se eu pausar o fundo azul aqui , você verá os elementos verdes Então, os elementos estão girando, mas de forma errada Quero dizer, a origem da transformação está definida para censurar por padrão Mas, no nosso caso, precisamos colocá-lo no centro certo. Então, vamos usar a origem da transformação e colocá-la no centro direito. Então, nesse caso, a origem da transformação será o centro do elemento. Mas no lado direito, quando passamos o mouse sobre a barra de progresso, temos que esconder esses elementos laranja Então, vamos selecionar a barra de progresso com o mouse, seguida pelo topo do círculo, e definir sua opacidade Agora, as alturas dos elementos quando passamos o mouse sobre a barra de progresso Mas, na verdade, ele se esconde muito cedo. Precisamos esconder isso. Quer que o elemento verde termine de girar. Então, precisamos ocultá-lo após 1 s. Vamos usar a transição. Com opacidade. A duração será de 0 s. Quanto ao atraso, será de 1 s. Tudo bem, então agora tudo funciona bem Agora temos que mudar as cores e também precisamos criar esses elementos ao redor delas. Os dois primeiros desenvolvimentos devem ter uma cor vermelha. Quero dizer, a cor B6 com quatro zeros. Quanto ao terceiro elemento, será branco porque a própria barra de progresso tem o fundo branco. Então, agora precisamos esconder essas partes externas dos elementos. Para isso, vamos usar overflow hidden. Agora está escondido. Temos um resultado muito melhor. Finalmente, temos que tornar o círculo preto visível. Então, vamos remover o display none. Agora mesmo. A parte do círculo é visível porque acabou atrás dos elementos div Para corrigir isso, vamos usar a propriedade index. Temos que atribuir a ele algum valor maior que zero, digamos dez Ok, agora, se eu passar o mouse sobre a barra de progresso , ela ficará bem preenchida com a cor vermelha Tudo bem, agora mostramos como criar uma barra de progresso usando CSS E agora vamos mostrar como fazer seu trabalho em scroll usando JavaScript. Vamos dar uma olhada no projeto finalizado. Então, se eu rolar para baixo, a barra de progresso será preenchida. Além disso, a pessoa que você valoriza mudará de acordo, que diminuirá quando voltarmos ao topo Primeiro, vamos comentar esses estilos. Quero dizer, essas toalhas estão pairando. Em seguida, vá para o arquivo JavaScript. Em primeiro lugar, vou selecionar os elementos div. Quero dizer, para elementos div, que são colocados dentro da barra de progresso Vamos começar com os semicírculos. Crie uma nova variável e chame-a de semicírculos. Nesse caso, estamos selecionando dois elementos, portanto, precisamos usar o método seletor de consulta all Vamos especificar aqui o nome da classe, semicírculo. O próximo elemento será o topo do semicírculo. Então, vamos duplicar essa linha de código. Altere o nome da variável. Precisamos de um semicírculo no topo. Também precisamos consultar o seletor. Em vez do seletor de consulta, todo o método para o nome da classe será a metade do chamado topo Vamos duplicar essa linha de código. Mais uma vez, altere o nome da variável. Será o círculo da barra de progresso. E também altere o nome da classe. Precisamos de um círculo de barras de progresso. Tudo bem, então todos os desenvolvimentos são selecionados. Em seguida, vou anexar um evento de rolagem ao documento. Vamos usar o método add event listener. Precisamos especificar aqui que o evento será Scroll. E também precisamos aqui de uma função de retorno de chamada que será executada assim que rolarmos a página Então, como você sabe, a única rotação completa é igual a 360 graus. Temos que converter a parte rolada da altura em graus. Antes de fazer isso, temos que definir algumas variáveis diferentes. A primeira será a janela de visualização, altura da página Vamos criar uma nova variável e chamá-la de janela de visualização da página, altura . Será uma janela na sua altura A próxima variável será a altura total da página. Então, vamos criar a altura da página. Deve ser igual aos elementos pontilhados do documento. E então precisamos da altura de rolagem. Então, novamente, definimos aqui toda a altura da página. E a última variável será essa parte rastreada da página Então, vamos criar uma nova variável. Vou chamá-la de porção rabiscada. E deve ser igual ao deslocamento Y da página de pontos da janela. Tudo bem, agora tudo está preparado para converter a altura dessa porção de crescimento em graus. Vamos criar uma nova variável. Vou chamá-lo de grau da porção de rolagem. E agora temos que usar a seguinte fórmula. Precisamos dividir a parte rolada pela diferença entre a altura da página e a altura da janela de visualização da página E temos que multiplicar o resultado por 360. Portanto, precisamos que você tenha uma parte rolada dividida pela diferença entre a altura da página e a altura da janela de visualização da página Temos que multiplicar isso por 360 graus. Vamos ver no console o que essa variável nos fornece. Vamos percorrer o console que é chamado de grau de porção. Então, vamos inspecionar a página e mudar para a guia do console. Depois de rolar a página para baixo e ir até o final, obteremos os valores adequados de 0 a 360 graus Tudo bem, agora usando essa variável, vamos girar semicírculos Então, precisamos percorrê-los e girar cada semicírculo Estou no primeiro e no segundo desenvolvimentos dentro da barra de progresso. Portanto, para percorrê-los, precisamos usar um dos métodos auxiliares de matriz chamado for-each É preciso um parâmetro, que será a função de retorno de chamada Ele será executado para cada elemento. A função de retorno de chamada em si usa um parâmetro e é o item atual na lista Vamos chamá-lo de elementos E L. Agora temos que transformar cada elemento. Precisamos transformar o estilo. Em seguida, abra os carrapatos traseiros. Precisamos aqui da função de rotação. E como valor, temos que passar o grau da porção de rolagem Então, agora, se rolarmos para baixo , essa barra de rolagem começará a parecer Quando chegarmos à metade , precisamos parar o primeiro semicírculo. E também precisamos ocultar o terceiro elemento div. Estou na metade do chamado topo. Portanto, precisamos usar a declaração if qual temos que definir se o grau da porção de Scott é maior ou igual a 180. Então, vamos inserir a condição mencionada. Se essa condição for verdadeira, teremos que dar ao primeiro semicírculo o valor fixo igual a 180 graus. Para selecionar o primeiro semicírculo, temos que usar o índice número zero. E então precisamos transformar o estilo. Deve ser igual a girar 180 graus. Então, precisamos esconder o topo do semicírculo. Vamos usar estilo, criar opacidade e torná-la igual a zero Então, agora, quando rolarmos para baixo, toda a barra de progresso será preenchida. O que temos aqui? Um pequeno problema, quando rolamos para cima e é chamado de grau de porção , torna-se menor que 180 graus. Temos que mostrar a parte superior do semicírculo traseiro. Portanto, precisamos criar outra declaração. Então vamos pegar essa linha de código, colá-la aqui e alterar esse valor, torná-lo um. Agora é possível ver que tudo funciona perfeitamente. A única coisa que precisa fazer é fazer com que o valor percentual funcione. Nesse caso, temos que converter graus em um valor percentual. Vamos criar uma nova variável. Vou chamá-la de porcentagem da porção de rolagem. Então, neste caso, temos que dividir o grau da porção rolada por 360 graus e depois multiplicá-lo por 100 Ok? Agora temos que exibir esse valor como o conteúdo da barra de progresso em um círculo. Então, vamos usar a barra de progresso como um círculo com conteúdo de texto. Em seguida, abra os backticks. Insira aqui a parte rolada presente, seguida pelo sinal de porcentagem Então, agora, o valor percentual funciona, mas temos aqui os decimais Para nos livrarmos deles, precisamos usar um dos métodos chamados Math.floor Agora, como você pode ver, tudo funciona perfeitamente. E, na verdade, com o projeto, terminamos 12. Projeto 9 - Slideshow de ícones de mídia social: Neste vídeo, criaremos uma apresentação de slides dos ícones das mídias sociais Vai ser pequeno, mas acho que será interessante antes de começarmos a criar o projeto, vou descrevê-lo. Então, temos aqui uma imagem de fundo em tela cheia e alguns ícones de mídia social muito legais Eles estão se movendo com algumas integrais. E o ícone no centro está ficando mais claro. Para o resto dos ícones, eles são mais escuros por padrão Então, como dissemos, vamos construir esse projeto com HTML, CSS e JavaScript. Então, espero que todos vocês já conheçam o básico dessas três tecnologias Eu criei uma nova pasta na área de trabalho chamada slideshow, na qual tenho outra pasta para as Vamos abrir essa pasta e o código VS. Vou criar nossos arquivos de trabalho. O primeiro será index.html. Em seguida, teremos style.css e script.js. Vamos abrir o arquivo index.html e criar um documento HTML básico. Para isso, vou usar o Emmet. Precisamos colocar aqui um ponto de exclamação e, em seguida, pressionar Tab ou Enter Tudo bem, depois disso, vamos mudar o título. Parecem alguns ícones de mídia social. Em seguida, vou vincular arquivos CSS e JavaScript. Vamos abrir a tag do link no elemento principal e especificar o caminho do arquivo CSS. Quanto ao JavaScript, vou abrir a tag de script abaixo, logo acima da tag do corpo de fechamento. Especifique aqui o caminho do arquivo JavaScript. Depois disso, vamos executar o projeto no navegador. Para isso, vou usar um servidor ativo, que nos permite executar o projeto ao vivo no navegador usando um servidor local. E, finalmente, vamos colocar o editor de texto e o navegador lado a lado Assim, e comece. Então, estamos prontos para criar uma marcação HTML. Vamos abrir a tag div, que será o invólucro do conteúdo Vamos atribuir à turma a apresentação de slides. No geral, teremos cinco ícones diferentes de mídia social. Eles serão representados pelas imagens e também serão agrupados pelos elementos do link. Portanto, é uma tag de link aberto com um link de apresentação de slides da aula que institui aqui e Vou selecionar uma imagem chamada slideshow IMG one. Vamos duplicar o elemento de link quatro vezes e depois alterar rapidamente os números dos nomes das imagens Ok, então isso é tudo sobre a marcação HTML. Tudo está preparado e agora podemos escrever um pouco de CSS. Em primeiro lugar, vou personalizar e ajustar os ícones. E depois disso, faremos a apresentação de slides funcionar usando JavaScript Primeiro, vamos criar alguns estilos comuns e redefinidos. Vamos selecionar todos os elementos usando um asterisco. Em primeiro lugar, vou me livrar da margem e do preenchimento padrão de cada elemento Então, vamos definir os dois como zero. Além disso, precisamos de dimensionamento de caixas, caixas de borda. E vou me livrar dos estilos padrão dos links. Vamos usar decoração de texto, nenhuma. Então, ao longo deste projeto, vou usar uma rampa como unidade de medida Por padrão, 1 g é igual a 16 pixels, porque o tamanho da fonte do elemento HTML é igual a 16 Vou converter uma corrida em dez pixels. E para isso vou diminuir o tamanho da fonte dos elementos HTML. Vamos fazer com que seja 62,5%. Ok, então isso é tudo sobre os estilos comuns. Vamos selecionar elementos div de um wrapper. Primeiro de tudo, vou definir, podemos esconder, vamos fazer com 100%. Quanto à altura, vou configurá-la para 100% da janela de visualização Em seguida, vou definir a imagem como plano de fundo em tela cheia Mas antes disso, vamos usar a função chamada gradiente radial função de gradiente radial define a transição de cores a partir do centro Então, vou especificar aqui duas cores diferentes. A primeira será 483 vezes e a opacidade, 0,9 a Isso é para a segunda cor. Vou inserir aqui a cor preta com a opacidade de 0,9 a cinco Depois disso, vamos definir o URL. Vou selecionar uma imagem chamada bg dot PNG. Também precisamos aqui centrar na posição e sem repetir. Por fim, vamos definir o tamanho do de fundo. Vamos fazer a capa Então, como você pode ver, temos aqui uma imagem de fundo em tela cheia Em seguida, vou colocar o ícone lado a lado para isso. Vamos usar o flexbox. Precisamos de display flex. E depois disso, vamos alinhar os ícones e centralizar verticalmente. Use itens de alinhamento. Centro. Além disso, vamos criar algum espaço nos lados esquerdo e direito usando o preenchimento Vou configurá-lo para zero e depois executar. Tudo bem, vamos ver o invólucro. Vamos cuidar dos ícones. Eu vou diminuir o tamanho deles. Vamos selecionar o primeiro link da apresentação de slides e aumentar sua largura Depois disso, temos que definir a largura da imagem em si. Então, vamos selecionar elementos IMG e definir a largura para 100 por cento Portanto, nesse caso, a imagem ocupará 100% da largura do elemento pai. Certo? Isso é tudo sobre o CSS. Por enquanto. Temos que fazer a apresentação de slides funcionar usando JavaScript. Então, é aberto esse arquivo script.js. Em primeiro lugar, vou selecionar seus elementos div do wrapper Quero dizer a apresentação de slides, vamos criar uma nova variável e chamá-la Em seguida, selecione o elemento usando o método seletor de consulta. Temos que especificar aqui o nome da classe. Apresentação de slides. Tudo bem, deixe-me contar como vamos fazer essa apresentação de slides funcionar Removeremos o primeiro ícone da lista e o adicionaremos de volta à lista como o último. Faremos isso com alguns intervalos e também com algumas transições suaves Isso é tudo sobre o processo da apresentação de slides. Como dissemos, precisamos de alguns intervalos. E para isso, vou usar um dos métodos integrados chamado Set Interval. São necessários dois argumentos. A primeira é uma função de retorno de chamada, que é executada após cada intervalo Quanto ao segundo argumento , será a quantidade do intervalo em si. Vamos mudar as imagens após 3 s. Então eu vou passar aqui 3.000, 3.000 milissegundos, que é igual a 3 s. Ok, então, como dissemos, temos que remover o primeiro ícone e depois adicioná-lo à lista como o último Então, primeiro de tudo, vamos selecionar o primeiro ícone. Vou criar uma nova variável. Vamos chamá-lo de primeiro ícone. Vou selecionar o primeiro ícone usando uma das propriedades chamadas primeiro elemento filho. Quero dizer, vai ser o filho dessa apresentação de slides. Agora, o primeiro ícone está selecionado e, para removê-lo dos elementos div do wrapper, vou usar um dos métodos de cúpula chamado Então, precisamos de uma apresentação de slides. Em seguida, remova a criança. E como argumento, temos que passar seu primeiro ícone. Como você pode ver a cada 3 s, o ícone. Então, removendo, como dissemos, temos que adicioná-los de volta à lista. E para isso, vou usar outro método de cúpula chamado append Por padrão, ele adiciona um elemento como o último filho. Portanto, precisamos de uma apresentação de slides seguida pelo método append child. E como argumento, temos que passar aqui novamente por um segundo. Ok, então, como você pode ver, o slide mostra todas as obras. Mas precisamos adicionar alguns efeitos diferentes. A primeira coisa que vou fazer é remover o primeiro ícone suavemente com um efeito de esmaecimento Para fazer isso, vou criar uma nova classe em CSS. Vamos dizer que desapareceu. Portanto, essa classe incluirá dois estilos. Para atenuar os elementos, precisamos tornar a opacidade e a largura, ambas zero Então, vamos definir a opacidade e a largura como zero. Além disso, temos que usar a transição para o primeiro ícone. Para selecionar o primeiro ícone, vou usar o seletor f child Precisamos especificar aqui um. E então vamos inserir sua transição com uma duração de 0,5 s de opacidade com a mesma Isso é tudo sobre o CSS. Vamos voltar ao arquivo JavaScript. Agora, precisamos adicionar a classe desbotada ao primeiro ícone. Então, precisamos aqui do primeiro ícone, seguido pela propriedade chamada lista de classes, que nos dá todas as classes do elemento. Em seguida, precisamos usar o método chamado add. E temos que especificar aqui o nome da classe desapareceu. Agora, o ícone está sendo removido, mas sem nenhum efeito de desvanecimento porque o efeito de transição precisa de algum tempo Na verdade, metade do segundo Precisamos esperar metade desse segundo antes de remover o elemento da lista. Para fazer isso, vou usar um dos métodos chamados setTimeout Isso nos permite executar a função uma vez com algum tempo de atraso. Portanto, esse método usa dois argumentos. A primeira é uma função de retorno de chamada. Vamos interferir nessas duas linhas. Quanto ao segundo argumento , será um tempo de atraso. Nesse caso, precisamos da metade dos segundos 500 milissegundos. Então, agora o ícone está sendo removido com um belo efeito de desbotamento. Agora temos que adicioná-lo novamente à lista com um efeito de desvanecimento Para fazer isso, temos que remover a classe fade out dos elementos Precisamos do primeiro ícone, seguido pela propriedade da lista de classes. E então temos que usar o método chamado remove. Vamos especificar aqui que o nome da classe desaparece. Agora, o ícone é adicionado à lista, mas sem nenhum efeito de desvanecimento Porque, novamente, temos que esperar metade do segundo. Portanto, precisamos usar novamente a função de tempo limite definido que insira essa linha de código dentro da função e também especifique o tempo de atraso, 500 milissegundos Então, agora, ainda não temos aqui o efeito fade porque precisamos definir a transição para o último ícone Vamos para o arquivo CSS. Na verdade, precisamos da mesma transição que usamos para o primeiro ícone. Então, vou adicionar aqui apenas o seletor para o quinto ícone Então, agora, tudo funciona bem e podemos seguir em frente e cuidar do segundo efeito. Quero dizer, temos que tornar os ícones mais escuros por padrão. E então temos que torná-los mais leves quando ficarem em terceiro lugar, no mínimo, como no projeto finalizado. Antes de tudo, vamos deixar todos os ícones mais escuros. Para isso, vou usar uma das propriedades CSS chamada filtro com uma função chamada brilho. Vamos inserir seu 0.1. Portanto, esse valor significa que o elemento mantém apenas dez por cento de seu brilho padrão. Depois disso, vou criar uma nova classe e CSS, que incluirão o maior brilho. E adicionaremos essa classe ao elemento usando JavaScript. Vamos chamar essa classe de luz e usar novamente filtro, onde a função brilho o valor de interesse para você, 1,5. Ok, vamos voltar ao arquivo JavaScript. Agora precisamos selecionar o terceiro ícone e adicionar a ele uma luz de classe recém-criada. Vamos criar uma variável e chamá-la de terceiro ícone. Para ter acesso ao terceiro ícone, vou usar uma propriedade chamada children. E então, entre colchetes, temos que especificar o número dos elementos Nesse caso, precisamos de três. Então, agora selecionamos o elemento e precisamos adicionar a ele a classe light. Então, precisamos aqui de ícone de pé, ponto, lista de classes, adição de ponto. E temos que especificar aqui a luz do nome da classe. Agora, como você pode ver, o ícone está ficando mais claro, mas mantém o brilho. Então, não precisamos disso. Temos que remover a luz da aula. Precisamos removê-lo do irmão anterior do terceiro ícone Porque uma vez que ele se move , ele não é mais o terceiro ícone na lista, mas o segundo que precisamos aqui através do ponto do ícone, irmão dos elementos anteriores, seguido pela propriedade da lista de classes Então, precisamos de um método chamado remove. E, novamente, aula como Ok, então agora tudo funciona bem. Só precisamos adicionar uma transição a esse efeito. Vamos para o arquivo CSS. Selecione o terceiro ícone. Use novamente o nésimo seletor de filhos do que a transição do Instituto com o filtro 0,5 s. Ok, agora temos resultados muito melhores Eu posso, está ficando mais escuro suavemente. Mas, como você pode ver, precisamos de uma transição quando o ícone também ficar mais claro. Então, vamos adicionar uma transição ao filtro de luz da classe como duração. Vamos especificar aqui 1,5 s. Ok, então agora estava tudo bem. E antes de terminarmos esse tutorial, vou fazer mais uma coisa. Se eu recarregar a página, todos os cinco ícones ficarão mais escuros. Não precisamos disso. Precisamos tornar seu terceiro ícone mais claro por padrão. E para fazer isso, vou adicionar luzes de classe ao terceiro ícone e ao arquivo HTML. Ok, é isso. Finalmente terminamos. Terminamos de trabalhar nos projetos. Novamente, era pequeno, mas espero que tenha sido interessante. E você gostou. Te vejo na próxima vez. 13. Projeto 10 - Formulários com validação: Tudo bem, então é hora de começar a trabalhar em nosso próximo projeto Neste vídeo, criaremos formulários de login e inscrição Atualmente, criamos formulários de login e inscrição em quase todos os sites. Então, esse tipo de projeto vai ser interessante e útil para você, porque quando você trabalha em seus projetos, você deve saber como lidar com essas coisas. Antes de começarmos a escrever o código, vamos prosseguir e descrever o projeto. Então, aqui temos dois botões diferentes, faça login e inscreva-se no canto superior esquerdo da página. Então temos aqui o título. Por padrão, ele exibe o login , mas o programa usando JavaScript. Então, abaixo, tínhamos alguns campos de entrada e um botão de envio. Por padrão, são exibidos campos de entrada para fazer login. Mas se eu clicar no botão Inscrever-se , obteremos aqui os campos de entrada para registro. Além disso, o projeto inclui a validação do formulário. Por exemplo, se eu deixar os campos de entrada vazios e clicar no botão enviar, receberemos as mensagens de erro dizendo que o e-mail e a senha são obrigatórios. Se eu sentir, por exemplo, uma das entradas, digamos a senha e clique no botão enviar Em seguida, o campo de entrada terá uma borda verde, o que significa que inserimos dados válidos e o InputField Ok, então o projeto responderá a diferentes tamanhos de tela Se eu inspecionar a página e mudar para o modo responsivo, você descobrirá que o projeto é Construímos este projeto para um tamanho de tela extra grande. Estou no tamanho da tela com 1920 peças de largura e 1080 pixels de altura Portanto, se você estiver usando um tamanho de tela relativamente menor do que o do projeto, pode não parecer muito bom durante o tutorial, mas não se preocupe no final do dia, nós o tornaremos responsivo Enquanto isso, você pode alternar para o modo responsivo, definir a largura e a altura para o tamanho de tela extra grande. E me siga. Como dissemos, o projeto será construído com base em HTML, CSS e JavaScript. Então, espero que você já conheça algumas noções básicas dessas três tecnologias Acho que estamos prontos para começar. Eu criei uma nova pasta na área de trabalho chamada login, formulário de inscrição, que agora está vazia Vamos abri-lo no código VS e criar os arquivos de trabalho para HTML, CSS e JavaScript. Precisamos do index.html, depois do style.css e do script.js. Em seguida, abra o arquivo index.html e insira aqui o documento HTML básico. Para isso, vou usar uma animação. Vamos colocar aqui um ponto de exclamação e pressionar Tab ou responder Ok. Vamos mudar o título. Vou inserir seu formulário de login e inscrição. E depois disso, vamos vincular os arquivos CSS e JavaScript. Vou abrir a tag do link, especificar o caminho do arquivo CSS. Então, para vincular o arquivo JavaScript, vou abrir a tag de script corretamente, sobre o corpo e o atributo fonte. Vamos especificar o caminho do arquivo. Por fim, vou executar o projeto no navegador. Para isso, vamos usar um dos pacotes de código do VS chamado Live Server. Isso nos permite executar o projeto mentido no navegador e fazer atualizações sem atualizar a página todas as vezes Assim, você pode instalar e usar esse pacote. Tudo bem, vamos colocar o editor e os navegadores lado a lado E comece. Como sempre, vou começar a criar marcação HTML. Então, vamos abrir a tag div, que será o contêiner Em seguida, vou inserir seu elemento de cabeçalho H1 com um título de classe O título consistirá em dois elementos de extensão diferentes. Vamos abri-lo com o título da classe, abranger um, instituir o sinal de texto e, em seguida, criar um segundo elemento de extensão com cabeçalhos de classe para inserir aqui Isso é tudo sobre o título. Em seguida, vou criar botões. Então, vamos abrir a tag div, que será o invólucro dos botões Vou atribuir a ele botões de classe. Em seguida, insira fones de ouvido e elementos com o sinal de classe em BTN Vamos inserir seu login. Então eu vou duplicar essa linha de código e mudar o nome da classe Precisamos nos inscrever e nos inscrever. Em seguida, vou criar um formulário, mas antes disso, vamos inserir aqui uma tag div que será o plano de fundo do formulário Quero dizer o triângulo como a classe científica para g. Então vou abrir a tag do formulário. Ele terá duas classes diferentes. O primeiro será formado. Quanto ao segundo, vamos inserir seu login. No geral, teremos um único elemento de formulário com quatro campos de entrada diferentes. E conseguiremos exibir, fazer login e inscrever peças usando JavaScript como tag div aberta, que será o invólucro do campo de entrada e do Vamos atribuir a ele o invólucro de entrada do formulário de classe. Usaremos o parágrafo para exibir uma mensagem de erro. Vamos inserir aqui o elemento de entrada com textos de texto. Além disso, vou adicionar alguns atributos atribuídos às entradas do formulário do cluster Em seguida, precisamos do id, que será o nome de usuário. Por fim, vamos usar um atributo de espaço reservado para desvalorizar seu nome Ok, é isso sobre o elemento de entrada. Vamos criar o parágrafo com a mensagem da classe. Por padrão, vou inserir aqui a mensagem de erro. Mas, eventualmente, definiremos as mensagens de erro do JavaScript. Então, o primeiro campo de entrada é criado. Vamos duplicar o elemento três vezes e depois fazer algumas alterações Para a segunda entrada, precisamos de um e-mail de identificação. Altere também o atributo do espaço reservado, insira seu endereço de e-mail Em seguida, teremos a entrada para a senha. Então, vamos mudar o tipo, torná-lo uma senha e também alterar os atributos de ID e espaço reservado Precisamos de uma senha para os dois. Ok? A última entrada será para confirmação da senha. Então, vou fazer o tipo da entrada novamente, senha. Quanto ao documento de identidade, será o passaporte para. Finalmente, altere o atributo do espaço reservado, vou fazer com que ele confirme a senha Tudo bem? O último elemento que vamos criar no documento HTML será um botão de envio. Então, vamos abrir o elemento de entrada com o tipo submit. Adicione também aqui o valor enviado. E, finalmente, use seu formulário de classe btn. Tudo bem, então é isso em relação à marcação HTML. Agora temos que começar a escrever o CSS. Em primeiro lugar, vamos criar alguns estilos comuns e redefinidos. Vamos selecionar cada elemento usando um asterisco e eliminar a margem e o preenchimento padrão Vou definir os dois como zero. Além disso, vamos definir o tamanho da caixa de borda e também eliminar o contorno padrão de cada elemento Vamos definir o esboço como nenhum. Em seguida, vou mudar a família de fontes. Ao longo deste tutorial, usaremos uma das fontes do Google. Então, vamos ao site do Google Fonts e pesquisar uma fonte chamada console ladder Em seguida, selecione todos os estilos diferentes aqui. Pegue o link e cole-o no elemento principal. Vamos mudar a família de fontes. Isso é inseguro na escada do console e no monoespaço. Isso é bobagem sobre os estilos comum e redefinido. Vou usar a RAM como unidade de medida neste projeto. No momento, um rem é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 Por padrão, quero converter uma RAM em dez pixels. E para isso, temos que diminuir o tamanho da fonte dos elementos HTML. Vamos fazer com que seja 62,5%. Então, como você pode ver, os elementos ficaram menores. Vamos cuidar do contêiner. Vamos selecioná-lo. E na primeira definição de largura e altura, vou definir com 200 por cento. Quanto à altura, vou configurá-la para 100% da janela de visualização Em seguida, vou centralizar o conteúdo. E para isso, vamos usar o flexbox. Precisamos mudar a direção. Vamos fazer uma coluna. E então, para colocar o conteúdo no centro, precisamos justificar o centro do conteúdo e alinhar o centro Ok? Então, os elementos são colocados no centro e, com o contêiner, terminamos. Vamos seguir em frente e personalizar o título. Antes de tudo, vamos cuidar de sua posição. Eu vou movê-lo para cima. Então, vamos atribuir a uma posição absoluta. E então defina a posição superior, faça com que cinco rampas sejam consideradas, o cabeçalho seja posicionado e agora vou estilizá-lo primeiro Vamos mudar o tamanho da fonte, torná-la com sete RAM. Em seguida, vou deixar a fonte mais clara usando a espessura da fonte 300. Também mude a cor, faça com que seja Três e cinco, três e cinco Em seguida, vou criar algum espaço entre as letras usando o espaçamento entre letras em um quarto Também crie algum efeito de sombra. Usando sombra de texto. Vamos atribuir valores reais de 0,2, 0,2, 0,5 RAM e a cor AAA No momento, isso é tudo sobre o título. Vamos seguir em frente e personalizar os botões. Primeiro, vou definir suas posições. Então, vamos selecionar elementos div do wrapper, que têm os botões do nome da classe, e definir sua posição Em seguida, defina as propriedades superior e esquerda. Vou colocar os dois em cinco rampas. Então, as caixas são colocadas no canto superior esquerdo da página E a seguir, vou colocá-los verticalmente em uma coluna. Para isso, vamos usar o flexbox. Precisamos da coluna de direção flexível e flexível da tela. Ok, vamos seguir em frente e selecionar os botões. Estou no próprio elemento do botão. Em primeiro lugar, vou definir a largura e a altura. Vamos fazer com dez RAM. Quanto à altura, vou configurá-la para RAM. E também mude a cor de fundo, torne-a branca. Depois disso, vamos mudar o tamanho da fonte. Eu vou chegar até Ram. Também mude a cor. Vamos usar novamente a cor F zero, três-cinco, três-cinco. Então eu vou me livrar da borda padrão. Vamos defini-lo como nenhum. Além disso, vou fazer os cantos das caixas ao redor delas usando o raio da borda com um valor de Em seguida, vamos criar algum espaço entre as letras usando o espaçamento entre letras de 0,1 RAM Então, vou criar um pequeno efeito de sombra. Então, vamos usar a sombra com os valores 0,3, 0,3 RAM em vez de 0,8 rem e a cor E. Então precisamos de algum espaço na parte superior e inferior dos botões. Então, vamos usar margem com os valores um, RAM e zero. E, finalmente, vamos mudar o tipo de curso que fará com que seja válido. Tudo bem? Então, os botões estão estilizados e agora temos que cuidar do formulário Vamos prosseguir e selecioná-lo. Vou fazer com que o elemento do formulário seja um contêiner flexível. Portanto, precisamos do display flex. E também vou mudar a direção. Vamos definir a direção flexível para ligar. Em seguida, vamos cuidar do invólucro de entrada do formulário. Mas antes disso, quero esconder esses parágrafos por um tempo Então, vamos selecioná-los e atribuir a eles nenhuma exibição Depois disso, vamos selecionar o invólucro de entrada do formulário. Vou criar algum espaço na parte superior e inferior usando margem. Vamos configurá-lo para 1,5 rem e zero. Tudo bem, vamos prosseguir e selecionar o próprio elemento de entrada. E defina para a largura e a altura do outono. Vou definir a largura para 50 RAM como altura total. Vamos fazer com que sejam cinco RAM. Também altere a cor de fundo, torne-a branca. Então eu vou aumentar o tamanho da fonte. Vamos fazer com que seja 1,7 rem. Em seguida, crie algum espaço nos lados direito e esquerdo dentro das entradas usando preenchimento Vamos fazer com que seja 0,2 Por fim, vamos criar algum espaço entre as letras usando menos pontos de espaçamento para aumentar a velocidade Então, esses eram os estilos comuns das entradas. As entradas e o botão de envio. Agora vou selecionar a entrada do formulário em si. Vamos criar alguma sombra usando a sombra da caixa com o ponto de valores que executamos. Corremos 0,5 rem. Em seguida, precisamos chamar ou E. E também vou adicionar aqui mais um valor. Eu quero criar uma sombra dentro da entrada. E para isso, temos que usar um valor chamado inserção. Em seguida, vamos mudar a cor. Você vê sua cor 888. Tudo bem, depois disso, vamos eliminar a borda padrão para todos os elementos de entrada Então, vou definir a fronteira como nenhuma. E também vou fazer com que os cantos arredondados usando o raio da borda sejam o valor de sejam o valor Ok? Então, agora, os elementos de entrada têm uma sombra de caixa dentro dos campos, e eu também vou criá-la fora do elemento Para isso, vamos atribuir a propriedade box shadow ao invólucro de entrada do formulário São os mesmos valores de verdade, 0,5 RAM três vezes. E a cor é Além disso, precisamos do raio com o valor cinco rampa Agora, cada campo de entrada tem uma sombra de caixa interna e externa, que faz com que tenham uma boa aparência. Vamos continuar e cuidar desse botão de envio. Vemos aqui apenas o envio de texto. Então, vamos seguir em frente e selecionar esse elemento. E primeiro, crie uma sombra usando a sombra da caixa. Vou passar os valores de 0,5 rem, 0,5 RAM, uma RAM e as cores D, D, D. Além disso, vamos mudar a cor do texto. Vamos usar novamente a cor vermelha em 03535. Em seguida, vou criar algum espaço na parte superior e inferior usando margem. Vamos configurá-lo para dois ram e zero. Então, vamos criar algum espaço entre as letras. Use pontos de espaçamento lateral para correr. E, em seguida, deixe a fonte em negrito usando o peso da fonte em negrito. O botão de envio parece bom. Em seguida, quero criar um pequeno efeito de foco. Vou aumentar ligeiramente as sombras em massa quando passarmos o mouse sobre o botão Então, vamos selecionar Formulário btn com o mouse. E atribuiu a sombra da caixa de dentes, onde os valores 0,5 RAM, 0,5 RAM para RAM e a cor d, d, d. Ok? Portanto, a última coisa que precisamos fazer antes de adicionar a funcionalidade ao nosso projeto é criar um plano de fundo. Como você sabe, temos um elemento div vazio no documento HTML com a forma de classe PG Então, vamos seguir em frente e selecionar esse elemento. E primeiro, vamos definir sua posição como absoluta. Em seguida, vou definir a largura e a altura, ambas para 65 RAM. Use também aqui a sombra da caixa com 1,5 rodada três vezes e a cor adicionada Finalmente, quero girar esse elemento 45 graus e isso criará um efeito triangular Então, vamos usar Transformar com a função de rotação e inserir aqui 45 graus Então, como você pode ver, terminamos com o plano de fundo. Na verdade. No momento, temos um pequeno problema aqui. Não consigo me concentrar nas entradas. Então, para corrigir isso, vamos atribuir ao elemento do formulário Z uma propriedade de índice com um valor maior, digamos 100 Tudo bem, agora o problema está resolvido e, na verdade, com esta Tailândia, terminamos por enquanto Precisamos adicionar algumas funcionalidades ao projeto. Antes de começarmos a escrever um pouco de JavaScript, quero fazer algumas coisas e CSS. Depois de focarmos as entradas, quero aumentar a sombra da caixa dentro do InputField Então, vou selecionar a entrada do formulário com uma pseudoclasse de foco Em seguida, insira a sombra da caixa com os seguintes valores. Cinco rampas, 0,5, rem uma RAM do que a cor E. E também precisamos aqui do valor definido Em seguida, use a transição. Quero atribuir a propriedade de transição a todos os elementos de entrada, incluindo o botão de envio, porque ela também tem um efeito de sombra de caixa, no entanto, é definida como transição com os valores box shadow e 0.3 s. Ok, agora temos um efeito muito melhor Vou mudar o curso do tipo do botão de envio. Então, vamos fazer com que seja um ponteiro. Tudo bem, agora é hora de adicionar algumas funcionalidades ao projeto Vamos dar uma olhada na versão final. A propósito, não temos aqui o fundo triangular porque o projeto finalizado é totalmente responsivo para nós Vou programar esses dois botões. Como você pode ver por padrão, o botão de login tem uma cor de fundo diferente E quando clicarmos no botão Inscrever-se , as cores de fundo mudarão. Além disso, a segunda parte do título está mudando de acordo. E também os campos de entrada adequados para exibir OnClick. Nós vamos fazer essas três coisas. Primeiro, vamos nos livrar da cor de fundo branca padrão desses botões. Em seguida, selecione o botão de login e altere a cor de fundo Vou usar sua cor E7, E7, E7. Em seguida, selecione o botão Inscrever-se e torne a cor de fundo branca. Tudo bem, agora vou mudar as cores de fundo ao mudar as cores de fundo ao Vamos para o arquivo script.js. Portanto, precisamos anexar aos dois botões os ouvintes de eventos com o evento de clique Depois de clicarmos no botão Inscrever-se, precisamos adicionar ao contêiner uma nova classe que será usada em CSS Definiremos novos estilos com a ajuda dessa classe. Então, primeiro de tudo, vamos selecionar o contêiner. Vou criar um novo contêiner de variáveis. Em seguida, selecione o contêiner usando o método seletor de consulta. Precisamos especificar aqui o contêiner da classe. Depois disso, vou selecionar o botão de inscrição e anexá-lo ao ouvinte do evento Então, vamos continuar e usar novamente a consulta, selecionar um método e especificar aqui o nome da classe, inscreva-se btn. Em seguida, anexe-o no ouvinte do evento com um evento de clique. E também temos que passar aqui a função de retorno de chamada, que será executada assim que clicarmos no botão Quando clicamos no botão Inscrever-se , precisamos adicionar ao contêiner uma nova classe. Portanto, precisamos aqui do contêiner, seguido pela propriedade class list, que armazena todas as classes que o elemento possui. Então, para adicionar a classe ao contêiner, vou usar um método chamado add. Dentro dos parênteses. Temos que especificar o nome da classe. Vamos chamar isso de mudança. Tudo bem, vamos ao arquivo CSS e selecionar o botão de inscrição, mas com a mudança de classe Em seguida, defina a cor de fundo para E7, E7, E7. Agora, se eu clicar no botão Inscrever-se , a cor de fundo mudará. Mas, na verdade, isso não é suficiente. Como você pode ver, o botão Entrar ainda tem a cor de fundo cinza. Então, vamos voltar ao arquivo JavaScript. Agora temos que anexar o botão de login e o ouvinte do evento E precisamos remover a mudança de classe do contêiner. Então, vamos selecionar o botão Entrar usando o método querySelector e, em seguida, anexar a ele o ouvinte de eventos Vamos fazer uma pausa aqui, clicar em evento e também na função de retorno de chamada Então, como dissemos, temos que remover a classe alterada no contêiner. Vamos seguir em frente e pegar essa linha de código. E em vez do método chamado add, vamos usar remove. Em seguida, vá para o arquivo CSS. Ao contrário do botão Inscrever-se, selecione o botão de login com a turma, altere e defina a cor de fundo para Agora, como você pode ver, tudo parece bem. As cores do plano de fundo estão mudando. A única coisa que precisava fazer era adicionar um efeito de transição aos botões. Então, vamos usar a transição com a cor de fundo e com a duração de 0,3 s. Tudo bem, agora temos um efeito muito melhor Em seguida, vou cuidar do título. Uma vez que pudéssemos fazer botões, devemos alterar a segunda parte do título adequadamente. No começo, vou alterá-lo sem nenhum efeito. E então, quando conseguirmos alterar o conteúdo, adicionaremos alguns efeitos interessantes. Vamos para o arquivo JavaScript. E se for o primeiro, vamos selecionar o segundo elemento de extensão no título. Vou criar uma nova variável. Vamos chamá-la de Headings Part 2. Em seguida, selecione os elementos de extensão usando o método querySelector. Vamos fazer uma pausa aqui. O título do nome da classe abrange dois. Então, para alterar o conteúdo dos elementos, vou usar uma das propriedades chamada conteúdo de texto. Portanto, precisamos de arenque spawn two, seguido pela propriedade textContent, e temos que atribuí-la Vamos copiar esse código. Cole-o abaixo e mude para E. Então, se eu clicar nos botões, o conteúdo mudará de acordo. Tudo funciona bem. E agora, como eu disse, vou adicionar alguns efeitos interessantes a essa mudança. Vamos dar uma olhada no projeto finalizado mais uma vez. Então, quando eu clico nos botões, a caixa branca se move da direita para a esquerda e cria um bom efeito. Essa caixa branca será a sequência dos pseudo-elementos Primeiro de tudo, vamos criar esses elementos. Precisamos esconder o ponto dois, seguido pelos pseudoelementos F2 Primeiro, vamos definir um conteúdo. Eu vou esvaziá-lo. E então defina a posição como absoluta. Vou definir a posição desse elemento de acordo com seu pai, que é o próprio elemento span. Então, vou atribuir ao elemento span a posição relativa Em seguida, defina a largura e a altura da caixa. Vou definir os dois como 100% e também fornecer alguns fundos temporários diferentes da cor branca, porque quero tornar a caixa visível Vamos usar aqui a cor cinza claro. Então, agora a caixa está visível. Em seguida, vou definir sua posição Por padrão, vou colocá-la no lado direito. Vamos definir a posição correta para -100%. Tudo bem, então quando eu clico no botão Inscrever-se, essa caixa deve se mover para o lado esquerdo E para conseguir isso , vou usar novamente a mudança de classe. Seguidos pelos títulos, os títulos abrangem dois com pseudo-elementos posteriores Para mover os elementos, vou definir a posição correta em 200 por cento. Agora, se eu clicar nos botões, a caixa se moverá. Vamos adicionar a isso uma pequena transição. Vamos atribuir a ele, certo? E 0,6 s. Agora a caixa está se movendo com uma transição suave. É possível ver quando a caixa se move para o lado esquerdo e acaba no topo do cabeçalho. Estou no primeiro elemento de extensão. Portanto, precisamos corrigir isso e podemos manipular com a propriedade z-index Vamos selecionar o primeiro elemento de extensão, que tem o título de classe na coluna 1, e definir a propriedade do índice como dez. Ok, agora o problema está resolvido e a única coisa que precisa fazer é adicionar algum tempo de atraso antes que o continente seja alterado. Porque agora, no início, o conteúdo está mudando e depois a caixa está se movendo. E, na verdade, não parece bom. Vou criar um atraso usando uma das funções integradas chamada setTimeout Vamos ao arquivo script.js e inseri-lo aqui. Defina o tempo limite. Essa função aceita dois argumentos. A primeira é a função de retorno de chamada, que é executada após algum tempo. E a quantidade desse tempo será o segundo argumento. Vamos executar essa linha de código. Quanto ao tempo limite, você precisa especificá-lo em milissegundos Então, vamos inserir um ano, 200. Vamos copiar esse código e colá-lo aqui. Vou mudar para E. Então, agora, se eu clicar nos botões, o efeito funcionará bem. A única coisa que precisava fazer era se livrar dessa cor temporária e entrevistar a cor branca. Ok, então agora temos um efeito agradável e legal. Tudo bem, então, com o título, terminamos e agora temos que cuidar dos campos de entrada Por padrão, precisamos exibir as entradas de e-mail e senha n. Uma vez que pudéssemos ser o botão Inscrever-se, então temos que mostrar novamente o nome e o sobrenome mais Então, vamos ocultar o primeiro e o último campos de entrada. Vou selecioná-los usando o seletor f child. Na verdade, vou selecionar o invólucro de entrada do formulário. Precisamos aqui de uma criança. Em seguida, duplique esse seletor e altere o número. Insira aqui para. Então, para esconder esses elementos, vou usar visibilidade oculta e opacidade zero. Como você pode ver, as entradas estão ocultas, mas agora o botão de envio está muito longe dessas entradas Então, vamos cuidar disso. Vou definir a posição como relativa. E então, para mover o elemento a posição superior com um valor menos seis Agora, quando clicamos no botão Inscrever-se , temos que fazer algumas coisas. Precisamos exibi-lo de volta. A primeira e a última entrada. Vou duplicar esse código. Em seguida, vamos adicionar aos dois seletores a mudança de classe. Em seguida, precisamos mudar os valores. Em vez de visibilidade oculta, precisamos de visibilidade visível e opacidade uma. Além disso, precisamos mover esse botão de envio de volta à sua posição padrão. Então, vamos selecionar o botão Enviar com a mudança de classe e a configuração posicionadas em uma rampa. Então, se clicarmos no botão Inscrever-se , tudo funcionará bem. Agora, para tornar essa mudança mais agradável, temos que usar a transição No início. Vamos adicionar uma transição aos rappers de entrada Precisamos de todos os valores e 0,3 s. Então precisamos fazer a transição com a mudança de classe. E também precisamos que você use algum tempo de atraso. Então, quando clicamos no botão Inscrever-se , essa transição funcionará. E quando clicarmos no botão Entrar, essa transição funcionará Tudo bem, então com os campos de entrada, terminamos. Vamos adicionar uma transição ao botão de envio. Por padrão, vou definir a transição para o topo. Em seguida, a duração é de 0,3 s, e também o tempo de atraso de 0,3 s. E também precisamos de uma transição aqui com o valor superior e 0,3 s. Portanto, se eu clicar no botão Inscrever-se, botão Enviar se moverá suavemente Mas quando eu clicar no botão Entrar , não teremos nenhum efeito de transição. O motivo é que usamos transição com elementos de entrada. E, na verdade, esse seletor tem a precedência mais alta Então, vou me livrar da transição a partir daqui e adicionar sombra de caixa abaixo em ambos Então, agora, se eu testar, tudo funcionará perfeitamente. Ok. Então, a próxima coisa que precisamos fazer é validar todos esses campos de entrada Em primeiro lugar, vou selecionar todos os quatro elementos de entrada e armazená-los nas variáveis. Vamos criar a primeira variável, que será nome de usuário. Como se lembra, os elementos de entrada têm os IDs. Então, vou selecionar o nome de usuário usando o método get element by ID. Temos que passar o ID do nome de usuário. Vamos duplicar essa linha de código três vezes e alterar os nomes das variáveis e também os IDs. O segundo será o e-mail. Então também teremos senha e senha. Tudo bem, primeiro vamos verificar se os campos de entrada estão vazios ou não Eu vou criar uma função. Vamos em frente e ligue para verificar os campos obrigatórios. Vou usar aqui a função de seta. Essa função pegará um parâmetro que será uma matriz e incluirá todas as amplitudes Então, como parâmetro, vou inserir sua matriz de entradas Portanto, para verificar se os campos de entrada estão vazios ou não, primeiro precisamos percorrer a matriz. E para isso, vou usar um dos métodos auxiliares de matriz chamados para H. É preciso um argumento que será a função de retorno de chamada Essa função em si usa um parâmetro e eu vou passar sua entrada. Será o elemento de entrada atual durante o loop. Tudo bem, agora precisamos verificar se o valor da entrada está vazio ou não Portanto, precisamos usar declarações if else. E como condição, vou passar aqui, o valor do ponto de entrada triplo é igual a uma string vazia Na verdade, o valor de entrada não é suficiente aqui porque se inserirmos algo nos campos de entrada com um espaço em branco , esse espaço em branco será reconhecido como a parte do valor que não precisamos Então, para evitar esse tipo de coisa, quero dizer, para ignorar o espaço em branco, podemos usar um dos métodos chamados Ok? Portanto, se essa condição for verdadeira, teremos que exibir uma mensagem de erro. Vamos colocar aqui o comentário. E se for falso, então precisamos de outra declaração na qual temos que mudar a cor da borda das entradas para verde Então, vamos instituir um sucesso por um tempo. Então, para fazer essas duas coisas, vou criar duas funções diferentes. Vamos começar com a mensagem de erro. Vou criar uma nova função. Vamos chamar isso de erro. Serão necessários dois parâmetros. O primeiro deles serão os elementos de entrada. Quanto ao segundo , será uma mensagem. Então, agora precisamos ter acesso ao invólucro de entrada do formulário, que é um elemento pai da entrada Adicionaremos uma nova classe ao invólucro. E com a ajuda dessa nova turma, quem conseguirá exibir uma mensagem de erro. Ok, vamos continuar e criar uma variável. Vou chamá-lo de invólucro de entrada. Portanto, para obter acesso ao invólucro de entrada, precisamos de uma entrada seguida pela propriedade chamada elemento pai Agora temos que adicionar uma nova classe ao invólucro de entrada. E para isso, vou usar uma das propriedades chamada className Vamos inserir sua classe. Digamos que seja um erro. Na verdade, esse elemento tem sua própria classe, que é um invólucro de entrada de formulário Se morarmos aqui, apenas um erro , isso substituirá a classe existente Então, para evitar isso, vamos inserir aqui um formulário capaz de fazer rap também. Tudo bem, a seguir vou selecionar o parágrafo. Podemos fazer isso usando o documento, mas neste caso, o primeiro parágrafo encontrado será selecionado. Então, em vez de documentos, vou usar um invólucro de entrada seguido pelo método seletor de consulta Dentro do parêntese, temos que especificar a classe da mensagem do parágrafo Tudo bem, agora precisamos alterar o conteúdo da mensagem de erro Para isso, vamos usar a propriedade textContent e ela deve ser igual à A função para a mensagem de erro está pronta. Podemos chamá-lo abaixo dentro da instrução if. Deve levar dois argumentos. A primeira também será a entrada. A segunda será a mensagem. Então, vamos voltar atrás, porque vou usar modelos literais Então, vou passar a você o ID da entrada. Como você sabe, todas as quatro entradas têm os IDs. Em seguida, deve ser seguido pelo texto obrigatório. Tudo bem? Para executar esse código, temos que chamar essa função. E isso deve acontecer assim que enviarmos o formulário. Portanto, precisamos anexar aos elementos do formulário o ouvinte de eventos com um evento de envio Primeiro, vamos selecionar o elemento do formulário. Vamos criar uma nova variável e selecionar os elementos do formulário usando o método seletor de consulta Em seguida, anexado a ele e ao ouvinte do evento. Vou passar em seu evento de envio. E também a função de retorno de chamada, que será executada assim que enviarmos o formulário No início, vamos executar algo no console, digamos que enviado. Portanto, se eu clicar no botão enviar, seremos enviados no console. Mas, como você pode ver, está piscando. E isso acontece porque, por padrão, o botão Enviar recarrega a página Para evitar esse comportamento, precisamos usar um método chamado prevent default e anexá-lo ao objeto do evento. Então, vamos passar objetos pares para você e, em seguida, usar o método padrão de prevenção, que seria anexado ao objeto de evento. Agora, se eu clicar no botão enviar , o problema será corrigido. Então, agora podemos chamar a função de verificação de campos obrigatórios. Deve receber um argumento que será uma matriz de campos de entrada. Então, vamos passar todas as quatro entradas. Nome de usuário, e-mail, senha e senha também. Ok, então, neste momento, não veremos as mensagens de erro porque precisamos escrever um pouco de CSS. No momento, os parágrafos estão ocultos, então vou torná-los visíveis. Vamos nos livrar do display none. Então, vemos aqui mensagens de erro codificadas. E se eu clicar no botão enviar , receberemos as mensagens de erro, que acabamos de definir no JavaScript. Se eu inserir alguns caracteres em uma das entradas , receberemos uma mensagem de erro do campo de entrada vazio Vamos continuar e personalizar o parágrafo. Em primeiro lugar, vou definir sua posição como absoluta. Então, para posicionar parágrafo de acordo com o invólucro de entrada, vamos atribuir a ele a posição relativa Em seguida, adicione mais alguns estilos ao parágrafo. Vou definir a posição esquerda e chegar à RAM. Em seguida, altere o tamanho da fonte coloque um ponto na RAM. Além disso, vou criar a pasta de fontes usando o peso de fonte 700 Em seguida, crie algum espaço entre as letras usando o espaçamento entre letras 0,1 RAM. Também transforme texto em maiúsculas. Em seguida, crie algum espaço na parte superior do elemento usando a margem superior de uma classificação. E por último, mude a cor, torne-a F5, F5, E5 Tudo bem, então o parágrafo é personalizado. Por padrão, ele deve estar oculto e precisamos exibir mensagens de erro em Enviar. Então, vamos esconder os parágrafos usando visibilidade oculta e opacidade Agora, por padrão, as mensagens de erro estão ocultas e , para exibi-las, precisamos usar o erro de classe. Seguido pela mensagem. Temos que passar por aqui, visibilidade visível e também opacidade. Por fim, vamos usar a opacidade do Transition Institute e a duração de 0,3 s. Então, se eu clicar no botão enviar, receberemos nossas mensagens com Na verdade, temos aqui um pequeno problema, a meu ver, com o último elemento de entrada, temos uma mensagem de erro dizendo que a senha é necessária. E, na verdade, isso não faz sentido. Eu quero mudar essa mensagem. Para isso, precisamos usar outra instrução if na qual devemos verificar se o ID da entrada também é igual à senha. Então, vamos colocar essa condição aqui. Então, se isso for verdade, então temos que chamar a função chamada erro. Temos que passar suas entradas e a mensagem de erro. A confirmação da senha é necessária. Em seguida, precisamos usar a instrução L. E temos que passar essa linha de código aqui. Agora, se testarmos, tudo funcionará bem. No momento, com as mensagens de erro, terminamos. Vamos seguir em frente e cuidar do sucesso. Se inserirmos alguns dados nos campos de entrada , teremos que tornar a borda da entrada verde. Para isso, vou usar a técnica similar. Vamos criar uma nova função chamada sucesso. Será necessário um parâmetro que será a entrada. Então, novamente, tivemos que acessar o invólucro de entrada e adicionar a ele uma nova classe Vamos criar um invólucro de entrada variável, que deve ser igual ao elemento pai do nó de entrada Em seguida, temos que adicionar uma nova classe do invólucro de entrada. Precisamos do nome da classe do ponto do invólucro de entrada. E, novamente, temos que passar aqui duas classes. A primeira é a classe do invólucro de entrada, quero dizer o invólucro de entrada do formulário E então temos que superar seu sucesso. Ok, vamos ao arquivo CSS e selecionar o elemento de entrada com sucesso de classe e dar a ele uma borda verde. Vamos fazer uma pausa aqui. 0,1 era sólido, a cor de 675. Ok, então vamos ao arquivo JavaScript e chamar a função dentro da instrução else. Esta função receberá um argumento que será inserido. Se eu sentir a entrada e clicar no botão enviar , obteremos uma borda verde sem nenhuma mensagem de erro. Tudo bem? Na verdade, temos que resolver alguns problemas para você. Se eu clicar no botão Enviar e exibir o formulário de inscrição, todos os campos de entrada terão as mensagens de erro Na verdade, não precisamos deles quando verificamos um dos fóruns e depois mudamos para outro, as mensagens de erro devem sumir. Para o formulário de login, precisamos de uma matriz diferente como argumento da função de verificação de campos obrigatórios Precisamos de apenas duas entradas, e-mail e senha. Quanto ao formulário de inscrição, precisamos de todos o 14. Projeto 11 - Calendário: Tudo bem, então vamos prosseguir e cuidar de nossos próximos projetos Nesta seção, criaremos o calendário. Portanto, temos aqui um fundo escuro em tela cheia e, no centro da página, vemos o calendário Ele nos mostra o mês atual com a data atual. Abaixo, temos os dias da semana seguidos pelo mês inteiro. Você pode ver que o dia atual do mês está destacado. Além disso, temos aqui duas flechas. Se clicarmos para baixo, navegaremos para a próxima matemática e para a anterior Assim, você pode conferir qualquer uma das datas no futuro ou no passado. Tudo bem, então é isso que vamos criar. Eu criei uma nova pasta na área de trabalho chamada calendário. Vamos prosseguir e abri-lo no código VS. Vou criar os arquivos iniciais para HTML, CSS e JavaScript. Vamos chamá-los de index.html. Em seguida, style.css e script.js. Em seguida, abra o arquivo index.html e crie o documento HTML básico. Eu vou usar o animate. Vamos colocar aqui o ponto de exclamação e pressionar Enter ou tab Aqui vamos nós. Vamos mudar o título. Vou inserir seu calendário. Em seguida, vou vincular os arquivos CSS e JavaScript ao HTML. Vamos abrir a tag do link e especificar o caminho do arquivo. Quanto ao JavaScript, vou abrir a tag de script logo acima da tag do corpo de fechamento. E então precisamos indicar o caminho do arquivo no atributo fonte. Finalmente, vou lançar o projeto no navegador. Para isso, vou usar um dos pacotes CSS chamado servidor ativo. Isso nos permite executar o projeto durante a vida útil do navegador e fazer alterações e atualizações fazer alterações e atualizações sem atualizar a página a cada vez Eu recomendo baixar e instalar este pacote Tudo bem, por fim, vou colocar o editor e o navegador lado a lado o editor e o navegador lado a lado, assim. E comece. Primeiro, vou criar a marcação HTML. Usaremos alguns dados estáticos, mas, finalmente, criaremos esses dados a partir do JavaScript dinamicamente Vamos abrir a tag div, que será o contêiner Então, precisamos de outro padrão, o próprio calendário. Portanto, o calendário consistirá em três partes principais. Temos um mês atual com esse fundo verde. Depois teremos os dias da semana e , finalmente, os dias do mês. Então, vamos abrir a tag div. Vou atribuir a ela a boca da classe. No começo, vou instituir a seta esquerda. Ele deve ser representado pelo ícone Font Awesome. Portanto, precisamos trazer o Font Awesome CDN. Então, vamos prosseguir e pesquisar por Font Awesome CDN JS. Vá para o primeiro link, selecione CSS e pegue o link aqui. Precisamos abrir a tag de link no elemento principal e colar o link como o valor do atributo de referência h. Ok, então vamos abrir o elemento I com as seguintes classes. Precisamos de F a, S, F em um ângulo à esquerda. Além disso, vou atribuir a ela outra classe para JavaScript. Vamos chamar isso de preparação. Quero dizer anterior. Em seguida, precisamos do elemento div, que incluirá o nome do mês e também a data em que foi atribuído à data da aula Em seguida, vou passar seu elemento de título H1 com o conteúdo que pode ser seguido pelo parágrafo em que teremos o dia da semana, sexta-feira, depois deverá ser seguido pelo mês 29 de maio e, em seguida, precisaremos do ano Então, novamente, agora essas são as datas codificadas, mas vamos torná-las dinâmicas Em seguida, precisamos inserir aqui outra seta. Estou na seta para a direita nos próximos meses. Então, vou abrir o elemento I com a classe FAS, ângulo FAA, certo? E também precisamos ouvir a próxima aula. Tudo bem, então a primeira parte do calendário está pronta. Vamos passar para a próxima parte. Temos que criar os dias da semana. Então, vamos abrir a tag div, que será o invólucro Vamos atribuir dois dias da semana e depois inserir todos os sete dias depois inserir todos os sete Vou inserir sua tag div com um conteúdo. Dom Sunday Em seguida, duplique-o seis vezes e mude os dias da semana Precisamos de segunda, terça. Então teremos quarta, quinta, sexta e, finalmente, sábado. Tudo bem, então com a segunda parte, terminamos. Vamos seguir em frente e criar a terceira parte na qual teremos os dias do modelo atual. Vamos abrir a tag div com os dias de aula. Então, primeiro de tudo, vou inserir aqui alguns dias do mês anterior. Vamos abrir a tag div com uma preparação para a aula, data e posterior 26 Em seguida, duplique esse elemento div quatro vezes e altere as datas. Precisamos de 27. Em seguida, teremos 28, depois 29,30. Ok. O próximo são os dias de um a 31. Não vou escrever cada data separadamente. Então, para simplificar esse processo, vou usar m it, precisamos da tag div, depois um asterisco E então temos que inserir o cifrão dentro das chaves encaracoladas Então, vamos lá. Temos os números de um a 31. Além disso, vou instituir alguns dias a partir do próximo mês. Então, vamos criar desenvolvimentos com a turma na próxima data, instituir um, depois duplicá-lo cinco vezes e mudar os números de dois para seis Ok, na verdade, com a marcação HTML, terminamos. Agora temos que começar a personalizar o calendário. Em primeiro lugar, vamos criar alguns estilos comuns e redefinidos. Vou selecionar cada elemento usando um asterisco. Em seguida, vamos eliminar a margem e o preenchimento padrão dos elementos Vou definir os dois como zero. Além disso, vou definir o tamanho da caixa de borda. Em seguida, vou definir a família de fontes. Ao longo deste projeto, usaremos uma das fontes do Google. Então, vamos ao site do Google Fonts. Em seguida, procure areia movediça. Vou selecionar esses estilos diferentes. Em seguida, pegue o link e cole-o no elemento principal. Em seguida, vamos definir a família de fontes para cada elemento. Vou configurá-lo como areia movediça. San-serif. Tudo bem, então isso é sobre o reset e os estilos comuns Como você pode ver, eles são aplicados a todos os elementos da página. Ao longo deste projeto, vou usar uma RAM como unidade de medida. No momento, um rem é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 Eu quero converter 1 g em dez pixels. E para isso, temos que diminuir o tamanho da fonte dos elementos HTML. Vamos fazer com que seja 62,5%. Como você pode ver, os elementos ficaram um pouco menores. Ok, agora é hora de trabalhar no contêiner. Quero expandi-lo para a página inteira. Então, vamos selecioná-lo e definir a largura e a altura. Eu vou definir com 200 por cento. Quanto à altura, vamos torná-la 100% da janela de visualização. Então eu vou mudar a cor de fundo. Vamos usar sua cor 12121. E também mude a cor do texto, deixe-o claro usando a cor E. Em seguida, vou colocar o calendário no centro da página. E para isso, vamos usar o flexbox. Precisamos de display flex. Então, para centralização horizontal, vou usar justify-content Quanto à centralização vertical, precisamos alinhar o centro dos itens Tudo bem, isso é tudo sobre o contêiner. Em seguida, vou personalizar o calendário. Estou nos elementos tubulares que envolvem o conteúdo do calendário Em primeiro lugar, vou definir largura e altura. Vamos configurar com 245 RAM. Quanto à altura. Vamos fazer 50 até a rampa. Também vou mudar a cor de fundo. Vamos fazer cinco vezes e depois sete, vai ser a cor escura. E então vamos definir a sombra da caixa para 0,5 rampa três rem e o valor RGBA com uma cor preta e com opacidade Tudo bem, então com o elemento div do calendário, terminamos. Vamos seguir em frente e personalizar suas partes individuais. Vou começar com a boca Vamos selecioná-la e, primeiro, definir a largura, torná-la 100%. Em seguida, vou definir a altura para 12 RAM e mudar a cor de fundo. Faça com que seja 16756. Ok, em seguida, vou usar o flexbox para colocar os elementos na horizontal em uma linha e também para centralizá-los verticalmente. Vamos usar o display flex. Então, para criar algum espaço entre os itens, vamos usar o espaço de justificação de conteúdo entre eles E também precisamos alinhar o centro dos itens. Tudo bem, depois disso, vou criar algum espaço nos lados direito e esquerdo dentro dos elementos Para isso, vamos usar o preenchimento e defini-lo como zero na parte superior e inferior e para executar nos lados esquerdo e direito Além disso, precisamos alinhar o texto no centro. E, finalmente, use tax shadow com os valores 0,3, 0,5 RAM e o valor RGBA com a cor preta e com a opacidade Tudo bem, então, a seguir, vou estilizar os elementos individuais do elemento mouth div Vamos começar com as setas. Selecione o elemento I. Defina o tamanho da fonte para 2,5 rem. E também faça o ponteiro do cursor. Em seguida, temos a roupa do título H1, que nos mostra o mês atual Então, vamos seguir em frente e selecionar esse elemento. Vou mudar o tamanho da fonte. Vamos fazer com três RAM. Além disso, vamos deixar a fonte um pouco mais clara, definir a fonte como 400 do que transformar o texto em maiúsculas Em seguida, vou criar o espaço entre as letras. Vamos fazer com que aponte para a rampa. E, finalmente, crie algum espaço na parte inferior usando a margem inferior com o valor de uma rampa. Vamos prosseguir e, por fim, estilizar o parágrafo. A única coisa que vou fazer é aumentar o tamanho da fonte. Então, vamos selecioná-lo e definir o tamanho da fonte para 1,6 rampa. Tudo bem, então isso é tudo sobre a primeira parte do calendário Vamos passar para os dias da semana. Eu vou definir com 200 por cento. Em seguida, aumente a altura, faça cinco rem. E também vamos criar algum espaço usando o preenchimento. Vou defini-lo como zero nas extremidades superior e inferior. Ponto para correr nos lados direito e esquerdo. Em seguida, vou colocar os dias da semana horizontalmente em uma fileira e também centralizá-los Portanto, precisamos exibir, flexionar e alinhar o centro dos itens. Ok, então com o elemento wrapper div, terminamos. Em seguida, vamos personalizar os próprios dias da semana. Vou selecionar elementos div. Primeiro, vamos mudar o tamanho da fonte. Vou configurá-lo para 1,5 RAM. Então vamos nos divertir, um pouco mais leves, usando o peso de fonte 400 E crie algum espaço entre as letras usando espaçamento entre letras na rampa 0.1 Certo? Agora vou definir a largura de cada elemento div Como você sabe, a largura do calendário é igual a 45 rem. Criamos um pequeno preenchimento dentro do div id dos dias de semana que é igual a 2,4 RAM em ambos os lados. Quero dizer, nos lados direito e esquerdo, quero fazer com que a largura de cada elemento div seja um sétimo de toda a Então, vou usar a função calc. E precisamos dividir 44 pontos para ram por 744,2. Rem é a diferença entre a largura e o preenchimento. Espero que faça sentido para você. Ok, então, em seguida, precisamos centralizar o conteúdo de cada elemento div E para isso, vamos usar o flexbox. Vou configurar a tela para flexionar. Em seguida, precisamos justificar o centro de conteúdo e alinhar o centro dos itens Finalmente, vamos criar um pequeno efeito de sombra. Use sombra de texto com os valores 0,3, 0,5 rem, valor RGBA com uma cor preta e com a opacidade Tudo bem, então isso é tudo sobre os dias de semana. Vamos seguir em frente e cuidar dos dias do mês. Primeiro, vamos selecionar o elemento wrapper div, que tem dias de aula Vamos definir com 200 por cento. Em seguida, vou configurar a tela para flexível porque quero encerrar os dias. Então, vamos usar o envelope flexível com o rap de valor. E, finalmente, vamos criar algum espaço usando o preenchimento. Vamos fazer com que isso aponte para a RAM nos quatro lados. Em seguida, vou personalizar o dia em si. Então, vamos selecionar elementos div. Primeiro, vamos definir o tamanho da fonte para 1,4 rampa. Em seguida, use a margem, faça 0,3 RAM nos quatro lados. Depois disso, vamos definir a largura dos elementos HTML. Vou usar a mesma técnica que usamos nos dias de semana. Então, eu quero colocar sete dias em cada linha. Vamos usar novamente a função calc. Precisamos dividir a largura do calendário por sete, mas temos que excluir a margem e o preenchimento Se subtrairmos dois, a largura, a margem e o preenchimento, obteremos 40 pontos para A margem de cada lado é igual a 0,3 rampa. Portanto, o valor da margem será 0,3 multiplicado por 14, porque no geral teremos sete dias É igual a 4,2 RAM. E então temos que adicionar ao ponto de valor do aluguel, a quantidade do preenchimento Precisamos dividir 40 pontos de RAM por sete. Em seguida, vou definir a altura para cinco rem. Em seguida, vou centralizar o conteúdo. Então, vamos definir a propriedade de exibição para flexionar e usar justify-content center e alinhar itens ao centro Além disso, vou criar um pequeno efeito de sombra. Vamos usar sombra de texto com os valores 0,3 rodando 0,5 RAM e RGBA com uma cor preta e com a opacidade Tudo bem, então os dias são personalizados e seguida, vou estilizar as datas anteriores e as próximas A única coisa que vou fazer é diminuir a opacidade deles. Então, vamos seguir em frente e selecionar os dois. E defina a opacidade para 0,5. Ok, então a próxima coisa que vou fazer é destacar o dia atual do mês. Primeiro, vamos acessar o arquivo HTML e atribuir à classe de data atual hoje Em seguida, selecione-o e altere a cor de fundo. Eu vou fazer isso em 16756. Ok, então a última coisa que vou fazer é criar um pequeno efeito de foco Depois de passar o mouse sobre os dias, vou mudar a cor de fundo Também exiba a borda e faça o ponteiro do cursor. Quero fazer isso em todos os dias do mês, exceto no atual. Então, vamos selecionar elementos div com o mouse. Em seguida, ele deve ser seguido pelo seletor de notas. É a função. E temos que passar por aqui div com a turma de hoje. Ok, vamos fazer a cor de fundo para 62626. Em seguida, defina a borda com os valores do ponto a ser sólido e a coluna 777 E, finalmente, faça o cursor apontar. Além disso, vamos usar a transição apenas para a cor de fundo. Precisamos aqui da cor de fundo e da duração de 0,2 s. Tudo bem, com o CSS, terminamos E agora é hora de adicionar um pouco de JavaScript ao nosso calendário e fazê-lo funcionar. Ao longo desta parte, trabalharemos com o objeto de data com bastante frequência. Usaremos alguns métodos diferentes para manipular a data Em primeiro lugar, quero exibir o mês atual dinamicamente usando JavaScript. No momento, é maio que o especificamos a partir do arquivo HTML? No começo, vou criar um objeto de data. Então, para fazer isso, temos que usar a função construtora de objeto de data Em geral, o objeto de data retorna a data e a hora atuais. Também especifica o fuso horário do navegador e retorna esses dados como uma sequência de texto completo Vamos continuar e criar os objetos de data. Vou criar uma nova variável, data, que deve ser igual à nova função construtora de data Em seguida, corra para o console. Portanto, se eu inspecionar a página e verificar o console, obteremos a data e a hora atuais seguidas pelo fuso horário do navegador Então, como dissemos, a primeira coisa que vamos fazer é exibir o mês atual usando JavaScript. Para obter o mês atual, você precisa usar um dos métodos de objetos de data chamado get month. Então, vamos criar uma nova variável. Eu vou chamar isso de matemática. Deve ser igual ao ponto da data. Pegue, mãe. Em seguida, execute a matemática no console Como você pode ver, temos aqui um valor numérico para, na verdade, esse é o número índice da boca atual. Agora é maio, que é o quinto mês do ano. Mas, por causa disso, as mariposas têm números de índice baseados em zero Get math method return four, que é o número do índice do quinto mês. Tudo bem, então, para exibir o mês atual na página, precisamos usar o método get e manipular com esses números de índice Em primeiro lugar, vou criar uma nova matriz na qual armazenarei todos os 12 meses do ano. Então, vamos criar uma nova variável, que será uma matriz. E então passe aqui nomes matemáticos. O primeiro será em janeiro. Então eu vou duplicá-lo 11 vezes. E depois mude os nomes. Precisamos de fevereiro, março, abril, depois temos maio, junho, julho e agosto. O próximo será em setembro, outubro, novembro e dezembro. Portanto, a matriz é criada, como você sabe, os itens nas matrizes têm números de índice baseados em zero Aqui. Cada mês tem os números de índice adequados de zero a 11. Agora vou selecionar o título H1 de roupas, que deve exibir o mês atual Então, vamos selecioná-lo usando o método querySelector. Precisamos especificar aqui o nome da classe, data e depois a tag H1 Então, o título está selecionado e agora precisamos alterar seu conteúdo. Para fazer isso, vou usar uma das propriedades do DOM chamada innerHTML Agora temos que usar nossa matemática de matriz e especificar o número do índice Se eu colocar aqui o número do índice manualmente, digamos quatro. Em seguida, elimine o conteúdo do elemento de cabeçalho do HTML. Veremos novamente maio na página. Se eu mudar o número do índice e escrever cinco , teremos junho. Então, para exibir a boca correta, temos que usar o método get. Precisamos de Date Dot, pegue mais. Então, como você pode ver, temos aqui, novamente, maio, mas agora ela é exibida dinamicamente usando JavaScript. Tudo bem, vamos seguir em frente e exibir a data. No que diz respeito a selecionar o parágrafo que exibe a data, vamos selecioná-lo usando o método querySelector Então, para alterar o conteúdo do elemento, precisamos da propriedade innerHTML Agora vou usar um dos métodos chamados de string de data, que retorna a data atual em um formato legível Então, precisamos aqui de data ponto para string de data. Se eu remover o conteúdo do HTML , obteremos exatamente o mesmo resultado na página. Tudo bem, então, com a primeira parte do calendário, terminamos Exibimos com sucesso a boca e a data dinamicamente com a ajuda do JavaScript. Agora é hora de mostrar os dias. Não tocaremos nos dias da semana, eles serão exibidos HTML porque acho que é o suficiente em HTML porque acho que é o suficiente para exibir os dias que vou usar no loop Primeiro, vamos criar uma variável. Dias. Vou usar a palavra-chave let. E vamos fazer disso uma string vazia. Então, vou percorrer os números de um 31 e exibi-los como o conteúdo do elemento div days Vamos usar o for-loop. Precisamos criar aqui a variável I, que será o contador. Então precisamos de uma condição. Eu deveria ser menor ou igual a um. Então, precisamos de I mais o operador de incremento. Como o conteúdo. Vou instituir dias seguidos pelo operador mais é igual. Na verdade, esse operador faz exatamente o mesmo que a expressão a seguir. Por exemplo, x mais é igual a dez significa que x é igual a x mais dez Agora temos que criar um elemento div e passar a variável I como Vamos abrir os crases e inserir a tag u div. Seu conteúdo será a variável I. Finalmente, temos que alterar o conteúdo do elemento wrapper div Vou criar uma nova variável, vamos chamá-la de Mark days. Em seguida, selecione o elemento div days usando o método querySelector. E, abaixo, altere o conteúdo dessa variável usando a propriedade innerHTML Portanto, precisamos do HTML interno do mouth tes dot, que deve ser igual a dias. Então, como você pode ver, temos aqui os números de um a 31. Se eu for ao arquivo index.html e remover todo o conteúdo daqui, nada mudará, obterá novamente números de um a 321 Então, a partir de agora, o conteúdo do elemento days div é exibido em JavaScript. Na verdade, temos que fazer aqui algumas coisas. Não vemos mais os próximos dias anteriores e também os números não coincidem com os dias da semana Além disso, aqui definimos o número de dias em um mês como 31. Mas, como você sabe, algumas das missas têm os de hoje e outras têm um. Então, em vez de usar aqui apenas 321, precisamos definir a data de término para cada mês. Vamos criar uma nova variável. Eu vou ligar no último dia. Em seguida, vamos criar um objeto de data e definir o ano e o mês atuais. Portanto, precisamos usar aqui o método de obter o ano inteiro. Precisamos de datas para obter o ano inteiro, seguido pelo método date dot get. O primeiro método nos dará o ano atual. Quanto ao segundo método, ele nos fornecerá a montagem atual. Quanto ao dia, vou configurá-lo para, digamos, um. Agora vamos executar essa variável no navegador e ver o que temos. Então, como você pode ver, temos aqui o 1º de maio de 2020. Agora vamos transformar um em zero e verificar o resultado. Nesse caso, chegamos aqui no dia 30 de abril de 2020. Então, quando você especifica o dia como zero, obtém o último dia do mês anterior. No nosso caso, precisamos obter o último dia do mês atual. Portanto, só precisamos adicionar um à função get. Agora, como você pode ver, temos aqui o último dia do mês atual. Então, em vez de usar aqui o número codificado, podemos simplesmente inserir Mas, no momento, não podemos fazer isso porque a variável último dia retorna a data e a hora inteiras. Para obter o número do dia, precisamos usar o método Obter data. Então, agora ele retorna apenas um em vez de outros dados. E agora podemos transformar 31 em último dia em um loop. Então, nada mudou aqui. Temos o mesmo resultado. Para provar que funciona corretamente, vou definir o mês atual para, digamos, junho, onde temos 30 dias para alterar o mês atual, precisamos usar um dos métodos chamados set mouth. Portanto, precisamos de data com ponto a boca com um valor de cinco. Agora vemos aqui junho e o número de dias significa que tudo funciona bem até agora. Vamos nos livrar dessa linha de código. Então, uma vez que mostramos os dias da boca, agora vou cuidar dos dias do mês anterior. Se dermos uma olhada no projeto finalizado, você verá que exibimos alguns dias do mês anterior. Então, para conseguir isso, primeiro de tudo, temos que adivinhar quantos dias devemos passar da boca anterior. Vou usar um pequeno truque. Vamos mudar a data atual, torná-la o primeiro dia do mês. Então, precisamos de data, ponto, data definida. Temos que fazer dele um. Depois disso, vou usar um dos métodos chamado get day. Ele retorna o índice. Agora, na sequência dos dias da semana, esses números de índice são baseados em zero Por exemplo, domingo tem o número de índice zero, segunda-feira tem um e assim por diante. Então, vamos examinar o console. Encontro, não ganhe dia. Como você vê, temos aqui cinco. Portanto, o primeiro dia de maio deve ser sexta-feira, porque sexta-feira tem o índice número cinco. Isso significa que o primeiro dia de maio deve ser colocado abaixo da sexta-feira Então, agora podemos obter facilmente quantos dias devemos exibir em relação ao mês anterior? Serão cinco. Tudo bem, então temos que criar outro para o loop Vamos inserir aqui a variável x, que será o contador Agora precisamos definir o número de iterações. Como dissemos neste caso, temos que exibir cinco dias do mês anterior. Então, no geral, teremos cinco iterações. E em cada iteração, criaremos um novo div, que será o conteúdo do elemento div atual Portanto, o valor inicial do contador x será o índice do primeiro dia do mês. Vamos criar uma nova variável na qual armazenaremos o número do índice do primeiro dia do mês. Isso é chamado de índice variável do primeiro dia. Deve ser igual a data, ponto para obter data. Em seguida, atribua essa variável ao contador x. Então, agora temos que definir a condição x deve ser maior que zero. E em cada iteração, x deve diminuir em um Então, precisamos de x menos menos. Então, deixe-me explicar novamente. Nesse caso, o número do índice do primeiro dia deste mês é cinco porque é sexta-feira. O valor inicial da variável x será cinco. Em cada iteração, ela diminuirá em um até se tornar zero Então, no geral, teremos cinco iterações. Em cada iteração, criaremos um novo elemento div para as datas do mês anterior. Precisamos aqui disso mais é igual. Em seguida, precisamos abrir os marcadores e inserir uma tag div com a data anterior da aula, estou na data de preparação Em seguida, insira seu cifrão com chaves encaracoladas. Agora temos que definir o conteúdo do desenvolvimento. Antes de tudo, vamos definir o último dia do mês anterior. Vou usar a mesma técnica que usamos no caso anterior para criar uma nova variável. Vou chamar isso de preparação no último dia, estou no dia anterior, último dia. Então eu vou pegar esse valor daqui. Portanto, para obter o último dia do mês anterior, só precisamos nos livrar do mais um, pois ele nos dá o último dia do mês atual. Então, se eu verificar o console no último dia anterior, obteremos o terceiro t, que é o último dia de abril. Tudo bem, então para criar o conteúdo para cada elemento div, temos que subtrair x da variável do último dia anterior Então, como você vê, temos dias da boca anterior, mas isso não está correto porque temos aqui 29 como o último dia do mês. Deveria ser 30. Então, precisamos simplesmente mais um aqui dentro. Então, o problema está resolvido. Tudo bem, então, com os dias anteriores, terminamos, vamos seguir em frente e cuidar dos dias do próximo mês No caso dos próximos dias, precisamos definir o número do índice do último dia da boca atual. Então, vamos criar uma nova variável e chamá-la de índice do último dia. Em seguida, pegue esse código porque ele nos fornece o último dia do mês atual. Nesse caso, em vez do método getState, precisamos usar getState porque ele retornará o número do índice Então, vamos examinar o console enquanto eles indexam. Nós temos zero. E isso significa que o último dia é domingo. E temos que exibir seis dias a partir do próximo mês. Então, para definir o número de dias do próximo mês, temos que subtrair 27, que é o número de dias em uma semana, o índice do último dia E também precisamos subtrair um porque os números do índice dos dias da semana são Então, vamos criar uma nova variável. Vou ligar para ela nos próximos dias. E deve ser igual a sete menos o índice do último dia menos Em seguida, precisamos novamente de um for-loop. Nesse caso, vou usar j como contador, que deve ser igual a um, porque cada mês começa com uma condição válida que será j menor ou igual aos próximos dias do que precisamos de j mais mais. Então, em cada iteração, temos que criar novos elementos div e passá-los como o conteúdo do elemento div de hoje Precisamos de dias mais iguais. Em seguida, abra os marcadores traseiros e passe aqui a tag div com uma classe. Próxima data Como conteúdo da tag div, temos que inserir a variável J. Finalmente, vamos mudar o conteúdo dos dias de boca Então, vamos lá. Temos aqui dias a partir do próximo mês, certo? Então, a próxima coisa que vou fazer é destacar a data atual. Agora mesmo. Não está mais destacado. Para fazer isso, temos que usar uma declaração if como condição. Temos que comparar o contador um com o estado atual. Uma vez que coincidem, temos que adicionar à classe de exclusão hoje. Precisamos que o triplo seja igual à nova data para obter a data. Além disso, temos que comparar a boca com o mês atual. Portanto, precisamos aqui da lógica e do operador. E temos que inserir dados dot get mount, triplo é igual a nova data, dot get Se essa condição for verdadeira, copiarei essa linha de código e adicionarei à classe de desenvolvimento hoje. Quanto a esse elemento div, ele deve ser colocado na instrução else. Então, como você pode ver, a data atual é destacada. Tudo bem, então a próxima coisa que vou fazer é fazer as flechas funcionarem Depois de clicar na seta para a esquerda, devemos navegar até a boca anterior. Quanto à seta para a direita, devemos passar para o próximo mapa. Vou anexar às duas setas, ouvintes de eventos com Então, vou selecionar a seta para a esquerda com método querySelector anexada ao ouvinte de eventos, onde temos que especificar o tipo dos Vai ser um clique. E também precisamos passar sua função de retorno de chamada. Vamos duplicá-lo e alterar o nome da classe que precisamos aqui. Próximo. Para passar para o mês anterior, precisamos de data com ponto definido. Em seguida, precisamos subtrair um da boca atual. Portanto, precisamos de dados para obter a boca menos um. Isso é para o próximo mês. Precisamos da mesma expressão, mas com mais um. Então, se clicarmos nas setas, elas não funcionarão O motivo é que precisamos renderizar o calendário com um botão OnClick adequado Portanto, temos que criar uma função na qual passamos todo o código. Então, temos que chamá-lo uma vez no escopo global. E também precisamos chamá-lo quando clicamos nas setas. Então, vamos continuar e criar uma função. Vou chamá-lo de calendário aleatório. Vamos pegar o código inteiro , exceto essa linha de código. E cole-o dentro da função que vou chamá-la no escopo global. E também dentro dessas funções de retorno de chamada. Tudo bem, então se eu clicar nas setas, elas funcionarão Como você pode ver, passamos para o mês anterior e o próximo. Ok, então estamos quase terminando. Na verdade, vejo aqui que temos um pequeno problema. A data atual não está correta porque, como você se lembra, definimos a data como uma e precisamos mudar aqui as datas para uma nova data. Então, agora o problema está resolvido. E, finalmente, terminamos 15. Projeto 12 - Contagem: Tudo bem, agora é hora de começar a criar nosso próximo projeto Neste vídeo, criaremos um aplicativo de contagem regressiva. Antes de começarmos a construir o projeto, vou analisar oito e descrever. Então, como você pode ver, temos aqui um fundo escuro em tela cheia No centro da página. Temos alguns elementos. Estou no título que diz que algo está chegando em breve. Em seguida, é seguida pela contagem regressiva, que funciona automaticamente Ele é atualizado a cada segundo. Temos aqui para diferentes seções. Essas seções são quatro dias, horas, minutos e segundos. Então, abaixo, temos um botão de reset. Se eu clicar nele, a contagem regressiva será reiniciada e todos os valores se tornarão zero. Tudo bem, então é isso. O que vamos construir. O projeto será simples, mas espero que você se divirta Eu criei uma nova pasta no desktop chamada count down, que agora está vazia. Vamos abri-lo no código VS e configurar nossos arquivos de trabalho. Portanto, no geral, teremos três arquivos diferentes para HTML, CSS e JavaScript. Vamos prosseguir e criá-los. Vamos chamar o arquivo HTML de index.html. Em seguida, teremos style.css e scripts dot js. Depois disso, vou até o arquivo index.html e criarei o documento HTML básico. Para isso, vou usar m. E vamos colocar aqui um ponto de exclamação e pressionar Enter ou tab Então, vamos lá. Eu vou mudar o título. Vamos inserir sua contagem regressiva. Depois disso. Vamos vincular arquivos CSS e JavaScript ao HTML. Vamos abrir a tag do link. Especifique aqui o caminho do arquivo CSS. Quanto ao JavaScript, vou abrir a tag de script logo acima da tag do corpo de fechamento e, em seguida, especificar a parte do arquivo JavaScript e os atributos de origem. Tudo bem, então todos os três arquivos estão conectados e agora vou executar o projeto no navegador Para isso, vamos usar um pacote de código do VS chamado servidor ativo, que permite executar o projeto ao vivo no navegador e fazer as alterações e atualizações sem atualizar a página Sempre, recomendo que você use esses pacotes. Tudo bem, então o projeto está em funcionamento. Finalmente, vou colocar o editor e o navegador lado a lado, assim E comece. Primeiro, vamos criar a marcação HTML, que será a mais simples Vou abrir a tag div, que será o contêiner do que deveria ser seguido pelo invólucro de contagem regressiva Incluirá todos os três elementos, quero dizer, elementos de título, com os textos em breve. Depois disso, teremos um div vazio com a contagem regressiva da classe, no qual inseriremos o conteúdo do JavaScript. E, finalmente, teremos o botão com a redefinição da classe e com a redefinição do texto. Tudo bem, então aqui temos o título e o botão. No momento, o elemento div de contagem regressiva não é mostrado aqui porque está vazio Então, agora vou seguir em frente e começar a escrever. O Javascript criará uma contagem regressiva e fará com que funcione. E então eu cuidarei do design. Vamos para o arquivo script.js. E antes de tudo, vamos selecionar a contagem regressiva e armazená-la na variável. Vamos criar uma variável chamada count down e selecionar o elemento div Usando o método seletor de consulta. Para criar a contagem regressiva, temos que manipular os objetos de data do JavaScript. Por padrão, o JavaScript usa o fuso horário do navegador e exibe uma data como uma sequência de texto. Vamos criar um objeto de data e verificar sua aparência. Eu vou criar uma variável. Vamos chamar isso de data. Portanto, para criar um objeto de data, precisamos usar a nova função construtora de data Vamos passar a data para o console. Portanto, se eu inspecionar a página e verificar a guia do console , você encontrará aqui a data e a hora atuais seguidas pelo fuso horário Tudo bem, então, em geral, o objeto de data tem alguns métodos diferentes que nos permitem obter o dia, a boca, a hora atuais e assim por diante Eu não vou passar por eles. Usaremos apenas a nova função construtora de data. Portanto, além de obter a data atual, você pode especificar a data futura ou passada manualmente. Por exemplo, podemos passar aqui o ano, digamos 2020 do que um mês. Mas você precisa se lembrar de que precisa especificar um mês usando números de índice. Os meses têm números de índice baseados em zero. Então, se eu quiser passar o ano, digamos agosto, que é o oitavo mês do ano, que eu tenho que inserir aqui Sete. Em seguida, vem o dia do mês. Vamos passar 15 para você. E então você pode especificar a hora. Quero dizer, horas, minutos e segundos. Vamos passar aqui. 12 e zeros como os minutos e os segundos. Tudo bem? Então, se verificarmos o console, obteremos a data que acabamos de especificar aqui. Tudo bem, então suponha que essa data seja o prazo e tenhamos que fazer uma contagem regressiva a partir dessa Na verdade, quero observar que, se você assistir a este vídeo no futuro, essa data ainda é passada, então você precisa inserir a data do futuro. Eu vou mudar o nome da variável. Vamos cumprir o prazo e também nos livrar do console.log. Além disso, temos que definir a hora atual. Então, vamos criar uma nova variável. Vou chamá-lo de atual e, em seguida, atribuir a ele um novo construtor de data Tudo bem, então a hora que deve ser exibida na página será a diferença entre o prazo e a hora atual Então, vamos adicionar primeiro, verifique a diferença no console. Vou criar uma variável, vamos chamá-la de div Eu fiz a diferença. Deve ser igual ao prazo menos o atual. E depois gire a variável para o console. Então, como você pode ver, temos aqui um número estranho e enorme. Na verdade, essa é a quantidade de tempo, a diferença entre o prazo e a hora atual mostrada em milissegundos. Vamos usar essa quantidade de milissegundos para definir separadamente os dias, horas, minutos e segundos restantes horas, minutos e segundos Então, vamos criar uma variável e chamá-la de dias. Então, para obter o número dos dias restantes, temos que dividir a quantidade de diferença pelo número de milissegundos, que temos em 24 h. Portanto, precisamos diferença dividida por um parêntese aberto E temos que multiplicar mil milissegundos por 60 s. Depois precisamos de 60 min e , finalmente, 24 h. Então vou executar essa variável no console Então, como você pode ver, temos aqui o número dos dias, mas com alguns decimais Não precisamos desses decimais porque só precisamos exibir o número de dias Portanto, temos que arredondar o número para baixo. E para isso, podemos usar um dos métodos JavaScript chamado Math.floor Agora, como você pode ver, temos aqui apenas o número dos dias sem decimais Então, em seguida, precisamos definir as horas, minutos e segundos da mesma forma. Vamos passar para as horas. Vou usar novamente o método Math.floor. Portanto, no caso do nosso, temos que dividir a diferença pelo produto dos milissegundos, segundos e minutos. E então temos que pegar o valor restante dessa operação. Portanto, temos que usar um dos operadores aritméticos chamado módulo, ou às vezes é chamado de resto Portanto, o operador de módulo retorna um resto de divisão e é expresso pelo sinal de porcentagem. Nós precisamos aqui. Diferença dividida pelo produto de mil milissegundos, 60 s e 60 min. Então temos que usar o módulo seguido pelo 24, que é o número de horas. Então, novamente, essa operação nos dará as horas restantes. Em outras palavras, após essa operação, o número de horas sempre será menor que 24. Se eu verificar as horas no console , obteremos o número de horas restantes. Tudo bem, vamos passar para os minutos. Crie uma nova variável. Chame de minutos e, em seguida, use novamente o método Math.floor. Então, no caso de minutos, temos que dividir a diferença pelo produto dos milissegundos e dos segundos E então precisamos do módulo 60, que é o número de Portanto, precisamos da diferença dividida pelo produto de mil milissegundos por segundos. Módulo 60. Ok, vamos definir os segundos da mesma forma. Crie uma nova variável, use Math.floor. Portanto, no caso de segundos, precisamos dividir a diferença por mil milissegundos. E então precisamos do módulo 60, que é segundos. Então, se eu verificar os segundos no console, comece a atualizar a página Você verá aqui como o número de segundos é atualizado. Tudo bem, todas as quatro quantidades estão definidas. E agora precisamos exibi-los na página para serem mais precisos e reduzir o div, que criamos no arquivo HTML e depois selecionamos aqui Então, vou passar alguns elementos div dentro do div de contagem regressiva E, em seguida, anexada a cada elemento div, a variável apropriada dessas quatro variáveis Portanto, precisamos alterar profundamente o conteúdo da contagem regressiva. Para isso, vou usar uma das propriedades da cúpula chamada innerHTML Isso nos permite definir o conteúdo HTML de um elemento. Então, vamos anexar para fazer a contagem regressiva da propriedade HTML interna. Em seguida, abra os marcadores invertidos porque precisamos interpolar as variáveis com as tags HTML Portanto, precisamos aqui de elementos div. Então, no primeiro, vou passar dias. Precisamos de cifrão, chaves encaracoladas e o nome variável dias Então teremos o nosso. Minutos e segundos. Tudo bem? Como você pode ver, temos aqui todos os quatro valores, dias, horas, minutos e segundos. No momento, eles estão em um modo estático. Eles não estão sendo atualizados automaticamente. Se eu recarregar a página o número de segundos será atualizado Portanto, temos que dinamizar a contagem regressiva. Ele deve ser atualizado automaticamente a cada segundo. Para fazer isso, precisamos usar um dos métodos JavaScript chamado set interval. O método set interval executa a função em intervalos especificados em Tudo bem, vamos criar uma variável e chamá-la de intervalo. Em seguida, atribua a ele um método de intervalo definido. Esse método usa dois argumentos. A primeira será a função de retorno de chamada, que será executada com alguns intervalos Então, agora temos que passar para você dentro da função, esse código inteiro. Vamos pegá-lo e colá-lo dentro da função. O segundo argumento será a quantidade de tempo que precisamos para executar a função após cada segundo. Então eu vou passar aqui mil milissegundos. Como você pode ver, a contagem regressiva está funcionando e é atualizada após cada segmento Tudo bem, então conseguimos criar a parte principal dos projetos Temos que personalizar um pouco a funcionalidade. Mas, para tornar o trabalho em andamento mais interessante, vamos cuidar do design Depois de iniciarmos o projeto, adicionaremos algumas coisas à contagem regressiva do JavaScript. Ok, vamos abrir o arquivo style.css. E antes de tudo, crie alguns estilos comuns e redefinidos. Vou selecionar cada elemento usando um asterisco. E então vamos nos livrar da margem e do preenchimento padrão. Vou definir os dois como zero. E também use uma caixa de borda de tamanho de caixa. Além disso, quero mudar a família de fontes para todos os elementos. Vou usar uma das fontes do Google. Então, vamos ao site do Google Fonts e pesquisar a fonte chamada abaixo do A2 Vamos selecionar esses estilos. Em seguida, pegue o link e cole-o no elemento principal. Depois disso, vou definir a família de fontes para cada elemento abaixo Tudo bem, então, como você pode ver, esses estilos são aplicados Na verdade, vou usar a RAM como unidade de medida em todo este projeto. Fazemos isso em quase todos os tutoriais porque acho que é muito conveniente e fácil de usar. Agora mesmo. Um rem é igual a 16 pixels, porque o tamanho da fonte do HTML é igual a 16 Por padrão, quero converter uma RAM em dez pixels Para isso, precisamos diminuir o tamanho da fonte dos elementos HTML. Vamos defini-lo para 62,5 por cento. Então, vamos considerar que os tamanhos dos elementos diminuíram. E agora 1 g é igual a dez pixels. Vamos seguir em frente e tirar o contêiner. Vou expandi-lo para a página inteira. Então, vamos selecioná-lo e definir a largura e a altura. Vou definir com 200 por cento para a altura. Vamos fazer com que seja 100% da janela de visualização. E, finalmente, vamos mudar a cor de fundo. Vou usar sua cor 17181. Ok, a seguir, vamos selecionar o invólucro de contagem regressiva. Vou colocá-lo no centro da página. Quero dizer, para centralizá-lo verticalmente. Portanto, antes de tudo , a largura definida dificulta a apresentação. Em seguida, vou definir sua posição como absoluta. Depois disso, vou atribuir à posição relativa do contêiner porque quero posicionar a embalagem de contagem regressiva de acordo com o Em seguida, defina a propriedade principal. Vamos configurá-lo para 15%. Em seguida, coloque os textos no centro usando o centro de alinhamento de texto e altere Faça com que seja o D. Tudo bem, então a posição do invólucro de contagem regressiva seja alterada e agora vou personalizar os Vamos começar com um título. Em primeiro lugar, vou aumentar o tamanho da fonte. Vamos fazer com que seja oito RAM. seguida, altere a espessura da fonte, torne-a mais leve, atribuída a ela 400. Em seguida, vou transformar o texto em maiúsculas. Em seguida, crie algum espaço na parte inferior usando a margem inferior oito Ran. E, finalmente, vou usar sombra de texto para criar algum efeito de sombra. Vamos passar aqui 0,5 em torno de 0,8 RAM. E o valor RGBA com cor preta e com opacidade de 0,5. Tudo bem, então o título parece bom. Vamos seguir em frente e cuidar da contagem regressiva. Vou colocar esses números horizontalmente em uma linha usando E também coloque-os no centro usando o justify-content Ok, isso é sobre a contagem regressiva. Agora vou personalizar os elementos div que criamos em JavaScript. Quero dizer, a criança faz elementos da contagem regressiva. Então, primeiro de tudo, vamos definir largura e altura. Vou colocar os dois em 13 rampas. Em seguida, vou definir o plano de fundo. Na verdade, eu quero usar um gradiente linear porque com o gradiente linear, poderemos dividir o fundo em Então, primeiro de tudo, vou mudar a direção. Vamos fazer com que fique na parte inferior. Isso significa que a transição vai de cima para baixo. Em seguida, use o valor RGBA. Vamos fazer uma pausa aqui, 601-50-8508 e a opacidade 0,9. E também precisamos aqui de 50%. Em seguida, precisamos de outro valor RGBA entre os números 909-90-3903 e a opacidade 909-90-3903 E temos que colocar você em zero. Como você pode ver agora, o plano de fundo é dividido em duas partes diferentes. Depois disso, vou criar algum espaço usando margem. Vamos defini-lo como zero na parte superior. Então, para a RAM no lado direito, 12 corriam na parte inferior e quatro no lado esquerdo. Depois disso, vamos aumentar o tamanho da fonte, torná-la sete RAM. E também altere a espessura da fonte, torne-a 400. Ok, em seguida, vou centralizar os números dentro das caixas. E para isso, vamos usar o flexbox. Precisamos flexibilizar a exibição, justificar o centro de conteúdo e alinhar o centro E, finalmente, vou criar algum efeito de sombra. Vamos usar box shadow com os valores 0,8 RAM 2,5 RAM. E então o valor RGBA com uma cor preta e com opacidade Certo? Então, passo a passo, o projeto está ficando bem melhor. A próxima coisa que eu quero fazer é exibir uma pequena linha no centro de cada caixa ou cartão, seja o que for. Vou criar uma linha usando pseudoelementos anteriores. Então, vamos selecionar count down def, seguido pelos pseudoelementos anteriores Antes de tudo, vamos definir o conteúdo, deixá-lo vazio. Em seguida, defina a posição como absoluta. Vou posicionar o elemento acordo com seu elemento pai. Então, vamos atribuir à contagem regressiva a posição profunda relativa. Em seguida, vamos definir a largura e a altura. Eu vou definir com 200 por cento. Quanto à altura, vamos fazer com que seja 0,24 corrida. E também defina a cor de fundo. Faça com que seja 17181. Ok, pode ver que temos aqui a linha no centro das caixas. Vamos seguir em frente e passar para a próxima coisa. Vamos dar uma olhada no projeto finalizado. Como você pode ver, abaixo de cada caixa, podemos ver o texto correto Estou em dias, horas, minutos e segundos. Vou adicioná-los usando depois da pseudoclasse. Portanto, podemos selecionar cada elemento div com o seletor F child separadamente e definir o conteúdo Mas eu não vou fazer isso. Vou usar um pequeno truque. Vamos ao arquivo script.js e atribuímos a cada desenvolvimento o atributo chamado conteúdo de dados Então, como os valores, vamos inserir aqui dias, horas. Então temos minutos e segundos. Em seguida, volte para o arquivo CSS e selecione count down div com os pseudoelementos posteriores Vamos definir o conteúdo. Então, como valor da propriedade de conteúdo, vou passar aqui a função chamada atributo, que é expressa como um TTR. E temos que passar aqui os atributos do conteúdo dos dados. Como você pode ver, os valores do texto aparecem na página. No momento, eles são dois maiores. Então, vamos cuidar disso. Vamos alterar o tamanho da fonte, fazer com que ela aponte para a RAM e defina a espessura da fonte para 400. Em seguida, defina a posição como absoluta e defina a propriedade inferior. Faça menos seis rodadas. Tudo bem, então o último elemento que eu quero personalizar é um botão Então, vamos selecioná-lo. Primeiro, vamos definir a largura e a altura. Vou definir com 220 para correr. Quanto à altura, vamos fazer seis rodadas. Em seguida, elimina a borda padrão, usando border none. E mude a cor de fundo. Vou usar sua cor A5 a A12. Em seguida, vamos cuidar das fontes. Vou definir o tamanho da fonte para 2,2 RAM do que fazer com que o peso da fonte seja Crie algum espaço entre as letras. Faça com que aponte para a RAM. Também transforme texto em maiúsculas. Em seguida, mude a cor do texto, torne-o claro usando a cor, ou seja,. Depois disso, vou criar uma sombra para o texto e para o próprio botão. Então, vamos usar sombra de texto, onde o valor é 0,3, 0,5 RAM. E o valor RGBA com uma cor preta e a opacidade Vamos duplicar essa linha de código. Mude o texto para a caixa. Além disso, em vez de 0,5 rampa, vou usar 0,6 envoltório Finalmente, vamos nos livrar do esboço padrão. Não faça com que seja nenhum. Tudo bem, então isso é tudo sobre o design. O projeto parece muito bom. E agora vou voltar ao arquivo script.js e adicionar mais algumas coisas à funcionalidade da contagem regressiva. Então, quando o número na contagem regressiva se tornar menor que dez, então apenas um dígito será exibido Isso não é muito bom Então, vou conseguir exibir sempre dois dígitos, não importa o que aconteça Então, vou usar as declarações condicionais. Temos que verificar se a duração dos dias é igual a um. Se isso for verdade, teremos que exibir os dias com zero. E se for falso, então temos que mostrar apenas dias. Na verdade, eu usei aqui o comprimento da propriedade dentro do número, mas não está correto. A propriedade de comprimento funcionará bem com esses valores de string. Portanto, temos que converter esses números em valores de string. Há algumas maneiras de fazer isso. Vou adicionar a cada número uma sequência vazia. Portanto, nesse caso, os valores serão concatenados e obteremos os valores da string Tudo bem, vamos usar essa condicional para o resto dos números Eu vou copiar e colar. Precisamos de horas aqui do que de minutos. Finalmente, precisamos de segundos. Tudo bem, agora o problema está resolvido. Não teremos mais números de um dígito na contagem regressiva A próxima coisa que quero fazer é que, quando o tempo expirar, tenhamos que alterar o conteúdo da contagem regressiva desses números para alguns textos Portanto, precisamos da declaração IF como condição, temos que verificar se a diferença é menor que zero. Então, se for verdade, significa que o tempo expirou e temos que alterar o conteúdo da Antes de tudo, precisamos limpar o intervalo. Quero dizer, para parar a função de intervalo definido. Para isso, temos que usar um dos métodos chamado intervalo claro. E temos que passar o intervalo da variável de rendimento. Depois disso, vou mudar o conteúdo da contagem regressiva. Portanto, precisamos de um HTML interno de contagem regressiva. Vamos usar seus elementos de cabeçalho H1 com alguns textos. Digamos. Aqui vamos nós. Ok, então, para verificar como funciona, vou definir a data para a hora atual. Então, vamos lá. Oito obras. Ótimo. Tudo bem, então estamos quase terminando. A única coisa que vou fazer é fazer com que o botão de reset funcione. Depois de clicar nele, ele deve redefinir a contagem regressiva e tornar esses números zeros. Então, vou selecionar o botão de reinicialização usando o método querySelector Em seguida, vou me conectar a um ouvinte de eventos usando o método add event listener São necessários dois argumentos. O primeiro será o evento de clique. Quanto à segunda, vou passar aqui uma função de seta, que será executada assim que clicarmos no botão de reset. Primeiro de tudo, temos que parar a função de intervalo definido. Quero dizer, temos que usar o método de intervalo claro. Vamos passar aqui o intervalo. Então, agora vou selecionar todos os elementos div que precisamos para examiná-los e alterar o conteúdo Precisamos fazer com que seja zeros. Então, vou criar uma variável, vamos chamá-la de divs. Em seguida, selecione todos os elementos div dentro da contagem regressiva. Portanto, precisamos de um seletor de consulta para todos os métodos. E temos que especificar aqui a contagem regressiva da classe seguida pela div Então, como dissemos, temos que examinar esses elementos div e alterar seu conteúdo Então, vou usar um dos métodos auxiliares de matriz chamados para cada um Para cada método, é necessário um argumento. Será a função de retorno de chamada, que pegará um parâmetro e será o item atual na lista Vamos chamá-lo de div. Portanto, precisamos alterar o conteúdo de cada div. Vamos usar o innerHTML e definir o conteúdo como zeros. Então, se eu clicar no botão, ele reiniciará a contagem regressiva 16. Projeto 13 - Cartão de perfil: Ok, é hora de começar a construir nosso próximo projeto. Neste vídeo, vamos criar um cartão de perfil. O projeto será simples, com um design moderno e alguns efeitos interessantes. Então eu acho que você vai gostar de construí-lo. Tudo bem, antes de começarmos a construir o projeto, vamos dar uma breve olhada nele Como você pode ver, temos um pequeno cartão no centro da página. Tem algumas informações sobre a pessoa. Estou dentro, a imagem, o nome do arquivo e alguma descrição. E abaixo temos um botão. Se eu clicar nele, o botão mudará sua forma, posição e conteúdo. Além disso, três caixas diferentes aparecerão com alguns detalhes de contato da pessoa nas redes sociais. Se eu clicar novamente no botão, voltaremos ao estado anterior do carro. Então, vamos ver o que vamos construir. Espero que seja interessante porque você aprenderá como criar esses efeitos. Ok, então eu criei uma nova pasta na área de trabalho chamada card. Há uma pasta para as imagens. Vou abrir essa pasta no VS Code e depois criar três arquivos diferentes para HTML, CSS e JavaScript. O primeiro será o index.html. Então teremos style.css e scripts dot js. Vamos prosseguir e criar o documento HTML básico. Para isso. Vou usá-lo, se eu colocar aqui um ponto de exclamação e pressionar Enter ou tab, obteremos a estrutura básica do documento HTML Vamos mudar o título. Vou colocar aqui o cartão de contato. Depois disso, vamos vincular todos os três arquivos. Vou abrir a tag de link no elemento principal do arquivo CSS. Vamos colocar aqui o nome do arquivo. Em seguida, precisamos abrir a tag de script logo acima da tag do corpo de fechamento. E no atributo source, temos que especificar o caminho do arquivo. Tudo bem, vamos lá, todos os três arquivos estão conectados. Em seguida, vou trazer alguns links adicionais. Durante todo o projeto. Vou usar os ícones Font Awesome e o Google Forms. Então, vamos prosseguir e pesquisar Font Awesome, CDN, js. Em seguida, vá para o primeiro link, selecione CSS e pegue o primeiro link aqui. Em seguida, preciso abrir a tag do link e colocar o link como o valor do atributo de referência h. Tudo bem, é isso em relação aos ícones Font Awesome. Vamos continuar e trazer o link para as fontes do Google. Vou pesquisar fontes do Google. Então, ao longo deste tutorial, vou usar uma fonte chamada doses. Vamos personalizá-lo porque usaremos diferentes espessuras de fonte Em seguida, pegue o link e cole-o no elemento principal. Tudo bem, agora é hora de executar o projeto no navegador Para isso, vou usar um dos pacotes de código do VS chamado Live Server. Isso nos permite executar a vida útil do projeto no navegador e fazer atualizações sem atualizar a página Então você pode ir em frente e instalar este pacote. Ok, por fim, vamos colocar o editor e o navegador lado a lado Assim, e comece. Então, primeiro vou começar com a marcação HTML. Prepararemos toda a estrutura HTML do projeto e, em seguida, adicionaremos CSS e JavaScript. Vamos abrir a tag div, que será o contêiner de todo o conteúdo Então, dentro do contêiner, vou criar o cartão em si. Portanto, o carro consistirá em algumas partes diferentes. Teremos cartão, cartão biográfico, conduziremos alguns contatos nas redes sociais e assim por diante. Vamos começar com a biografia do cartão. Ele incluirá a imagem da descrição e do botão da pessoa. É uma tag div aberta e atribuída à biografia do cartão de classe. Em seguida, insira-o em outro div, que será o invólucro da imagem Vou chamá-lo de rapper do IMG. E vou colocar aqui uma tag de imagem e o atributo source. Temos que especificar o caminho da imagem. E também vou colocar aqui pessoa como o valor do atributo alt. Além disso, vou definir a largura da imagem daqui por um tempo Vamos fazer com que sejam cem pixels. Na verdade, faremos isso a partir do CSS no final do dia. Tudo bem, no próximo minuto, informações pessoais. Então, vamos abrir a tag div com as informações da pessoa da classe e inserir seu elemento de cabeçalho h3 para o nome completo da Eu vou instituir Jane Brown. E também precisamos fazer um parágrafo para obter alguma descrição. Vamos adicionar aqui um texto fictício. Tudo bem, finalmente, precisamos criar o botão, quero dizer, o botão preto que e mudará a forma assim que clicarmos nele Vamos designar uma classe chamada btn. Então, dentro desse botão, teremos duas partes. O primeiro será o elemento span com o texto. Entre em contato comigo. Quanto ao segundo , será o ícone. Então, vamos atribuir a esse painel um elemento chamado btn contacts. E então o instituto tributário entre em contato comigo. E a seguir vou colocar aqui o ícone Font Awesome, que deve ter nomes de classes, FAS, FA hash, angle, hash up Ok, então isso é tudo sobre a bile do cartão. Isso é passar para a próxima parte. Em seguida, temos que criar o título, entre em contato comigo, que então se ocultará e aparecerá ao clicar. Então, vamos abrir a tag div com o contato do cartão de classe e inserir elementos de cabeçalho H4 com Entre em contato comigo. Tudo bem, então metade da marcação é criada Em seguida, temos que cuidar das três caixas brancas diferentes que serão usadas para algumas informações de contato nas redes sociais. Então, vamos abrir a tag div e atribuí-la à classe chamada Social Essa será a classe comum para um estilo comum. Mas também precisamos da classe individual para o estilo individual A primeira caixa será para o e-mail. Então, vamos atribuir a ele um e-mail de classe. Na verdade, cada caixa consistirá em um ícone Font Awesome e alguns detalhes de contato. Vamos abrir a tag deep, que será o invólucro do ícone Font Awesome ícone Font Awesome Vamos atribuir a ela uma classe que eu posso empacotar. Em seguida, insira sua Irlanda com as classes FAS, FA dash, envelope Depois disso, precisamos colocar aqui alguns detalhes de contato. Então, vamos abrir outra tag div com os detalhes de contato da classe Vou colocar aqui o elemento de cabeçalho h f4 com o e-mail de texto Em seguida, precisamos de um parágrafo que inclua o endereço de e-mail real da pessoa. E também vou inserir sua pequena seta, que será expressa pelo colchete angular Vamos abrir o elemento span e colocá-lo aqui. Tudo bem, isso é sobre os primeiros contatos de mídia social. No geral, teremos três deles. Então, vamos duplicar esse código duas vezes e depois fazer algumas alterações Vou mudar o nome da turma, FB, como Facebook Então eu vou mudar a classe dos íons quando f, a, b, f traço, Facebook, traço quadrado Então precisamos aqui do facebook. E o nome completo da pessoa, Jane Brown. Ok, o Next será vinculado. Mude as classes da ilha, FAB, FA dash, LinkedIn Além disso, precisamos aqui do LinkedIn e seguida, do nome de usuário em Jane Brown Tudo bem, então finalmente terminamos com a marcação HTML dos elementos criados e preparados É hora de seguir em frente e começar a escrever o CSS. Em primeiro lugar, vou criar alguns estilos de redefinição. Quero me livrar da margem e do preenchimento padrão de cada elemento Para selecioná-los, precisamos usar um asterisco Em seguida, vou definir a margem e o preenchimento como zero. Tudo bem, então, ao longo deste projeto, vou usar uma rampa como unidade de medida Por padrão, uma RAM é igual a 16 pixels porque no momento, o tamanho da fonte do elemento HTML é igual a 16 Quero converter uma RAM em pixels porque será mais conveniente e fácil de calcular. Então, para fazer isso, temos diminuir o tamanho da fonte do elemento HTML de 100% para 62,5 por cento Agora, uma RAM é igual a dez pixels Como você pode ver, o tamanho dos elementos diminuiu. Ok, vamos seguir em frente e cuidar do contêiner. Quero que o contêiner ocupe a página inteira. Então, vamos selecioná-lo e definir a largura e a altura. Vou definir a largura para 100%. Quanto à altura, vou atribuir a ela 100 de altura da janela de visualização Então, aqui dizemos que o contêiner deve ocupar 100 por cento da altura da janela de visualização Em seguida, vou mudar a cor de fundo. Vamos usar sua cor 051321. Então, depois disso, quero colocar o cartão no centro da página. Para isso, vamos usar o CSS flexbox. Precisamos usar três propriedades diferentes. Display flexível. Então, para centralizar o elemento horizontalmente, precisamos justificar Para centralização vertical. Temos que usar o centro de alinhamento de itens. É isso em relação ao contêiner. Em seguida, temos que cuidar do carro. No momento, o conteúdo do cartão não está bem visível, então vamos corrigi-lo usando um plano de fundo temporário. Antes de tudo, vamos definir a largura do cartão, prepará-lo para execução e depois alterar a cor de fundo. Use sua cor D, D, D. Tudo bem, então agora o conteúdo está visível na verdade, com o próprio fio. Nós terminamos. Temos que personalizar suas peças separadamente. Vou começar com a primeira parte, que será a biografia do cartão. Então, vamos selecioná-lo e primeiro vamos definir a cor de fundo. Vou usar aqui a cor 458564. Depois disso, vamos criar algum espaço dentro da caixa usando o preenchimento Vou definir o preenchimento nas 23 RAM superiores. Então, novamente, três rem no lado direito até M na parte inferior e três rem no lado esquerdo. Em seguida, vou colocar os itens horizontalmente em uma linha. Para isso, vou usar o display flex. E também vou arredondar os cantos superior esquerdo e superior direito Para isso, vamos usar o raio da borda. Nesse caso, ele deve ter quatro valores diferentes. O primeiro será para o canto superior esquerdo. Vamos fazer uma rampa de 0,5. Em seguida, vou usar novamente os pontos de Ram no canto superior direito. E deve ser seguido por dois zeros para as colunas inferior esquerda e inferior direita Tudo bem, agora, em relação à biografia do cartão, temos que estilizar o conteúdo Vou começar com um botão. Entre em contato comigo porque acho que isso tornará o processo de estilização um pouco mais fácil Então, vamos selecioná-lo. Em primeiro lugar, vou cuidar de sua posição. Quero colocá-lo aqui na parte inferior da biografia do cartão. Então, vamos tornar sua posição absoluta. Então eu vou definir uma propriedade comprada para -2,5 rem. Então precisamos da posição correta. Vou ajustá-lo para dez rampas. Então, como você pode ver agora o botão acabou no final da página. Isso acontece porque a posição não está funcionando de acordo com os elementos principais, que é chamado de biografia. Temos que tornar sua posição relativa e, em seguida, o botão funcionará de acordo com a posição dos elementos principais. Tudo bem, agora está colocado corretamente. Vamos definir sua largura e altura. Vou configurá-lo para 20 RAM. Quanto à altura, vamos fazer seis rampas. E também altere a cor de fundo. Faça com que seja 3038. Ok, vamos seguir em frente e adicionar mais alguns estilos na parte inferior. Vou mudar a cor do texto. Vamos torná-lo branco. Em seguida, faça o botão arredondado usando o raio da borda com o valor E também se livrar da borda padrão é importante. Então, passo a passo, o botão está ficando melhor. Vamos cuidar da fonte. Eu vou mudar a família de fontes. Vamos fazer com que Dole diga serif. Em seguida, aumente o tamanho da fonte, faça dois pontos para a RAM. E para transformar texto em maiúsculas. Tudo bem? Na verdade, há alguns estilos que eu quero adicionar aqui. Vou criar alguma sombra usando box shadow com os valores 0,3 em torno de 0,8 RAM. E então o valor RGBA, vou usar a cor preta com a opacidade Em seguida, vamos nos livrar do contorno padrão Definir contorno como nenhum e, finalmente, alterar o tipo do cursor Faça com que aponte para o botão. Parece muito bom agora, terminamos com isso. Ao ver os dois conteúdos da caixa neste rastreável, quero dizer, o texto entra em contato comigo e o colchete angular Vamos deixar como está agora porque cuidaremos disso mais tarde. Tudo bem, quando terminarmos de usar o botão, agora podemos personalizar a imagem e as informações pessoais Vamos começar com a imagem. Vou selecionar elementos div de um wrapper. Primeiro de tudo, como largura e altura definidas. Vou colocar os dois na rampa nove. E também crie o espaço no lado direito usando a margem direita, com um valor de três rodadas. Depois disso, vou selecionar a imagem em si. Vamos fazer largura e altura, ambas cem por cento. Nesse caso, a que herdará a largura e a altura do desenvolvimento principal Quero dizer, o invólucro IMG. Além disso, temos que usar sua capa de ajuste de objetos. Isso nos permitirá manter a qualidade da imagem. E, finalmente, vamos arredondá-lo usando o raio da borda com um valor de Então, agora a imagem está muito bonita. Como você se lembra, definimos a largura da imagem no documento HTML. Então, vamos em frente e nos livrar dele porque não precisamos mais dele. Tudo bem, é isso. Em relação à imagem, vamos seguir em frente e personalizar as informações pessoais. Eu vou selecionar o Rapper. Primeiro de tudo, vamos definir sua largura, torná-la 60%. Em seguida, vou adicionar alguns estilos comuns para o título e para o parágrafo. Fazer isso para evitar digitar as mesmas coisas repetidamente. Então, vamos seguir em frente e definir a família de fontes. Use novamente ptosis serif. Em seguida, mude a cor, torne-a branca. E também vou usar a sombra de texto com os valores 0,1 rem apontam para a RAM e a cor preta RGBA com a opacidade Ok, então, depois disso, precisamos adicionar alguns estilos individuais aos dois elementos. Comece com os elementos do título. Vou fazer com que o tamanho da fonte seja 2,5 rem. Em seguida, altere a espessura da fonte. Faça com que sejam 500. Além disso, vou criar algum espaço entre as letras. Faça com que seja 0,1 RAM e, em seguida, crie algum espaço na parte inferior usando a margem inferior com o valor de uma execução. Ok, isso é tudo sobre o título. Vamos seguir em frente e selecionar um parágrafo. No caso do parágrafo, eu só quero fazer com que o tamanho da fonte seja 1,8 rem. Tudo bem. Então, como você pode ver, na primeira parte do cartão, a biografia do cartão está bonita e, na verdade, terminamos com isso. Agora é hora de cuidar da próxima parte. Quero personalizar uma pequena seção abaixo da biografia do carro. Quero dizer o título. Entre em contato comigo primeiro, vamos selecionar seu invólucro chamado contato Mude a cor do plano de fundo. Vou usar aqui, chamado 2814d. Em seguida, torne o texto branco. Então, vou criar algum espaço dentro dos elementos. Vamos usar o preenchimento Vou configurá-lo para 1,5 rem na parte superior e inferior. S4, os lados esquerdo e direito. Vamos fazer o acolchoamento para reclamar. E também vou usar o raio da borda. No caso de contextos de cartões, quero arredondar os cantos inferior esquerdo e inferior direito Portanto, precisamos dos seguintes valores, 00 e depois 0,5 rem e novamente 0,5 rem. Ok? Agora vamos cuidar do título em si. Vamos selecioná-lo e adicionar alguns estilos. Em primeiro lugar, vou mudar a família de fontes. Vamos usar novamente a ptose serifada. Em seguida, altere o tamanho da fonte, faça com 1,8 RAM. Em seguida, vou definir o peso da fonte para 500. Também coloque o texto em maiúsculas. Em seguida, crie um espaço entre as letras. Faça com que seja 0,1 rem. Por fim, use Shadow com os valores de 0,1 rem apontam para RAM e a cor preta com a opacidade Ok, então é isso em relação a esta seção. Eu sei que não parece muito bom. Quero dizer, acabou parcialmente atrás do botão, mas na verdade não é o problema. Nós cuidaremos disso. Tudo bem, então, passo a passo, avançamos. Em seguida, vou estilizar os detalhes de contato da mídia social. Quero dizer, essas três caixas. Na verdade, podemos nos livrar desse pano de fundo temporário porque não precisamos mais. Em seguida, vamos selecionar o desenvolvimento com uma classe chamada Social. Em primeiro lugar, vou deixar a cor de fundo branca. Em seguida, cria algum espaço dentro da caixa usando o preenchimento. Vamos fazer 1,5 rem nos quatro lados. Além disso, precisamos criar algum espaço entre as caixas usando margem. Vamos configurá-lo para dois rem na parte superior e inferior e zero nos lados esquerdo e direito. Em seguida, vamos arredondar os cantos usando o raio da borda com um valor de Além disso, vou fazer com que os elementos flexionem contêiner porque quero colocar os elementos horizontalmente em Portanto, use o display flex. E então, para centralizar os elementos verticalmente, vamos usar alinhar itens Finalmente, precisamos do ponteiro do cursor. Tudo bem, então agora com a embalagem, terminamos. Vamos personalizar os elementos individuais nessas caixas. Vou começar com os ícones Font Awesome. Vamos selecionar o desenvolvimento rápido. Tem embalagem de classe I. Vou definir a largura e a altura, ambas para correr no outono. Em seguida, vou dar a cor de fundo do invólucro. Mas, como você se lembra, todos os três ícones do Font Awesome têm cores de fundo diferentes. Portanto, temos que selecioná-los individualmente. Vamos começar com o e-mail. E-mail seguido pelo invólucro do ícone da classe. Então, no caso de e-mail, vamos usar a cor de fundo com o valor d, d para B39 Então, vamos duplicar esse código duas vezes. A segunda caixa é para o Facebook. Então, vamos mudar a classe. Use aqui FB e também mude a cor. Vou usar aqui 359 98s para o LinkedIn. Vamos usar a cor de fundo 007, BB six. Tudo bem, então todos os três ícones têm as cores de fundo adequadas Vamos continuar e adicionar alguns estilos mais comuns ao invólucro Precisamos aqui de um raio de fronteira com um valor de 50 por cento. Porque precisamos torná-lo arredondado. Em seguida, use o flexbox. Vou centralizar os ícones perfeitamente. Então, vamos usar o display flex. Em seguida, justifique o centro de conteúdo. Para centralização horizontal. Quanto à centralização vertical, precisamos usar o alinhamento do centro dos itens e, em seguida, criar algum espaço no lado direito usando o valor da margem direita para executar Ok, então o invólucro está preparado, tudo parece bom e terei que adicionar algumas estrelas aos ícones Então, vamos selecioná-los. Vou aumentar o tamanho da fonte. Vamos fazer com que corra. E também mude a cor, torne-a branca. Tudo bem, vamos passar para os detalhes de contato. Temos que personalizar o título e o parágrafo. Vou começar com o título. Vamos selecioná-lo. Antes de tudo, vamos mudar a família da fonte. Vou usar novamente doses serifadas. Em seguida, altere o tamanho da fonte, faça com 1,6 RAM. Crie algum espaço entre as letras. Quero dizer 0,1 RAM. E também crie algum espaço na parte inferior usando a margem inferior com o valor 0,5 executado. Essa é a aparência dos títulos no momento. Precisamos dar a eles cores diferentes. Portanto, vou selecioná-los separadamente. Vamos começar com o e-mail. Vamos definir a cor como d. D para B39. Em seguida, duplique esse código duas vezes, altere o nome da classe para FB e também mude a cor, faça 359 98s para o LinkedIn Vou usar a cor zeros 076. Ok, então, quando terminarmos com os títulos, vamos seguir em frente e cuidar dos parágrafos Vamos prosseguir e selecioná-los. Antes de tudo, vamos mudar a família da fonte. Use doses serifadas. Em seguida, vou definir o tamanho da fonte em um ponto para a RAM. Mude a cor, torne-a 444 e, em seguida, crie algum espaço entre as letras Faça com que seja 0,1 rodado. Tudo bem, então, na verdade, com essa telha, estamos quase terminando estamos quase terminando O único elemento que temos que personalizar é essa pequena seta aqui. Então, vamos selecioná-lo , pois são os elementos de extensão. Antes de tudo, quero colocá-lo no lado direito da caixa. Para isso, podemos usar a margem esquerda. E temos que configurá-lo como automático. Na verdade, não está funcionando. Os elementos de extensão devem ser colocados no lado direito. Acho que temos um pequeno erro no arquivo HTML. Então, vamos dar uma olhada. Portanto, os elementos de extensão devem estar fora dos detalhes de contato. Vamos consertar isso rapidamente. E também altere aqui o seletor. Precisamos do carrinho social, seguido do intervalo. Então eu vou aumentar o tamanho da fonte, torná-la Ram, mudar a espessura da fonte , deixá-la em negrito. E também vou definir a cor para 999. Finalmente, com o estilo, terminamos. Agora temos que seguir em frente e cuidar da funcionalidade do cartão. Vou lembrá-lo do que vamos fazer. Então, vamos dar uma olhada no projeto finalizado. Portanto, por padrão, ocultaremos a seção Fale comigo e os detalhes de contato da mídia social. Então, quando clicarmos no botão, ele mudará sua forma, posição e conteúdo. E os elementos aparecerão aqui embaixo. Tudo bem, vamos em frente e cuidar disso. Em primeiro lugar, vou adicionar um ouvinte de eventos de clique ao botão Então, vamos ao arquivo script.js e selecionar o botão que vou usar aqui, método seletor de consulta Precisamos especificar o nome da classe dentro dos parênteses Precisamos aqui chamado btn. Em seguida, precisamos nos conectar a cada ouvinte do evento. Vamos usar um método chamado add event listener. Esse método usa dois parâmetros. O primeiro é o tipo do evento. Como dissemos, vamos usar o clique. Próximo. Precisamos passar o ano, a função de seta, que na verdade será executada quando clicarmos no elemento. Tudo bem, então deixe-me explicar o que vamos fazer. Na verdade, criaremos uma nova classe e CSS chamada change. Vamos adicionar essa classe ao contêiner. Em seguida, usando oito, aplicaremos novos estilos aos elementos. Então, vamos selecionar um contêiner usando um método seletor de consulta do jogo Especifique aqui o contêiner da classe. Em seguida, temos que usar a propriedade chamada lista de classes. Essa propriedade nos fornece todas as classes que o elemento possui. Enter, agora temos que usar o método chamado toggle O método toggle nos permite adicionar a classe ao elemento, se ele não o incluir , e remover a Se o elemento incluir oito dentro do parêntese, precisamos colocar aqui uma mudança de classe Tudo bem, então é isso em relação ao JavaScript. Agora temos que usar a mudança de classe no CSS. Antes de fazer isso, vou esconder aqui alguns elementos. Como você conhece o título, entre em contato comigo e essas três caixas devem estar ocultas por padrão. Portanto, temos que atribuir a transformação de contato de dois cartões. Com a função translate y. Isso nos permitirá mover os elementos para cima. Vamos passar aqui -100 por cento. Como você pode ver, o elemento subiu, mas acabou no topo da biografia do cartão. Na verdade, não precisamos disso. Quero colocá-lo atrás da biografia do carro. Para fazer isso, vou usar a propriedade do índice Z Vamos configurá-la como, digamos, 100. Então, agora o problema está resolvido. O elemento acabou ficando por trás da biografia do carro. Vamos seguir em frente e cuidar dos contextos de mídia social Temos que escondê-los e também movê-los um pouco para cima. Então, vamos usar novamente transform com a função translate y. E neste caso, vamos fazer uma pausa aqui -50 por cento. Então as caixas são movidas para cima e agora temos que escondê-las. Para esconder os elementos. Vou usar opacidade zero e também visibilidade oculta. Tudo bem, então está tudo pronto. Vamos continuar e fazer com que o evento de cliques funcione. Quando clicamos no botão , esses elementos ocultos devem aparecer. Vamos começar com o título entre em contato comigo. Temos que usar a mudança de classe, seguida pelo contato do cartão de aula. Em seguida, precisamos transformar com a função translate y. E nesse caso, precisamos passar aqui zero. Além disso, vamos usar valores de transição, todos de 0,5 s. Se eu clicar no botão, o elemento aparecerá bem Eu quero adicionar aqui um pequeno efeito. Vou diminuir a escala do texto para zero e depois torná-la 100% quando clicarmos no botão. Portanto, precisamos transformar com a função de escala. Isso nos permite alterar o tamanho dos elementos. Vamos torná-lo zero. Em seguida, selecione os elementos do título. Mas, neste caso, com a mudança de classe. Em seguida, use Transform. Com a função de escala. Temos que calcular o valor da escala um. Então, novamente, use a transição. Insira aqui 0,5 s. Ok? Agora, quando clicarmos no botão, a escala do título aumentará. Certo? Agora, à primeira vista, parece que a direção da transformação é da direita para a esquerda Acho que seria melhor mudar isso e virar da esquerda para a direita. Para isso, temos que usar a propriedade chamada origem da transformação e deixá-la à esquerda. Agora acho que parece melhor. Vamos continuar e exibir o resto dos elementos. Estou nos contatos de mídia social. Então, precisamos usar novamente a mudança de classe, seguida pela classe social. Então, para mover os elementos para baixo, tivemos que transformar com a função translate y e com um valor de zero. E então, para exibir os elementos, precisamos de opacidade um e visibilidade visível Depois disso, tivemos que usar a transição, mas com um tempo de atraso diferente para cada caixa. Vamos selecionar o e-mail atribuído à transição com os valores 0,5 s e com o tempo de atraso de 0,3 s. Vamos duplicar esse código duas vezes O segundo será F B com um tempo de atraso 0,5 s. E, para o LinkedIn, precisamos de um tempo de atraso de 0,7 s. Tudo bem, então, como você pode ver, tudo funciona bem A única coisa que precisa fazer é cuidar do botão. Temos que fazer algumas coisas. Por padrão, precisamos exibir o texto, entre em contato comigo. Depois de clicar no botão, ele deve mudar para o colchete angular Além disso, precisamos alterar a largura do botão e o raio da borda Então, primeiro de tudo, vamos centralizar o conteúdo. Quero dizer, os dois elementos estão perfeitamente dentro do botão. Precisamos selecionar um cartão, mas uma conduta. E então o ícone Font Awesome, precisamos do cartão VT e I. Primeiro de tudo, vamos fazer a largura cem por cento Em seguida, mude a posição, faça um máximo absoluto. Precisamos definir as propriedades superior e esquerda, ambas em 50 por cento. E, finalmente, precisamos usar a função Transform Translate. Temos duas partes aqui, -50% duas vezes. Portanto, essa técnica é usada para enviar perfeitamente para o elemento. Ok, então o conteúdo está centralizado. Agora temos que ocultar o colchete angular por padrão. Vamos selecionar o elemento e atribuir a ele opacidade zero e visibilidade Então, uma vez que clicamos no botão, precisamos ocultar o imposto, entre em contato comigo e exibir o colchete angular Portanto, neste caso, temos que usar a mudança de classe seguida pelo contato btn do cartão de classe , então precisamos de opacidade zero Visibilidade oculta. Para exibir os colchetes. Precisamos novamente de uma mudança de classe, seguida pelo elemento I. E, nesse caso, precisamos de opacidade com o valor um e, em seguida, visibilidade visível Tudo bem, como você pode ver, tudo funciona bem. Agora temos que cuidar do formato do botão. Quando clicamos nele, precisamos diminuir a largura do botão. Então, vamos selecionar um botão com a mudança de classe. Eu vou fazer com seis RAM. Em seguida, mude a posição correta. Vamos fazer isso como três RAM. Além disso, vou mudar um pouco a posição inferior, fazendo com que seja menos três RAM E, finalmente, use o raio da borda com o valor Então, se clicarmos no botão , ele mudará sua forma. Tudo bem, tudo funciona bem como um gás. A única coisa que precisamos fazer é adicionar os efeitos de transição. Vamos começar com o botão. Vou atribuir à transição o valor 0 e a duração 0,5 s. Em seguida, precisamos adicionar a transição ao cartão btn Vamos inserir aqui todos os 0,5 s e um pouco de tempo de atraso, 0,1 s. Em seguida, precisamos fazer a transição para, novamente, o contrato escrito por cartão, mas com a classe de mudança, vamos passar todos os 0,1 s. E, finalmente, usar a transição com o elemento I. Quer dizer, eu elemento com a classe mudo de direção 2.5 s. Tudo bem, então como você pode ver, tudo funciona perfeitamente e na verdade, terminamos com este pequeno projeto 17. Projeto 14 - Menu de grade em CSS: Neste vídeo, criaremos uma página de destino simples com um menu CSS Grid. O projeto será construído com base em tecnólogos. Usaremos HTML, CSS e um pouco de JavaScript. Tudo bem, vamos seguir em frente e primeiro descrever o projeto. Consiste em duas partes principais. A primeira será uma página de destino simples. Eu não coloquei aqui muitos elementos porque o foco principal do projeto será o layout de grade CSS. Temos aqui o banner com alguns textos e a imagem de fundo em tela cheia No canto superior esquerdo, é colocado um ícone de menu. Se eu clicar nele, essas linhas se moverão para o lado direito em ordem. O menu da grade aparecerá com alguns efeitos interessantes. Temos aqui alguns itens de menu bem alinhados. Também no canto superior esquerdo, vemos o botão de fechamento x. Se eu clicar nele, o menu será fechado. O projeto responderá a diferentes tamanhos de tela Se eu inspecionar a página e verificá-la em telas menores, você verá que ela é responsiva e tem uma boa aparência Uma coisa a observar aqui é que vamos usar a primeira abordagem de desktop. Construiremos o projeto para um tamanho de tela maior em que estou. Isso coincide com a largura de 1920 pixels, altura de 1080 Se você for usar esse tamanho de tela menor durante a criação deste projeto , talvez não pareça bom. Mas não se preocupe, no final do dia, nós o tornaremos responsivo a diferentes tamanhos de tela Enquanto isso, você pode usar ferramentas para desenvolvedores. Estou no modo responsivo e especifico a largura como 1920 pixels e a altura como 108 semanas Acho que estamos prontos para ir. Eu criei uma nova pasta na área de trabalho chamada menu CSS Grid, na qual você pode encontrar outra pasta para as imagens. Você pode baixar as peças de origem no link na descrição. Vou abrir essa pasta no VS Code. Então, vamos criar três arquivos diferentes para HTML. Vou chamá-lo de index.html. Então, precisamos do style.css. E eles se apaixonam pelo JavaScript, script.js. Logo depois disso, vamos criar o documento HTML básico no arquivo index.html. Para isso, vou usar o Emmet. Precisamos colocar um ponto de exclamação e pressionar Enter ou tab Então, vamos lá. Vamos mudar o título. Vou colocar aqui o menu CSS Grid. Em seguida, vou criar links para os arquivos CSS e JavaScript. Vamos abrir a tag do link e especificar aqui o caminho do arquivo. Precisamos do nome do arquivo style.css como arquivo JavaScript público. Vou abrir a tag de script. Em seguida, no atributo de origem, vamos especificar o nome do arquivo. Tudo bem, então todos os três arquivos estão conectados. Em seguida, vou trazer algumas fontes do Google. Ao longo deste tutorial, usaremos duas fontes diferentes. Vamos visitar o site do Google Fonts. Vou digitar aqui Google Fonts. Então, aqui está o site do Google Fonts. Vou procurar um roteiro de dança. Então aqui está. Depois disso, vamos procurar por Josephine Slab. Vou personalizar essa fonte porque usaremos esse telefone com diferentes espessuras de fonte. Então, vamos conferir aqui. Algumas caixas. Ok, finalmente, vamos pegar o link e colá-lo no elemento principal. Tudo bem, então estamos quase prontos para começar a programar. Por fim, quero executar o projeto no navegador. Para isso, vamos usar um dos pacotes de código de visualizações chamado Live Server. Isso nos permite executar a vida útil do projeto no navegador e fazer atualizações sem atualizar a página todas as vezes Então, eu recomendo instalar e usar este pacote. Ok, vamos colocar o editor e o navegador. Assim mesmo. E comece. Então, primeiro vou criar a marcação HTML para todo o projeto e depois começaremos a escrever CSS e JavaScript. Vamos criar a marcação para a primeira parte do projeto, que será a aterrissagem Vamos abrir a tag div. Ele envolverá todo o conteúdo dos projetos. Vou lhe dar um contêiner de classe. Em seguida, dentro do contêiner, vou inserir o ícone do menu de hambúrguer Ele será construído usando os desenvolvimentos. Então, vamos abrir o desenvolvimento e atribuir ao menu de hambúrguer da classe O ícone do menu consistirá em duas partes. O primeiro será o ícone do hambúrguer. Quanto à segunda parte , será o botão de fechamento x. Em primeiro lugar, vamos abrir um elemento div com linhas de classe Ele envolverá todas as três linhas Estou na primeira parte do ícone. Então, vamos inserir aqui três elementos div com algumas classes Quero dizer linha e linha um. Então eu vou duplicar essa linha de código duas vezes e mudar os nomes das classes com a linha dois e a linha três Em seguida, vou abrir outro div, que será um invólucro das linhas dos botões de fechamento do X. Eu quero dar a ele uma classe X btn. Depois disso, vamos inserir aqui o elemento div com as classes x linha e x linha um Em seguida, duplique-o e altere o nome da classe. Tudo bem, então isso é tudo sobre o menu de hambúrguer. Em seguida, vou cuidar do cabeçalho. Vamos abri-lo e atribuí-lo ao cabeçalho da classe. Em seguida, precisamos do banner. Então, vamos inserir aqui um novo desenvolvimento com o banner da turma O banner consistirá em dois elementos diferentes. O primeiro será o título. Quanto ao segundo, deve ser o parágrafo como primeiro. Vamos inserir aqui H1 e inserir aqui algum texto Essa é uma landing page. Em seguida, precisamos de um parágrafo com um texto com um, na verdade, vou inserir aqui o texto com um menu CSS Grid, mas quero usar alguns estilos diferentes para a grade CSS. Portanto, vamos agrupar essas duas palavras com elementos de extensão e , em seguida, escrever o menu. Tudo bem, vamos ver a primeira parte da marcação. Vamos continuar e criar o menu de navegação. Vou abrir os elementos de navegação atribuídos à navegação por classe Portanto, o menu de navegação será representado por uma lista. Vou dar a ele um menu de navegação de classe. Nesses elementos da lista, vou colocar alguns itens da lista. Vamos abrir os elementos LI. Deve ter um item de menu de navegação de classe. Em seguida, o item da lista incluirá um elemento de link com o link do menu class nav Então, como primeiro item de navegação vou inserir sua casa. No geral, terá 11 itens. Portanto, vou duplicar um elemento leve dez vezes. E então eu vou mudar rapidamente os itens. O segundo será sobre. Então teremos projetos. Blog. A próxima será a Galeria. Também terá preços de portfólio do que eventos. Clientes. A próxima serão as ofertas. E por último, vou colocar aqui contatos. Ok, então isso é tudo sobre a marcação HTML. Todos os elementos foram criados e agora estamos prontos para começar a estilizá-los. Vamos para o arquivo style.css. Em primeiro lugar, vou criar alguns estilos de redefinição. Quero me livrar da margem e do preenchimento padrão de cada elemento Para selecionar cada elemento, precisamos usar um asterisco E então, para me livrar da margem e do preenchimento padrão, vou definir os dois como zero Tudo bem? Então, ao longo deste tutorial, vou usar a RAM como unidade de medida. Por padrão, 1 g é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual Quero converter uma RAM em dez pixels porque acho que seria mais conveniente usar e calcular. Portanto, temos que diminuir o tamanho da fonte do elemento HTML e torná-lo em 62,5% Nesse caso, uma rampa deve ser igual a dez pixels. Então, agora, o tamanho dos elementos diminuiu e eles se tornaram menores. Tudo bem, vamos continuar e cuidar do cabeçalho. Eu quero que ele ocupe toda a janela de visualização. Então, vamos selecioná-lo e definir sua largura e altura. Da seguinte forma. Eu vou fazer com 100%. Quanto à altura, vou fazer com que seja uma centena de altura de janela de visualização Isso significa que ele ocupa cem por cento de toda a janela de visualização Depois disso, vamos definir a imagem como plano de fundo em tela cheia Em primeiro lugar, vou usar gradiente linear. E vou colocar aqui três valores RGBA diferentes. O primeiro será 884.170,7. A opacidade. Em seguida, vou usar 1887190 e opacidade Quanto à terceira cor, vamos usar aqui a cor preta. Precisamos de 03 vezes e de opacidade de 0,2. Depois disso, vamos especificar o URL. Quero dizer a parte da imagem. Temos uma pasta chamada imagens e precisamos selecionar PG dot JPG. Em seguida, precisamos do Center e também sem repetição. E, finalmente, vamos fazer a capa em tamanho de fundo. Ok, então o plano de fundo está pronto para o cabeçalho e depois vem o banner Eu quero colocá-lo no centro do empréstimo. Para isso, podemos usar algumas maneiras. Mas para mim, o melhor é o flexbox. Precisamos atribuir algumas propriedades do flexbox ao elemento de cabeçalho O primeiro será display flex, porque precisamos criar um contêiner header Flex Em seguida, temos que mudar a direção. Precisamos fazer com que seja uma coluna. Então, para centralizar os itens dentro do contêiner, precisamos justificar o centro de conteúdo e também alinhar o centro dos itens Tudo bem, então o banner está centralizado. Agora precisamos personalizar o título e o parágrafo. Vamos continuar e começar com o título. Vamos selecioná-lo. Em primeiro lugar, vou mudar a família de fontes. Vamos usar aqui um dos scripts de dança do Google Fonts. Em seguida, precisamos de coercição. Então eu vou aumentar o tamanho da fonte. Vamos fazer com que seja oito RAM. Também altere a espessura da fonte. Faça com que sejam 400. Depois disso, vou mudar a cor. Vamos fazer com que seja. E. E. Crie algum espaço entre as letras usando espaçamento entre letras, 0,5 rem Além disso, vou criar algum espaço na parte inferior do elemento usando margem, três rem inferiores. Finalmente, vamos usar a sombra de texto com os valores 0,2, 0,4 RAM. E a cor preta RGB a, três zeros e a opacidade Tudo bem, então o título parece muito bom. Vamos passar para o parágrafo. Vamos seguir em frente e selecionar esse elemento. Eu vou criar sua família de fontes. Novamente, roteiro de dança, letra cursiva. Em seguida, aumente o tamanho da fonte, torne-o para a RAM. Também mude a cor. Faça com que seja e. Eu vou criar um espaço entre as letras. Mas, nesse caso, vamos apontar para a RAM. E, finalmente, use novamente a sombra de texto. Na verdade, vou pegar essa linha de código daqui e colá-la no parágrafo. Tudo bem, a seguir, quero colocar o parágrafo no lado direito. Para isso, podemos usar o alinhamento de texto, certo? Lembre-se de que agrupamos as palavras grade CSS com um elemento de extensão porque precisamos de um estilo diferente para essas duas palavras. Então, vamos em frente e aplicá-lo. Vou selecionar o elemento de extensão. Vamos definir a família de fontes como Josephine slab serif. Em seguida, aumente o tamanho da fonte, faça com que seja cinco rem. Altere a espessura da fonte, torne-a 700. E, finalmente, transforme o texto em maiúsculas. Tudo bem, então finalmente terminamos o parágrafo e, na verdade, terminamos de trabalhar no banner Em seguida, é hora de personalizar o ícone do Menu. Estou na primeira parte, que consiste em três linhas brancas. Vamos seguir em frente e selecionar o Rapid Developments, que tem um menu de hambúrguer de classe Em primeiro lugar, vou torná-lo visível. Então, precisamos definir a largura e a altura. Vamos fazer dos dois uma rampa de 3,5. E também vou atribuir a ele uma cor de fundo temporária. Vamos torná-lo vermelho. No momento, o ícone é colocado no canto superior esquerdo do empréstimo Essa não é uma posição totalmente correta. Então, vamos definir a posição do ícone e torná-lo fixo. Além disso, vou especificar as posições superior e esquerda. Vou fazer com que os dois sejam 3,5 rem Tudo bem, então agora o ícone está posicionado corretamente. Por fim, quero mudar o tipo do cursor e fazê-lo apontar Ok, então, em seguida, vou mostrar as linhas. Primeiro, vamos selecionar o desenvolvimento do wrapper, que tem as linhas do nome da classe, e fornecer alguns blocos Vou definir a largura e a altura, ambas em 100%. Nesse caso, o elemento herdará a largura e a altura de seu elemento pai, o menu de hambúrguer E agora vamos cuidar das linhas. Selecione-os com uma linha de nome de classe comum. Eu vou começar com cem por cento. Quanto à altura. Vamos enfatizar a memória RAM. Também altere a cor do plano de fundo. Faça com que seja branco. E também vou fazer com que os cantos das linhas sejam ligeiramente arredondados. Para isso, vamos usar o raio da borda com o ponto de valor a Tudo bem, agora as linhas estão visíveis, mas como você adivinhou, precisamos cuidar da posição delas Para isso, vou usar novamente os livros flexíveis. Então, vamos atribuir às linhas. Display flex. Próximo. Precisamos mudar a direção. Eu vou fazer uma coluna. Em seguida, temos que criar algum espaço entre as linhas. E para isso, precisamos usar o conteúdo justificado com o espaço de valores uniformemente E, finalmente, precisamos alinhar os itens, ao centro. Ok? Então, agora, as linhas estão posicionadas corretamente. Se nos livrarmos do fundo vermelho, você os verá melhor. Tudo bem, na verdade, com a primeira parte do projeto, terminamos O cabeçalho está estilizado, parece muito bom. Agora temos que passar para a navegação. Vou criar o menu de navegação e, depois disso, farei com que funcione. Então, para continuar, vou esconder o cabeçalho por um tempo e as linhas e depois começar a trabalhar na navegação Vamos prosseguir e atribuir ao cabeçalho e à exibição das linhas Não. Tudo bem, então aqui temos apenas uma lista de navegação. Vamos começar a personalizar a navegação. Vou selecionar elementos suficientes. Primeiro, vamos definir sua largura e altura. Ambos 200 por cento. E eu vou mudar a cor de fundo. Vamos usar sua cor d, d, d. Então, agora a navegação começa no canto superior esquerdo. Isso acontece porque o cabeçalho fica oculto por algum tempo. Então, eu também quero definir a posição atual manualmente. Para isso, precisamos de posição absoluta. Em seguida, defina as propriedades superior e esquerda, ambas como zero. Agora, a navegação ocupa toda a largura e altura da página. Acho que é hora de personalizar um pouco os itens. Primeiro, vamos selecionar os elementos LI e eliminar os marcadores padrão No momento, esses marcadores não estão visíveis porque definimos o preenchimento Na verdade, se eu ligá-lo de volta , você verá as balas Vamos nos livrar deles. Vou selecionar elementos LI e isso está atribuído a eles, ou pelo menos não estilizar nenhum. Em seguida, vou selecionar os elementos do link. Em primeiro lugar, vamos nos livrar do padrão subjacente usando decoração de texto, nenhum. Em seguida, vou definir a família de fontes para Josephine Também aumente o tamanho da fonte, faça com 2,5 RAM. Em seguida, altere a espessura da fonte. Vou torná-lo um pouco mais ousado. Use 700. Em seguida, transforme o texto em maiúsculas E depois disso, vou criar algum espaço entre as letras. Vamos fazer questão de alugar. Ok. Então, os itens parecem muito melhores, mas vou adicionar a eles mais alguns estilos. Vamos mudar a cor do plano de fundo. Nesse caso, vou usar cores até cinco. Veja C7. Então, vamos deixar o texto em branco. E também faça os cantos dos elementos ao redor usando um raio de borda com o valor de Tudo bem, então é isso por enquanto em relação aos elementos do link Em seguida, temos que começar a usar a grade CSS Na verdade, vou executar o projeto no Mozilla Firefox porque agora ele tem as melhores ferramentas de desenvolvedor para grade CSS Quero dizer, é muito mais fácil trabalhar no Mozilla Firefox quando você lida com o layout de grade CSS Se não tivermos o Mozilla Firefox, recomendo baixá-lo e instalá-lo Vamos pegar o URL. Em seguida, abra o navegador e cole aqui. Então, temos aqui nosso projeto em funcionamento. Vou inspecionar a página. Então você vê aqui as ferramentas do desenvolvedor. É meio parecido com as ferramentas para desenvolvedores do Google Chrome, mas você verá algumas diferenças quando começarmos a usar a grade CSS, certo? Então, primeiro de tudo, vou fazer com que o elemento nulo greet container. Para isso, temos que atribuir a ela uma grade de exibição. Em seguida, temos que definir as colunas e as linhas. No caso dos elementos de navegação, teremos três colunas e três linhas Portanto, precisamos usar colunas de modelo de grade. O tamanho da primeira coluna deve ser para a RAM, então precisamos de uma unidade fracionária E depois novamente para a rampa. Quanto às linhas, como dissemos, precisamos de três delas. O tamanho da primeira linha deve ser de dez RAM. Então, novamente, uma unidade fracionária. E depois correr. Então, definimos as colunas e as linhas. E para vê-los melhor, vou marcar esta pequena caixa. E também vou exibir os números das linhas. Então, vamos lá. Agora nossa grade está visível. Infelizmente, no Google Chrome. No momento, não temos essa oportunidade. Tudo bem, deixe-me explicar o que essas colunas e linhas significam. Essas pequenas colunas serão esse ritmo. Então, na primeira linha, haverá o botão de fechamento x. Como menu dobrável em si. Ele vai ser colocado aqui no meio. Vamos definir a posição do menu de nozes. Vamos selecioná-lo. Em seguida, defina a coluna da grade com os números de linha 2.3 e a linha da grade. Os números de linha 2.3. Novamente. Como você pode ver, o menu está colocado corretamente na segunda coluna e agora é hora de colocar os itens para isso. Primeiro de tudo, temos que criar um menu suficiente, um contêiner de grade, para exibir uma grade. E depois disso, temos que definir as colunas e as linhas. Então, vamos usar colunas de modelo de grade. No geral, vou criar 12 colunas. Vamos usar a função de repetição. Em seguida, especifique o número das colunas 12 e esse tamanho, uma unidade fracionária Depois disso, vamos definir as linhas do modelo de grade. Use a função de repetição. Teremos quatro linhas, cada uma delas igual a uma unidade fracionária Além disso, vou criar também o espaço entre as células da grade usando a lacuna da grade igual à rampa. Tudo bem, então, primeiro de tudo, vamos exibir as linhas de grade do menu de navegação Como você pode ver, temos 12 colunas e quatro linhas. No momento, o layout está um pouco confuso, mas cuidaremos disso em breve Antes de começarmos a posicionar os itens individuais que eu quero usar, novamente, o Flexbox Usando algumas propriedades do flexbox, faremos com que os itens fiquem esticados nas células e também o conteúdo de cada item seja centralizado Portanto, temos que usar o display flex. Em seguida, justifique o centro de conteúdo. Além disso, precisamos alinhar o centro dos itens. E eu vou fazer com que a altura seja igual a 100%. Ok, então agora os itens parecem melhores e estão na posição padrão do que separadamente. Para selecioná-lo, vou usar o seletor de enésimo filho Portanto, precisamos de um item do menu de navegação seguido pelo seletor do enésimo filho. E temos que especificar aqui o número do item. E nós vencemos. Os primeiros itens devem ser colocados nas duas primeiras linhas e devem ocupar as três primeiras colunas. Portanto, precisamos de uma coluna de grade onde a linha número 1.4 e a função de saída com os números de linha 1.3. Então, o primeiro item é a posição. Vamos passar para o segundo. Na verdade, vou copiar esse código e depois alterar o número que precisamos. O segundo item também será colocado nas duas primeiras linhas, as colunas. Ele será colocado entre os números da quarta e da sétima linha. Portanto, precisamos da coluna 4.7 da grade e da linha da grade Os números da linha 1.3. Então, vamos deixar como está. Isso é tudo sobre o segundo item. Vamos prosseguir e passar para o próximo item, que será três. Então, o terceiro item será posicionado na primeira linha. Quanto às colunas, elas serão colocadas do número da sétima linha até o final do contêiner da grade. Portanto, precisamos de uma coluna de grade com uma linha número sete e menos um De acordo com a linha da grade, será 1,2. Como você pode ver, o terceiro item também foi colocado corretamente. Em seguida, vem o quarto item. Vou colocá-lo na segunda fila. E ocupará duas colunas, as colunas entre os números da sétima e nona linha Portanto, precisamos da coluna 79 da grade. Quanto à linha da grade, será 2,3. Tudo bem? Em seguida, temos o quinto item. Ele será colocado na segunda fila. Quanto às colunas, vou colocá-las entre os números da nona e da 11ª linha Então, vamos mudar aqui os valores que precisamos aqui, coluna da grade 911 e a linha 2.3 da grade Ok, então, passo a passo, estamos avançando e criando o layout da grade Vamos passar para o próximo item, que será o sexto. Portanto, ele deve ser colocado novamente na segunda linha. Quanto às colunas, elas ocuparão duas colunas no final do contêiner da grade. Então, precisamos que a coluna saia com os números de linha 11, n menos um. Nenhuma linha de grade. Novamente com números de linha 2.3. Tudo bem, é isso. Sobre o sexto item. Em seguida, vem o mesmo em um. Portanto, o sétimo item será colocado na terceira linha e ocupará seis colunas desde o início do recipiente de líquido. Precisamos de uma coluna de grade com uma linha de números 1.7. Quanto à linha da grade, ela deve ser 3,4. Ok, então isso é tudo sobre o sétimo item. Vamos passar para o próximo, que é o item. Então, ele será colocado novamente na terceira linha. Quanto às colunas, quero colocá-las da linha número sete até o final do contêiner. Portanto, precisamos de uma coluna de grade com uma linha número sete menos um e uma linha de grade três menos Ok? Portanto, restam apenas três itens. Vamos seguir em frente e definir suas posições rapidamente. Eu sei que esse processo é um pouco chato, mas é assim que a grade CSS funciona Vamos passar para o nono item. Então, o nono item será colocado na última linha e depois na quarta Quanto às colunas, vou colocá-las entre os números da primeira e da terceira linha para que ocupem as duas primeiras colunas. Precisamos da coluna 1.3 da grade. Quanto à linha da grade, precisamos de quatro e menos um Tudo bem, a seguir temos o 10º item. Ele será colocado novamente na quarta fila. E deve ocupar duas colunas da linha número três até a linha número cinco. Portanto, precisamos da coluna 3.5 da grade e sair da função novamente, quatro e menos um Tudo bem, finalmente, o último termo dos itens. Vou colocá-lo na última linha, bem como nas colunas. Ele será colocado entre a linha número cinco e a linha número sete. Portanto, precisamos da coluna 5.7 da grade. Grade uma linha novamente para n menos um. Tudo bem, então isso é tudo sobre o menu de navegação. Está bem posicionado, parece muito bom. E agora é hora de seguir em frente e cuidar das outras coisas. Acho que podemos voltar para o Google Chrome porque não precisamos mais da ajuda dos números das linhas da grade. Então, quando terminarmos o layout do menu de navegação, vou seguir em frente e cuidar do fechamento em x. Mas antes de tudo, vamos mostrar as linhas. Para isso, precisamos selecionar a linha x. Vamos definir a largura e a altura. Vou definir a largura para 3,5 rpm Quanto à altura, vamos fazer com que aponte para a RAM. Em seguida, altere a cor do plano de fundo. Vamos usar sua cor, 307bd F. E também vou usar o raio da borda com um ponto de valor Então, no momento, as linhas não estão visíveis porque acabaram atrás da navegação. Para exibi-los, precisamos usar uma dessas propriedades CSS chamada índice Z. E temos que atribuí-lo ao próprio menu de hambúrguer , porque a parte inferior faz parte Então, vamos definir o índice como, digamos, 100. Então, como você pode ver, as linhas são exibidas agora. Eles não têm a forma de x e nós temos que cuidar disso. Então, para fazer com que pareçam x, vou usar transformações CSS e, em seguida, elas giram e traduzem Então, vamos seguir em frente e selecionar a linha x um. Em seguida, use Transformar com a função de rotação. Vou girar a linha em -45 graus. Então vamos duplicar esse código, mudar o nome da classe Precisamos da linha x dois e também eliminamos o sinal de menos a partir daqui Ok? Então, no momento, não temos o x perfeito. Precisamos usar a função Translate. Além disso, ele nos permite mover o elemento horizontal ou verticalmente de acordo com os eixos x e y. Portanto, nesse caso, precisamos traduzir y com o valor 0,3 RAM S4 Na segunda linha, precisamos novamente traduzir Y, mas com pontos negativos, três rampas. Agora temos o x perfeito. A única coisa que vou fazer é mover o botão ligeiramente para baixo. Podemos fazer isso usando algumas maneiras diferentes. Nesse caso, vou usar posições. Quero centralizá-lo perfeitamente dentro do menu de hambúrguer Então, vamos seguir em frente e selecionar x btn. Em seguida, defina suas propriedades de posição , absoluta, definida, superior e esquerda, ambas em 50%. Em seguida, use transform translate. -50 por cento. Então, novamente -50 por cento. Na verdade, essa técnica é usada para centralizar perfeitamente o elemento dentro do contêiner. Tudo bem. Então é isso em relação ao botão de fechamento x. Agora é hora de fazer o menu de hambúrguer funcionar. Em primeiro lugar, vou mostrar de volta o empréstimo e ocultar o menu de navegação Então, vamos em frente e nos livremos da tela, nenhuma a partir daqui. Além disso, vou exibir o ícone do menu. Então vamos continuar e esconder a navegação. Nesse caso, vou fazer isso usando opacidade com valor zero e visibilidade Além disso, também precisamos das mesmas propriedades para o botão X, porque precisamos ocultá-lo. Então, vamos usá-los para X BTN. Tudo bem, então está tudo pronto para fazer o menu de hambúrguer funcionar A primeira coisa que precisamos fazer é criar o evento de clique. Para isso, vou usar JavaScript. Vamos abrir o arquivo script.js e selecionar o menu de hambúrguer Eu vou fazer isso usando o método seletor de consulta. Temos que anexá-lo ao documento e, dentro dos parênteses, temos que especificar o nome da classe, neste caso menu neste caso Em seguida, temos que anexar a ele um ouvinte de eventos. Para isso, temos que usar um método chamado add event listener São necessários dois argumentos. O primeiro será o tipo do evento. Como dissemos, vamos usar o evento de clique. Então, vamos passar isso aqui como um segundo argumento parcial. Deve ser a função que será executada assim que clicarmos no elemento. Nesse caso, vou usar uma função de seta. Tudo bem, agora temos que passar aqui o bloco de código que precisamos executar assim que clicarmos nos ícones e o evento for acionado Deixe-me explicar o que vamos fazer. Vou criar uma nova classe e CSS chamada change. Adicionaremos essa classe ao contêiner ao clicar. Para ser mais preciso, usaremos o método toggle, que significa que adicionaremos a classe ao contêiner se ele não a tiver E vamos remover a classe. Se o contêiner tiver um hábito o método de alternância nos permitirá evitar o uso de dois métodos diferentes: remoto e remoto Você pode perguntar por que adicionamos a classe ao contêiner e não ao menu de hambúrguer O motivo é que, uma vez que o contêiner tenha a classe, poderemos usá-la para todos os seus descendentes Tudo bem, vamos selecionar o contêiner. Vou usar novamente o método seletor de consulta. Em seguida, especifique aqui o contêiner className. Em seguida, vou usar uma das propriedades chamada lista de classes. Na verdade, ele nos dá todas as classes que o elemento tem. Depois disso, temos que adicionar a essa propriedade, eles alternam o método. E dentro dos parênteses, vamos especificar o nome da classe, que vamos criar Mudança. Ok, então é isso em relação ao JavaScript. Agora temos que criar uma alteração de classe no arquivo CSS. Então, quando clicamos no ícone, temos que ocultar o cabeçalho, exibir a navegação e também exibir o fechamento em x, mas essas são provavelmente as linhas do ícone do menu Não vou escondê-los simplesmente porque criaremos um efeito diferente. Tudo bem, então vamos esconder o cabeçalho. Precisamos de uma mudança de classe, seguida pelo cabeçalho da classe Portanto, se essa seleção for válida, precisaremos aplicar os seguintes estilos. Precisamos de opacidade zero e visibilidade oculta. Em seguida, vamos exibir a navegação. Use novamente a alteração com a navegação. E, nesse caso, precisamos de opacidade com o valor um e visibilidade visível Além disso, também temos que exibir o botão X. Então, vamos usar a mudança, seguida pela classe x BTN. E use aqui a opacidade um e a visibilidade visível. Tudo bem, então se eu clicar no ícone, o cabeçalho se ocultará e o menu de toque e o botão X aparecerão Tudo funciona bem até agora. Agora vou adicionar alguns efeitos interessantes ao nosso projeto. Quero ocultar o cabeçalho e exibir a navegação com alguns efeitos de desvanecimento Nós os criaremos usando transições CSS. Então, vou atribuir ao cabeçalho os valores de transição todos e 0,5 s, que é uma duração Precisamos do mesmo para a navegação, mas temos que usar a propriedade de transição com a mudança de classe. Portanto, se eu clicar no ícone que a navegação exibirá com um efeito de desvanecimento, e o mesmo acontecer no próximo clique, o empréstimo aparecerá com Certo? Em seguida, vou cuidar dos itens de navegação. Vamos dar uma olhada no projeto finalizado. Como eu disse, os itens aparecem da esquerda para a direita. Então, temos que nos mover e colocá-los no lado esquerdo. E então precisamos mover os itens para o lado direito do OnClick Então, vou usar Transform com a função de tradução. Nesse caso, precisamos traduzir x porque temos que mover o item de acordo com o eixo x, vamos inserir aqui menos cem por cento Então, no momento, o layout está errado, mas isso não é um problema porque, por padrão, ocultaremos os itens. Para isso. Vou usar uma dessas propriedades CSS chamada overflow hidden E temos que atribuí-lo ao elemento LI. Como você pode ver, os itens não estão completamente ocultos. Nós vemos as bordas deles. Vamos aumentar o valor da função de tradução. Eu vou fazer com que seja 105 por cento. Tudo bem, agora está melhor. Precisamos exibir os itens assim que clicarmos no ícone do menu. Mas, para tornar esse efeito melhor, também precisamos definir alguns tempos de atraso Portanto, para exibir de volta os itens de navegação, precisamos de uma mudança de classe, seguida pelo link, quero dizer link do menu de navegação Em seguida, precisamos transformar com a função translate x. E neste caso temos que passar aqui zero. Além disso, vou usar a transformação de transição em vez da duração de 0,7 s. Tempo de atraso de 1 s. Tudo bem, então, como você vê, temos aqui um bom efeito interessante Por enquanto, tudo funciona muito bem. Agora vou abordar aqui os ícones. Quero dizer, o ícone do Menu na aterrissagem e o encerramento dos atos. Mas o que vou fazer é mover as linhas do ícone da esquerda para a direita começando pela de cima. Então, para fazer isso, vou usar novamente a transformação com a função Translate e depois as transições. Então, temos que usar a mudança de classe seguida pela linha de classe que precisamos transformar novamente a função translate x e eu vou passar aqui 120 por cento. Ok? Agora precisamos de transição para todas as três linhas separadamente porque temos que atribuir a elas diferentes tempos de atraso Vamos começar com a linha um. Use a transformação de transição com uma duração de 0,5 s e o tempo de atraso de 1 s. Vamos duplicá-la duas vezes depois alterar os nomes das classes E também os tempos de atraso. Precisamos de 0,3 s para esta segunda linha e 0,5 s para a terceira linha. Tudo bem, se eu clicar no ícone, as linhas se moverão da esquerda para a direita em ordem Mas, na verdade, não é isso que queremos. Quero manter o empréstimo em exibição até que as linhas terminem a movimentação Precisamos usar algum tempo de atraso para o cabeçalho e também para a navegação Para o cabeçalho, vou usar 0,7 s. Isso provavelmente é navegação Vamos usar a mesma quantidade de tempo. Agora, como você pode ver, o problema está resolvido. Ok, tudo bem. Mas você também tem que cuidar de outras coisas. Precisamos esconder as linhas quando elas se moverem para o lado direito. Vamos continuar e usar o overflow. Oculto. Tudo bem, isso é tudo sobre o ícone do Menu. Vamos seguir em frente e trabalhar no botão de fechamento X. Também precisamos usar transições com esse elemento. Então, precisamos aqui da transição de todos os 0,5 s. E então temos que usar a transição com a mudança de classe. Porque temos que especificar aqui o tempo de atraso, 1,3 s. Então, se eu clicar no ícone, tudo funcionará perfeitamente. Então, podemos dizer que terminamos de construir nossos projetos. Tudo parece bom. E a única coisa que precisa fazer é tornar o projeto responsivo a diferentes tamanhos de tela Ao longo desta parte do tutorial, usaremos consultas de mídia CSS Vamos prosseguir e inspecionar a página e ativar o modo responsivo Então, como já definimos, o projeto é construído em uma tela maior em que eu estou. Isso coincide com a largura de 1920 pixels e uma altura de 1080 Vamos prosseguir e encontrar o primeiro ponto de interrupção. Estou no tamanho da tela em que precisamos fazer algumas alterações. Acho que temos que trabalhar em 1.300 pixels. Então, vamos criar uma consulta de mídia CSS com uma largura máxima de 1.300 pixels no tamanho da tela Vou mudar todo o layout da grade Então, vamos seguir em frente e selecionar um menu suficiente. Em seguida, defina as colunas do modelo de grade. Nesse caso, vou criar seis colunas. Portanto, use a função de repetição e especifique o número de colunas, seis e o tamanho, uma unidade fracionária Então precisamos cuidar da rosa. Também vou criar seis papéis. Então, vamos usar a função de repetição com valor 6,1 unidade fracionária Então, neste momento, o layout está bagunçado. Isso é óbvio. Então, vamos em frente e consertar isso. Precisamos definir novamente os números das linhas da grade para todos os itens. E, na verdade, vou copiar esse código. Então vamos colar aqui. Em seguida, comente rapidamente os números das linhas. Fora. Depois disso, vamos dar uma olhada na versão final do projeto. Vamos inspecionar a página, alternar o modo responsivo e diminuir a largura da janela Então é isso que queremos obter em nossa versão de projeto de trabalho. Vou começar com o primeiro item. Então, vou mudar os números das linhas da coluna da grade como 1.4. Quanto à linha da grade, também precisamos de uma. Essa é a aparência do primeiro item. Vamos prosseguir e alterar os números das linhas para o resto dos itens. Para o segundo, precisamos da coluna de grade quatro menos um E a linha 1.2 da grade. Para o terceiro item, vou definir uma coluna de saída 21 menos um e sair da linha 2.3 Na verdade, durante todo o processo de alteração dos números das linhas, podemos obter alguns resultados inesperados. Então, 18. Projeto 15 - Navegação em CSS: Neste vídeo, criaremos um menu de navegação com HTML e CSS. Isso será capaz de projetar, mas você poderá aprender sobre alguns efeitos de transição interessantes feitos pelo CSS. Então, acho que o projeto será interessante. Antes de começarmos a criar o menu, vamos descrevê-lo. Como você pode ver, temos um texto. Siga-nos no centro da página. Se eu passar o mouse, o menu aparecerá com algumas transições interessantes Temos uma linha horizontal no lado direito do texto, que aumenta da esquerda para a direita. Além disso, os itens do menu aparecem em ordem após algum atraso. E se passarmos o mouse sobre eles , obteremos fundos coloridos com uma transição suave Na verdade, esta é uma lista de mídia social e cada item tem sua própria cor de fundo original. Tudo bem, então é isso, o que vamos construir. Vamos começar. Eu criei uma nova pasta na área de trabalho na qual preparei dois arquivos diferentes para HTML e CSS. Vamos abrir a pasta no VS Code. No momento, o arquivo CSS está vazio. Quanto ao HTML, preparei a estrutura básica do documento HTML. Eu tenho dois links diferentes no elemento principal, um para fontes do Google e o segundo para o arquivo CSS. Você pode baixar os arquivos de origem no link na descrição. Vamos prosseguir e executar o projeto no navegador. Para isso, vou usar um dos pacotes chamado Live Server. Esse pacote nos permite executar o projeto no navegador e fazer as atualizações sem atualizar a página todas as vezes Este é um ótimo pacote, então eu recomendo baixá-lo do Extension Manager com estilo e usá-lo. Ok, finalmente, vamos colocar o editor e o navegador, assim, e começar a criar a marcação HTML Vou abrir um desenvolvimento que será o invólucro do menu Em seguida, precisamos de outro desenvolvimento com o menu da classe. Esse elemento incluirá todos os itens do menu. Então, teremos um texto nos seguindo, seguido pela linha. E então teremos cinco itens de menu diferentes. Então, vamos abrir um desenvolvimento com o nome da classe. Siga uma inserção, você o conteúdo. Siga-nos Em seguida, precisamos de outro div para a linha. Depois disso, vou criar um menu suficiente. Então, vamos abrir o desenvolvimento com o menu de navegação da classe e inserir aqui alguns itens de navegação Eles devem ser representados pelos elementos do link. Então, está abrindo com o link do menu da aula. Então, o primeiro item será o Facebook. Em seguida, duplique o link quatro vezes e altere os nomes das mídias sociais O segundo será o Instagram. Então teremos o Twitter, o LinkedIn. E o último será o YouTube. Ok, então isso é tudo sobre a marcação HTML. Agora temos que começar a escrever um pouco de CSS. Em primeiro lugar, vou criar alguns estilos comuns e redefinidos para cada elemento. Para selecionar cada elemento, precisamos usar um asterisco Vamos eliminar a margem e o preenchimento padrão. Vou definir os dois como zero. Em seguida, altere a família da fonte. Vamos fazer areia movediça. Ok, então, durante todo o projeto, vou usar a RAM como uma unidade de medida. No momento, uma rampa é igual a 16 pixels, porque o tamanho da fonte do HTML é igual a Quero alterar e converter uma rodada em dez pixels porque acho que é muito mais conveniente calcular e usar para converter uma rampa em dez pixels, precisamos diminuir o tamanho da fonte do HTML e fazer com que seja 62,5% Como você pode ver, os elementos mudaram de tamanho e ficaram menores. Ok, vamos seguir em frente e começar a trabalhar na embalagem. Em primeiro lugar, vou definir a largura e a altura. Vamos definir com 200 por cento. Quanto à altura, vou fazer com que seja 100% da janela de visualização Portanto, temos que usar 100 vh e também alterar a cor de fundo Vamos usar aqui a cor ou 262626. Tudo bem. Agora vou colocar o menu no centro da página. E para isso, vamos usar um flexbox. Precisamos aqui, display flex. Então, para centralizar o menu horizontalmente, vamos usar o centro de conteúdo justificar Para a centralização vertical, precisamos usar o alinhamento ao Tudo bem? Então, no momento, o menu está colocado no centro, mas os itens não estão bem visíveis. Vamos em frente e consertar isso. Vou selecionar itens. Ambos nos seguem e os itens do menu. Porque precisamos de estilos semelhantes para eles. Vamos aumentar o tamanho da fonte e transformá-la na RAM. Em seguida, altere a espessura da fonte. Faça com que seja 600. Além disso, vou torná-los brancos. Em seguida, transforme o texto em maiúsculas. Crie algum espaço entre as letras usando espaçamento entre letras, 0,1 rem E, finalmente, vou criar algum espaço no lado direito dos itens usando a margem direita para ratos Então, no momento, os itens parecem muito melhores. Eles estão visíveis e eu vou seguir em frente e cuidar do menu. Vou colocar os itens lado a lado horizontalmente que O flexbox. Novamente, precisamos do display flex E então, para a centralização vertical, precisamos alinhar o centro dos itens E, finalmente, mude o tipo do mais grosso, torne-o Tudo bem, isso é tudo para os itens por enquanto. Vou seguir em frente e personalizar a linha. Então, vamos seguir em frente e selecionar os desenvolvimentos que têm a linha do nome da classe. Primeiro, vamos definir a largura e a altura. Vou fazer a largura de dez rampas. Quanto à altura, vamos fazer com que seja 0,1 rem. Finalmente, crie espaço no lado direito usando a margem direita? Com valor de cinco rodadas. No momento, nada está acontecendo aqui. A linha não está visível e vou exibi-la usando os pseudoelementos posteriores Então, vamos selecionar a linha com depois. Em seguida, deixe o conteúdo vazio. E também defina a posição tornando absoluta. Agora, para posicionar a linha de acordo com seu elemento pai, temos que atribuir aos desenvolvimentos a posição relativa Em seguida, defina a largura e a altura. Precisamos fazer os dois cem por cento. E finalmente, vamos mudar a cor de fundo, torná-la branca. Agora a linha está visível e agora é hora de fazer o menu funcionar. Precisamos selecionar o menu não atribuído ao display flex. Em seguida, selecione o link. Livre-se dos estilos padrão usando a decoração de texto. Nenhum. Talvez esteja posicionado de forma relativa. Em seguida, vou colocar os itens abaixo. Para isso, precisamos de um top com valor de cinco rodadas. Então, agora os itens estão posicionados em seus lugares padrão. Em seguida, precisamos ocultá-los e exibi-los ao passar o mouse. Então, para ocultar os itens, vamos usar a opacidade zero. Em seguida, selecione o menu com o mouse, seguido pelo link do menu Então, aqui precisávamos selecionar o menu porque precisamos passar o mouse sobre o menu Se selecionarmos os textos para nos seguir, teremos alguns problemas no futuro. Porque, eventualmente, também precisamos passar o mouse sobre os itens para alterar as cores de fundo Então, vamos tornar os itens visíveis e colocá-los de volta em suas posições. Portanto, precisamos aqui do zero superior e da opacidade um. Agora, os itens estão ocultos por padrão e, se passarmos o mouse sobre Siga-nos, eles aparecerão Mas aqui temos o problema. Se eu passar o mouse sobre o menu inteiro , os itens aparecerão De qualquer forma. Na verdade, não precisamos disso. Precisamos exibir os itens depois de passar o mouse sobre Siga-nos. Para conseguir isso, precisamos desativar os eventos do ponteiro do menu Quero dizer, quando passamos o mouse sobre o menu, os itens não devem aparecer Então, vou usar uma dessas propriedades CSS chamadas eventos de ponteiro E vou configurá-lo como nenhum Agora, se eu passar o mouse sobre o menu inteiro, os itens não serão exibidos Na verdade, esse ainda não é o resultado que queremos que ele obtenha. A próxima etapa é ativar os eventos do ponteiro para o retorno do menu Mas temos que fazer isso ao passar o mouse. Então, vamos selecionar o menu com o mouse e criar eventos de ponteiro. Além disso, também precisamos habilitar os eventos indicativos para o follow us. Caso contrário, não funcionará. Então, vamos selecionar elementos div com a classe follow e criar seus eventos de ponteiro. Agora, quando eu passar o mouse sobre Siga-nos, os itens serão exibidos Se eu passar o mouse sobre eles , eles ainda serão exibidos. Mas se eu passar o mouse sobre os itens enquanto eles estiverem ocultos, eles não serão exibidos porque, no momento , a propriedade de eventos do ponteiro está desativada Então, definitivamente precisamos passar o mouse sobre os seguidores. Espero que faça sentido para você. Agora que conseguimos exibir os itens, é hora de cuidar dos efeitos de transição. Além disso, temos que fazer a linha funcionar. Então, vou usar a transição para os itens, mas com um tempo de atraso diferente. Vamos seguir em frente e selecionar o item separadamente usando a pseudoclasse do enésimo filho Portanto, precisamos de um link de menu seguido pela função enésima criança. Temos que especificar aqui o número dos itens. Temos que começar de um e passar por cinco. Porque, no geral , temos cinco itens. Agora precisamos fazer a transição com os seguintes valores. Precisamos primeiro de um topo com uma duração de 0,5 s e com o tempo de atraso de 0,1 s. Em seguida, precisamos de opacidade de 0,5 s. E novamente com o tempo de atraso de 0,1 s. Vamos duplicar esse código quatro vezes e depois alterar os números dos itens e também a quantidade do tempo de Para o segundo item, precisamos de 0,2 s. Quero dizer, o tempo de atraso. Para o próximo, precisamos de 0,3 s, depois de 0,4 s. Finalmente, para o último item, precisamos de 0,5 s. Então se eu passar o mouse sobre o texto, os itens aparecerão bem com algum tempo de atraso Ok? Agora vou fazer essa linha funcionar. Por padrão. Deveria estar escondido. E quando passamos o mouse sobre o texto, ele deve ser exibido da esquerda para a direita. Vou tornar sua largura zero por padrão. Em seguida, vou selecionar o menu com o mouse, seguido pela linha após os pseudoelementos E temos que aumentar a largura em cem por cento. Por fim, vamos usar novamente a transição. Precisamos aqui com, com uma duração de 0,5 s. Tudo bem, então como você pode ver, a linha está funcionando bem e na verdade, estamos quase terminando nosso projeto A última coisa que vou fazer é mudar as cores de fundo quando passarmos o mouse sobre os itens Vamos continuar e selecionar novamente os itens separadamente usando a pseudoclasse nª criança Mas agora com mais. Então, precisamos do link do menu. Então, precisamos usar o nth-child one. Em seguida, passe o mouse. O primeiro item é o Facebook. Então, vamos mudar a cor de fundo. Use aqui a cor original do Facebook. É 35998. Em seguida, duplique esse código quatro vezes e altere os números e as cores O segundo será três F, sete a nove. O próximo deve ser 55 ACE. Então temos 0077, B5. Finalmente, precisamos do cd para 01. E depois disso, vamos adicionar as transições aos itens. Vou usar aqui, o multi grosseiro. Em seguida, insira a cor de fundo, o ponto de duração ou o segundo. Como você pode ver, quando passamos o mouse sobre o estado do item, altere a cor de fundo suavemente A única coisa que eu não gosto aqui é a forma dos fundos Vou torná-lo ligeiramente arredondado e também quero criar algum espaço dentro deles. Então, precisamos de acolchoamento. Também valorizamos 0,5 rem e raio da borda com o valor de 0,5 grama Tudo bem, agora tudo funciona perfeitamente e, na verdade, terminamos nosso projeto 19. Projeto 16 - Menu Dropdown: Neste vídeo, vamos criar um menu suspenso com HTML, CSS e O Dropdown terá alguns efeitos interessantes de passar o mouse. O projeto será pequeno, mas você aprenderá como criar alguns efeitos interessantes usando HTML, CSS e JavaScript. Tudo bem, vamos dar uma olhada nos projetos. Temos aqui uma imagem de fundo em tela cheia com um título no centro Além disso, você pode ver três itens de navegação diferentes na parte superior da página. Se passarmos o mouse sobre eles, um menu suspenso será exibido com alguns bons efeitos de transição Ok, então é isso, o que vamos construir. Eu criei uma nova pasta na trabalho chamada Menu Dropdown. Vamos abrir essa pasta no código VS. Como você pode ver, eu tenho aqui alguns arquivos diferentes. Quero dizer arquivos para HTML, CSS e JavaScript. E também preparei o arquivo de texto no qual guardo alguma confiança nos meios do Dropdown Além disso, tenho uma pasta para a imagem de fundo. Tudo bem, vamos prosseguir e executar o projeto no navegador Para isso, vou usar um pacote chamado Live Server, que nos permite abrir um projeto no navegador e fazer atualizações sem atualizar a página a cada vez Então você pode baixar e instalar este pacote. Além disso, você pode baixar os arquivos de origem iniciais no link na descrição Ok, finalmente, vamos colocar o editor no navegador. Assim mesmo. E comece a criar a marcação HTML. Eu já preparei o documento HTML básico aqui. Eu tenho dois links diferentes e tinha elementos. Um para a fonte do Google e o segundo para o arquivo CSS. Além disso, tenho uma tag de script para o arquivo JavaScript abaixo. Vamos abrir os empreendimentos, que serão o contêiner de todo o conteúdo. Em seguida, vou abrir um elemento de seção com o wrapper Class Esta seção consistirá em duas partes diferentes. O primeiro será um banner com um título. Quanto à segunda, deve ser a Navegação. Então, vamos inserir aqui no desenvolvimento com o nome da classe binário. Então, dentro do desenvolvimento, vamos abrir o título H1 com o texto do banner da classe com o menu suspenso de conteúdo Tudo bem, a seguir vou abrir um elemento nulo, mas a barra de navegação do nome da classe Portanto, teremos um mínimo principal com três itens de lista diferentes dentro da barra de navegação E cada um deles terá seu próprio menu suspenso. Vamos abrir os elementos do URL com um nome de classe. Agora, pelo menos. Em seguida, precisamos do elemento LI, que deve ter o item de navegação da classe Ele será seguido pelo link com a classe nav link e colocará o texto de desenvolvimento web Então, como dissemos, cada item de navegação deve ter seu próprio menu suspenso. Portanto, vamos inserir aqui uma nova lista onde o nome da classe é suspenso. No primeiro menu suspenso, teremos seis itens de lista diferentes Vamos abrir o primeiro. O item Class Dropdown que insere aqui o link com o link Dropdown do nome da turma Então, vamos inserir aqui alguns nomes de tecnologia com as descrições. O primeiro será HTML. Em seguida, abra o elemento P. E agora vou pegar a descrição do arquivo de texto. Precisamos aqui da descrição do HTML. Vamos colar aqui. Como eu disse, no geral, teremos seis itens. Então, vamos duplicar a mentira cinco vezes. O segundo será CSS. Vamos pegar sua descrição no arquivo de texto. O próximo deve ser reagir. Então teremos o node seguido pelo expresso O último será o mongodb Tudo bem, vamos ver o primeiro menu suspenso Vamos duplicar o primeiro item inteiro do romance com seu Dropdown O segundo item será o Front-end. Nesse caso, no geral, teremos quatro itens diferentes. Vou deixar aqui HTML e CSS do que CSS duplicado. E insira aqui o JavaScript com sua descrição. Eu vou sair daqui, reagir e também me livrar do resto dos átomos Tudo bem, isso é tudo sobre o segundo item. O terceiro item será o back-end. E vou deixar aqui apenas os últimos três itens. Ok? Portanto, a última coisa que precisa fazer no arquivo HTML é criar o desenvolvimento, que será usado como plano de fundo do menu suspenso Vamos inseri-la logo acima da tag de navegação de fechamento e atribuir a ela o nome da classe, Dropdown PG. Tudo bem, isso é tudo sobre o HTML dos elementos criados e preparados Em seguida, temos que começar a escrever um pouco de CSS. Em primeiro lugar, vou criar alguns estilos de redefinição para todos os elementos. Para selecioná-los, precisamos usar um asterisco Vamos eliminar a margem e o preenchimento padrão. Vamos definir os dois como zero. Além disso, vou remover o sublinhado padrão das visualizações e os marcadores padrão dos itens da lista para que precisemos usar a decoração de texto com o valor nenhum e também o estilo da Por fim, altere a família da fonte. Ao longo deste projeto, vamos usar uma fonte chamada EB, Garamond, grupo de fontes Tudo bem, então vamos ver agora o conteúdo tem uma aparência diferente Ao longo deste projeto, usaremos a RAM como unidade de medida. Por padrão, 1 g é igual a 16 pixels porque o tamanho da fonte do HTML é igual a 16 Quero converter uma RAM em dez pixels. E para isso, precisamos diminuir o tamanho da fonte do HTML. E temos que fazer com que seja 62,5 por cento. Ok, vamos começar a trabalhar na embalagem. Vou expandir o wrapper para a página inteira. Para isso, vamos definir sua largura como cem por cento. Quanto à altura, vou fazer com que seja 100% da janela de visualização Portanto, precisamos aqui de 100 pH. Depois disso, vamos definir a imagem como plano de fundo em tela cheia Primeiro, vamos usar gradiente linear com cores brancas, mas com opacidade diferente No primeiro caso, vou usar o ponto de opacidade para. Quanto ao segundo caso, vamos usar o ponto de opacidade para. Depois disso. Temos que especificar o URL da imagem. Como você sabe, temos uma pasta chamada imagens na qual eu armazeno uma imagem chamada BG dot JPG. Em seguida, precisamos do Center e não repita. E, finalmente, precisamos definir o tamanho do plano de fundo com o valor cover. Tudo bem, como você pode ver, definimos a imagem em tela cheia como plano de fundo E a seguir eu vou cuidar do painel. Então, vamos prosseguir e selecioná-lo. Vou definir sua largura em 200 por cento. Além disso. Precisamos posicioná-lo. E para isso, vamos tornar sua posição absoluta. Em seguida, vou movê-lo para baixo com a posição superior. Vamos defini-lo para 35%. Ok, então a posição do banner foi alterada e agora temos que trabalhar no título em si. Vou colocá-lo no centro da página e também vou fazer com que pareça melhor. Então, vamos selecionar o texto do banner. Vamos colocá-lo no centro usando o centro de alinhamento de texto. Em seguida, aumente o tamanho da fonte, transforme-a em sete RAM. Também mude a cor vou torná-la branca. Depois disso, vamos transformar o texto em maiúsculas usando a propriedade de transformação de texto Além disso, quero criar algum espaço entre as letras usando o espaçamento entre letras com o ponto de valor até a rampa Finalmente, vou usar algum efeito de sombra. Vamos inserir os valores 0,2, 0,5 RAM. E como cor, vamos usar 888. Tudo bem, então, na verdade, com a primeira parte, terminamos. Estou no banner. Agora temos que cuidar da navegação. Vamos seguir em frente e selecionar a lista principal, que tem a classe. Não menos importante. colocar os itens da lista horizontalmente em uma E para isso, vamos usar o flexbox. Precisamos de display flex. E então, para centralizá-los horizontalmente, vamos usar justify Em seguida, vou trabalhar no elemento LI. Então, vamos selecioná-lo com o item de navegação da classe. Em primeiro lugar, vamos criar algum espaço na parte superior dos elementos usando a margem superior com valor em rams. Em seguida, vou colocar o texto no centro usando o centro de alinhamento de texto E, finalmente, vamos definir a largura. Vou configurá-lo para 26 larguras de janela de visualização. Isso significa que definimos a largura como 26 por cento da janela de exibição Finalmente, vamos personalizar os links, selecioná-los, aumentar o tamanho da fonte, transformá-los em rams. Além disso, vou mudar a espessura da fonte. Vamos configurá-lo para 600. Em seguida, transforme o texto em maiúsculas. Mude a cor. Nesse caso, vou usar cores quatro ou cinco F9 FBI e criar algum espaço entre as letras Vamos definir o espaçamento lateral para 0,1 RAM. E, finalmente, vou usar a sombra com os valores de zero pontos para medir 0,5 RM. E a cor seja 888. Tudo bem, então, com os itens da lista principal, terminamos. Agora tenho que cuidar dos menus suspensos. Vamos em frente e selecioná-los na classe Dropdown. Vamos criar algum espaço na parte superior usando uma RAM na parte superior da margem. E também vou mudar a cor de fundo da lista por um tempo. Vamos torná-lo branco. Certo? Em seguida, vou seguir em frente e personalizar o item suspenso. Então, vamos selecioná-lo. No momento, o texto é colocado no centro, mas precisamos colocá-lo no lado esquerdo. Então, vamos usar textos alinhados com o valor restante. Também vou criar algum espaço usando o preenchimento. Vamos configurá-lo para duas rodadas. Na parte superior, mais de duas pistas no lado direito, zero na parte inferior e 2 g no lado esquerdo. Certo. Na verdade, também precisamos da mesma quantidade de espaço no final da lista. Quero dizer, depois do último item. Para isso, vamos usar uma pseudoclasse chamada last-child e Precisamos do item Dropdown, seguido pela última pseudoclasse infantil Para criar algum espaço na parte inferior, vamos usar o valor de duas rampas no valor de padding-bottom. Tudo bem. Então isso é tudo sobre os elementos LI. Vamos continuar e personalizar os links. Selecione o link suspenso. Vou mudar o tamanho da fonte, torná-la 1,6 RAM. Além disso, deixe o peso da fonte em negrito. Transforme texto em maiúsculas. E, finalmente, mude a cor. Vou usar novamente a cor 245, F9. Fique bem com os links, terminamos. Finalmente, vou começar as descrições. Eles são representados pelos elementos P. Então, vamos selecioná-los. Vou aumentar o tamanho da fonte. Vamos fazer uma rodada de 1,6 e mudar a cor. Vamos usar aqui F5, F6, 061, Tudo bem, então, agora, os menus suspensos E, na verdade, estamos quase terminando com o estilo. Como você pode ver, o título Menu suspenso é colocado na parte superior dos menus Eu quero colocá-lo atrás deles. E para isso vou usar a propriedade z-index. Em primeiro lugar, vamos definir a posição do Dropdown, caso contrário, o índice não funcionará Vamos tornar a posição relativa e depois usar o valor do índice. Digamos 100. Tudo bem, então vamos considerar que o título é colocado atrás dos menus E agora vou criar um efeito de foco. Vamos ocultar os menus por padrão e exibi-los ao passar o mouse Então, para ocultá-los, vamos usar a opacidade zero e a visibilidade Em seguida, selecione o item de navegação com o mouse, seguido pelo menu suspenso Portanto, para exibir a especificação do menu, precisamos de opacidade e visibilidade visível Então, agora, se eu passar o mouse sobre o item que os menus serão exibidos Mas, na verdade, temos aqui um pequeno problema. Não precisamos passar o mouse sobre o item em si porque, se passarmos o mouse abaixo, os menus serão exibidos de Então, para corrigir isso, temos que definir a altura como zero. Por padrão. Precisamos torná-lo automático ao passar o mouse. Então, agora o problema está resolvido. Finalmente, vamos adicionar aqui uma transição com valores todos e 0,1 s. Tudo bem? Portanto, esse é um Dropdown padrão simples , sem efeitos adicionais Vamos dar uma olhada mais uma vez na versão final de nossos projetos. Quando passamos o mouse sobre os itens o plano de fundo aparece em um lugar diferente Para ser mais preciso, a partir do local em que passamos o mouse na última vez Além disso, esse fundo é um elemento diferente e não apenas a cor de fundo. Como você se lembra, criamos o desenvolvimento com um nome de classe, Dropdown BG em HTML Então, vamos selecionar esses elementos e definir sua largura e altura. Vou definir a largura para 40 ensaios. Quanto à altura, vou fazer 60 g. Na verdade, definimos essas propriedades e valores apenas temporariamente. Eventualmente, nós os definiremos a partir do JavaScript. Agora, para tornar o fundo visível, vou definir a cor do plano de fundo. Quero que o plano de fundo seja um pouco transparente. Então, vamos usar aqui o valor RGBA 243, novamente, 243243 , E, na verdade, livre-se do fundo branco no menu suspenso Tudo bem, então considera-se que o plano de fundo é viável. Vamos torná-lo ligeiramente arredondado usando o raio da borda com o valor de E também crie alguns efeitos de sombra usando sombra de caixa com o valor 0,5 RAM, uma RAM e a cor 757575 Em seguida, vou criar uma pequena flecha. Quero dizer a forma literal, que você vê aqui. Para isso, vamos usar um desses pseudoelementos chamados anteriormente Selecione Dropdown VG com antes dos pseudoelementos. Em primeiro lugar, vou esvaziar o conteúdo. Então, precisamos tornar sua posição absoluta para posicioná-la da maneira correta. Além disso, precisamos definir a posição de seu elemento pai. Vamos torná-lo absoluto também. Depois disso, vou dar a forma de estar antes dos pseudoelementos Vou fazer isso usando algumas propriedades de borda. Vou começar com a borda esquerda. Vamos atribuir a ele os valores de uma RAM, sólida e a cor transparente Então eu vou duplicá-lo duas vezes. A segunda propriedade será pobre. A direita, com os mesmos valores da terceira, terá a borda inferior da cor. Vamos usar o vermelho Tudo bem, então a seta é viável e agora temos que cuidar de sua posição Quero colocá-lo perfeitamente no centro do plano de fundo. E também deve ser colocado na parte superior. Então, vou colocá-la na primeira posição zero. Além disso, precisamos ficar em 50 por cento. Além disso, temos que usar o Transform. Com a função de tradução. Precisamos passar aqui os valores -50 por cento e depois -100% Ok, a última coisa que tive que fazer é mudar a cor. Vamos usar aqui a mesma cor de luz em vez da vermelha. Vamos copiá-lo e colá-lo aqui. Como eu disse, estávamos definindo largura e altura temporariamente, e agora vou me livrar delas. E também temos que ocultar o plano de fundo por padrão. Portanto, precisamos aqui da opacidade zero e da visibilidade oculta Tudo bem, então com o CSS, estamos quase terminando. Agora é hora de escrever um pouco de JavaScript. Vamos para o arquivo script.js. Em primeiro lugar, vou criar uma variável na qual armazenaremos um elemento DIV com a classe Dropdown PG Então, crie uma nova variável, chame-a de Dropdown PG Em seguida, selecione o elemento usando o método seletor de consulta. Precisamos especificar aqui o nome da classe, que será Dropdown BG Ok, agora precisamos anexar a cada item de navegação um manipulador de eventos com o mouse sobre o manipulador de eventos Para isso, precisamos selecionar todos os itens e percorrê-los. Então, vamos prosseguir e selecionar itens de navegação usando o seletor de consulta, todos os métodos Precisamos especificar aqui o item Nome da classe agora, na verdade, o seletor de consulta, todos os retornos do método e um objeto semelhante a uma matriz chamado E temos que transformá-lo em uma matriz. Para isso, vou usar o método array dot from. Depois disso, vamos usar um dos métodos auxiliares de matriz chamados para cada um Isso nos permite executar a função para cada item da matriz separadamente. Precisamos passar aqui uma função de seta que pegue o parâmetro que será o item atual durante o loop pela matriz Agora temos que anexar ao item o mouse sobre o manipulador de eventos Então, precisamos que seu próprio mouse passe o mouse. Na verdade, o evento mouse over é semelhante ao hover em CSS. Então, ao passar o mouse, temos que tornar o fundo visível. Portanto, temos que inserir sua opacidade de pontos no estilo Dropdown PG igual Então eu vou duplicar essa linha de código. Nós precisamos aqui. Visibilidade. Nós desvalorizamos o viável No momento, o fundo não está visível porque não tem a largura e a altura. Como dissemos, vamos definir largura e altura a partir do JavaScript. Então, vamos em frente e fazer isso. Defina uma largura para o Dropdown BG. Quero dizer, precisamos de largura de ponto no estilo Dropdown PG. Então, vamos fazer com que a largura do plano de fundo seja igual à largura do próprio menu suspenso. Quero dizer, o Dropdown que deve ser exibido ao passar o mouse. Para isso, vou usar um dos métodos de JavaScript chamado get computed style Esse método nos fornece todas as propriedades e valores CSS computados reais do elemento especificado Então, vamos usar esse método. Dentro do parêntese. Precisamos especificar que o elemento será um Dropdown. E para alcançar o elemento bidimensional, vamos pausar aqui, item pontilha o último elemento filho Porque se olharmos para o arquivo HTML, descobriremos que o Dropdown é o último elemento secundário da coisa agora, certo? Ok, finalmente, precisamos escolher com a propriedade. Em seguida, precisamos exatamente o mesmo para a altura. Então, vamos duplicar essa linha de código e transformar a largura em altura Então, se eu passar o mouse sobre os itens, fundo será exibido Ele mudou sua largura e altura dependendo do item sobre o qual estamos passando o mouse. Mas o problema aqui é que o plano de fundo tem uma posição errada. Então, precisamos cuidar disso. Antes disso, vamos adicionar uma transição ao plano de fundo, precisamos atribuir CSS a ela, todos os valores terminam em 0,3 s. Tudo bem, agora temos um efeito de transição suave e é hora de cuidar da posição do plano de fundo Vou defini-lo dinamicamente a partir do JavaScript. Vamos primeiro definir a posição superior. Use Dropdown, seja no estilo G dot top. Agora vou usar modelos ES6, strings. Vamos abrir os backticks. Então, precisamos do cifrão com chaves encaracoladas. Portanto, temos que definir a posição superior igual ao deslocamento superior do Dropdown Na verdade, a propriedade offset top retorna a posição superior em relação à parte superior do elemento pai E isso nos dá o valor em pixels. Então, precisamos inserir aqui item.name, last elements, child Como precisamos ter acesso ao Dropdown, ele deve ser seguido pelo offset top Depois disso, temos que especificar Px porque precisamos de pixels. Na verdade, também precisamos exatamente do mesmo para a posição esquerda. Então, vamos duplicar essa linha de código e mudar de cima para a esquerda Agora, se eu passar o mouse sobre os itens, esse plano de fundo será exibido nas posições corretas. Então, tudo funciona bem , exceto uma coisa. Se eu colocar o mouse fora do item , o conteúdo do menu suspenso será ocultado O plano de fundo em si manterá esse plano. Portanto, temos que escondê-lo no evento Mouse Out. Portanto, precisamos de item.name com o mouse. Então, vamos pegar essas duas linhas daqui, colá-las e alterar os valores. Para a opacidade, precisamos de zero. Quanto à visibilidade, ela deve ser aquecida. Ok? Agora o problema está resolvido. Tudo funciona bem. Mas, na verdade, temos aqui um pequeno problema. Precisamos de um pequeno atraso até que os itens suspensos sejam exibidos E também vou exibi-los da direita para a esquerda. Para isso, vamos usar Transform com a função translate. Quero dizer traduzir de acordo com o eixo X como valor. Vamos inserir aqui dez por cento. Em seguida, ao passar o mouse, temos que tornar o valor da função Translate X zero Finalmente, vamos usar aqui a transição com algum tempo de atraso. Precisamos atribuir a isso tudo menos a duração de 0,1 s e o tempo de atraso de 0,2 s. Ok, então agora tudo funciona perfeitamente e, na verdade, de forma estranha feito com este pequeno projeto Espero que tenha sido interessante porque usamos aqui algumas técnicas diferentes e espero que você aprenda algumas coisas novas. 20. Projeto 17 - Navegação: Neste vídeo, criaremos um menu criativo agora superior com HTML, CSS e JavaScript. Tudo bem, vamos continuar e descrever o projeto. Temos um botão no centro da página com três pontos. Se eu clicar nele, esses pontos se transformarão em x com uma transição suave E também a barra de navegação, que exibiremos com alguns itens de navegação Se eu clicar no X, o menu será fechado novamente com alguns efeitos de transição. E também recuperaremos três pontos em vez de x. Então é isso. Este projeto vai ser pequeno, mas espero que seja interessante. Então, vamos começar. Eu criei uma nova pasta na área de trabalho na qual tenho três arquivos diferentes para HTML, CSS e JavaScript. Vamos abrir esse problema no código VS. Na verdade, os arquivos CSS e JavaScript estão vazios no momento. Quanto ao arquivo index.html, preparei o documento HTML básico. Eu tenho dois links nos elementos principais, um para ícones Font Awesome e outro para CSS. Também tenho aqui a tag de script para o arquivo JavaScript. Você pode prosseguir e baixar os arquivos iniciais no link na descrição Tudo bem, vamos prosseguir e executar o arquivo no navegador. Para isso, vou usar um pacote chamado Live Server. Na verdade, ele nos permite executar o projeto ao vivo no navegador e fazer atualizações sem atualizar a página todas as vezes, para que você possa instalá-la e usá-la Por fim, vamos colocar o editor e o navegador lado a lado e começar a criar uma Vou abrir um elemento div que será o contêiner Em seguida, precisamos de elementos de navegação em HTML5. Vamos atribuir a ela um nome de classe, navbar. Ele envolverá toda a barra de navegação, quero dizer o botão e os itens de navegação Em seguida, vou criar um botão. Será representado por um desenvolvimento. Vamos atribuir a ela a classe BTN. Então, teremos três pontos. Vamos criá-los usando desenvolvimentos. Vamos atribuí-lo a diferentes classes. O primeiro serão quatro pontos de estilo comuns. E o segundo será para os estilos individuais, ponto um. Em seguida, duplique essa linha de código e altere os nomes das classes Nós precisamos. Ponto dois, pontos três Tudo bem? No momento, o botão não está visível porque os desenvolvimentos estão vazios e não temos nenhum estilo. Em seguida, vou criar o menu em si. Vamos abrir outro desenvolvimento com o nome da classe, Nav Menu. Então, no geral, teremos quatro itens diferentes. Cada um deles será criado com o link e os ícones Font Awesome. Então, vamos abrir o elemento link com o nome da classe nav menu link Em seguida, insira seus elementos oculares com as aulas. Fast, FA dash, tudo. Em seguida, duplique o elemento de link três vezes e altere os nomes das classes Para o segundo, precisamos do FAB, FA dash Blogger. O próximo será o traço FAS, diagrama de traço do projeto E para o último, vamos usar FAS, FA, dash actors, car Tudo bem, então aqui temos todos os quatro ícones e, na verdade, com HTML, terminamos Todos os elementos são criados e preparados. Vamos abrir o arquivo CSS e começar a escrever um pouco de CSS. Em primeiro lugar, vou criar alguns estilos de redefinição. Vamos eliminar a margem e o preenchimento padrão de cada elemento Para selecionar todos os elementos, precisamos usar asteriscos e, em seguida, definir margem e o preenchimento de ambos como zero. Ao longo deste projeto, vou usar uma RAM como unidade de medida. Por padrão, um rem é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 Vou converter uma RAM em dez pixels porque acho que será mais confortável e conveniente. Então, para fazer isso, precisamos diminuir o tamanho da fonte do HTML. E temos que fazer com que seja 62,5 por cento. Então, como você pode ver, os ícones ficaram menores. Tudo bem, vamos seguir em frente e cuidar do contêiner. Vou expandi-lo para a página inteira. Então, vamos selecioná-lo. Defina sua largura como 100%. Quanto à altura, vou fazer com que seja 100% da janela de visualização Portanto, precisamos aqui de 100 vh. Em seguida, mude a cor de fundo, deixe-a cinza claro usando E. Em seguida, vou enviar para os ícones para isso. Vou usar o flexbox. Precisamos criar um contêiner flexível de desenvolvimento usando display flex Então, para centralizar os itens horizontalmente, precisamos usar o centro de conteúdo justificado Quanto à centralização vertical, precisamos de uma linha de itens Center, certo? É isso sobre o contêiner. Em seguida, vou cuidar do menu em si. Vamos prosseguir e selecionar o menu de navegação. Em primeiro lugar, vamos definir o que faz com que seja 46 RAM. Quanto à altura, vou ajustá-la para 3,5 rem. Em seguida, altere a cor de fundo. Nesse caso, vou usar a cor 2578. Em seguida, vou criar algum espaço dentro do menu usando o preenchimento Vamos configurá-lo para dois REM, superior e inferior, e três rampas nos lados esquerdo e direito Além disso, vou fazer o menu arredondado. Para isso, temos que usar raio de borda com valor Finalmente, vamos criar algum efeito de sombra usando box-shadow, que terá os seguintes valores Precisamos de 01 rem, três rampas. Quanto à cor, vou usar o valor RGBA 37172120 e Tudo bem, o plano de fundo está pronto para os ícones. Em seguida, vou personalizar os ícones. Então, vamos selecioná-los. Precisamos do link do menu de navegação, seguido pela ilha Vamos aumentar o tamanho da fonte, torná-la 4M. Quanto à cor, vou torná-las brancas. Então, agora eu posso ter uma aparência muito melhor e temos que cuidar de suas posições. Precisamos definir suas posições individualmente, mas antes disso precisamos adicionar a elas alguns estilos comuns. Então, vamos selecionar o elemento de link e tornar sua posição absoluta. Vou me posicionar, posso dizer, de acordo com a barra de navegação E para isso temos que tornar a posição do nanoporo Então, vamos selecioná-lo e atribuí-lo a ele posicionado em relação Depois disso, vou centralizar os itens especialmente para isso. Vamos definir a primeira posição para 50 por cento. E também precisamos usar Transform com a função Translate. Quero dizer traduzir y com o valor -50 por cento. E agora precisamos definir as posições esquerda e direita para todos os itens individualmente. Para isso, vou usar uma dessas pseudo-classes CSS É chamado de criança. Vamos selecionar o primeiro item. Para isso. Você precisa selecionar elementos de link que devem ser seguidos pela enésima pseudoclasse filha Na verdade, é a função. E dentro dos parênteses, temos que especificar o número. Nesse caso, precisamos primeiro item, então temos que passar aqui um. Vamos fazer a posição esquerda do primeiro item para a RAM. Então eu vou duplicar esse código três vezes porque temos quatro ícones Para o segundo ícone, precisamos posição esquerda com o valor 13 aluguéis. Então, vamos definir a posição para o terceiro item. Nesse caso, precisamos usar a propriedade certa com o valor 13 rampas. Quanto ao quarto item, precisamos da posição correta com valor para n. Está bem? Então, todos os itens estão posicionados. Como você pode ver, temos algum espaço no centro do menu e, na verdade, ele pertence ao botão. Então, vamos em frente e começar a trabalhar nisso. Vou selecionar o desenvolvimento que tenha o nome da classe dot btn. Então, vamos em frente e viabilizar isso. Vou definir a largura e a altura, ambas em dez quartos. E também altere a cor de fundo. Chegue a cinco ac 78. Portanto, o elemento div está visível, mas agora ele bagunçou todo o layout Então, precisamos cuidar disso. Vou colocá-lo no centro do menu. Então, vamos definir essa posição como absoluta Então, para centralizá-la perfeitamente, vou usar as seguintes propriedades e valores. Temos que definir as posições superior e esquerda, ambas em 50 por cento. E também precisamos usar Transform com a função de tradução. E temos que passar seus -50 por cento duas vezes. Então, como você pode ver agora, ele é colocado no centro. Em seguida, vou arredondá-lo. E para isso, como você sabe, tivemos que usar o raio de borda com um valor de Também crie algum efeito de sombra. Use box-shadow com os valores 01 RAM. Três rems. Isso provavelmente é cor. Vamos usar valores RGBA 13, 83, 57 e a opacidade Finalmente, vamos mudar o tipo do cursor, fazer com que ele aponte para o botão que está preparado. Agora vou cuidar dos pontos. Vamos selecioná-los usando um nome de classe comum, ponto. E atribua a ela largura e altura. Vou configurar os dois em uma RAM. Altere também a cor de fundo, torne-a branca e, em seguida, faça pontos ao redor usando o raio da borda com valor de 50 Então, como você pode ver agora, os pontos acabaram do lado de fora do botão Precisamos cuidar de suas posições. Vou centralizá-los usando o flexbox. Precisamos de display flex. Em seguida, vou usar o conteúdo justificado com o valor espaçado Na verdade, o espaçamento uniforme nos permite criar um espaço uniforme entre os itens flexíveis E, finalmente, para centralização vertical, vou usar alinhar o centro dos itens Tudo bem. Como você pode ver, tudo está pronto para fazer a barra de navegação funcionar Novamente. Quando clico no botão, esses pontos, quero dizer, o primeiro e o terceiro devem se transformar em x. Quanto ao segundo , ele deve se esconder Além disso, o menu deve ser ocultado e exibido ao clicar. Então, primeiro de tudo, vou transformar pontos em x e depois faremos com que funcione usando JavaScript. Vamos selecionar o primeiro. Ele tem pontos de classe um Vamos fazer com que sua largura seja 0,8 RAM. Quanto à altura, vamos fazer sete corridas. E também use raio de borda, qual valor? Um aluguel. Depois disso, vou duplicar esse código e vou mudar o nome da classe Precisamos aqui do ponto três. Isso é tudo sobre o terceiro ponto. Em seguida, precisamos cuidar do segundo. Como dissemos, precisamos esconder esse segundo ponto. Então, vamos selecioná-lo. E atribua a ela opacidade zero. Tudo bem, agora vou fazer o x usando essas duas linhas Para isso, vou usar as funções de rotação e tradução Primeiro de tudo, vamos girar as linhas em 45 graus. Use Transform. Com a função de rotação No caso dos primeiros pontos, precisamos usar 45 graus, mas com sinal negativo. Então vamos copiar essa linha de código. Cole-o no terceiro ponto e elimine o sinal de menos Como você pode ver, as linhas são giradas, mas não temos aqui nenhum x. Então, temos que usar a função Translate também para corrigir esse problema função Translate realmente move o elemento de acordo com o eixo x ou Quero dizer, de acordo com as direções horizontal e vertical. Vamos usar traduzir com valores para RAM. E novamente para alugar. Em seguida, copie e cole na terceira linha. No caso da terceira linha, temos que fazer com que o primeiro valor seja negativo. Ok? Então, agora temos um x perfeito e agora é hora de fazê-lo funcionar. Então, vou criar uma nova classe e CSS. Em seguida, usando o método toggle, adicionaremos e removeremos essa classe dos pontos Então, vamos usar um multicore e adicionar a todos os três pontos, um cluster chamado mudança Em seguida, abra o arquivo JavaScript e selecione o botão. Em seguida, vou usar o método chamado seletor de consulta Temos que especificar aqui o nome da classe. São pontos btn. Em seguida, vamos nos conectar a um ouvinte de eventos com um evento de clique, seguido pela função de seta Portanto, precisamos adicionar e remover a alteração de classe do contêiner, que é o invólucro de todo o conteúdo Então, vamos selecioná-lo usando novamente o método querySelector Vamos inserir aqui o contêiner className. Agora precisamos usar a propriedade de lista de classes, que na verdade armazena todas as classes que o contêiner tem. Finalmente, precisamos usar o método toggle, que em geral direciona a classe para o elemento se ele não existir, e removê-lo. Se existir. Certo? Agora, se eu clicar no ícone, os pontos se transformarão em x e vice-versa. Essa transformação acontece sem nenhuma transição. Então, vamos adicionar à transição de pontos com todos os valores terminando em 0,3 s, que é a duração Agora, se eu clicar, obteremos um bom efeito de transição suave. Ok? A última coisa que você precisa fazer é ocultar e exibir o próprio menu. Para isso, primeiro de tudo, faça x com zero. Então eu vou esconder os itens. Para isso. Vamos usar a opacidade zero e a visibilidade oculta. Agora, novamente, precisamos usar a mudança de classe porque queremos ocultar e exibir os itens quando clicamos no botão. Então, vamos selecionar alterar com Nav Menu e definir com 246 E também use transição com largura de valor. E com a duração de 0,3 s. Em seguida, selecione novamente alterar com um link. Agora precisamos viabilizar o item. Para isso, precisamos definir a opacidade como uma e a visibilidade como visível E também use a transição. Com opacidade de 0,3 s. Tudo bem, estamos quase A única coisa que precisava fazer era adicionar um pouco de atraso. Quando exibimos o ícone. Para isso, precisamos usar novamente a transição, mas com a mudança de classe. Portanto, precisamos aqui de tudo menos a duração de 0,3 s e, em seguida, a quantidade de atraso, de 0,3 s. Tudo bem, agora tudo funciona perfeitamente e na verdade, terminamos com esse projeto de pixel 21. Projeto 18 - Navbar Arredondado: Neste vídeo, vamos criar um menu de barra de navegação com HTML, CSS e um pouco de JavaScript. Esse tipo de barra de navegação é um pouco diferente porque acho que é mais moderna e criativa do que os outros números padrão Vamos seguir em frente e descrever o projeto. Temos um fundo preto escuro com o ícone no centro. Se eu clicar nele, os itens de navegação serão exibidos com um bom efeito de rotação. Ok, vamos em frente e começar a construí-lo. Eu criei a pasta na área de trabalho. Então, vamos abri-lo no VS Code. Vou criar três arquivos diferentes. O primeiro será index.html. Então, precisamos de style.css e scripts dot js. Em seguida, vá para o arquivo index.html e insira aqui o documento HTML básico. Para isso, vou usar uma imagem. Precisamos colocar um ponto de exclamação e pressionar Enter. Tudo bem, vamos mudar o título. Vou inserir sua barra de navegação. Além disso, vou vincular arquivos CSS e JavaScript. Para isso, precisamos abrir a tag link e indicar o caminho do arquivo, neste caso o nome do arquivo style.css. Quanto ao JavaScript, vamos abrir a tag de script, logo acima da tag do corpo de fechamento. E no atributo de origem, especifique o nome do arquivo. Além disso, vamos usar alguns ícones Font, Awesome. Portanto, precisamos obter um link CDN para isso. Vamos procurar por Font Awesome. Cdn, EUA Pegue o primeiro link e cole-o no elemento principal. Tudo bem, isso é tudo sobre essa configuração. Finalmente, vou executar o arquivo no navegador. Para isso, vou usar o Live Server, que é um pacote de código VS. Isso nos permite fazer as atualizações sem atualizar a página todas as vezes. Assim, você pode instalá-lo e poderá executar seus projetos como no navegador. Vamos colocar o editor de texto e o navegador lado a lado e começar a criar a marcação Vamos abrir os desenvolvimentos e atribuir a ele o invólucro FirstName Nakba Esse elemento envolverá o número inteiro. Em seguida, abra outro elemento div com a classe nav bar. Na verdade, ele incluirá todos os links e ícones. Então, vou abrir a tag de link com o nome da classe navbar link E aqui temos que inserir o primeiro ícone Font, Awesome. Vai ser FAS, FA corre para casa. Então, no geral, teremos seis itens. Vamos duplicar o elemento de link cinco vezes e depois alterar os nomes das classes dos ícones A segunda será a cidade em que precisamos da escola. Ponto de referência, hotel. E, finalmente, precisamos aqui, armazenar, sair correndo. Tudo bem, isso é tudo sobre os itens de navegação. Finalmente, precisamos criar o botão. Ele será representado pelo desenvolvimento e pelo ícone Font Awesome. Então, vamos abrir o div com nome da classe Nakba dash Em seguida, insira seu ícone Font Awesome com as classes FAS, f, dash plus Tudo bem, isso é tudo sobre a marcação HTML ou os elementos são criados e estamos prontos para começar a escrever um pouco Primeiro, vamos criar alguns estilos de redefinição. Vou me livrar margem e do preenchimento de cada elemento Para selecionar cada elemento, precisamos usar um asterisco E então vamos definir a margem e preencher os dois em zero Ao longo deste projeto, usaremos a RAM como uma unidade de medida. No momento, por padrão, uma rampa é igual a 16 pixels porque o tamanho da fonte do HTML é igual Vou fazer um rem igual a dez pixels porque acho que é mais conveniente e fácil de calcular. Portanto, para converter uma RAM em dez pixels, precisamos diminuir o tamanho da fonte do HTML. Então, vamos selecioná-lo e fazer com que seu tamanho de fonte seja 62,5%. Tudo bem, como você pode ver, o tamanho dos ícones diminuiu e agora uma RAM é igual a dez pixels Vamos prosseguir e selecionar elementos div do wrapper. Vamos definir sua largura e altura Vou definir a largura como 100% S para a altura. Vamos criar cem por cento da janela de visualização. Precisamos de 100 vh. Também altere a cor de fundo. Vamos usar aqui. Três b, três B39. Tudo bem, vamos ver agora que os ícones não estão bem visíveis Então, vamos em frente e consertar isso. Vou selecionar os ícones da barra de navegação. Vamos aumentar o tamanho da fonte, torná-la 2,5 rem e mudar a cor, torná-la branca. Além disso, também vou selecionar o sinal de mais. Vamos aumentar o tamanho da fonte, transformá-la em RAM e também tornar a cor branca. Tudo bem, agora os ícones estão visíveis. A próxima coisa que vou fazer é colocá-los no centro usando o flexbox Precisamos aqui do display flex. Então, para centralizar os itens horizontalmente, temos que usar justify-content Quanto à centralização vertical, precisamos alinhar o centro dos itens Ok, vamos começar a trabalhar na barra de navegação. Vamos selecioná-lo e definir sua largura e altura. Vou configurar os dois para 20 repetições. Além disso, altere a cor de fundo. Vamos usar sua cor facilmente para, para, para. Depois disso, vou cuidar do botão de sinal de mais. Então, vamos prosseguir e selecionar navbar BTN. Na verdade, se tornarmos sua posição absoluta, colocaremos o ícone no centro do nanoporo porque ele saltará do fluxo normal da página E a flexbox, vamos centralizá-la perfeitamente. Em seguida, vamos definir sua largura e altura. Vou definir os dois para seis rodadas. Além disso, altere a cor de fundo. Vou usar sua cor para c095. Tudo bem, além disso, vou enviar para o sinal de mais dentro da caixa Para isso, vou usar novamente o flexbox. Precisamos exibir sinalizadores, justificar o conteúdo centralizado e alinhar o centro dos itens Em seguida, faça a caixa arredondada usando o raio da borda com o valor E, finalmente, mude o cursor, faça com que ele aponte. Tudo bem, então isso é tudo sobre o sinal positivo. Agora precisamos centralizar todos os itens. No início. Vamos mudar a posição deles e torná-la absoluta. Como você pode ver, os ícones são colocados uns sobre os outros. Além disso, precisamos mudar a posição do elemento pai, que é navbar Vamos tornar isso relativo. Depois de tornar a posição relativa, poderemos posicionar os ícones de acordo com seu elemento pai. Certo? Agora vou enviar os ícones. E para isso, vamos usar novamente o Flexbox. Na verdade, vou pegar essas três linhas daqui e colá-las na barra de navegação Agora, os ícones não estão mais visíveis porque acabaram atrás do botão. Então, vou comentar isso por um tempo. E depois de posicionarmos os itens, os exibiremos de volta. Agora, finalmente, é hora de posicionar cada um dos itens separadamente. Para isso, vou usar uma pseudoclasse chamada enésima criança Então, vamos começar com o primeiro item. Selecione o link da barra de navegação, seguido pela enésima pseudoclasse filha Na verdade, é uma função e temos que especificar o número do item dentro dos parênteses Portanto, para o primeiro item, precisamos nos opor à rampa. Então, vamos duplicar esse código cinco vezes. Para o segundo item, temos que definir as posições superior e direita. Para a posição superior, precisamos de seis rampas. Quanto à posição correta, temos que configurá-la para 2 g. Em seguida, temos o terceiro item precisamos aqui, a posição inferior. Vamos configurá-lo para seis corridas. Posição correta com valor de dois rems. Em seguida, temos o quarto item Para o primeiro item, precisamos usar apenas a posição inferior com o valor de dois rams. Em seguida, temos o quinto item. Vamos definir suas posições inferior e esquerda. Vou reduzir para seis meses. Quanto à esquerda, precisamos alugar. E, finalmente, para o último item, precisamos das posições superior e esquerda. Para a posição superior, precisamos de seis rampas e, para a esquerda, precisamos alugar Tudo bem, então os ícones estão posicionados. Vamos exibir o botão volta e também arredondar o número. Vamos usar aqui o raio de borda com um valor de 50 por cento. Em seguida, vou criar alguns efeitos de foco. Vou mudar a cor dos ícones quando passarmos o mouse sobre eles. Então, vamos continuar e selecionar agora por link com o mouse. E então precisamos selecionar, eu vou mudar a cor. Use aqui a cor 12095. E também use transição com propriedade de cor com duração de 0,3 s. Certo? Na verdade, tudo está preparado para tirar uma soneca ou trabalhar. Por padrão. Vou esconder os ícones e também girá-los. Vou escondê-los usando a função de escala. Assim que clicarmos, o ícone do sinal de mais deve ser exibido e, no próximo clique, eles o ocultarão. Então, usaremos um método de alternância. Vou criar uma nova classe em CSS. Adicionaremos e removeremos essa classe do napa usando JavaScript. Primeiro, vamos ocultar e girar os itens por padrão. Quando você se transforma. Com a função de escala, temos que inserir aqui zero. E então eu vou girar os ícones em cento e 80 graus, mas com sinal de menos. Em seguida, crie uma nova classe e chame isso de mudança. Em seguida, selecione barra de navegação. Precisamos usar Transform com as funções de escalar e girar novamente Então, quando clicamos no ícone, temos que dar aos itens. Eles têm o tamanho padrão. Portanto, precisamos usar K valor um. E também precisamos girar com zero. Certo? Agora precisamos escrever um pouco de JavaScript. Vamos ao botão Selecionar o arquivo script.js. Em seguida, vou usar o método querySelector. Temos que especificar aqui o nome da classe, que é navbar btn Em seguida, anexa a ele o ouvinte de eventos com o evento de clique. E também temos que passar aqui a função de seta. Então, agora precisamos adicionar uma nova alteração de nome de classe ao invólucro napa Então, primeiro de tudo, precisamos selecionar esse elemento, usar novamente o método querySelector e especificar o nome da classe no entre parênteses Agora temos que usar a propriedade da lista de classes, que na verdade armazena todas as classes que o elemento tem. E então precisamos alternar o método com a mudança de classe. Agora, se eu clicar no ícone , os itens serão exibidos. Mas neste caso, sem nenhum efeito. Portanto, precisamos fazer a transição com a transformação. E com a duração de 0,5 s. Agora, se eu clicar novamente, os ícones serão exibidos com uma transição agradável e legal. Tudo bem, por fim, vou adicionar alguns efeitos ao próprio sinal de mais Eu quero girá-lo OnClick. Então, vamos selecionar um ganho para mudar de classe, seguido pela barra de navegação p t n i. Então, vou girar o sinal de mais em 45 graus Vamos usar a função de rotação. Além disso. Para um efeito suave. Vamos usar a transição. Precisamos nos transformar aqui. E como a duração indicada aqui é de 0,5 s. Tudo bem, agora tudo funciona perfeitamente e na verdade, terminamos com este projeto 22. Projeto 19 - Menu de Barra lateral: Neste vídeo, vamos criar um menu de barra lateral para o painel do administrador Esses tipos de barras laterais são muito populares hoje em dia. Então, acho que esse pequeno projeto será interessante e útil para você antes de começarmos a construir nosso projeto. E eu vou continuar e descrevê-lo. Como você pode ver, temos aqui uma imagem de fundo em tela cheia e, no canto superior esquerdo, temos um ícone de menu Se eu clicar nele, essas linhas serão alteradas para x com uma boa transição. E também a barra lateral, vamos exibi-la da esquerda para a direita. Como você pode ver, a barra lateral consiste em algumas partes diferentes Na parte superior, temos um avatar para administrador com um nome completo e o administrador de legendas É seguido pela barra de pesquisa. Em seguida, temos uma lista com os ícones Font, Awesome. Cada um dos itens da lista tem seu próprio submenu. Eles são representados como menus suspensos. E, finalmente, na parte inferior da barra lateral, temos alguns ícones Se eu clicar no botão X , a barra lateral será fechada Na verdade, o projeto responderá a todos os tamanhos de tela diferentes Vamos construí-lo para um tamanho de tela maior. Tamanho da tela com 1920 pixels de largura e 1080 pixels de altura Portanto, se você está nos seguindo com um tamanho de tela relativamente menor , recomendo abrir as ferramentas para desenvolvedores. Mude para o modo responsivo e defina a largura e a altura para 1920 pixels e 1080 De qualquer forma, no final do dia, daremos as respostas do projeto. Ok? É isso que vamos criar neste vídeo. Então, vamos começar. Eu criei uma pasta na área de trabalho chamada barra lateral, na qual tenho outra pasta para as imagens Vamos abrir a pasta no VS Code. A primeira coisa que vou fazer é criar nossos arquivos de trabalho. No geral, teremos três arquivos diferentes. Index.html, style.css e também scripts dot js. Em seguida, abra o arquivo index.html e insira o documento HTML básico. Para isso, vou usar amidas. Vamos colocar aqui um ponto de exclamação e pressionar Enter ou talvez tab Vamos mudar o título. Vou inserir sua barra lateral. Além disso. Vou vincular arquivos CSS e JavaScript. Para isso. Vamos abrir a tag do link. Indique aqui o nome do arquivo, style.css. Então, abaixo, abrimos a tag de script. E no atributo source especifique o nome do arquivo script.js. Além disso, precisamos de dois outros links, um para os ícones Font Awesome e outro para as fontes do Google. Então, vamos prosseguir e pesquisar Font Awesome, CDN GIS. Em seguida, pegue o primeiro link daqui e cole-o no elemento principal. Depois disso, vou pesquisar as fontes do Google. Na verdade, usaremos dois telefones diferentes. O primeiro será o Roboto Slab. Vou personalizá-lo porque vamos usar uma espessura de fonte um pouco mais ousada Então, vamos verificar a fonte semi negrito. Quanto ao segundo, usaremos laje acima de 27 Vamos pegar o link e colá-lo também no elemento principal. Isso é tudo sobre a configuração. Por fim, vou executar o arquivo no navegador. Para isso. Vou usar o Live Server. Esse é um dos pacotes de código do VS. Na verdade, usamos esse pacote quase sempre, mas, de qualquer forma, vou lembrar que ele nos permite executar a vida útil do projeto no navegador e fazer atualizações sem atualizar a página a cada vez para que você possa baixá-la e instalá-la Finalmente, são ambientes organizados ou de trabalho. Vou colocar um editor de texto e um navegador como esse para tornar nosso processo de trabalho mais conveniente. Ok, vamos começar a criar a marcação HTML. Vamos abrir um elemento div, que será um contêiner Em seguida, precisamos abrir elementos de navegação, que envolverão toda a barra lateral Então, vamos atribuir a ela a barra lateral className. Como dissemos, a barra lateral consistirá em algumas partes diferentes A primeira será um ícone de menu Então, vamos abrir os empreendimentos com o nome da turma, menu de hambúrguer O ícone do menu consistirá em três linhas. Então, vou passar aqui desenvolvimentos com aulas. Vinho, que será o nome de classe comum para todas as três linhas. E também precisamos alinhar um. Para ladrilhos individuais. Vamos duplicar a linha duas vezes e alterar os nomes das classes Precisamos da linha dois e da linha três. Tudo bem, isso é tudo sobre o ícone do Menu. Em seguida, precisamos criar um cartão que inclua o avatar do abdome, o nome completo e o administrador da legenda Então, vamos abrir um desenvolvimento com o cartão de identificação da classe. Em seguida, precisamos de outro div, que envolverá a imagem do administrador Vamos atribuir a ele um cartão de nome de classe, IMG. Em seguida, insira o elemento da imagem. Vou escrever na imagem do administrador do atributo alt. Em seguida, vamos especificar o caminho da imagem no atributo fonte que será images, folder slash admin dot JPG Finalmente, use aqui o atributo de classe com uma imagem administrativa de valor. Então, temos aqui a imagem. Vamos prosseguir e inserir o nome completo e o subtítulo. E vamos abrir outro desenvolvimento com o corpo do cartão de identificação da classe. Em seguida, insira elementos de cabeçalho H2 nele com o título do cartão de classe Como conteúdo, escreva o nome completo. João Smith. Em seguida, precisamos de um parágrafo que deve ter um cartão de nome de classe, subtítulo E como conteúdo, vamos inserir o usuário administrativo. Ok, isso é tudo sobre o cartão. Em seguida, vêm os campos de entrada de pesquisa. Então, vamos abrir os elementos de um formulário com o formulário de pesquisa do nome da classe. Então, no geral, teremos dois elementos. O primeiro será inserido com um tipo de texto. Além disso, precisamos de entradas de pesquisa de classe e do atributo de espaço reservado com pesquisa de valor Além do elemento de entrada, precisamos também de um botão que represente o ícone de pesquisa. Então, vamos abrir o elemento do botão. Deve ter o tipo de botão porque quando o elemento do botão é colocado dentro do formulário , por padrão, ele carrega a página na África. Então, para evitar isso, temos que usar o tipo de botão. Também precisamos aqui do botão de pesquisa do nome da classe. O ícone de pesquisa será representado pelo ícone Font Awesome. Então, vamos inserir seu elemento ocular com as aulas. Fas, FA dash, pesquisa. Tudo bem, então isso é tudo sobre os elementos formados. Em seguida, precisamos cuidar da lista. Então, vamos abrir os elementos da UL com o nome da classe novelist Então essa vai ser a lista principal na calçada. Ele terá cinco itens de lista diferentes, cada um com seu próprio menu suspenso. Então, vamos abrir os elementos LI com o nome da classe. Agora item. Em seguida, ele deve ser seguido pelo link com a classe nav link Então, vou inserir aqui três elementos diferentes. O primeiro será o ícone Font Awesome. Os nomes das classes, FAS, FA, dash, taco, meter, dash, Em seguida, precisamos de um elemento span com a classe nav link text. Em seguida, como conteúdo, o painel do Let's Institute. Finalmente, precisamos novamente do ícone Font Awesome para exibir a seta. Então deve ter classes, FAS, f, dash, dash, certo Tudo bem, isso é tudo sobre o primeiro item da lista. Como dissemos, no geral, precisamos de cinco deles. Então, vou duplicá-lo quatro vezes e depois mudar os nomes das classes e também o conteúdo dos itens O segundo será o Fas, um carrinho de compras, comércio eletrônico. O próximo será F, F h, m com o item Componentes. Em seguida, temos gráficos de linhas do gráfico FASFA. E, finalmente, precisamos do mapa FASFA, marcado com as marcas dos itens Tudo bem, então isso é tudo sobre a lista principal. Agora precisamos criar um menu suspenso para cada item da lista Então, vou inserir uma nova lista logo antes da tag LI de fechamento. Deveria ter subromancista de classe. O primeiro menu suspenso consistirá em três itens de lista diferentes Vamos abrir o primeiro elemento LI com o nome da classe sub nav Em seguida, precisamos de elementos de link com a classe subnet link. Portanto, cada item da lista será vinculado ao ícone Font Awesome e ao conteúdo representado por um elemento de extensão. Vamos inserir seu elemento ocular com as classes de círculo tracejado FAR F. Não deve ser seguido por esta panela. Com o painel de texto um. Vamos duplicar os elementos LI duas vezes e apenas alterar o conteúdo Precisamos de painel para painel três. Então, aqui temos o primeiro menu suspenso. Também precisamos dele para o resto dos itens. Então, vamos pegá-lo e colá-lo antes das etiquetas LI de fechamento. Em seguida, altere o conteúdo de todos os itens do menu. Precisamos aqui de produtos, pedidos e cartão de crédito. Em seguida, precisamos de ícones e tabelas gerais. Em seguida, precisamos de um gráfico circular, um gráfico de linhas e um gráfico de barras. Para o último menu suspenso, precisamos apenas de dois itens Então, vou deixar aqui apenas dois itens com a seguinte consoante Precisamos do Google Maps e de um mapa de ruas aberto. Então, como você pode ver, terminamos com a lista principal. Em seguida, temos que cuidar da lista final. Então, vamos abrir novamente. Liste os elementos com a classe. Lista final. A lista incluirá quatro ícones diferentes. Portanto, precisamos de quatro itens da lista. Vamos abrir o elemento LI, que deve ter nome da classe, item da lista inferior. Em seguida, precisamos vincular elementos com um nome de classe, link da lista inferior. Cada um dos itens da lista terá um ícone e também algumas notificações. Portanto, vou inserir os elementos de extensão com algum número, digamos cinco. E também precisamos de um ícone Font, Awesome. Deveria ser FAS. Belle. Vamos duplicar o item da lista três vezes. Em seguida, altere o número das notificações e também os nomes das turmas. Para o segundo, vou inserir aqui sete. Quanto ao nome da classe, precisamos do envelope FASFA Para o próximo, precisamos de um. O nome da classe, FASFA Coke. Para o último item, vou me livrar completamente da notificação. Basta deixar aqui o ícone Font Awesome com classes, FAS, FA, dash, dash off Tudo bem, então isso é tudo sobre a barra lateral. Estamos quase terminando a marcação HTML. A única coisa que precisa fazer é cuidar da seção principal na qual, na verdade, teremos apenas o título com a imagem de fundo em tela cheia Então, logo após os elementos de navegação, vamos abrir esta seção e atribuí-la à seção principal do nome do cluster Então, dentro dele, precisamos de elementos de cabeçalho com o cabeçalho da classe Portanto, dentro do cabeçalho, teremos apenas um único título com o nome da classe, título com o painel de texto Tudo bem, então, finalmente, concluímos a marcação HTML da criação dos elementos necessários e agora é hora de escrever um pouco Vamos abrir o arquivo style.css. Antes de tudo, crie alguns estilos redefinidos e realmente comuns. Vamos selecionar todos os elementos usando um asterisco. Então, vou redefinir a margem e o preenchimento. Vamos definir os dois como zero. Além disso, temos muitos itens de lista e links. Então, vou me livrar de seus estilos padrão com nenhum estilo de lista e decoração de texto, nenhum Depois disso, vamos definir a família de fontes para cada elemento Vou usar uma fonte chamada slideshow de 27 pixels serif. Finalmente, vamos nos livrar do esboço padrão. Tudo bem, isso é sobre os estilos comuns. Durante todo o projeto, usaremos uma ROM como unidade de medida. Por padrão, uma rampa é igual a 16 pixels porque o tamanho da fonte do HTML é igual Na verdade, quero converter uma RAM em dez pixels porque acho que é mais conveniente e fácil de calcular. Para conseguir isso, temos que diminuir o tamanho da fonte do HTML e torná-lo em 62,5% Agora, o tamanho da fonte do HTML é igual a dez pixels. Portanto, uma rampa também é igual a dez pixels. Tudo bem? Ao longo deste projeto vamos usar cores diferentes várias vezes. E, na verdade, para tornar esse processo mais dinâmico, vou usar variáveis CSS. Armazenaremos os valores das cores nas variáveis CSS. E usaremos esses nomes de variáveis. Para criar as variáveis para o escopo global, precisamos selecionar uma rota. Em seguida, precisamos definir nomes de variáveis com os valores adequados. O primeiro será feito de cor pêssego, cor de fundo Então deve ser tui, tui, tui. Então eu vou duplicar essa linha de código algumas vezes e mudar os nomes e os valores A segunda será a cor primária. Com o valor de cor cinco a quatro, quatro t. A próxima será uma cor secundária com valores 777171 Em seguida, teremos a cor do texto 99393. Além disso, precisamos passar o mouse sobre a cor do texto com o valor p db88. E a última será a cor do ícone ativo com um valor de 77. Tudo bem? Agora eu vou te mostrar como usar essas cores. Suponha que desejemos mudar a cor de fundo do corpo. Precisamos selecionar o corpo. Em seguida, precisamos atribuir a ele uma cor de fundo. Agora temos que usar a função var, que significa variável. Dentro dos parênteses, temos que especificar o nome da variável Digamos a cor de fundo principal. Quero dizer cor de pêssego principal. Então, como você pode ver, plano de fundo do elemento do corpo é alterado. Então é assim que as variáveis CSS funcionam. Ok, vamos nos livrar desse código porque não precisamos mais dele. Vamos adicionar alguns estilos à barra lateral. Eu vou selecioná-lo. Vamos definir sua largura e altura. Na verdade, como unidade de medida, vou usar a largura da janela de visualização Vamos definir a largura da barra lateral como 15% da janela de visualização Precisamos de 15 V W S para a altura. Vou fazer com que seja 100% da janela de visualização. Então, precisamos de 100 vh. Em seguida, altere a cor do plano de fundo. Você vê sua cor BG principal. E também vou fixar a posição da barra lateral Tudo bem, então agora a barra lateral é viável. E, na verdade, acho que a imagem é bem grande. E vou diminuir seu tamanho em relação ao HTML agora mesmo. No final do dia, cuidaremos da imagem do CSS. Vamos ao arquivo index.html e atribuir ao atributo Imagem chamado largura com valor 50 Isso significa que definimos a largura da imagem em 50 pixels. A próxima coisa que eu quero fazer é cuidar da seção principal. Quero dizer, a segunda parte da página, que é colocada abaixo após a navegação. Vamos prosseguir e selecioná-lo. A seção principal deve ocupar o resto da página. Estou no lado direito. Portanto, vou definir que ele range como 85 de largura de janela de visualização Além disso, precisamos definir sua posição porque a barra lateral e a seção principal devem ser colocadas lado a lado Então, vamos fazer com que a posição seja relativa. Em seguida, defina a propriedade esquerda para 15 larguras de janela de visualização. Agora, como você pode ver, o painel de texto está visível. Isso significa que essas duas partes são colocadas lado a lado. Vamos definir o plano de fundo em tela cheia para o cabeçalho. Vamos selecioná-lo. Antes de tudo, vamos definir sua largura e altura. Eu vou herdar dos elementos principais. Então, vamos atribuir à propriedade de largura, herdar. Quanto à altura, vamos torná-la 100% da janela de visualização. Finalmente, vamos definir o plano de fundo. Eu vou usar aqui. Gradiente linear com cores brancas, mas com opacidade diferente. A primeira cor deve ter a opacidade de 0,3. Quanto ao segundo , será 0,5. Em seguida, precisamos especificar o URL. Temos uma pasta chamada imagens. Precisamos selecionar por ponto PNG. Em seguida, precisamos do centro. Sem repetição. E, finalmente, temos que definir o tamanho do fundo como capa. Tudo bem, agora, como você pode ver, a imagem está definida como plano de fundo em tela cheia E a única coisa que precisava fazer era cuidar dos elementos do cabeçalho. Então, vamos prosseguir e selecioná-lo. Vou colocá-lo no centro. Para isso. Vamos definir essa posição como absoluta. Em seguida, defina a posição superior para cinco por cento. Então precisamos de 50 por cento restantes. E, por fim, precisamos usar Transform com a função translate para enviar para o elemento perfeitamente Precisamos aqui traduzir x porque temos que mover os elementos de acordo com o eixo X. E esse é o valor que temos que passar aqui, -50%. Tudo bem, então o título está centralizado, e agora vou fazer com que pareça Vamos continuar e aumentar o tamanho da fonte. Faça com que seja 12 Rahm. Mude a cor, torne-a branca. Por fim, crie algum espaço entre as letras. Use espaçamento entre letras com o valor um rem. Tudo bem, vamos ver a seção principal. Agora temos que voltar para a barra lateral. Vamos continuar e criar algum espaço dentro da caixa usando o preenchimento Vou definir o preenchimento para 1,5 rem na superior e inferior e um rem nos lados esquerdo e direito E também para manter o mesmo tamanho da caixa, precisamos usar o dimensionamento da caixa com valor border-box com Tudo bem, então a barra lateral consiste em várias partes. E vou começar com um cartão no qual temos uma imagem, título e subtítulo Vamos selecionar um cartão e fazer com que ele seja um recipiente flexível. Para isso, precisamos do display flex. Agora eu vou cuidar da imagem. Como você sabe, definimos sua largura a partir do HTML. E na verdade eu vou me livrar disso. Em seguida, selecione o nome da classe de imagem admin image. Defina sua largura como parâmetros phi. E também vou torná-lo ligeiramente arredondado usando o raio da borda com o Tudo bem, isso é tudo sobre a imagem. Vamos seguir em frente e selecionar o corpo do cartão, que na verdade inclui o nome completo da legenda Então, vou criar algum espaço no lado esquerdo usando margem. Vamos atribuir dois a um rem. Em seguida, vou usar novamente Flexbox para alinhar esses dois elementos Vamos fazer com que o corpo do cartão seja flexível usando bandeiras de exibição. Então precisamos mudar a direção. Precisamos de uma coluna. Para criar algum espaço entre os itens. Precisamos justificar o conteúdo. Espaço ao redor. O nome completo e o subtítulo estão alinhados. Vamos em frente e fazer com que pareçam melhores. Vou começar com o título do cartão. Então, vamos selecioná-lo. Mude o tamanho da fonte, transforme-a em Ram. Além disso, precisamos de algum espaço no lado direito. Vamos criá-lo usando a margem direita. Três rems. Em seguida, mude a cor. Você vê a cor do seu imposto. E, finalmente, use o espaçamento entre letras com o valor 0,1 linha com o título, terminamos E, finalmente, vamos cuidar da legenda. Selecionado. Altere o tamanho da fonte, transforme-a em 1,8 RAM e também altere a cor. Vou usar sua cor secundária. Tudo bem, isso é tudo sobre a carta dos elementos. Parece bom. Em seguida , vem a busca realizada Então, vamos em frente e cuidar disso. Vamos selecionar um elemento do formulário. Tem formulário de pesquisa de nome de classe. No começo, vou criar algum espaço usando margem. Vamos definir a margem como, para rodar no topo. Zero no lado direito. Um rem na parte inferior e zero no lado esquerdo. Em seguida, para alinhar entrada e o botão da maneira correta, vamos criar um contêiner flexível de elementos de formulário usando display flex contêiner flexível de elementos de formulário usando display E também centralize os itens verticalmente usando alinhar o centro dos itens Tudo bem, vamos seguir em frente e estilizar os dois elementos. Vou começar com a entrada. Então, está selecionado. Defina sua largura e altura. Vou definir a largura em 200 por cento. Quanto à altura, vamos fazer quatro carneiros e mudar a cor de fundo Use sua cor primária. Tudo bem, vamos adicionar mais alguns estilos à entrada Eu vou me livrar da borda padrão. Usando border none. Também faça um raio de borda de uso arredondado com um valor de com um Em seguida, vamos criar algum espaço dentro das entradas usando o preenchimento Vou definir como zero na parte superior e inferior e um rem nos lados direito e esquerdo. Em seguida, aumente o tamanho da fonte, faça com 1,6 RAM. Mude a cor, use a cor do texto. E, finalmente, crie algum espaço entre as letras usando espaçamento entre letras, rampa de 0,1 Tudo bem, como você pode ver, a entrada parece boa e terminamos com ela Em seguida, temos que cuidar do ícone de pesquisa. Vou colocá-lo dentro das entradas, quero dizer, no canto direito Então, vamos continuar e selecionar o botão Pesquisar. Primeiro de tudo, vamos nos livrar de seus estilos padrão. Vou tornar a cor de fundo transparente. E também elimina a borda padrão com borda nenhuma Agora, para mover o ícone para o lado esquerdo, vou usar Transformar com a função Translate X. Vamos inserir aqui menos 150 por cento. Ok, então o ícone é colocado da maneira correta e a única coisa que precisava fazer era estilizar o elemento I. Então, vamos prosseguir e selecioná-lo. Vou aumentar seu tamanho com o tamanho da fonte. Vamos fazer dois rems e também mudar a cor Você vê sua cor secundária. Certo? Isso é tudo sobre o elemento do formulário. Agora temos que seguir em frente e começar a trabalhar na lista. Vamos seguir em frente e selecionar a lista principal com o nome da turma. Não menos importante, vou criar esse espaço na parte superior usando margem. Vamos fazer três remes. Em seguida, selecione os elementos LI e crie algum espaço na margem superior e inferior, atribuído a duas rampas. E depois zero nos lados esquerdo e direito. Certo? Isso é tudo sobre os elementos LI. Agora, está começando a personalizar o link. Vamos prosseguir e selecioná-lo. Vou definir sua largura como cem por cento. Então. Faça com que seja um recipiente flexível usando o display flex. Também centralize os itens verticalmente usando o alinhamento do centro dos itens. E, finalmente, mude a cor. Vamos usar sua coluna de texto. Passo a passo. Estamos avançando agora. Os itens são bem menores porque seu tamanho é de apenas dez pixels. Então, vamos seguir em frente e selecionar os elementos de extensão, que têm texto de link de navegação agrupado Vou aumentar o tamanho da fonte. Vamos fazer com 1,8 RAM. E também crie algum espaço no lado esquerdo usando o preenchimento de um rem esquerdo Como você pode ver, as setas e os itens são colocados muito próximos uns dos outros Temos que mover as setas para o lado direito. Na verdade, podemos fazer isso usando algumas maneiras diferentes, mas a melhor maneira para nós é usar as propriedades do flexbox chamadas flex grow, que devem ser iguais a Usando essa propriedade, o elemento ocupará todo o espaço disponível dentro do contêiner flexível Tudo bem, vamos cuidar dos ícones do Font Awesome, que são colocados na frente dos itens Então, vamos selecioná-los. Precisamos selecionar o link de navegação seguido por íons. E temos que usar pseudo-classes CSS chamadas primeiro filho. Vamos definir a largura e a altura, ambas em dois rems. E também altere a cor de fundo. Vou usar sua coluna principal. Como você pode ver, precisamos centralizar os ícones dentro da caixa. Para isso, vamos usar o flexbox. Precisamos de display flex. E então também precisamos centralizar os elementos na horizontal e na vertical Então, vamos usar o centro de conteúdo justificado e o centro de alinhamento Tudo bem, agora, como você pode ver, os ícones estão perfeitamente centralizados A única coisa que eu quero fazer é criar algum espaço dentro da caixa e também torná-la arredondada. Então, vamos usar o preenchimento. Desvalorizamos ponto em RAM e raio de borda, qual valor? 0,3 correu. Depois disso, vamos criar um pequeno efeito de foco Quando passamos o mouse sobre o item, eu queria mudar a cor do ícone Então, vamos selecioná-lo. Agora precisamos passar o mouse sobre o link. Então, novamente, eu concordo com a primeira pseudoclasse infantil. Vamos mudar a cor, torná-la ativa, eu posso chamá-los. Use também a transição para tornar o efeito mais inteligente. Precisamos passar sua cor com a duração de 0,2 segundo. Ok, então, se passarmos o mouse sobre os itens, eles mudarão de cor Por fim, quero cuidar das flechas. Vou movê-los para a esquerda e também aumentar seu tamanho. Então, vamos selecioná-los. Precisamos novamente de um link de navegação. Em seguida, o elemento I, seguido pela pseudoclasse chamada last-child. Vamos criar algum espaço no lado direito usando a margem direita, 2,5 rem. E também aumente o tamanho da fonte, torne-a 1,6 redonda. Tudo bem, então, com os itens da lista principal terminamos e agora temos que cuidar dos menus suspensos No começo, vamos estilizá-los. Selecione os elementos da lista usando className sub novelist. Vamos definir a largura, torná-la 90 por cento. E também colocou os itens no lado direito usando a margem esquerda, o valor Ok, em seguida, vou criar algum espaço entre os itens. Então, vamos selecionar elementos LI usando o item de subintervalo de agrupamento Vou definir margem como 0,5 RAM na parte superior e inferior e zero nos lados esquerdo e direito. Em seguida, precisamos cuidar do elemento de link. Então, vamos prosseguir e selecioná-lo. Altere o tamanho da fonte. Vou fazer 1,5 rem. E também mude a cor. Use aqui a coluna de texto. Então, os itens parecem muito melhores. E a seguir, vou criar um efeito de foco. Ao passar o mouse. Quero mudar a cor dos itens. Então, vamos selecionar o link, passar o mouse. Em seguida, mude a cor. Vamos usar aqui a cor do texto com o mouse. E também precisamos de uma transição com cores e com duração de 0,2 s. Tudo bem, então com itens suspensos, estamos quase Só precisamos adicionar algumas estrelas aos círculos. Então, vamos seguir em frente e selecionar elementos. Você precisa de um link secundário. I. Em seguida, altere o tamanho da fonte. Faça disso uma RAM. Também crie algum espaço no lado direito usando margem com valor de 0,5 rem. Em seguida, precisamos criar nosso efeito. Vamos selecionar o link com o mouse, seguido pelo elemento I, e mudar a cor Use aqui, ativo Eu posso ligar. Por fim, precisamos novamente fazer a transição da cor e da duração de 0,2 segundo Tudo bem, alguns, é isso sobre a lista. Eles são estilizados, ficam bem. E agora temos que seguir em frente e personalizar a última parte da barra lateral, que é a lista final Então, vamos seguir em frente e selecionar os elementos da UL. Tem uma lista de final agrupada. Antes de tudo, vamos definir sua largura. Eu vou fazer isso 100 por cento. E também altere a cor de fundo. Use sua cor, cor primária. A lista deve ser colocada na parte inferior da barra lateral? Portanto, precisamos definir sua posição. Eu vou tornar isso absoluto. E então, para colocá-lo na parte inferior, temos que definir a propriedade do botão como zero. Tudo bem? Portanto, a lista está posicionada da maneira correta. Em seguida, vou criar algum espaço dentro da caixa. E também precisamos colocar os itens em uma linha horizontalmente Portanto, precisamos de preenchimento na parte superior e inferior, 0,5 rem e zero nos lados esquerdo e direito Em seguida, temos que usar o flexbox Precisamos de display flex. E também para criar algum espaço entre os itens flexíveis, vamos usar o conteúdo justificado com o ritmo dos valores Ok? Portanto, os itens estão bem alinhados, mas, como você pode ver, temos algum espaço no lado esquerdo da lista Então, vou mover a lista inteira para o lado esquerdo. Para isso, vamos usar Transform com a função translate x. E como valor, vamos passar menos uma repetição Tudo bem? Então, isso é tudo sobre o alinhamento da lista. Agora vou personalizar os ícones e também esses elementos de padrão que são criados para as notificações. Então, vamos começar com os ícones. Selecione o link da lista inferior, seguido pelo elemento I. Vamos aumentar o tamanho da fonte, torná-la com 1,6 RAM e também mudar a cor. Você vê sua cor secundária. Agora, os ícones parecem muito melhores. Vou adicionar aqui um pequeno efeito de foco. Quero mudar a cor dos ícones ao passar o mouse. Então, vamos selecionar o link com o mouse. E então eu elementos. Mude a cor. Você vê a cor do seu ícone ativo. E também use a transição com a cor. E com duração de 0,3 s. Portanto, se passarmos o mouse sobre os ícones , eles mudarão de cor Então, na verdade, com os ícones, terminamos. Agora vou abordar aqui esses elementos de extensão. Então, vamos selecioná-los usando a extensão de links da lista inferior. Em primeiro lugar, vou mudar a família de fontes. Vamos usar aqui uma fonte chamada Roboto Slab Serif. Além disso, vou aumentar a espessura da fonte porque quero deixar a extensão um pouco mais ousada Use aqui 600. Em seguida, altere o tamanho da fonte, torne-a uma RAM. E, finalmente, mude a cor, torne-a branca. Tudo bem? Portanto, esses números devem ser colocados no canto superior direito dos ícones. Então, vamos em frente e cuidar da posição deles. Eu vou tornar isso absoluto. Em seguida, para definir a posição de acordo com o elemento pai, que no nosso caso é um link. Temos que tornar a posição dos pais relativa. Então, vamos selecionar o link em si e atribuir a ele a posição relativa. Depois disso, vamos definir as propriedades superiores e corretas. Alcance a primeira posição -100 por cento. Quanto à posição correta, vamos fazer com que seja -50 por cento Tudo bem, então os elementos de extensão estão posicionados e agora eu quero criar um fundo diferente para cada nitrificação Para isso, vamos definir as propriedades de largura e altura. Vou fazer de ambos um ponto de vista para a RAM. E também adicione aqui cor de fundo temporária, digamos vermelha. Então, agora precisamos arredondar esses fundos. E também quero colocar esses números no centro para torná-los arredondados. Vamos usar o raio da borda com valor de 50 por cento. Quanto à centralização, aos números, use o flexbox Precisamos exibir o flex e seguida, justificar o centro do conteúdo e alinhar o centro Tudo bem, na verdade, estamos quase terminando as notificações A única coisa que precisamos fazer é mudar a cor de fundo e torná-la diferente para cada altura. Então, vamos nos livrar do fundo vermelho. Então, para selecionar o item separadamente, vou usar o seletor Child, que é uma pseudoclasse Então, vamos selecionar o item da lista inferior seguido pelo enésimo filho Na verdade, isso é uma função. Então, dentro do parêntese como argumento, vou inserir o número do item, um Em seguida, deve ser seguido por span. Como cor de fundo. Vou usar o CFA 012. Vamos duplicar esse código duas vezes. Altere o número que precisamos aqui para a cor. Vamos usar 54154 Quanto ao terceiro item, precisamos cobrir E, dois a sete a sete Tudo bem, então é isso com um design. Finalmente, terminamos. Em seguida, temos que cuidar da funcionalidade. E antes de tudo, vou trabalhar no menu de hambúrguer Vamos adicionar algumas estrelas ao ícone do Menu. Por enquanto, não está visível. Então, vamos selecioná-lo. A primeira coisa que precisava fazer era torná-la visível. Então, vamos definir a largura e a altura. Faça os dois 3,5 rem. E também mude a cor, a cor de fundo a torna branca. Como você pode ver por padrão, ele é colocado no canto superior esquerdo. E agora precisamos colocá-lo no canto superior direito. Então, vamos definir sua posição e torná-la absoluta. Em seguida, defina as posições direita e superior, ambas em zero. Ok, então o ícone é colocado da maneira correta. Em seguida, vou mostrar as linhas. Então, vamos selecioná-los com um nome de classe comum, linha, largura e altura definidas. Vou definir a largura para 2,5 g. Quanto à altura, vamos fazer 0,3 rem e também alterar a cor de fundo. Nesse caso, vou usar uma cor secundária. Tudo bem, assim como as linhas Z, todas estão visíveis, mas agora elas estão muito próximas umas das outras Precisamos de algum espaço entre eles. E também temos que colocá-los no centro da caixa. Para fazer isso, não vou usar o flexbox. Eu quero fazer o mesmo usando posições. Então, vamos atribuir duas linhas de posição absoluta. Em seguida, vou selecionar cada uma das linhas separadamente. Vamos começar com a linha um. Faça sua posição superior. Um ponto para a RAM. Então eu vou duplicá-lo duas vezes. Precisamos aqui da linha para S4, a posição superior. Vamos fazer com 1,8 RAM. Quanto à terceira linha, precisamos posicionar 2.4. Como você pode ver, agora temos espaço entre as linhas. E para centralizá-los, vou usar estofamento Na verdade, o tamanho do espaço igual a uma RAM porque a largura do ícone é 3,5 rem e a largura da linha é 2,5 Para tornar as linhas perfeitamente centralizadas, temos que definir o preenchimento para 0,5 rem No momento, o tamanho da caixa está aumentado. E para corrigir isso, temos que usar o dimensionamento de caixas Caixa de fronteira. Finalmente, livre-se da cor de fundo branca. Tudo bem, então o ícone do Menu foi projetado e agora temos que fazê-lo funcionar Quero dizer, quando clicamos nele, precisamos transformá-lo em x. Para uma melhor demonstração, quero definir alguns estilos para todas as três linhas separadamente Quero dizer, vamos sobrescrever os estilos atuais, mas eventualmente usaremos uma nova classe que será adicionada usando JavaScript no evento de clique Tudo bem, vamos escrever o código e ele ficará muito mais claro Vamos selecionar novamente a linha um. Linha um e linha. Trocaremos seus lugares para que eles rotacionem. Quanto à linha, ela se esconderá. Para a linha um, precisamos definir a posição superior como 2,4 RAM. Em seguida, precisamos transformar com a função de rotação com o valor -40 graus Em seguida, selecione a linha para uma atribuída à sua opacidade como zero. Como linha de pobreza três, vou copiar esse código e mudar o nome da turma. Precisamos da linha três. Além disso, precisamos da posição superior como um ponto para empurrar. Quanto à rotação, precisamos aqui de 40 graus sem o sinal negativo Então, como você pode ver, as linhas são giradas. Bem, não temos aqui o x. Temos que ajustar as posições usando a função de translação. Mas antes disso, temos que mudar a origem da transformação. Por padrão, as linhas são giradas de acordo com o Centro. E, no nosso caso, precisamos deixar a origem da transformação. Então, vamos atribuir à linha a origem da transformação. Vire à esquerda Em seguida, abaixo, use a função de tradução. Para a primeira linha, precisamos traduzir por que desvalorizamos 0,3 rem por que desvalorizamos 0,3 Quanto à terceira linha, precisamos da mesma, mas com aluguéis negativos de 0,3 Tudo bem, agora temos o x perfeito e na verdade, é hora de fazer o ícone funcionar Como dissemos, precisamos adicionar uma nova classe. E, em seguida, usando o método toggle, temos que adicionar e remover essa classe com um clique. Então, vamos adicioná-lo às três linhas. Uma nova classe, digamos, mudança. Em seguida, abra o arquivo JavaScript. Vou selecionar o ícone do menu para isso. Vamos usar o método seletor de consulta. Dentro dos parênteses, temos que especificar o nome da classe, que é menu de hambúrguer Em seguida, anexado a cada ouvinte do evento. Em seguida, passe aqui, clique em evento, seguido pela função de seta. Tivemos que adicionar e remover a alteração de classe do contêiner porque também precisamos manipular 23. Projeto 20 - Hamburger Menu: Neste vídeo, vamos criar o menu de hambúrguer com alguns efeitos interessantes Este projeto será construído com base em HTML, CSS e um pouco de JavaScript. Como você pode ver, temos aqui uma landing page com imagem de fundo em tela cheia E no canto superior direito está colocado o ícone do menu de hambúrguer Se eu clicar nele, o ícone será transformado em x. E agora parte será exibida do lado direito. Aqui temos alguns itens de navegação e, se eu passar o mouse sobre eles, obteremos bons efeitos de mouse Neste vídeo, você aprenderá como criar todas essas coisas. Vamos começar a construir nosso projeto. No código VS. Eu tenho alguns arquivos para HTML, CSS e JavaScript. E também temos aqui uma pasta chamada imagens na qual temos uma imagem como plano de fundo da página de empréstimo Você pode baixar os arquivos iniciais no link na descrição Ok, vamos prosseguir e abrir o arquivo index.html. Eu preparei a estrutura básica do documento HTML. Dentro dos elementos da cabeça, tenho dois links. Uma para fontes do Google, vou usar uma fonte chamada doses e outra para arquivo CSS. Além disso, inseri aqui tag de script para vincular o arquivo JavaScript. Tudo bem, vamos começar a criar marcação HTML, desenvolvimentos abertos, que será um contêiner Portanto, é atribuído a seu contêiner de classe. Então, dentro do contêiner, vou abrir elementos que envolverão todo o conteúdo da barra de navegação Vamos atribuir a ela a classe navbar. Então, dentro dele, primeiro vou criar um ícone de menu de hambúrguer Então, abra o desenvolvimento e atribua a ele um nome de classe, menu de hambúrguer Então, dentro desses elementos div, vou inserir três elementos div para três linhas de um ícone Vamos atribuir à sua classe o nome de uma linha de estilo comum. E também precisamos aqui de outro nome de cluster para estilo individual. Linha direita um. Em seguida, duplique essa linha duas vezes e altere os nomes das classes. Precisamos da linha dois, linha três. Tudo bem, isso é tudo sobre o ícone Menu por enquanto, não é viável porque temos apenas elementos div vazios sem nenhum estilo Em seguida, vou criar navegação. Ele será representado por elementos da UL. Vamos atribuir a ela uma classe, não menos importante. Em seguida, insira nele elementos LI. Deve ter um item de classe. E, finalmente, precisamos dos seus elementos de link. Vamos atribuir a ela o nome da classe nav link e também inserir seu primeiro item No geral, vou ter sete itens de navegação. Então, vamos duplicá-lo seis vezes e depois mudar rapidamente o conteúdo aqui sobre nós. Essa notícia. O próximo será Galeria do que eventos. Preços. E por último, insira seu conteúdo. Tudo bem, então isso é tudo sobre HTML. É hora de começar a estilizar. Vamos para o arquivo style.css. No começo, vou criar alguns estilos de redefinição. Vamos eliminar a margem e o preenchimento padrão de cada elemento Selecione-os usando asterisco. E então passe sua margem zero e também o preenchimento zero. Em seguida, vou mudar a família da fonte para o elemento do corpo. Então, vamos selecioná-lo. E então insira aqui as doses da família de fontes, san-serif. Em seguida, vamos cuidar do contêiner. Defina sua largura e altura como uma largura. Vamos escrever aqui 100 por cento. Quanto à altura. Vou defini-lo como 100 por cento da janela de visualização. Então, certo, 100 pH do que como pano de fundo. Eu vou definir uma imagem. Então, fundo direito do que precisamos aqui, gradiente linear. Vou usar três cores diferentes. O primeiro será RGBA 000 e opacidade 0,4. Em seguida, vamos escrever RGBA 14848, novamente 48 e a opacidade Em seguida, insira RGBA 167-60-7607 e opacidade 0.4. Em seguida, o URL interno indica parte das imagens da imagem e selecione a imagem chamada bg dot JPG como a posição do plano de fundo. Precisamos do Center e também passamos por aqui, sem repetir. E, finalmente, vou usar a propriedade de tamanho de fundo com a capa do valor. Tudo bem, então a página de destino está pronta. Temos aqui uma imagem de fundo em tela cheia. E agora vou abordar aqui o menu de hambúrguer Como você sabe, ele consistirá em três linhas e deve ser colocado no canto superior direito da página Primeiro, vamos selecionar o desenvolvimento rápido, que tem um menu de hambúrguer className Vamos definir sua largura e altura. Vou definir com 35 pixels. Quanto à altura, vamos atribuir a ela 30 pixels. Por enquanto, o ícone ainda não está visível. E para corrigir isso, vamos atribuir a ele um plano de fundo temporário, digamos vermelho Ok, agora o ícone exibido por padrão é colocado no canto superior esquerdo. Mas, como eu disse, vou colocá-lo no canto superior direito da página. Para isso, vamos definir essa posição como fixa. E então precisamos da posição superior, definida como 50 pixels e a direita como 50 pixels. Agora eu posso deslocar no canto superior direito. E, finalmente, vou mudar o cursor. Vamos deixar isso claro. Tudo bem, por enquanto com o elemento div principal, terminamos. É hora de trabalhar com luzes. Vamos prosseguir e selecioná-los usando a linha de nome de classe comum. Em seguida, defina sua largura como 100 por cento. Significa que a linha ocupará toda a largura do elemento pai, que é de 35 pixels. Em seguida, vou definir a altura. Vamos fazer três pixels e também mudar a cor de fundo. Você vê sua cor chocolate. Ok, agora as linhas estão visíveis, mas elas estão grudadas umas nas outras e temos que separá-las. Para conseguir isso, vou usar o Flexbox. Vamos fazer um contêiner flexível do menu de hambúrguer. Para isso, precisamos do display flex. Em seguida, mude a direção da flexão. Precisamos colocar linhas como uma coluna. Portanto, precisamos de uma coluna de direção flexível. E, finalmente, para criar algum espaço entre eles, use o conteúdo justificado Os valores giram em torno de si. Ok, agora as linhas estão separadas e, na verdade podemos nos livrar desse fundo vermelho. Tudo bem, então o ícone do menu já está criado e antes de fazê-lo funcionar, vou personalizar a barra de navegação Devemos colocá-lo no lado direito. Então, vamos prosseguir e selecionar elemento nav com o nome da classe navbar Primeiro, vamos definir sua largura e altura. Vou definir sua largura como 300 pixels. Quanto à altura, vamos fazer com que seja 100 por cento. Em seguida, altere a cor de fundo. Vamos usar sua cor 26262. Ok, então, para colocar a barra agora no lado direito, vamos definir essa posição como fixa. E então faça com que as propriedades superior e direita sejam zero. Tudo bem, então a barra de navegação está posicionada da maneira correta. Agora vou cuidar da posição dos itens de navegação. Quero colocá-los perfeitamente no centro da barra de navegação. E para isso, vamos usar o Flexbox aqui. Display flex. Que, para centralizar itens horizontalmente, use Centro. S para centralização vertical Use itens de alinhamento, centro. Ok, então os itens são colocados no centro. E a última coisa que eu quero fazer em relação à barra de navegação é personalizar sua forma E eu vou fazer isso usando o raio da borda. Na verdade, essa propriedade pode assumir quatro valores diferentes apropriados para quatro cantos. Estou no canto superior esquerdo, no canto superior direito, no canto inferior direito e no canto inferior esquerdo Então, podemos definir diferentes raios de borda, quatro colunas diferentes Nesse caso, vou personalizar os cantos superior esquerdo e inferior esquerdo. Quanto ao resto dos cantos, não vamos tocá-los. Então, como valor do raio da borda do canto superior esquerdo, vou inserir aqui Então, como dissemos, os cantos superior direito e inferior direito não serão alterados. Então, precisamos inserir aqui zeros duas vezes. E para o canto inferior esquerdo, vou usar 60%. Tudo bem, então a forma da barra de navegação é personalizada e agora vou estilizar os itens de navegação Vamos seguir em frente e selecionar os elementos da UL. Tem nome de classe. Não menos importante. Vou colocar o texto no lado direito. Então, vamos usar o alinhamento de texto à direita. Em seguida, vamos selecionar os elementos LI. Tem nome de classe, não item. Primeiro, vamos nos livrar dos marcadores padrão usando nenhum no estilo de lista Em seguida, crie algum espaço usando margem. 25 semanas. Tudo bem, agora temos que selecionar os elementos do link, que tem o nome da classe nav Vamos nos livrar dos estilos padrão. Usando decoração de texto. Nenhum. Em seguida, aumente o tamanho da fonte, faça 22 pixels. Mude a cor. Você vê sua cor E. Além disso, vou tornar a fonte mais clara usando a gramatura da fonte 300. Em seguida, cria algum espaço entre as letras usando o espaçamento entre letras Um pixel. faça o texto em maiúsculas usando a transformação de texto em maiúsculas E, finalmente, faça o texto em maiúsculas usando a transformação de texto em maiúsculas. Tudo bem, isso é tudo sobre itens de navegação Como você se lembra do projeto finalizado, vamos criar alguns efeitos de foco passar o mouse, devemos exibir linhas na parte superior e inferior dos itens Será exibido com uma transição suave. E nas direções opostas. Na verdade, vamos criar essas linhas usando pseudoelementos antes e depois Ambos terão alguns estilos comuns. Então, vamos selecionar os dois pseudoelementos, à direita, link de navegação antes à direita, link de navegação Em seguida, duplique essa linha e altere antes e depois. Então, primeiro precisamos definir o conteúdo como vazio. Em seguida, vou definir a largura e a altura. Vamos começar com a gente 100 por cento. Em seguida, aumente a altura para pixels e também altere a cor de fundo. Você vê sua cor chocolate. Por enquanto, as linhas não são visíveis porque são elementos embutidos e , portanto, a largura e a altura não são aplicadas Portanto, se definirmos sua posição como absoluta e, em seguida, se atribuirmos aos elementos pais, o que não é relativo à posição do link, as duas linhas serão exibidas Em um piscar de olhos. Vemos aqui apenas uma linha, mas, na verdade, ambas as linhas são colocadas lado a lado Ok, a seguir vou definir uma posição à esquerda para ambos os elementos como zero. Agora, as duas linhas estão ocupando mesmos pontos e, para separá-las, temos que definir uma posição inferior para os pseudoelementos e torná-la zero Então, vamos copiar esse seletor e atribuí-lo ao zero inferior Então, agora as duas linhas estão separadas. Como você sabe, por padrão, posição superior é definida como zero. Então, se não o definirmos manualmente, isso não será um problema. Mas de qualquer forma, vou defini-lo. Então, vamos duplicar esse código. Em seguida, mude depois para antes. E em vez de embaixo, direito, superior. Tudo bem, a última coisa que queremos aqui é criar um pouco de preenchimento porque a linha inferior está muito próxima do item Então, vamos atribuir ao nav o preenchimento do link no canto superior e inferior direito três pixels e depois zero nos lados esquerdo e Tudo bem, isso é tudo sobre as linhas que agora precisam criar um efeito de foco. Por padrão, vou esconder essas linhas. E quando passarmos o mouse sobre os itens, essas linhas serão exibidas suavemente nas direções opostas Para ocultar linhas, vou usar Transform. Em seguida, escale x. Temos que defini-lo como zero. Agora, ao passar o mouse, temos que aumentar a escala e torná-la uma Então, vamos continuar e selecionar o link de navegação com o mouse. Em seguida, adicione aqui antes. Duplique esse seletor e altere antes e depois. Em seguida, insira sua Transformação, Escala x com o argumento um. E, finalmente, para tornar o efeito mais inteligente, vamos usar a transformação de transição 0,5 s. Tudo bem, então se passarmos o mouse sobre os itens as linhas serão exibidas Mas, como você pode ver, por padrão, eles começam a aparecer do centro. Isso acontece porque a propriedade de origem da transformação é definida como sensor por padrão. Portanto, precisamos alterá-lo para ambas as linhas. Vamos atribuir aos pseudoelementos após os pseudoelementos, a origem da transformação. Faça a coisa certa. Em seguida, copie esse código e cole-o antes dos pseudoelementos E em vez de direita, vamos inserir aqui à esquerda. Se passarmos o mouse sobre os itens , tudo funcionará perfeitamente Temos aqui um bom efeito de flutuação. Ok, então com a navegação, terminamos. Próximo. O que precisamos fazer é fazer o menu de hambúrguer funcionar. Em primeiro lugar, vou transformar o ícone do menu em x. Para isso, temos que mudar as posições primeira e da terceira linhas. Quanto ao segundo, ele deve ser aquecido. Então, vamos seguir em frente e selecionar a linha um. Temos que girar a linha um em 45 graus de acordo com o eixo z. Para ser mais preciso, para a linha um, temos que usar Rotate Z -45 graus Vamos duplicar esse código. Mude o nome da turma para a direita, linha três. E também se livre do sinal de menos a partir daqui. Como dissemos, temos que esconder a linha dois. Então, vamos selecioná-lo e usar sua opacidade zero. Como você pode ver, as linhas são giradas, mas não temos aqui nenhum x. Temos que cuidar das posições das linhas Para isso. Vou adicionar aqui traduzir. Então, como o valor da direção x, certo? Menos oito pixels, S4, eixo y. Temos que passar suas seis semanas. Vamos copiá-lo e colar quatro linhas três Em vez de seis pixels, precisamos aqui de apenas menos seis picos. Agora é considerado. O problema está resolvido e temos aqui x. Na verdade, esse não é o estado padrão do ícone. Temos que transformá-lo em x quando clicamos nele. Para conseguir isso, vou usar um pouco de JavaScript. Mas antes de escrevermos um pouco de JavaScript, vou adicionar duas linhas. Novo nome de classe, vamos chamá-lo de mudança. Em seguida, adicionaremos essa barra de navegação de classe 2 usando JavaScript. E tudo isso acontecerá quando clicarmos no ícone. Vamos ao arquivo script.js e, em primeiro lugar, criar uma nova variável, vamos chamá-la de ícone de menu. Em seguida, selecione os empreendimentos que têm um menu de hambúrguer com o nome da classe Para isso, precisamos escrever documentos, pontos, consultas, seletores e passar o menu de hambúrguer com o nome da turma Em seguida, anexe o ouvinte de eventos ao ícone Menu, à direita, ícone do menu, ponto, adicione o ouvinte de eventos Como primeiro argumento, temos que passar seu nome de eventos, que é clique. Que precisamos passar sua função, que será uma função de seta. Agora temos que adicionar duas novas classes que são alteradas primeiro, vamos criar uma nova variável, chamá-la de barra de navegação Deve ser igual a documentos, pontos, querySelector. Vamos inserir a barra de navegação do nome do cluster. Em seguida, dentro da função, à direita, barra de navegação e propriedade mais fácil chamada lista de classes Agora você pode pensar que precisamos usar seu método add, mas nesse caso não funcionará porque quando clicamos no ícone, a mudança de classe deve ser adicionada ao Napa Mas em Avançar clique, ele deve ser removido. E para conseguir isso, em vez de adicionar, temos que usar um método chamado Toggle Vamos inserir a alteração do nome da sua turma. Então, se clicarmos no ícone, ele será transformado em x. E, no próximo clique, ele obterá seu estado padrão. Para fazer com que isso afete o motor, vamos voltar ao arquivo style.css e vamos voltar ao arquivo style.css e atribuir à transição de linha os valores de 0,8 s. Então, agora um fato ficou mais inteligente, mas acho que podemos torná-lo ainda mais agradável Em vez de girar as linhas em apenas 45 graus, podemos deixá-las fazer uma rotação inteira, 360 graus e depois girar novamente em 45 Então, como valores, temos que inserir aqui, soma de 360,45, que eventualmente é 405 Então agora você concorda que parece muito melhor. Tudo bem, então estamos quase lá. A outra coisa que precisa fazer é ocultar uma porta suficiente por padrão e exibi-la OnClick Para isso, vamos alterar o valor da posição correta e torná-la -300 pixels Então, agora o Navbar está oculto. Para movê-lo da direita para a esquerda, vou usar novamente a mudança de classe. Vamos atribuir a ela, à direita, com valor zero. Agora, se clicarmos, Napa será exibida, mas como convidado, para tornar o efeito mais agradável, temos que usar a transição com os valores Além disso, vou usar sua função chamada Cubic Bezier, que nos permite criar uma Nesse caso, quero que o efeito comece um pouco mais devagar e termine mais rápido Para isso, vou passar seus valores 100,1. Então, agora podemos dizer que tudo funciona perfeitamente. Temos aqui uma barra de navegação bonita e moderna com alguns efeitos interessantes 24. Projeto 21 - Botão criativo: Neste tutorial, criaremos um botão bonito com alguns efeitos interessantes Aqui temos um único botão na página. Tem algum conteúdo. E quando passarmos o mouse sobre ele , o conteúdo será alterado com um bom efeito É isso mesmo, o que vamos construir. Espero que seja interessante. Então, vamos começar. No código VS. Eu tenho dois arquivos diferentes, index.html e style.css. Dentro do arquivo HTML, preparei a estrutura básica do HTML, o elemento principal. Eu tenho dois links diferentes, um para fontes do Google e o segundo para style.css. Mas você pode baixar esses arquivos iniciais no link na descrição Vamos em frente e, antes de tudo, criar uma marcação HTML. Vamos abrir o desenvolvimento, que será um rapper. Então, atribuído à classe BTN wrapper. Em seguida, dentro dele, o botão Criar com um nome de classe btn. Então, como conteúdo do botão, vou instituir diferentes elementos de extensão porque, como você se lembra, alteraremos esses conteúdos quando passarmos o mouse sobre o botão Portanto, abra elementos de extensão com o nome da classe, BTN, textos um e institua algum texto Digamos que explore mais. Em seguida, duplique-o. Mudou className em vez de um, certo? Dois. E também mude o conteúdo, certo? É interessante. Tudo bem, isso é tudo sobre marcação HTML Agora é hora de escrever um pouco de CSS. Então, vamos para o arquivo style.css. Em primeiro lugar, vou criar alguns estilos comuns. Selecione todos os elementos usando um asterisco e defina a margem e o preenchimento Além disso, vou mudar a família de fontes para cada elemento. Vamos usar aqui Josephine Sans sensorial. Tudo bem, a seguir vou mudar a cor de fundo do elemento do corpo Então, vamos selecioná-lo e atribuir à sua cor de fundo C, F, D, E zero. Agora vou definir a largura e a altura para o invólucro btn. Na verdade, ele ocupará a página inteira. Então, vamos atribuir a cada largura. E, infelizmente, isso é 100%. Quanto à altura, vou configurá-la como 100% da janela de visualização Tudo bem, então, vamos tocar o botão no centro da página E eu vou fazer isso usando posições e transformar traduzir. Vamos selecionar o botão. Defina sua posição como absoluta. Então vou movê-lo de cima para baixo em 50 por cento. Então, vamos definir a posição superior como 50 por cento e também movê-la da esquerda para a direita em 50 por cento. Finalmente, para centralizar o botão perfeitamente, precisamos usar o transform translate. E temos que passar seus -50 por cento. E, novamente, -50 por cento. Tudo bem, então, quando o botão estiver perfeitamente centralizado na página, vou personalizá-lo Vamos definir sua largura e altura. Definido com até 250 pixels. Quanto à altura, vamos atribuir a 70 pixels. Em seguida, mude o fundo. Nesse caso, vou usar um gradiente linear com três cores diferentes E também vou mudar a direção da transição de cores. Usaremos de baixo para cima. Isso insegura três cores diferentes. O primeiro será 001 54c. O próximo deve ser 123 76e como o último, certo? 234, 87f. Tudo bem, então a cor de fundo foi alterada. Vamos mudar a cor do texto também. Faça com que seja branco. Além disso, vou criar um botão ao redor dele usando o raio da borda Nós desvalorizamos 50 pixels. Em seguida, livre-se da borda padrão. Além disso, vou me livrar do contorno padrão porque quando clicamos no botão, a linha azul aparece Então, vamos definir o esboço como nenhum. Mude também o tipo de grosseiro, torne-o ponteiro. E, finalmente, crie algum efeito de sombra. Use box-shadow com os valores 015 pixels, dois pixels. E como a cor, certo, RGBA 000.5. Tudo bem, então, por enquanto, isso é tudo sobre o botão. Já está com boa aparência e agora teremos que cuidar de seu conteúdo. Então, vamos selecionar elementos de extensão. No início, aumente o tamanho da fonte, faça com que seja de 18 pixels. Em seguida, transforme o texto em maiúsculas e crie algum espaço entre as letras usando o espaçamento entre letras com o valor máximo Tudo bem, agora é hora de criar os efeitos de foco. Mas antes disso, vou posicionar os elementos de extensão. No começo, vou trabalhar no primeiro Selecione-o e defina sua posição como absoluta. Por enquanto, quero ocultar o segundo elemento de extensão para tornar nosso processo de trabalho mais conveniente. Então, vamos selecioná-lo e atribuí-lo a cada monitor, nenhum. Tudo bem, vamos definir a largura dos primeiros elementos de extensão e torná-la 100% Em seguida, coloque-o no centro do botão. Para isso, precisamos de uma posição de topo com o valor de 50 por cento. Então precisamos deixar zero. Agora, para centralizar os elementos perfeitamente, temos que usar novamente transform. Mas, neste caso, traduza com a direção y e com um valor de -50 por cento. Tudo bem, isso é tudo sobre os primeiros elementos do span. Agora, vou definir uma posição para a segunda. Por padrão, vou colocá-lo abaixo do botão. E então, ao passar o mouse, ele será movido para cima e exibirá como o conteúdo do botão Então, vamos eliminar o display none daqui. Na verdade, também precisamos usar propriedades semelhantes para o segundo elemento de extensão. Então, vou copiar essas propriedades daqui e colá-las para o segundo período. Como você pode ver, os dois elementos de extensão ocupam o mesmo lugar, mas não precisamos deles. Como eu disse, vou colocar a segunda extensão abaixo do botão. E para eles, vamos mudar o valor da primeira posição e torná-la em 150 por cento. Tudo bem, então está tudo pronto, é hora de criar um efeito de foco. Ao passar o mouse. Vou avançar com o primeiro texto. Quero dizer, deveria estar escondido. Quanto ao segundo vão, também o moverá para cima e exibido como o conteúdo da bunda. Então, vamos selecionar o botão com o mouse. Em seguida, selecione os primeiros elementos de extensão. Então, vou aumentar o primeiro elemento de extensão em 100 por cento. Portanto, precisamos definir a primeira posição como -100%. Então, se eu passar o mouse sobre o botão, o texto será movido para cima Agora temos que mover esse segundo vão também. Na verdade, vamos duplicar esse código. Mude o nome da classe. Precisamos de você para S4, a primeira posição. Precisamos defini-lo como 50 por cento. Então, se eu passar o mouse sobre o botão , todos nós ou eles obteremos esse resultado Agora temos apenas que personalizar esse efeito. Quero dizer, vou adicionar a isso transição com os valores top e 0,2 s. Agora o efeito parece muito melhor e a única coisa que precisa fazer é esconder o texto enquanto eles estão fora do botão. Para isso, vou usar overflow hidden. Tudo bem, agora estava tudo bem. E, na verdade, com este pequeno projeto, terminamos 25. Projeto 22 - Slideshow: Olá, bem-vindo ao nosso novo vídeo no qual vamos criar uma apresentação de slides Antes de começarmos a construir os projetos, vou descrever do que se trata. Como você pode ver por padrão, esta apresentação de slides está funcionando com alguns bons efeitos de desbotamento Aqui embaixo, temos um botão Play Pause. Se eu clicar nele, a apresentação de slides será interrompida. E também nos lados esquerdo e direito , serão exibidos dois controles ou setas Usando-os, você pode executar essa apresentação de slides manualmente. Se eu clicar no botão Reproduzir e passar o mouse sobre o lado direito ou esquerdo, as setas serão exibidas Se eu clicar em qualquer um deles, essa apresentação de slides mudará para o modo manual Ele não será mais executado automaticamente, e o botão de postagem também será alterado para o play, mas tudo bem, vamos começar a trabalhar nele. Aqui na área de trabalho, criei uma nova pasta chamada slideshow, na qual tenho outra pasta chamada Inclui todas as imagens que usaremos ao longo deste projeto. Na verdade, você pode baixar os arquivos de origem no link na descrição. Eles são enviados para o GitHub, certo? Vamos abrir essa pasta no VS Code. Vou criar três arquivos diferentes. O primeiro será o index.html. Em seguida, precisamos do arquivo style.css e também do script dot js. Em seguida, vá para o arquivo index.html e crie um documento HTML básico. Para isso, precisamos colocar um ponto de exclamação e pressionar Enter ou a tecla Tab Vamos mudar o título. Vou inserir sua apresentação de slides. Em seguida, vou vincular arquivos CSS e JavaScript. Vamos abrir a tag do link. Adicionar o atributo H references indica o nome do arquivo, style.css. Em seguida, abaixo, logo acima da tag do corpo de fechamento, abra a tag de script. Precisamos aqui dos atributos de origem e temos que indicar o nome do arquivo script.js. Tudo bem, finalmente, temos que executar nosso projeto no navegador Para isso, vou usar um servidor ativo, que é um ótimo pacote, e nos permite executar a vida útil do projeto no navegador sem atualizar a página sempre que fizermos algumas alterações Então você pode ir em frente e instalar este pacote. Para executar um servidor ativo, você pode clicar com o botão direito do mouse e escolher Abrir com o Live Server Tudo bem, vamos organizar um pouco o editor de texto e o navegador e depois começar a criar a marcação HTML O primeiro elemento que vamos criar é um div, que na verdade será um contêiner Ele envolverá todo o conteúdo. Em seguida, precisamos de outro div. Ele incluirá a apresentação de slides em si. Portanto, é atribuído ao nome da classe slideshow wrapper. Depois disso, vou passar a seta esquerda para esses desenvolvimentos. Então, vamos em frente e o open div terá duas classes diferentes O primeiro será um nome de classe comum para ambas as setas Control E então eu vou usar um nome de classe individual, seta para a esquerda. Na verdade, essas setas serão criadas manualmente. Não teremos nenhum ícone. Então vou passar aqui outra dica com a seta da classe. E, finalmente, temos que inserir aqui duas linhas representadas por desenvolvimentos. Portanto, o primeiro desenvolvimento deve ter classes, linha e linha um. Vamos duplicar essa linha de código e alterar o nome da classe para o qual precisamos desta linha Tudo bem, isso é tudo sobre a seta esquerda. Vou duplicá-lo para a seta direita e mudar os nomes das classes que precisamos aqui, seta para a direita Quanto aos números das linhas, precisamos de 3,4. Ok, isso é tudo sobre as flechas. Agora vou inserir entre eles, os slides, estou nas imagens Vamos abrir os desenvolvimentos com os slides do ClassName. Então, cada imagem será empacotada por um desenvolvimento. Portanto, vamos abri-lo com os nomes das classes, slide, slide um. Na verdade, precisamos usar esses nomes de classes numerados porque vamos usá-los em JavaScript. Em seguida, insira aqui uma imagem. Na verdade, não vou usar um atributo alt, então vamos nos livrar dele e selecionar a imagem na pasta de imagens. Então, aqui está nossa imagem. Vamos continuar e duplicar o slide duas vezes por enquanto e alterar os nomes das classes e das imagens nele aqui também. Imagem dois e 3.3. Então, agora temos três imagens, mas no final do dia, você pode adicionar quantas imagens quiser. Funcionará bem e não travará o projeto. Finalmente, vou criar um botão de pausa na reprodução. Vamos abrir os desenvolvimentos logo após a seta para a direita e atribuídos ao nome do cluster play pose. Como o botão de pausa do jogo. Vou usar o ícone Font Awesome. E para fazer isso, precisamos pegar o link CDN do Font Awesome Então, vamos prosseguir e pesquisar Font Awesome, CDN, js. Em seguida, acesse este link e , em seguida, pegue o primeiro link. A partir daqui. Vou abrir a tag do link. E então vamos colar um link e o atributo de referência H. Tudo bem, então abaixo, insira o elemento com os nomes das classes, FAS, f, dash, play Tudo bem, isso é tudo sobre marcação HTML. Temos aqui imagens e também o botão Reproduzir logo depois disso. Agora é hora de começar a escrever um pouco de CSS. Vamos para o arquivo style.css. A primeira coisa que vou fazer é criar alguns estilos de redefinição. Então, vamos selecionar todos os elementos usando um asterisco e definir a margem e o preenchimento Em seguida, selecione o invólucro da apresentação de slides. Na verdade, vou expandir esses elementos para toda a janela de visualização Então, vamos definir a largura como 100%. E então a altura é de cem vh. Vh significa que a altura ocupará 100% da altura da janela de visualização No momento, nada está acontecendo aqui. Então, precisamos adicionar mais alguns estilos. Temos que cuidar do slide em si. Então, vamos prosseguir e selecioná-lo. Vamos definir a largura e a altura, ambas como 100 por cento. E também vou definir sua posição como absoluta. Isso nos permitirá colocar imagens umas sobre as outras. Agora parece que temos aqui apenas uma imagem, mas, na verdade, o resto das imagens são colocadas em segundo plano umas sobre as outras. Tudo bem, a seguir, vamos cuidar da imagem em si. Então selecione o elemento IMG. Também precisamos da mesma largura e altura para a imagem. Então, vou herdar essas duas propriedades, largura e altura E também para que a imagem tenha uma boa aparência, vamos usar uma cobertura para pés de objetos. Finalmente, quero deixar a imagem um pouco mais escura. E para conseguir isso, vou atribuir ao elemento pai, fundo preto E então vamos diminuir a opacidade da imagem. Vou fazer com que seja 0,6. Ok, então acho que parece muito melhor agora é hora de começar a trabalhar nos controles esquerdo e direito. Como você se lembra, as duas setas têm nomes de classe comuns. Controle. Então, vamos prosseguir e selecioná-lo. Vamos definir que a posição é absoluta. Em seguida, para fazer Controls Position funcione de acordo com seu elemento principal, que neste caso é um invólucro de apresentação de slides Temos que usar a posição relativa Em seguida, vou definir a posição superior. Vamos torná-lo zero. E também defina a largura e altura como um valor da propriedade de largura. Vou usar a largura da janela de visualização. Isso torna os controles mais responsivos em diferentes tamanhos de tela Vou usar 15 janelas de visualização de largura. Isso significa que a largura do controle será 15% da largura da janela de visualização Quanto à altura, vamos defini-la como 100 por cento. Então, no momento, o controle não está visível. E para corrigir isso, vamos mudar a cor de fundo. Nesse caso, vou usar o valor RGBA. Então eu vou passar aqui 902-90-4907. E então, como valor da opacidade, vou passar 0,6 Agora, como você pode ver, temos aqui o controle no lado esquerdo da página. O segundo controle não está visível no momento porque em HTML ele é colocado após a apresentação de slides e, portanto, fica anualmente atrás dessa Para corrigir isso, vou usar a propriedade z-index. Vamos fazer com que seja 100. Agora, à primeira vista, temos o mesmo resultado, mas, na verdade, os dois controles são colocados um em cima do outro Porque, por padrão, para os dois, a posição esquerda é definida como zero. Então, temos que cuidar disso. Para a seta esquerda, precisamos que a propriedade left seja definida como zero. Quanto à seta para a direita, também precisamos fazer a posição correta zero. Tudo bem, agora tudo funciona bem. Ambos os controles estão posicionados da maneira correta. A última coisa que vou fazer com os controles é definir o tipo do cursor como ponto. Tudo bem, agora é hora de cuidar das flechas. Como dissemos, temos que criá-los manualmente com os desenvolvimentos. Então, vou selecionar todos eles usando a linha comum do nome da classe. Antes de tudo, vamos torná-los visíveis. Para isso, temos que definir largura e altura. Vou definir a largura como pontos a serem executados. Quanto à altura. Vamos fazer dez rampas. E também defina a cor de fundo. Vou usar aqui chamado r d d d Phi, d Phi. Então, aqui temos nossas linhas. Na verdade, temos quatro linhas diferentes e, para transformá-las em setas, precisamos girá-las Então, vamos selecionar a primeira linha, que tem o nome da classe linha um. Eu vou girá-lo em 20 graus. Então, para isso, temos que usar a propriedade de transformação. Em seguida, precisamos girar a função. E dentro dos parênteses, temos que indicar 20 graus. Como você pode ver, a linha é girada, mas está parcialmente oculta Então, para corrigir isso, vou centralizar as linhas dentro do controle para isso. Vou usar algumas propriedades e valores do flexbox O primeiro será o display flex. Então, para centralizar o item flexível horizontalmente, precisamos usar o centro de conteúdo justificado Quanto à centralização vertical, precisamos alinhar o centro dos itens No momento, a linha está visível e na verdade, a seta está centralizada Vamos seguir em frente e cuidar da segunda linha. Precisamos girá-lo no mesmo grau, mas na direção oposta. Então, vamos continuar e duplicar esse código aqui. Eu vou mudar o nome da turma. Precisamos aqui, da linha dois. E também precisamos de 20 graus negativos. Tudo bem, agora já temos uma seta, mas como você pode ver, as linhas estão um pouco distantes umas das outras Então, para corrigir isso, vou movê-los um pouco usando a função Translate. Precisamos movê-los de acordo com o eixo y. Portanto, precisamos traduzir y com o valor de 0,35 RAM. Precisamos do mesmo para a segunda linha também, mas novamente, com o sinal de menos Então, vamos copiá-lo, colá-lo aqui e aqui, sinal de menos Tudo bem, então agora, como você pode ver, temos aqui a seta perfeita Vamos seguir em frente e fazer o mesmo com a pessoa certa. Vamos duplicar as duas linhas. Então eu vou mudar os nomes das turmas. Precisamos da linha três e da linha quatro Para a terceira seta, precisamos de 20 graus negativos. Quanto à quarta linha, precisamos de apenas 20 graus. Tudo bem, então isso é tudo sobre os controles. A última coisa que precisamos resolver é o botão Play Pause Então, vamos seguir em frente e selecionar esses elementos. Antes de tudo, vou cuidar da posição do botão porque no momento ele não está visível. Acabou atrás dos escorregadores. Então, vamos definir sua posição como absoluta. Então eu vou dizer os cinco por cento mais pobres. E que, para centralizar esses elementos, temos que definir a posição da trava como 50 por cento Além disso, para uma centralização perfeita, precisamos usar o Transform Com o Translate X. Tivemos que mover os elementos de acordo com a direção X, e temos que passar aqui -50 por cento Portanto, essa pequena técnica nos permite enviar o elemento perfeitamente. Finalmente, vamos usar o ponteiro do cursor. Ok, agora o botão é viável e está centralizado. Finalmente, quero que fique bonito. Então, vamos seguir em frente e selecionar o próprio elemento. Mude a cor do elemento, torne-o branco e também aumente o tamanho da fonte. Faça com que sejam 50 pixels. Certo? Então, agora terminamos com o CSS. Todos os elementos são estilizados. E agora temos que ir em frente e começar a escrever um pouco de JavaScript. Vamos para o arquivo script.js. Então, no começo, vamos executar essa apresentação de slides automaticamente Para isso, vamos criar duas funções diferentes. O primeiro será o Change Slides. Na verdade, acho que será melhor se dividirmos o editor e exibirmos o arquivo HTML também, porque vamos selecionar alguns elementos usando JavaScript DOM. Então, vou selecionar todos os slides. Vamos criar uma variável chamada lista de slides. Para selecionar alguns elementos que tenham o mesmo nome de classe, podemos usar o método query selector all Vamos passar aqui o slide do nome da turma. Na verdade, quando você seleciona elementos usando o método query selector all, ele retorna um objeto semelhante a uma matriz chamado E para manipular essa lista como uma matriz, temos que transformá-la em uma matriz Então, vamos continuar e criar uma nova variável. Eu vou chamar isso de slides. Agora, para transformar a lista de nós em uma matriz, temos que usar matriz do método E temos que passar sua lista de slides. Tudo bem, agora vou criar uma variável que representará o slide atual na apresentação de slides Quero dizer, neste slide que será exibido na tela, o valor dessa variável vai mudar. Portanto, vamos usar a declaração let. Vamos chamar essa variável de atual e depois defini-la como uma. Portanto, por padrão, o valor dessa variável indicará o número de um slide que será exibido no momento. Tudo bem? Então, selecionamos todos os slides e os armazenamos em uma matriz. Como você sabe, eles tinham nomes de classe. Deslize um, deslize dois e assim por diante. Temos que percorrer a matriz, obter acesso à segunda parte desses nomes de classes, principalmente números, e compará-los com o valor da variável atual. Se eles forem iguais, então temos que mostrar esse slide. E se eles não são iguais, então temos que esconder isso. Ok, é isso mesmo. O que vamos fazer. Para percorrer a matriz, vou usar um dos métodos auxiliares de matriz, chamado for-each Precisamos passar aqui uma função de seta com o slide atual. Portanto, para obter acesso ao nome do cluster, podemos usar uma propriedade chamada lista de classes, que na verdade nos fornece uma matriz dos nomes das classes. Então, vou usar declarações if. Então, como condição, precisamos da seguinte lista de classes de pontos deslizantes. Então, como dissemos, essa propriedade nos dará uma matriz dos nomes das classes. Nesse caso, esses nomes de classe serão slide, slide um. Precisamos do segundo item, quero dizer, slide um. Portanto, temos que indicar o número do índice como um. Depois disso, precisamos dividir esse nome de cluster no hífen Ele retornará outra matriz na qual teremos dois itens, slide e um Temos que pegar o segundo item, que é um. Então, precisamos indicar aqui o índice número um. Espero que faça sentido para você. Agora temos acesso ao número de cada slide, mas, na verdade, o tipo de dados desse número não é um número, é uma é Então, temos que transformá-lo em número. E podemos fazer isso simplesmente multiplicando por um. Tudo bem? Portanto, se esse número igual ao valor da variável atual, teremos que exibir o slide atual. Para isso. Vamos inserir aqui o estilo de pontos dos slides. E então vou usar uma propriedade chamada texto CSS, que nos permite usar várias declarações CSS Portanto, precisamos aqui de visibilidade, visível e também de opacidade. Se essa condição for falsa, teremos que ocultar esses slides. Então, precisamos da declaração L. Então vamos pegar essa linha de código. Torne a visibilidade oculta. Opacidade zero. Certo? É isso mesmo. Podemos chamar essa função agora. E vamos ver como isso funciona. Agora mesmo. A corrente é igual a um. Portanto, vemos aqui a primeira imagem. Para provar que posso passar o mouse sobre o caminho da imagem aqui, arquivo index.html Então você pode ver que essa é definitivamente a primeira imagem. Na verdade, se você quiser visualizar e criar imagens dessa forma, você pode instalar um pacote chamado image preview. Tudo bem, se eu alterar o valor da variável atual, digamos 23, a terceira imagem será exibida Se eu verificar novamente no arquivo index.html , encontraremos a mesma imagem. Tudo funciona bem até agora. Agora, é hora de fazer com que a apresentação de slides seja reproduzida automaticamente. Para isso, vou criar outra função. Vamos chamar isso de pausa no jogo. Portanto, precisamos mudar o slide a cada 3 s. Então, precisamos usar o método setInterval Então, nos primeiros 3 s, a primeira imagem será exibida. Depois disso, essa função de retorno de chamada será executada. Portanto, temos que aumentar o valor das correntes em um. Para isso, vamos usar o operador de incremento plus, plus. E também precisamos chamar a função Change Slides. Finalmente, isso indica aqui o intervalo. Vou salvá-lo como 3 s. E você precisa expressá-lo em milissegundos Então, precisamos de 3.000 milissegundos. Tudo bem? Como você pode ver, slides está sendo executada Depois da última imagem, o valor atual continua aumentando. Portanto, estamos recebendo aqui uma página em branco. Portanto, precisamos usar as instruções if na função de slides de mudança. Portanto, se o valor atual for maior que o comprimento dos slides, precisamos torná-lo um. Novamente. Precisamos, se quisermos, que a corrente de condição seja maior que o comprimento do ponto do slide. Se isso for verdade, então temos que definir a corrente como uma. Agora, como você pode ver, a apresentação de slides é executada infinitamente. Tudo bem, agora precisamos controlar o botão de pausa na reprodução. Por padrão, a apresentação de slides será executada automaticamente. Mas quando clicamos no botão Pausar , temos que parar a apresentação de slides Então, precisamos adicionar algumas coisas para jogar. Função de pausa. Vou criar duas variáveis diferentes. No primeiro, teremos um valor booleano, o que nos ajudará a configurar alguma lógica Vamos declarar uma nova variável, chamá-la play pose E, por configuração padrão, isso é verdade. Além disso, precisamos de uma variável chamada intervalo, que armazenará a função de intervalo definido que usamos há um minuto. Portanto, precisamos executar essa apresentação de slides automaticamente se o jogo pós-sinuca for verdadeiro, caso contrário, precisamos interrompê-lo Portanto, temos que usar declarações if nas quais vou verificar se a placa post booleana é verdadeira ou não Se for verdade, temos que inserir a função set interval dentro da instrução if. E também, como dissemos, temos que armazenar essa função na variável de intervalo. E depois disso, temos que fazer com que o play pause bool seja falso. No próximo minuto, outra declaração. Se a função de pausa na reprodução fosse chamada de A segunda vez, isso significa que o valor do booleano de pausa na reprodução se tornaria falso Portanto, toda a instrução else será executada na qual precisamos limpar o intervalo. E tivemos que configurar o play pause boolean de volta para verdadeiro. Tudo bem, a próxima coisa que precisamos fazer é anexar um evento de clique ao botão de pausa do jogo Então, vamos seguir em frente e selecionar esse elemento. Vou usar o método seletor de consulta. Em seguida, usamos className play pose. E anexado a cada ouvinte do evento. Vamos passar aqui, clicar em evento e depois na função de seta. Dentro desta função, temos que chamar a função plate post. Agora, como você pode ver, a apresentação de slides é executada automaticamente. Mas se eu clicar no botão , ele parará. Se eu clicar novamente, ele continuará funcionando. Tudo bem? Agora precisamos mudar o ícone desse botão. Quando clicamos nele. Por padrão, criamos um botão de reprodução e precisamos transformá-lo em um botão de pausa ao clicar no ícone Então, precisamos manipular com duas fontes diferentes, nomes de classes incríveis, FAA toca um F, um pulso Então, vou criar uma nova função. Vamos chamar isso de mudança de pose de jogo. Em seguida, vamos selecionar o ícone. É novamente o método seletor de consulta. Passe o nome da turma para brincar. E depois a Irlanda. Depois disso, vou ter acesso ao nome da segunda classe, que é FA dash play E para isso novamente, vou usar uma propriedade de lista de classes. Então, vamos criar uma nova variável. Eu vou chamá-lo de uma forma mais curta. Veja ls. Em seguida, temos que escrever sua lista de classes de pontos de ícones com o índice número um. Tudo bem, então se o nome da classe for igual a f a play, devemos removê-lo e adicionar uma postagem e Então, vou usar uma declaração if. Temos que verificar se a classe é igual a f em uma jogada. Se essa condição for verdadeira, teremos que remover esse nome de classe. Portanto, precisamos de icon dot plus list, e temos que usar o método remove com o nome de classe FAA play E, ao mesmo tempo, temos que adicionar ao elemento uma classe diferente. Portanto, precisamos de postagens de ícone, lista de classes, ponto, adição e traço do FA Portanto, se essa condição for falsa, se philos não for igual a f, um Outra declaração na qual temos que remover dos elementos que agrupam posts da FAA e adicionar a ela F uma Então, vamos pegar essas duas linhas daqui e mudar o nome da classe. Tudo bem, a última coisa a fazer é chamar essa função, e temos que fazer isso na função play pose Como você pode ver por padrão, temos um botão de pausa porque slides é Mas se eu clicar no ícone, ele voltará para o botão play e a slides também será Tudo bem, isso é tudo sobre essa parte. Em seguida, precisamos cuidar dos controles. Quando clicamos em qualquer uma das setas , a apresentação de slides deve parar e devemos poder alterar os Então, primeiro de tudo, precisamos selecionar as setas. Vamos começar com uma seta para a esquerda. Vou usar novamente o método querySelector. Vamos pausar aqui agrupando a seta esquerda e, em seguida, anexando a ela o ouvinte de eventos . Com um evento de clique. Ao clicar, temos que chamar a função de pausa de reprodução se o booleano da pose de reprodução Porque quando é falso, significa que a apresentação de slides está sendo executada automaticamente Uma vez que chamamos uma função de pausa no jogo , ela deve parar Portanto, precisamos de uma declaração if que, como condição, devemos verificar. Se não, jogue pose booleana. Em seguida, precisamos chamar a função play pause. Além disso, no caso de clicar na seta para a esquerda, precisamos diminuir o valor atual em um. Portanto, precisamos de corrente com operador de decréscimo menos, menos. Temos que chamar novamente a função Change Slides. Então, se eu clicar na seta, obteremos apenas uma página em branco. Isso acontece porque o valor atual se torna zero. E com zero, não temos nenhum número de slide. Então, precisamos evitar esse tipo de coisa. Para isso, vamos alterar a função dos slides e adicionar aqui. Caso contrário, é uma declaração. Temos que verificar se a corrente é igual a zero. caso, se isso for verdade, corrente deve ser igual ao comprimento do ponto do slide. Agora, se eu testar novamente, funcionará bem. Tudo bem, também precisamos do mesmo para a seta direita. Então, vamos continuar e duplicar esse código. Eu vou mudar o nome da turma. Não ouvimos a seta para a direita. No caso da seta para a direita, precisamos aumentar o valor atual em um. Então, em vez de sinais negativos, precisamos aqui mais, mais Tudo bem, então tudo funciona bem. Passo a passo. Vamos até o final desse projeto. Mas ainda temos que fazer algumas coisas para melhorar nossa apresentação de slides. Portanto, por padrão, quando essa apresentação de slides é executada automaticamente, os controles devem estar ocultos E precisamos exibi-las quando passamos o mouse sobre as setas E também precisamos exibi-los assim que pararmos a apresentação de slides Então, vamos em frente e vamos para o arquivo style.css. Eu vou criar uma nova classe. Vamos chamar isso de visibilidade de setas. Temos que atribuir a ela opacidade zero. Vamos adicionar e remover essa classe dinamicamente do JavaScript. Além disso, temos que fazer com que os controles apareçam ao passar o mouse. Portanto, precisamos controlar e definir a opacidade como uma. Finalmente, vamos tornar um efeito de foco mais agradável usando a transição Temos que inserir aqui a opacidade, depois a duração de 0,5 s, e também usar uma das funções de tempo de transição chamada linear Tudo bem, isso é tudo sobre CSS. Vamos voltar ao arquivo JavaScript. Vou criar uma nova função. Vamos chamar isso de visibilidade de setas. Antes de tudo, precisamos selecionar as duas setas. Vamos fazer isso usando novamente o método de seleção de consultas all. Ambas as setas têm o controle comum do nome da classe. Em seguida, vou examiná-los e , com base em alguma condição, adicionar e remover a visibilidade das setas de cluster recém-criadas Em primeiro lugar, para examinar as setas, precisamos transformar a lista de nós em uma matriz Você já sabe como fazer isso. Temos que usar o ponto da matriz de. Em seguida, temos que passar setas em vez de percorrer a matriz que devemos usar para cada método Vamos passar sua função de seta com a seta atual. Portanto, se a apresentação de slides for executada automaticamente, devemos ocultar as setas Portanto, se a declaração for inserida aqui como uma condição, reproduza pause Boolean Se for verdade, então precisamos adicionar à lista de classes da seta a visibilidade das setas da classe Portanto, precisamos de uma lista de classes de pontos em linha. Então temos que usar um método chamado ed. E temos que passar aqui a visibilidade das setas do nome da classe Caso contrário, se a apresentação de slides não for executada automaticamente, teremos que remover essa classe Então, precisamos da declaração L. Então vamos pegar essa linha de código. Em vez dos métodos ágeis usados, remova. E, finalmente, vamos chamar essa função na função de pausa de reprodução Tudo bem, por padrão, as setas estão ocultas. Se eu passar o mouse sobre eles, eles devem aparecer. Se eu clicar em qualquer um deles, essa apresentação de slides deixará de ser executada automaticamente e poderemos alterar os slides manualmente Além disso, se eu clicar no botão Pausar , as setas serão exibidas Na verdade, estamos quase terminando. A única coisa que precisa fazer é adicionar algum efeito de desbotamento Fiz dois slides para adicionar efeitos de desvanecimento quando esses slides estão mudando Para isso, em CSS, precisamos adicionar uma transição a um slide atribuída à opacidade e à duração de 1 s. Além disso, para tornar o efeito de esmaecimento mais escuro, precisamos alterar a cor de fundo Vamos torná-lo preto. Tudo bem, é isso. Parabéns, terminamos de construir este projeto. Como você pode ver, tudo funciona perfeitamente. Na verdade, vou adicionar aqui mais algumas imagens. Vamos duplicar o slide três vezes e alterar os nomes das turmas Além disso, precisamos alterar os nomes do Ok, para que você possa colar quantas imagens quiser Você só precisa numerar as aulas da maneira certa. 26. Projeto 23 - Botão de rádio CSS personalizado: Neste vídeo, criaremos um botão de rádio CSS personalizado. Basicamente, em sites diferentes, você pode ver botões de rádio padrão, que eu acho que não parecem muito bons. Então, neste vídeo, você poderá aprender como criar botões de rádio modernos e legais usando apenas HTML e CSS. Tudo bem, como você vê, temos aqui dois botões de rádio, opção um e opção dois Temos círculos verdes. E se clicarmos neles, eles serão bem verificados com algum efeito de desbotamento Ok, então vamos ver o que vamos construir. Aqui no código VS eu tenho dois arquivos diferentes, index.html e style.css. Dentro do documento HTML, tradicionalmente, eu preparei a estrutura básica do documento HTML. Temos aqui dois links diferentes, um para fontes do Google e outro para o arquivo style.css. Tudo bem, vamos em frente e, como sempre, começamos a criar a marcação HTML Vou abrir um elemento div, que deve ser um invólucro para ambas as opções Portanto, ele é atribuído ao seu invólucro de nome de classe. Em seguida, abra outro desenvolvimento que será uma opção em si. Então atribuído à sua opção de cluster. Dentro dos elementos div, precisamos de dois elementos. O primeiro será inserido como o tipo que precisamos aqui, rádio. Além dos atributos de tipo, precisamos de outros dois atributos. O primeiro será um documento de identidade. Usaremos o ID para vincular entradas e elementos de rótulo e para criar um evento de clique Então, vamos atribuir a ele o valor, marque um. Também precisamos aqui do atributo name. O atributo name não nos permitirá verificar vários botões de rádio simultaneamente. Vamos atribuir a ele um valor de rádio. Em seguida, precisamos de um rótulo. Como dissemos, vamos vincular elementos de entrada e rótulo. E para esse ID e quatro atributos devem ter exatamente os mesmos valores. Nesse caso, precisamos aqui verificar um. Tudo bem, vamos ter duas opções. Então, vamos duplicar o desenvolvimento. E a única coisa que precisamos fazer é alterar os valores ID e dos quatro atributos. Em vez de marcar um, precisamos verificar dois. Ok, isso é tudo sobre HTML. Vamos entrar no arquivo style.css e começar a escrever alguns CSS. Em primeiro lugar, vamos criar alguns estilos de redefinição. Selecione cada elemento usando um asterisco. Em seguida, defina a margem e o preenchimento como zero. E também precisamos aqui do tamanho da caixa, da caixa de borda. Em seguida, vou selecionar o invólucro. Vamos definir essa largura e altura. Vou definir a largura como cem por cento. Quanto à altura, quero me referir a ocupar 100% da janela de visualização E para isso, temos que usar uma unidade de medida chamada H. Ok, vou centralizar o conteúdo perfeitamente na página para isso. Vamos usar o flexbox. Precisamos exibir o flex que, para centralizar o elemento horizontalmente, precisamos usar justify content center, S4, centralização Precisamos alinhar o centro de itens. E, finalmente, como você pode ver, as opções são colocadas lado a lado horizontalmente, mas temos que E para isso, vamos mudar a direção da flexão e torná-la uma coluna Tudo bem, isso é tudo sobre o invólucro. Em seguida, vou estilizar uma opção. Então, vamos selecioná-lo. Primeiro. Vamos definir sua largura e altura. Vou definir com 400 pixels. Quanto à altura, vamos fazer 100 pixels e também mudar a cor de fundo. Você vê sua cor cinza claro, certo? Ccc. Em seguida, vamos criar algum espaço ao redor de cada opção usando margem. Vamos defini-lo como 20 pixels e também criar algum espaço dentro da caixa usando preenchimento de 20 pixels Finalmente, quero colocar elementos verticalmente no centro para isso, vamos ver novamente, Flexbox, à direita, exibir o flex e depois alinhar Tudo bem, então isso é tudo sobre a opção. Depois disso, vamos seguir em frente e estilizar o rótulo. Selecionou o rótulo de opção correto. Primeiro, vamos mudar a família da fonte. Vou usar sua fonte chamada Josephine slab Em seguida, aumente o tamanho da fonte, faça 60 pixels. E por último, mude o tipo de grosseiro, torne-o mais ponteiro. Tudo bem, agora é hora de criar um botão de rádio para o cliente Para isso, vou usar pseudoelementos antes e depois O botão de rádio consistirá em duas partes. Teremos um círculo externo, que será criado usando pseudoelementos posteriores Quanto ao círculo interno, ele deve estar antes do pseudo elemento Então, vamos seguir em frente e selecionar depois dos pseudoelementos, certo? Opção, rótulo. Depois. Primeiro, vamos deixar seu conteúdo vazio. Então, para alinhar os elementos, vamos definir sua posição como absoluta Na verdade, vou posicionar o círculo acordo com os elementos div de uma opção E para fazer isso, temos que atribuir a cada posição relativa Depois disso. Para tornar os elementos visíveis, vamos definir sua largura e altura. Vou fazer com que os dois sejam 50 pixels. E também crie uma borda. O valor atribuído é de cinco pixels, sólido. E a cor zero, a, a, c83. Agora, o elemento está visível. Tem a forma de um quadrado e, na verdade, queremos transformá-lo em um círculo. Para isso, vamos definir um raio de borda com um valor de 50%. Tudo bem, agora é hora de alinhar esses círculos. Vamos definir a posição correta e torná-la 15%. E, finalmente, crie um pequeno efeito de sombra, sombra de caixa direita com os valores de 003 pixels Em seguida, use a cor RGBA 000 e a opacidade 0,8. Ok, então isso é tudo depois dos pseudoelementos. Agora temos que criar um círculo interno usando pseudoelementos anteriores Na verdade, precisaremos propriedades semelhantes para os dois círculos. Então, vamos duplicar todo esse código e depois fazer algumas alterações Em primeiro lugar, vamos mudar depois para antes e depois nos livrar da propriedade fronteiriça. E em vez disso, insira a cor de fundo e atribua a ela a cor zero, um c83 Depois disso, vamos mudar o tamanho do círculo. Para isso, vou diminuir a largura e a altura. Vamos fazer com que os dois tenham 40 pixels. E agora temos que cuidar da posição do elemento. Temos que passá-lo perfeitamente no centro, dentro do círculo externo. Então, vamos definir a posição de topo e torná-la em 50 por cento. Em seguida, use transform. Traduzir por quê? Eu o estou usando para mover um elemento de sua posição atual um pouco para cima. Então, vamos inserir aqui -50 por cento. E, finalmente, temos que mover os elementos um pouco para o lado esquerdo. Para isso, vamos alterar o valor da posição correta em vez de 15. Vamos tentar 17. Pelo que vejo, não é o suficiente. Vamos mudar isso e fazer 17,5. Ok, agora está tudo bem. E, na verdade, com o estilo, terminamos. Agora temos que fazer a caixa de seleção funcionar. Então, como dissemos no início desta palestra, precisamos vincular a entrada e o rótulo para criar um evento de clique Então, em geral, para os usuários, esses círculos funcionarão como botões de rádio. Quero dizer, visualmente, eles representarão o botão de rádio. Mas, na verdade, nos bastidores, essas pequenas informações, faremos o trabalho principal Tudo bem, então todos nós já vinculamos elementos de rótulo e entrada usando id e quatro atributos E, na verdade, essa conexão nos permite verificar o botão de rádio quando clicamos nesses círculos e, na verdade, em todo o rótulo. Então, eventualmente, isso nos permitirá criar o evento de clique. Por padrão, vamos nos esconder em círculos. E então os exibiremos assim que clicarmos no rótulo. Em outras palavras, uma vez que verificamos o botão de rádio original. Então, para conseguir isso, vou usar uma dessas pseudoclasses chamada marcada, que nos permite definir diferentes estilos CSS quando a caixa de seleção está que nos permite definir diferentes estilos CSS quando a no Então, vamos selecionar elementos de entrada, certo? Entrada de opção. Em seguida, use a pseudoclasse chamada verificada. Agora temos que ter acesso ao círculo interno, que está antes do pseudo elemento Para isso, vou usar um desses combinadores CSS, que é chamado de seletor geral de irmãos E é expresso pelo sinal de tilda. Agora, temos que selecionar elementos que precisamos manipular. Nesse caso, antes do pseudo elemento, à direita, rotule com antes Agora, antes de definirmos um estilo para esses elementos, vamos ocultar os dois círculos, atribuídos antes à opacidade dos pseudo-elementos Agora, como você pode ver, os dois círculos estão ocultos por padrão e, ao clicar, temos que exibi-los de volta. Então, vamos inserir aqui a opacidade um. Portanto, se clicarmos em qualquer um dos botões, eles devem ser verificados. Tudo bem, então estamos quase terminando. Só precisamos personalizar algumas coisas. Vamos tornar a verificação do efeito mais inteligente usando a transição atribuída à opacidade E a duração de 0,4 s. Além disso, vou esconder os elementos de entrada padrão. Então, vamos selecionar a opção de entrada e inserir aqui a exibição de nenhuma. E, finalmente, a opção Remover plano de fundo. Tudo bem, como você pode ver, tudo funciona perfeitamente. E agora você sabe como criar botões de rádio realmente bonitos e modernos, que são muito melhores que os padrões. 27. Projeto 24 - Cartão de visita: Olá e bem-vindo ao nosso próximo tutorial. Neste vídeo, criaremos um lindo cartão de visita 3D Este pequeno projeto será criado com base em HTML e CSS. Antes de começarmos a trabalhar nesse projeto, vamos descrever rapidamente o que vamos criar. Então, aqui está nosso cartão de visita. A parte frontal consiste em duas partes. No lado esquerdo, temos um logotipo com o texto web design. Quanto ao lado direito, aqui temos algumas informações sobre a pessoa, coisas como nome, número de telefone, e-mail, endereço. Se passarmos o mouse sobre o cartão , ele girará no espaço 3D E será exibida a parte traseira na qual temos o logotipo da empresa Tudo bem, é isso, o que vamos construir. Novamente, todas essas coisas serão criadas usando apenas HTML e CSS puros. Aqui no código VS, temos dois arquivos abertos, index.html e style.css. E também tenho uma pasta chamada imagens na qual armazenamos o logotipo da empresa. Você pode baixar esses arquivos de origem iniciais no link na descrição Tudo bem, então, dentro do arquivo HTML, preparei a estrutura básica do documento HTML Dentro do elemento principal, temos alguns links. Links para fontes do Google, Font, ícones incríveis e também temos um link para o arquivo style.css. Vamos começar a criar a marcação HTML. Vamos abrir o desenvolvimento, que deve ser um invólucro do cartão Então, vamos atribuir a ela um invólucro de cartão de nome de classe. Em seguida, vou abrir outro desenvolvimento, que será o próprio cartão. Então, vamos atribuir a ele um cartão de classe. Então, como dissemos, o cartão consistirá em duas partes, frente e verso. Então, vamos inserir seu desenvolvimento com o nome da classe chamado front. A parte frontal em si terá duas partes, lados esquerdo e direito. Então, vou inserir aqui e outros desenvolvimentos com a classe restante. Portanto, o lado esquerdo consistirá em dois elementos. A primeira será uma imagem. Então, vamos abrir elementos IMG. Em seguida, no atributo de origem, vamos indicar parte da imagem. Temos uma pasta chamada imagens e precisamos selecionar o ponto do logotipo PNG. Em seguida, precisamos de h para elementos de cabeçalho. Na verdade, incluirá duas palavras diferentes, web design. Vou embrulhar o primeiro com elemento span. Vamos abri-lo. Isso insere uma teia. E então assine à direita. Ok, isso é tudo sobre o lado esquerdo. Vamos abrir o desenvolvimento, que será o lado direito atribuído à classe, certo? Ele consistirá em várias partes. O primeiro será uma pessoa. Então, vamos abrir o desenvolvimento. Na verdade, a parte da pessoa consistirá em duas partes diferentes. Teremos o ícone Font Awesome no lado esquerdo. Quanto ao lado direito, incluirá o nome da pessoa e também o cargo e a empresa. Vamos atribuir à classe de desenvolvimento nomes, pessoas e depois escrever conteúdo Em seguida, insira o ícone Font Awesome, abra o elemento I com nomes de classes, FAS, FA, traço, usuário, empate Então, precisamos abrir desenvolvimentos. Vamos passar seus elementos ocultos H4 com texto. João Smith. Em seguida, abra o parágrafo e insira-o no web design de TI. Tudo bem, então vamos ter quatro partes semelhantes no lado direito. Vamos continuar e duplicar todo o desenvolvimento três vezes e depois fazer algumas alterações Para o segundo, precisamos aqui className, telefone Em seguida, altere também o nome da classe para o elemento AI. Precisamos aqui, novamente, de telefone. No próximo minuto, aqui os dois elementos serão parágrafos. Então, vamos deletar o título. Então. Duplique esta linha de código e insira aqui alguns números de telefone fictícios Ok? A próxima parte será um e-mail. Vamos mudar o nome da turma, certo? E-mail. Também precisamos aqui de uma fonte diferente, um ícone incrível. Vamos mudar a classe. Nós precisamos aqui. Envelope, aberto. Então, novamente, elimina o elemento de título a partir daqui e altera o texto do parágrafo. Vamos inserir aqui um e-mail fictício. John smith@gmail.com. Tudo bem, a última parte será para um endereço. Então, vamos mudar o nome da turma aqui em repouso. Em seguida, altere também o nome da classe para elementos de IA. Precisamos aqui mapear Dash, marker, ALT. Então, novamente, exclua os elementos de um título. Duplique o parágrafo e insira os seguintes textos. Main Street, 1234, segundo parágrafo. Vamos inserir aqui Nova York e y. Tudo bem, então isso é sobre a parte frontal Agora vou criar a parte traseira, que será um desenvolvimento muito simples, vamos abrir E atribuído ao verso do cartão de classe. Precisamos aqui de apenas um elemento, que será uma imagem para que seja inserida. E como atributo de origem, vamos indicar parte da imagem. Tudo bem, então isso é tudo sobre marcação HTML. Agora, é hora de começar a estilizar. Vamos para o arquivo style.css. Em primeiro lugar, vou criar alguns estilos de redefinição. Vamos eliminar a margem e o preenchimento padrão de cada elemento Para selecionar todos os elementos, precisamos usar um asterisco Então, vamos passar sua margem zero, n, preenchendo zero. Em seguida, vamos selecionar o elemento do corpo. Eu vou mudar a família de fontes. Vamos usar aqui encontrado chamado Montserrat san-serif. Em seguida, altere a cor de fundo. Faça-o cinza claro usando as cores C. C, C. Tudo bem, agora vou trabalhar na embalagem de cartões, mas antes disso, para tornar nosso processo de trabalho mais conveniente, seria melhor diminuirmos o tamanho das imagens Eu vou fazer isso a partir do documento HTML. Então, vamos em frente e atribuir a ambas as imagens atributos com o valor cem e 50 Ok, agora as imagens estão menores e podemos seguir em frente. Vamos selecionar chamar o invólucro. Vou colocá-lo perfeitamente no centro para isso Vamos definir sua posição como absoluta. Em seguida, precisamos definir as propriedades superior e esquerda como 50 por cento. E, finalmente, para centralizar o elemento perfeitamente, precisamos usar transform translate. Temos que inserir seus valores -50 por cento e depois novamente -50 por cento. Tudo bem, então é isso por enquanto em relação ao invólucro do cartão. Em seguida, vou trabalhar no cartão em si. Então, vamos prosseguir e selecioná-lo. Primeiro, vamos definir sua largura e altura. Vou definir a largura como 550 pixels. Altura. Vamos defini-lo como 300 pixels. E também mude a cor de fundo e torne-a branca. Agora, vou começar a estilizar a parte frontal e acho que seria melhor se escondêssemos a parte traseira por Vamos fazer isso a partir do documento HTML. Vou atribuir para comer o atributo chamado aqui. Em seguida, volte para o arquivo style.css, selecione Cartão, Frente. Defina sua largura e altura. Vamos fazer os dois 100%. Tudo bem, a seguir vou colocar os lados esquerdo e direito, lado a lado Para isso, vamos usar o display flex. E agora vou dividir a parte frontal usando a função de gradiente linear Como você se lembra da versão final deste projeto, a parte frontal é dividida em duas partes diferentes e o lado direito tem uma cor diferente. Então, para conseguir isso, vamos usar a propriedade de fundo com um gradiente linear Vamos inserir suas cores. O primeiro será RGB para 55, para 55 e novamente para 55 Na verdade, é uma cor branca. De acordo com o segundo, vou usar o RGB 308-30-8308. Agora eu quero definir a direção da transição de cores. Então, vamos inserir aqui como primeiro argumento, cem graus. Em seguida, para dividir bem essas duas cores, vamos adicionar dois colarinhos brancos, o valor 40% de Paul, a segunda Vamos escrever aqui zero. Então, como você pode ver agora , a parte frontal é bem dividida em duas partes Vamos começar a trabalhar no lado esquerdo. Vamos selecioná-lo usando className left. Em primeiro lugar, vamos definir a largura e torná-la 40 por cento. Em seguida, vou colocar o conteúdo perfeitamente no centro do lado esquerdo. Para isso, vamos usar o flexbox. Em seguida, precisamos mudar a direção da flexão. Vamos fazer uma coluna. E então, para colocar os itens no centro, vamos usar o centro de conteúdo da justificação E também precisamos alinhar os itens. Centro. Certo? Em seguida, vou definir o tamanho da imagem. Mas agora, a partir do CSS, vamos selecioná-lo. Ponto direito à esquerda, IMG e sente-se conosco 80 por cento. Em seguida, vá para o arquivo index.html e elimine os atributos de largura do elemento de imagem. Agora, a última coisa que eu quero fazer em relação ao lado esquerdo é cuidar dos elementos do título. Então, vamos selecionar à direita , pontos, esquerda, H4. Em seguida, crie algum espaço ao redor do título usando a margem. Vamos defini-lo como dez pixels. Em seguida, aumente ligeiramente o tamanho da fonte. Vou fazer com que seja de 18 pixels. E crie algum espaço entre as letras usando o espaçamento entre letras com o valor máximo Ok, finalmente, vou personalizar a primeira palavra do título. Vamos selecionar o elemento de extensão, ponto direito, extensão esquerda. Vamos colocar o texto em maiúsculas usando texto, transformar. Letras maiúsculas e mude de cor. Vamos usar sua cor, 0d56, 92 . Tudo bem, é isso. Sobre o lado esquerdo. Terminamos de trabalhar nisso e agora é hora de personalizar o lado direito. Vamos selecioná-lo, certo, certo. Em seguida, defina sua largura e faça com que seja 60 por cento. E mude a cor do texto. Faça com que seja branco. Ok, em seguida, vou selecionar o conteúdo certo. Na verdade, como você se lembra, ele consiste em duas partes diferentes. A fonte, o ícone Awesome e o texto. Eu quero colocá-los lado a lado. E para isso, vamos usar o Flexbox, certo? Display flex. E também quero alinhá-los verticalmente no centro. Para isso, precisamos de itens de linha com o Centro de Valores. E, finalmente, vamos criar algum espaço na parte superior e inferior usando a margem. Vamos atribuir a ele valores de 20 pixels e depois zero. Tudo bem, vamos começar a estilizar a primeira parte, que é uma pessoa Vamos selecioná-lo com o nome da turma, pessoa. Mudança, sua cor de fundo. Nesse caso, vou usar a cor 1187 AAC. Em seguida, crie algum espaço dentro da caixa usando o preenchimento. Vou definir o preenchimento na parte superior como cinco pixels, depois zero no lado direito, cinco pixels na parte inferior e 30 pixels no lado esquerdo Além disso, vamos adicionar um pouco de espaço na parte superior e inferior da caixa. Use margem com os valores 30 pixels e zero. E, finalmente, vou criar algum efeito de sombra. Vamos usar sombra de caixa com os valores 010 pixels, 20 pixels E como cor RGBA correta, insira sua cor preta 000 e a opacidade Tudo bem, agora parece muito melhor. Em seguida, quero cuidar do ícone Font Awesome. Então, vamos selecionar os pontos certos, o conteúdo certo do que I. Primeiro, vamos definir a largura e a altura Vou fazer com que os dois tenham 35 pixels. Além disso, quero que o ícone tenha a borda. Então, vamos atribuir dois valores, dois pixels, sólido e branco colorido E eu quero que seja arredondado. Portanto, precisamos aqui de um raio de borda com valor de 50 por cento. Como C. Por enquanto, os ícones não parecem muito bons. Eu quero que eles sejam colocados perfeitamente no centro dentro do círculo. Para isso, vamos usar novamente o flexbox. Precisamos aqui do display flex. Em seguida, justifique o centro do conteúdo e também alinhe o centro dos itens Agora, como você vê lá, boa aparência, vamos mudar a cor de fundo. Use sua cor 11878. E, finalmente, crie algum espaço no lado direito usando a margem certa? 20 pixels. Tudo bem, então, passo a passo, estamos avançando. A próxima coisa que eu quero fazer é transformar o nome da pessoa em maiúsculas Então, vamos selecionar os elementos do título e atribuir a eles a transformação de texto com o valor em maiúsculas Ok, isso é tudo sobre a Agora, como você pode ver, temos que cuidar do alinhamento do resto das peças Vamos começar pelo telefone selecionado e atribuído a ele. Preenchimento à esquerda com o valor 30 pixels. Vamos duplicar esse código duas vezes. Mude os nomes das classes. Precisamos do seu endereço de e-mail. E também altere os valores da propriedade padding-left. Para o segundo, precisamos de 20 pixels e, para o endereço, precisamos de dez picos Tudo bem, agora temos que começar a trabalhar na criação de um efeito 3D Antes de tudo, precisamos preparar o ambiente 3D para o cartão e também para incluir peças. Para isso, temos que atribuir duas propriedades de invólucro de cartão chamadas perspectiva Temos que defini-lo como mil pixels do que o necessário para a propriedade do cartão chamada estilo de transformação, que deve ter valor. Preserve o 3D. Usamos essa propriedade porque também precisamos preparar um ambiente 3D para elementos secundários do carro. Agora, como na parte frontal, também temos que começar pela parte traseira Em primeiro lugar, vamos tornar o verso visível para isso, vamos ao arquivo index.html e nos livrar do atributo oculto Em seguida, volte para o arquivo style.css. Agora, vou girar o cartão em cento e 80 graus. Para isso, temos que usar o Transform. Em seguida, gire y n entre parênteses. Temos que inserir 180 graus. Na verdade, como você pode ver, a parte frontal ainda está visível e não precisamos dela. E para ocultá-lo, temos que usar uma propriedade chamada visibilidade blackface Temos que atribuir a ele um valor chamado oculto. Como você pode ver, o logotipo é girado e temos que corrigir isso. Para isso, vamos selecionar o verso do cartão. E atribuído a ela, transforme a rotação y com o valor de cento e 80 graus. Tudo bem, depois disso, vamos cuidar da posição do logotipo. Eu quero colocar. Está perfeitamente no centro disso. Primeiro, vamos fazer com que sua posição seja absoluta. Em seguida, para definir sua posição de acordo com seu elemento pai, que neste caso é um cartão. Temos que atribuir à posição relativa. Em seguida, defina as propriedades superior e esquerda da traseira do carro. E defina os dois como zero. Tudo bem, então, para centralizar perfeitamente o logotipo, vamos usar novamente o Flexbox. Vamos escrever o display flex. Em seguida, precisamos justificar o centro de conteúdo e também alinhar o centro dos itens Pelo que vejo, o logotipo não está centralizado e isso acontece porque não definimos a largura e a altura da parte traseira Não vou defini-lo separadamente para a parte traseira. Vamos subir e adicionar aqui logo após a frente do cartão. Outro seletor ligou de volta. Em seguida, abaixo, selecione Card Front. Porque essas duas células pertencem apenas à parte frontal. Então, vamos pegá-los e colar aqui. Agora está tudo bem. Tudo bem, vamos definir o tamanho de uma imagem do CSS primeiro, vamos ao arquivo index.html e nos livrar do atributo width Em seguida, selecione bec, IMG e defina sua largura como 40% Ok, agora é hora de fazer o algodão funcionar primeiro, vamos girá-lo para trás Elimina essa linha de código a partir daqui. Quero que o carro gire quando passarmos o mouse sobre ele. Então, vamos selecionar o invólucro do cartão com o mouse. Em seguida, selecione o cartão e, atribuído a ele, transforme a rotação y com o valor 180 graus. Para um efeito suave, vamos usar transição com os valores transformando 1 s. Agora, se passarmos o mouse, obteremos efeito de rotação 3D muito bom Ok? Na verdade, estamos quase terminando. A única coisa que eu quero fazer é criar algum efeito de sombra. E também quero fazer curvas, ligeiramente arredondadas. Vamos atribuir à caixa de cartão uma sombra com os valores de 015 pixels, 60 pixels e a cor RGBA 000 e a Então, para fazer um arredondado, vamos atribuir a ele um raio de borda com valor de 15 pixels Como você pode ver por enquanto, parece que a parte frontal não tem o raio da borda E para corrigir isso, vamos herdá-lo para os lados frontal e traseiro, aqui, raio da borda Ok, agora tudo parece perfeito e, na verdade, terminamos de trabalhar nesse projeto 28. Projeto 25 - Cartão 3D: Neste vídeo, vamos criar um cartão com belos efeitos 3D usando transformações e transições CSS Este pequeno projeto será construído com base em HTML e CSS puros. Então, depois de assistir a este vídeo, você poderá criar efeitos 3D legais usando apenas CSS puro. Tudo bem, então aqui temos nosso cartão. Consiste em duas partes principais. Temos moldura e conteúdo. Eles são colocados no espaço 3D. Quero dizer, eles são girados em direções opostas. E se passarmos o mouse sobre o cartão , essas partes serão giradas para trás e colocadas juntas Ok, então é isso, o que vamos construir no código VS. Eu tenho dois arquivos diferentes para HTML e CSS. Dentro dos elementos principais, eu tenho dois links, um para fontes do Google e o segundo para arquivo CSS de estilo. Tudo bem, vamos começar a criar marcação HTML, desenvolvimento aberto e atribuir a ela um invólucro de cartão de classe Em seguida, dentro dela se abrem outros desenvolvimentos que serão a própria carta. Então, precisamos de outro div para o quadro. Então, atribuído a ele um quadro de classe. Em seguida, temos que criar conteúdos. Então, abra novamente os desenvolvimentos com o conteúdo className. E, finalmente, temos que inserir os elementos de cabeçalho H1 do conteúdo interno, quais você tem o título do nome da classe Ele consistirá em duas palavras diferentes. Eles deveriam ter estilos diferentes. Então, vou encapsular o primeiro elemento de um pi span. Vamos abri-lo e instituir textos em 3D. E então precisamos de uma segunda palavra, efeito. Ok, isso é tudo sobre HTML. Vamos abrir o arquivo style.css e começar a escrever alguns estilos. Primeiro, vou me livrar da margem e do preenchimento padrão de cada elemento Então, selecione-os usando um asterisco e defina a margem como zero e o preenchimento como zero Em seguida, precisamos selecionar o invólucro do cartão. Vou colocar “called” perfeitamente no centro da página. Para isso, vamos primeiro definir a largura e a altura do invólucro Vou definir com 100 por cento de altura S4. Eu quero configurá-lo como cem por cento da janela de exibição. Portanto, temos que atribuir a ele 100 vh. E então use o flexbox para enviar perfeitamente para o elemento, precisamos das seguintes propriedades e valores. Display flex. Então, para centralizar os elementos horizontalmente, precisamos justificar E para a centralização vertical, precisamos alinhar os itens. Centro. Então, como você pode ver, o conteúdo é colocado no sentido: Ok, agora temos que cuidar do cartão em si. Antes de tudo, vou preparar o ambiente 3D. E para isso, temos que usar uma dessas propriedades CSS chamada perspectiva. Vamos selecionar o cartão e inserir sua perspectiva com o valor de 800 pixels. perspectiva nos permite definir a que distância o elemento é colocado do usuário. Tudo bem, a seguir, vou selecionar o quadro. Vamos definir a fronteira. A cada valor são atribuídos dez pixels sólidos e a cor 333 E também quero fazer com que seu canto seja ligeiramente arredondado usando o raio da borda com o valor de Tudo bem, então a borda está pronta e, por enquanto, vamos ver a moldura Em seguida, vou começar a trabalhar no conteúdo. Então, vamos selecioná-lo. Defina sua largura e altura. Vou definir a largura como 400 pixels. Quanto à altura. Vamos defini-lo como 200 pixels. Em seguida, altere a cor de fundo. Vou usar o valor RGBA aqui, 255-20-1205 Em seguida, vou colocar o título no centro do conteúdo para isso. Vamos ver novamente, Flexbox. Vou pegar essas propriedades daqui e colá-las para obter conteúdo. Ok, então, como você pode ver, o título é colocado no centro e agora vou personalizá-lo. Então, selecione elementos H1. Primeiro. Eu vou mudar a família de fontes. Vamos usar sua fonte chamada cancer Rael, San Serif. Em seguida, transforme texto em maiúsculas usando texto, transforme maiúsculas e mude de cor Use sua cor 333 Use Tudo bem, a seguir, vou selecionar o elemento span, que na verdade envolve a primeira palavra do título Então, no título direito, estenda, atribua à cor de fundo e use sua cor 333 E também mude a cor do texto, torne-o branco. Tudo bem, então nossos elementos são personalizados e é hora de começar a criar efeitos 3D Como você se lembra, por padrão, o quadro e o conteúdo são girados. Então, vamos girá-lo primeiro quadro, temos que girá-lo de acordo com Então, vamos escrever aqui uma transformação que usa Rotate Y e institui -40 graus Como você pode ver, o quadro é girado e o conteúdo também é girado porque são os elementos secundários do Na verdade, precisamos girar o conteúdo, mas na direção oposta. E também temos que girá-lo de acordo com y e também de acordo com o eixo X. Então, temos que escrever sua transformação e, em seguida, girar y com o valor de 60 graus. E depois disso, precisamos girar x com o valor de 20 graus. Agora, como você pode ver, o conteúdo é girado, mas não no espaço 3D porque, nesse caso, perspectiva não afeta o conteúdo O motivo é que a perspectiva é definida para cartão e o conteúdo não é filho direto do carro. Portanto, para aplicar o ambiente 3D ao conteúdo, devemos usar outra propriedade chamada estilo de transformação. Temos que atribuí-lo ao quadro, que é o pai do conteúdo E temos que configurá-lo como 3D preservado. Então, agora temos aqui os resultados necessários. A constante é girada no espaço 3D. Ok, agora é hora de criar um efeito de foco ao passar o mouse. Precisamos fornecer posições padrão ao quadro e ao conteúdo. Então, vamos selecionar um cartão com o mouse. Em seguida, selecione o quadro e passe aqui, Transformar, Girar Y com valor zero Em seguida, selecione o conteúdo, à direita, novamente, o conteúdo do cartão ao passar o mouse Precisamos passar por sua transformação. Novamente, gire y com zero e, em seguida, gire x com valor Então, agora, se passarmos o mouse, os elementos serão girados, mas sem nenhum efeito, porque precisamos uma transição para fazer as rotações Então, vamos atribuir à transição de quadros com valores todos e 0,4 s. Em seguida, pegue essa linha de código e cole-a no conteúdo também Agora, se passarmos o mouse novamente, obteremos um bom efeito 3D A última coisa que quero fazer é deixar os cantos do conteúdo ligeiramente arredondados e depois removê-los quando passarmos o mouse sobre o cartão Então, vamos atribuir dois conteúdos para o raio com valor de cinco pixels E, abaixo, insira o raio da borda com valor zero Tudo bem, então se passarmos o mouse sobre o cartão, tudo funcionará perfeitamente 29. Projeto 26 - Caixa de verificação CSS personalizada: Olá e bem-vindo ao nosso próximo vídeo do YouTube. Neste tutorial, criaremos uma caixa de seleção CSS personalizada Na maioria dos casos, você pode encontrar caixas de seleção padrão em sites diferentes. Mas depois de assistir a este vídeo, você poderá criar uma caixa de seleção muito bonita e moderna Aqui, como você pode ver, temos uma caixa e, se eu clicar nela, ela será marcada com alguns efeitos interessantes. O assunto deste tutorial é criar apenas essa caixa de seleção personalizada Então é por isso que eu não tenho aqui nenhum outro conteúdo. Além disso, decidi criar uma caixa de seleção com o tamanho grande para melhor visibilidade Mas é claro que você pode torná-lo menor para seus próprios projetos. Tudo bem, vamos começar a construir esse pequeno projeto. No código VS. Eu tenho dois arquivos diferentes, index.html e style.css. No arquivo index.html, preparei uma estrutura básica do documento HTML. Eu vinculei aqui arquivos HTML e CSS. Vamos começar a criar a marcação HTML. Vamos abrir o desenvolvimento. Deve ser um invólucro para a caixa de seleção. Então, vamos atribuir a ela a classe checkbox wrapper. Dentro desse desenvolvimento, precisamos passar dois elementos, input e label. Então, vamos abrir os elementos de entrada. Vamos criar seu tipo de caixa de bate-papo. Em seguida, crie um rótulo. Em seguida, precisamos vincular o rótulo e os elementos de entrada para criar um evento de clique. Para isso, precisamos atribuir a um atributo de ID de entrada. E os valores de id e quatro atributos devem ser os mesmos. Vamos passar seu cheque. Em seguida, atribuído ao atributo id do elemento de entrada com uma verificação de valor. Agora, para demonstrar que os elementos de rótulo e entrada estão vinculados, vou passar a você um conteúdo, digamos que verifique. Portanto, se eu clicar nessa palavra a caixa de seleção será marcada. Então, vamos ver o que podemos conseguir ID e quatro atributos e fazer a cada semana, o que nos ajudará a criar uma cubeta limpa Vamos nos livrar dessa palavra daqui. A última coisa que eu quero fazer dentro do documento HTML é atribuir ao rótulo o nome da classe, uma marca de seleção Tudo bem, vamos entrar no arquivo style.css e começar a escrever alguns estilos Não temos aqui muitos elementos HTML, mas de qualquer forma, vou criar alguns estilos de redefinição. Vamos selecionar cada elemento usando asterisco. Em seguida, defina a margem e o preenchimento como zero. Em seguida, selecione o invólucro da caixa de seleção. Na verdade, vou colocar o chatbox perfeitamente no centro da página Para isso, vou usar uma das técnicas. Quero dizer, centralizar elementos com a ajuda de posições e transformações Então, temos que escrever aqui a posição, absoluta. Em seguida, precisamos definir as propriedades superior e esquerda como 50 por cento. E então, para centralizar o elemento perfeitamente, temos que usar transform translate. Devemos ter dois valores, -50 por cento e novamente -50% Tudo bem, como você pode ver, agora a caixa de seleção está perfeitamente centralizada na página Na verdade, não vou personalizar essa caixa de seleção. Eventualmente, ele deve ser escondido. Vamos criar uma caixa usando um elemento de etiqueta. Esse elemento de entrada apenas nos ajudará a criar um evento de clique. Então, vamos selecionar o rótulo com a marca de seleção do nome da turma Como você sabe em geral, o elemento do rótulo é um elemento embutido E se quisermos aplicar à largura e altura do elemento embutido primeiro, devemos transformá-lo em bloco embutido ou elemento em nível de bloco Então, vamos escrever seu bloco de exibição. Em seguida, defina a largura e a altura como dois pixels. E também mude a cor de fundo. Vamos torná-lo cinza claro usando D, D, D. Então, como você pode ver, temos aqui a caixa Vamos fazer seus cantos ligeiramente arredondados usando o raio da borda Com valor de dez picos. Tudo bem, pronto, a caixa foi criada e agora temos que cuidar do sinal de marca de verificação Primeiro, vamos criá-lo usando o pseudo-elemento After E depois disso, cuidaremos do evento de clique. Então, vamos selecionar a marca de seleção após os pseudoelementos Em primeiro lugar, vou mudar o plano de fundo dos elementos do rótulo que estou fazendo por um tempo Eventualmente, mudaremos a cor de fundo com um clique. Então, vamos mudar a cor de fundo do rótulo aqui, 08b b68 Em seguida, vamos começar a trabalhar nos pseudoelementos como conteúdo definido pela primeira vez e deixá-lo vazio Na verdade, o sinal de marca de seleção deve ser criado por bordas Primeiro, vamos definir uma posição como absoluta. E para posicionar os elementos de acordo com seu elemento pai, temos que atribuir a ele uma posição relativa Em seguida, vamos definir a largura e a altura. Defina a largura como 25 pixels. Quanto à altura, vamos atribuir a ela 45 pixels. Agora, para tornar os elementos visíveis e, na verdade , para criar um sinal de verificação, vamos usar bordas Vou definir fronteiras para dois locais diferentes, para direitos e para garrafas. Então, vamos escrever aqui borda, à direita, e atribuir valores reais, cinco pixels, sólido e a cor branca Isso duplica essa linha de código e muda direto para o final Agora, como você pode ver, o elemento é viável, mas, como convidados, temos que cuidar de sua posição Vamos colocá-lo no centro e também precisamos girá-lo para pareça um sinal de marca de verificação Então, vamos definir a primeira posição como 40%. Então precisamos de 50 por cento restantes. Em seguida, use novamente transformar, traduza com valores de -50 por cento E novamente -50 por cento. Ok? Agora, a única coisa que precisa fazer é girar os elementos de acordo com o eixo z. E então obteremos o resultado necessário. Então, vamos escrever girar Z e inserir aqui por dois graus. Agora você pode ver que temos aqui um sinal de marca de verificação e agora é hora de fazê-lo funcionar Em primeiro lugar, vamos mudar a cor de fundo ao clicar. Para isso, vamos voltar aqui. Cor de fundo anterior, cinza claro. Então, para criar um evento de clique, vou usar uma pseudoclasse chamada checada. Isso nos permite definir estilos e aplicá-los ao elemento quando a caixa de seleção está marcada Então, vamos selecionar o elemento de entrada com ID, verifique. Em seguida, adicione aqui a pseudoclasse chamada verificada. Em seguida, precisamos selecionar os elementos do rótulo. Como você sabe, ele é colocado logo após os elementos de entrada no arquivo index.html. E para selecionar o rótulo, vou usar um dos combinadores CSS chamado seletor geral de irmãos, que é expresso por até E agora precisamos do nome da classe dos elementos, certo? Marca de verificação Vamos passar sua cor de fundo com um valor 0868. Ok, então se eu clicar na caixa, cor de fundo será alterada. Vamos fazer com que isso afete o motor usando a transição. Vamos atribuir valores reais, plano de fundo, cor e duração, 0,4 s. Agora parece muito melhor e na verdade, é hora de trabalhar no sinal de verificação. Por padrão, vou ocultá-lo. Vamos fazer isso usando opacidade zero. E agora devemos exibi-lo. Quando marcarmos a caixa de seleção, faremos isso usando a mesma técnica que usamos há apenas um minuto Então, vamos pegar isso, selecioná-lo aqui. Em seguida, adicione os pseudoelementos pois devemos exibir o sinal de marca de seleção E agora insira sua opacidade. E também use a transição para criar efeitos no motor atribuído a tudo e 0,4 s. Então, agora, se eu clicar, tudo funcionará bem. E, na verdade, já temos aqui bons efeitos. A caixa de seleção está funcionando. Antes de terminarmos este tutorial, quero acrescentar aos talões de cheques alguns outros fatos. Por padrão, vou fazer com que as marcas de verificação pareçam maiores. E então, ao clicar, forneceremos seu tamanho padrão. E isso acabará parecendo muito bom. Então, vamos adicionar à transformação a função de propriedade chamada escala, que nos permite gerenciar o tamanho de um elemento que não é seguro dez Isso significa que acabamos de criar elementos dez vezes maiores do que eram antes. E agora, com um clique, tínhamos que torná-lo novamente menor. Então, vou pegar toda essa linha de código. Precisamos de todas essas funções porque se usarmos apenas Transform Scale, essas duas funções , quero dizer, traduzir e girar, serão sobrescritas e quebrarão a posição do lado da marca de seleção Então, vamos mudar o valor da escala, torná-la uma. E agora você pode ver que temos aqui um efeito muito bom. Ok, estamos quase terminando. A única coisa que precisamos fazer é ocultar os elementos de entrada. E vou fazer isso usando atributo HTML chamado oculto. Então, vamos atribuí-lo aos elementos de entrada. Tudo bem, então agora terminamos. Tudo funciona perfeitamente e nosso pequeno projeto está concluído 30. Projeto 27 - Hamburger Menu: Neste vídeo, vamos criar o menu de hambúrguer com alguns efeitos interessantes Este projeto será construído com base em HTML, CSS e um pouco de JavaScript. Como você pode ver, temos aqui uma landing page com imagem de fundo em tela cheia E no canto superior direito está colocado o ícone do menu de hambúrguer Se eu clicar nele, o ícone será transformado em x. E agora parte será exibida do lado direito. Aqui temos alguns itens de navegação e, se eu passar o mouse sobre eles, obteremos bons efeitos de mouse Neste vídeo, você aprenderá como criar todas essas coisas. Vamos começar a construir nosso projeto. No código VS. Eu tenho alguns arquivos para HTML, CSS e JavaScript. E também temos aqui uma pasta chamada imagens na qual temos uma imagem como plano de fundo da página de empréstimo Você pode baixar os arquivos iniciais no link na descrição Ok, vamos prosseguir e abrir o arquivo index.html. Eu preparei a estrutura básica do documento HTML. Dentro dos elementos da cabeça, tenho dois links. Uma para fontes do Google, vou usar uma fonte chamada doses e outra para arquivo CSS. Além disso, inseri aqui tag de script para vincular o arquivo JavaScript. Tudo bem, vamos começar a criar marcação HTML, desenvolvimentos abertos, que será um contêiner Portanto, é atribuído a seu contêiner de classe. Então, dentro do contêiner, vou abrir elementos que envolverão todo o conteúdo da barra de navegação Vamos atribuir a ela a classe navbar. Então, dentro dele, primeiro vou criar um ícone de menu de hambúrguer Então, abra o desenvolvimento e atribua a ele um nome de classe, menu de hambúrguer Então, dentro desses elementos div, vou inserir três elementos div para três linhas de um ícone Vamos atribuir à sua classe o nome de uma linha de estilo comum. E também precisamos aqui de outro nome de cluster para estilo individual. Linha direita um. Em seguida, duplique essa linha duas vezes e altere os nomes das classes. Precisamos da linha dois, linha três. Tudo bem, isso é tudo sobre o ícone Menu por enquanto, não é viável porque temos apenas elementos div vazios sem nenhum estilo Em seguida, vou criar navegação. Ele será representado por elementos da UL. Vamos atribuir a ela uma classe, não menos importante. Em seguida, insira nele elementos LI. Deve ter um item de classe. E, finalmente, precisamos dos seus elementos de link. Vamos atribuir a ela o nome da classe nav link e também inserir seu primeiro item No geral, vou ter sete itens de navegação. Então, vamos duplicá-lo seis vezes e depois mudar rapidamente o conteúdo aqui sobre nós. Essa notícia. O próximo será Galeria do que eventos. Preços. E por último, insira seu conteúdo. Tudo bem, então isso é tudo sobre HTML. É hora de começar a estilizar. Vamos ao arquivo style.css. No começo, vou criar alguns estilos de redefinição. Vamos eliminar a margem e o preenchimento padrão de cada elemento Selecione-os usando asterisco. E então passe sua margem zero e também o preenchimento zero. Em seguida, vou mudar a família da fonte para o elemento do corpo. Então, vamos selecioná-lo. E então insira aqui as doses da família de fontes, san-serif. Em seguida, vamos cuidar do contêiner. Defina sua largura e altura como uma largura. Vamos escrever aqui 100 por cento. Quanto à altura. Vou defini-lo como 100 por cento da janela de visualização. Então, certo, 100 pH do que como pano de fundo. Eu vou definir uma imagem. Então, fundo direito do que precisamos aqui, gradiente linear. Vou usar três cores diferentes. O primeiro será RGBA 000 e opacidade 0,4. Em seguida, vamos escrever RGBA 14848, novamente 48 e a opacidade Em seguida, insira RGBA 167-60-7607 e opacidade 0.4. Em seguida, o URL interno indica parte das imagens da imagem e selecione a imagem chamada bg dot JPG como a posição do plano de fundo. Precisamos do Center e também passamos por aqui, sem repetir. E, finalmente, vou usar a propriedade de tamanho de fundo com a capa do valor. Tudo bem, então a página de destino está pronta. Temos aqui uma imagem de fundo em tela cheia. E agora vou abordar aqui o menu de hambúrguer Como você sabe, ele consistirá em três linhas e deve ser colocado no canto superior direito da página Primeiro, vamos selecionar o desenvolvimento rápido, que tem um menu de hambúrguer className Vamos definir sua largura e altura. Vou definir com 35 pixels. Quanto à altura, vamos atribuir a ela 30 pixels. Por enquanto, o ícone ainda não está visível. E para corrigir isso, vamos atribuir a ele um plano de fundo temporário, digamos vermelho Ok, agora o ícone exibido por padrão é colocado no canto superior esquerdo. Mas, como eu disse, vou colocá-lo no canto superior direito da página. Para isso, vamos definir essa posição como fixa. E então precisamos da posição superior, definida como 50 pixels e a direita como 50 pixels. Agora eu posso deslocar no canto superior direito. E, finalmente, vou mudar o cursor. Vamos deixar isso claro. Tudo bem, por enquanto com o elemento div principal, terminamos. É hora de trabalhar com luzes. Vamos prosseguir e selecioná-los usando a linha de nome de classe comum. Em seguida, defina sua largura como 100 por cento. Significa que a linha ocupará toda a largura do elemento pai, que é de 35 pixels. Em seguida, vou definir a altura. Vamos fazer três pixels e também mudar a cor de fundo. Você vê sua cor chocolate. Ok, agora as linhas estão visíveis, mas elas estão grudadas umas nas outras e temos que separá-las. Para conseguir isso, vou usar o Flexbox. Vamos fazer um contêiner flexível do menu de hambúrguer. Para isso, precisamos do display flex. Em seguida, mude a direção da flexão. Precisamos colocar linhas como uma coluna. Portanto, precisamos de uma coluna de direção flexível. E, finalmente, para criar algum espaço entre eles, use o conteúdo justificado Os valores circulam. Ok, agora as linhas estão separadas e, na verdade podemos nos livrar desse fundo vermelho. Tudo bem, então o ícone do menu já está criado e antes de fazê-lo funcionar, vou personalizar a barra de navegação Devemos colocá-lo no lado direito. Então, vamos prosseguir e selecionar elemento nav com o nome da classe navbar Primeiro, vamos definir sua largura e altura. Vou definir sua largura como 300 pixels. Quanto à altura, vamos fazer com que seja 100 por cento. Em seguida, altere a cor de fundo. Vamos usar sua cor 26262. Ok, então, para colocar a barra agora no lado direito, vamos definir essa posição como fixa. E então faça com que as propriedades superior e direita sejam zero. Tudo bem, então a barra de navegação está posicionada da maneira correta. Agora vou cuidar da posição dos itens de navegação. Quero colocá-los perfeitamente no centro da barra de navegação. E para isso, vamos usar o Flexbox aqui. Display flexível. Que, para centralizar itens horizontalmente, use Centro. S para centralização vertical Use itens de alinhamento, centro. Ok, então os itens são colocados no centro. E a última coisa que eu quero fazer em relação à barra de navegação é personalizar sua forma E eu vou fazer isso usando o raio da borda. Na verdade, essa propriedade pode assumir quatro valores diferentes apropriados para quatro cantos. Estou no canto superior esquerdo, no canto superior direito, no canto inferior direito e no canto inferior esquerdo Então, podemos definir diferentes raios de borda, quatro colunas diferentes Nesse caso, vou personalizar os cantos superior esquerdo e inferior esquerdo. Quanto ao resto dos cantos, não vamos tocá-los. Então, como valor do raio da borda do canto superior esquerdo, vou inserir aqui Então, como dissemos, os cantos superior direito e inferior direito não serão alterados. Então, precisamos inserir aqui zeros duas vezes. E para o canto inferior esquerdo, vou usar 60%. Tudo bem, então a forma da barra de navegação é personalizada e agora vou estilizar os itens de navegação Vamos seguir em frente e selecionar os elementos da UL. Tem nome de classe. Não menos importante. Vou colocar o texto no lado direito. Então, vamos usar o alinhamento de texto à direita. Em seguida, vamos selecionar os elementos LI. Tem nome de classe, não item. Primeiro, vamos nos livrar dos marcadores padrão usando nenhum no estilo de lista Em seguida, crie algum espaço usando margem. 25 semanas. Tudo bem, agora temos que selecionar os elementos do link, que tem o nome da classe nav Vamos nos livrar dos estilos padrão. Usando decoração de texto. Nenhum. Em seguida, aumente o tamanho da fonte, faça 22 pixels. Mude a cor. Você vê sua cor E. Além disso, vou tornar a fonte mais clara usando a gramatura da fonte 300. Em seguida, cria algum espaço entre as letras usando o espaçamento entre letras Um pixel. faça o texto em maiúsculas usando a transformação de texto em maiúsculas E, finalmente, faça o texto em maiúsculas usando a transformação de texto em maiúsculas. Tudo bem, isso é tudo sobre itens de navegação Como você se lembra do projeto finalizado, vamos criar alguns efeitos de foco passar o mouse, devemos exibir linhas na parte superior e inferior dos itens Será exibido com uma transição suave. E nas direções opostas. Na verdade, vamos criar essas linhas usando pseudoelementos antes e depois Ambos terão alguns estilos comuns. Então, vamos selecionar os dois pseudoelementos, à direita, link de navegação antes à direita, link de navegação Em seguida, duplique essa linha e altere antes e depois. Então, primeiro precisamos definir o conteúdo como vazio. Em seguida, vou definir a largura e a altura. Vamos começar conosco 100 por cento. Em seguida, aumente a altura para pixels e também altere a cor de fundo. Você vê sua cor chocolate. Por enquanto, as linhas não são visíveis porque são elementos embutidos e , portanto, a largura e a altura não são aplicadas Portanto, se definirmos sua posição como absoluta e, em seguida, se atribuirmos aos elementos pais, o que não é relativo à posição do link, as duas linhas serão exibidas Em um piscar de olhos. Vemos aqui apenas uma linha, mas, na verdade, ambas as linhas são colocadas lado a lado Ok, a seguir vou definir uma posição à esquerda para ambos os elementos como zero. Agora, as duas linhas estão ocupando mesmos pontos e, para separá-las, temos que definir uma posição inferior para os pseudoelementos e torná-la zero Então, vamos copiar esse seletor e atribuí-lo ao zero inferior Então, agora as duas linhas estão separadas. Como você sabe, por padrão, posição superior é definida como zero. Então, se não o definirmos manualmente, isso não será um problema. Mas de qualquer forma, vou defini-lo. Então, vamos duplicar esse código. Em seguida, mude depois para antes. E em vez de embaixo, direito, superior. Tudo bem, a última coisa que queremos aqui é criar um pouco de preenchimento porque a linha inferior está muito próxima do item Então, vamos atribuir ao nav o preenchimento do link no canto superior e inferior direito três pixels e depois zero nos lados esquerdo e Tudo bem, isso é tudo sobre as linhas que agora precisam criar um efeito de foco. Por padrão, vou esconder essas linhas. E quando passarmos o mouse sobre os itens, essas linhas serão exibidas suavemente nas direções opostas Para ocultar linhas, vou usar Transform. Em seguida, escale x. Temos que defini-lo como zero. Agora, ao passar o mouse, temos que aumentar a escala e torná-la uma Então, vamos continuar e selecionar o link de navegação com o mouse. Em seguida, adicione aqui antes. Duplique esse seletor e altere antes e depois. Em seguida, insira sua Transformação, Escala x com o argumento um. E, finalmente, para tornar o efeito mais inteligente, vamos usar a transformação de transição 0,5 s. Tudo bem, então se passarmos o mouse sobre os itens as linhas serão exibidas Mas, como você pode ver, por padrão, eles começam a aparecer do centro. Isso acontece porque a propriedade de origem da transformação é definida como sensor por padrão. Portanto, precisamos alterá-lo para ambas as linhas. Vamos atribuir aos pseudoelementos após os pseudoelementos, a origem da transformação. Faça isso direito. Em seguida, copie esse código e cole-o antes dos pseudoelementos E em vez de direita, vamos inserir aqui à esquerda. Se passarmos o mouse sobre os itens , tudo funcionará perfeitamente Temos aqui um bom efeito de flutuação. Ok, então com a navegação, terminamos. Próximo. O que precisamos fazer é fazer o menu de hambúrguer funcionar. Em primeiro lugar, vou transformar o ícone do menu em x. Para isso, temos que mudar as posições primeira e da terceira linhas. Quanto ao segundo, ele deve ser aquecido. Então, vamos seguir em frente e selecionar a linha um. Temos que girar a linha um em 45 graus de acordo com o eixo z. Para ser mais preciso, para a linha um, temos que usar Rotate Z -45 graus Vamos duplicar esse código. Mude o nome da turma para a direita, linha três. E também se livre do sinal de menos a partir daqui. Como dissemos, temos que esconder a linha dois. Então, vamos selecioná-lo e usar sua opacidade zero. Como você pode ver, as linhas são giradas, mas não temos aqui nenhum x. Temos que cuidar das posições das linhas Para isso. Vou adicionar aqui traduzir. Então, como o valor da direção x, certo? Menos oito pixels, S4, eixo y. Temos que passar suas seis semanas. Vamos copiá-lo e colar quatro linhas três Em vez de seis pixels, precisamos aqui de apenas menos seis picos. Agora é considerado. O problema está resolvido e temos aqui x. Na verdade, esse não é o estado padrão do ícone. Temos que transformá-lo em x quando clicamos nele. Para conseguir isso, vou usar um pouco de JavaScript. Mas antes de escrevermos um pouco de JavaScript, vou adicionar duas linhas. Novo nome de classe, vamos chamá-lo de mudança. Em seguida, adicionaremos essa barra de navegação de classe 2 usando JavaScript. E tudo isso acontecerá quando clicarmos no ícone. Vamos ao arquivo script.js e, em primeiro lugar, criar uma nova variável, vamos chamá-la de ícone de menu. Em seguida, selecione os empreendimentos que têm um menu de hambúrguer com o nome da classe Para isso, precisamos escrever documentos, pontos, consultas, seletores e passar o menu de hambúrguer com o nome da turma Em seguida, anexe o ouvinte de eventos ao ícone Menu, à direita, ícone do menu, ponto, adicione o ouvinte de eventos Como primeiro argumento, temos que passar seu nome de eventos, que é clique. Que precisamos passar sua função, que será uma função de seta. Agora temos que adicionar duas novas classes que são alteradas primeiro, vamos criar uma nova variável, chamá-la de barra de navegação Deve ser igual a documentos, pontos, querySelector. Vamos inserir a barra de navegação do nome do cluster. Em seguida, dentro da função, à direita, barra de navegação e propriedade mais fácil chamada lista de classes Agora você pode pensar que precisamos usar seu método add, mas nesse caso não funcionará porque quando clicamos no ícone, a mudança de classe deve ser adicionada ao Napa Mas em Avançar clique, ele deve ser removido. E para conseguir isso, em vez de adicionar, temos que usar um método chamado Toggle Vamos inserir a alteração do nome da sua turma. Então, se clicarmos no ícone, ele será transformado em x. E, no próximo clique, ele obterá seu estado padrão. Para fazer com que isso afete o motor, vamos voltar ao arquivo style.css e vamos voltar ao arquivo style.css e atribuir à transição de linha os valores de 0,8 s. Então, agora um fato ficou mais inteligente, mas acho que podemos torná-lo ainda mais agradável Em vez de girar as linhas em apenas 45 graus, podemos deixá-las fazer uma rotação inteira, 360 graus e depois girar novamente em 45 Então, como valores, temos que inserir aqui, soma de 360,45, que eventualmente é 405 Então agora você concorda que parece muito melhor. Tudo bem, então estamos quase lá. A outra coisa que precisa fazer é ocultar uma porta suficiente por padrão e exibi-la OnClick Para isso, vamos alterar o valor da posição correta e torná-la -300 pixels Então, agora o Navbar está oculto. Para movê-lo da direita para a esquerda, vou usar novamente a mudança de classe. Vamos atribuir a ela, à direita, com valor zero. Agora, se clicarmos, Napa será exibida, mas como convidado, para tornar o efeito mais agradável, temos que usar a transição com os valores Além disso, vou usar sua função chamada Cubic Bezier, que nos permite criar uma Nesse caso, quero que o efeito comece um pouco mais devagar e termine mais rápido Para isso, vou passar seus valores 100,1. Então, agora podemos dizer que tudo funciona perfeitamente. Temos aqui uma barra de navegação bonita e moderna com alguns efeitos interessantes 31. Projeto 28 - Cartões de preços: Neste tutorial, mostrarei como criar boas cartas modernas com alguns efeitos interessantes. Então, como você pode ver, temos aqui três cartões semelhantes com pacotes de preços e condições diferentes. Se eu passar o mouse sobre eles , a escala dos carrinhos aumentará suavemente Eles se tornarão maiores. E também se eu tornar o navegador menor, os cartões serão embrulhados. Portanto, o projeto responderá em diferentes tamanhos de tela Tudo bem. Então, aqui no código VS, eu tenho alguns arquivos para HTML e CSS. E também temos uma pasta na qual eu tenho uma imagem. No arquivo index.html, criei a estrutura básica do documento HTML. Dentro do elemento principal, temos alguns links. O primeiro é para fontes do Google. Vou usar fontes chamadas Josephine Sans Então eu passei aqui um link para os ícones do Font Awesome. E por último, eu tenho um link para o arquivo style.css. Ok, vamos começar a criar a marcação HTML. Vou criar elementos div, que serão um contêiner Isso incluirá todo o conteúdo. Então, vamos atribuir a ele um contêiner de classe. Em seguida, precisamos de outros elementos div que devem ser um invólucro para cartões Então, atribuído a ele um invólucro de cartões de nome de classe. E agora temos que criar o cartão em si. Vamos abrir outro desenvolvimento com o cartão de identificação da classe. Na verdade, o cartão consistirá em três partes principais. Teremos cabeçalho, corpo do cartão e rodapé do cartão Então, vamos inserir seus elementos div, que devem ser um cabeçalho de cartão Vamos atribuir à sua turma o cabeçalho do cartão de identificação. Ele consistirá em dois elementos de título. Primeiro, descreveremos que tipo de pacote temos. Estou no modo gratuito, standard ou premium. Quanto ao segundo, deve ser pelo preço do pacote. Então, vamos abrir o elemento de cabeçalho h3 e inserir seus textos gratuitamente Em seguida, precisamos de elementos de cabeçalho H1 com textos, dólar, sinal e zero Ok, isso é tudo sobre o cabeçalho do cartão. Em seguida, precisamos de um corpo de cartão. Ele representará o tipo de recursos que temos no caso do pacote gratuito. Então, vamos criar o desenvolvimento e atribuí-lo ao corpo do cartão de identificação da classe. As características serão representadas pelo menos por. Portanto, esses são elementos UL abertos. Inserindo-o LI. Então teremos aqui Font, ícones incríveis com alguns textos. No caso de um pacote gratuito, apenas dois recursos estarão disponíveis e os demais não estarão. Portanto, os dois primeiros recursos terão ícones de verificação e o restante deles deverá ter x igual Vamos abrir aqui os elementos I e atribuir a eles a classe F, a, S, FA hash check Isso instituiu alguns textos após o encerramento, tag. Alguns textos em destaque. No geral, vou ter seis recursos. Então, vamos duplicar essa linha cinco vezes. E então a única coisa que tivemos que fazer aqui foi mudar os nomes das classes por último, para os ícones Font Awesome. Em vez do cheque, precisamos escrever os horários aqui. Ok, então isso é tudo sobre o corpo do cartão. Como dissemos, também precisamos criar o rodapé do cartão. Ele incluirá apenas um botão. Então, vamos abrir os desenvolvimentos e atribuir a ele a classe de filtro de carboidratos Em seguida, dentro do elemento div Create button, que deve ter o botão type e o texto subscribe Ok, então criamos o primeiro cartão. No geral, teremos três deles. Então, vamos duplicar o cartão inteiro duas vezes. Em seguida, faça algumas alterações. Em vez de três, precisamos aqui padrão S para o segundo elemento de cabeçalho em vez de zero, certo? Digamos 49 e corte, depois abra os elementos de extensão e institua um mês. Então, no caso de um pacote padrão, vou disponibilizar quatro recursos. Então, vamos mudar os nomes das classes aqui. Precisamos verificar em vez dos horários. Então, o segundo cartão está pronto. Vamos fazer algumas mudanças para o terceiro, precisamos aqui, premium que 99, elemento de espaço aberto e inserir mês. Por fim, vou disponibilizar todos os recursos. Portanto, para os últimos quatro recursos, precisamos do nome da classe. Marque em vez de vezes Tudo bem, isso é tudo sobre marcação HTML Criamos estruturas para todas as três cartas. Agora é hora de começar a estilizá-los. Vamos ao arquivo style.css e, antes de tudo, criar alguns estilos de redefinição. Vou selecionar cada elemento usando asteriscos. Em seguida, defina a margem e o preenchimento como zero. E também use a propriedade de dimensionamento de caixa e atribua a ela border-box. Tudo bem, então o primeiro elemento que eu quero cuidar é o contêiner Então, vamos selecioná-lo e definir sua largura e altura. Vou definir a largura como 100% da altura da barra S. Vamos defini-lo como 100 por cento da pupila e também mudar a cor de fundo Vamos atribuir a ela as cores d, d, d. Ok, depois disso, vou selecionar o invólucro de cartões Então, eu quero que a embalagem seja colocada no centro horizontalmente E também vou alinhar as cartas em uma linha. Para fazer isso primeiro, vamos definir a largura como 90%. Então, para centralizar a embalagem dos cartões dentro do contêiner, precisamos de margem, nossa linha Em seguida, vamos definir a altura e defini-la como cem por cento. Agora, vou alinhar os cartões horizontalmente em uma linha e também quero colocá-los verticalmente no o Então, precisamos aqui do display flex. Agora, como você pode ver, as cartas são colocadas em uma linha. Vamos criar algum espaço entre eles. E para isso, vamos usar conteúdo justificado com espaço de valor ao redor Finalmente, para enviar para eles verticalmente, use itens de linha e defina-os como centro Tudo bem, então isso é tudo sobre o alinhamento das cartas. Agora temos que começar a modelar as células da cartilagem. Então, vamos seguir em frente e selecionar um cartão. Adverso. Vamos definir a largura como 300 pixels. Então eu vou mudar o plano de fundo. Na verdade, quero definir uma imagem como plano de fundo. Primeiro, vamos usar aqui o gradiente linear e passar aqui alguns valores RGBA Precisamos de cor preta com opacidade de 0,5. Em seguida, passe novamente o valor RGBA com a mesma cor preta, mas com opacidade Em seguida, precisamos indicar parte da imagem. Então, Insight URL, isso mesmo, imagens e selecione Imagem por ponto JPG. Em seguida, como uma posição da imagem no centro direito. Além disso, não precisamos repetir aqui. E, finalmente, vamos usar a propriedade de tamanho de fundo com a capa do valor. Então, como você pode ver, temos aqui imagem como plano de fundo do cartão, mas, por enquanto, a corrente em si parece muito feia Em seguida, vamos mudar a cor do conteúdo para torná-lo visível. Vamos defini-lo como branco. Em seguida, basta centralizar o texto dentro do cartão usando o centro de alinhamento de texto Tudo bem, vamos passar a estilizar elementos individuais dentro do cartão A primeira parte que eu quero estilizar é o cabeçalho do cartão, que consiste em dois elementos de título Primeiro, vamos selecionar o próprio cabeçalho do cartão e criar algum espaço na parte inferior usando a margem inferior com valor de 40 pixels Em seguida, vou selecionar os primeiros elementos do título. Então, precisamos escrever aqui o cabeçalho do cartão. Então h3. Vamos mudar a família de fontes. Vou usar sua fonte chamada Josephine Sans. Sem serifa. Isso aumentou o tamanho da fonte. Vou configurá-lo como 30 pixels. Além disso, vou tornar a fonte mais clara usando a espessura da fonte com o valor 300 Tudo bem, então o primeiro título já está bom, mas eu quero adicionar mais alguns estilos Vamos mudar sua cor. Nesse caso, vou usar uma cor chamada chocolate. Em seguida, crie algum espaço ao redor do título. Use margem com um valor de 30 pixels. Depois disso, quero criar uma borda na parte inferior do título. Então, para isso, vamos usar uma borda inferior. Então, aqui, valoriza ranhura de um pixel e a cor branca Então, como você pode ver, temos aqui uma borda na parte inferior, mas acho que está muito perto do título E para corrigir isso, vamos usar preenchimento com valor de dez pixels, com valor de dez picos Tudo bem, isso é tudo sobre o primeiro título Elements. Vamos seguir em frente e estilizar o segundo. Selecione o cabeçalho direito do cartão, H1. Na verdade, para H1, precisamos usar essas três propriedades. Então, vou pegá-los daqui e depois mudar os valores. Como fonte de família, vou usar Montserrat Em seguida, defina o tamanho da fonte como 60 pixels. Quanto ao peso da fonte, vamos deixar como está. Tudo bem, então o segundo elemento do título está estilizado, mas precisamos ouvir para fazer algumas alterações Eu quero fazer um cartaz de $1 menor, e também quero colocá-lo um pouco acima. Para fazer isso, vou usar uma tag HTML chamada sobrescrito Então, vamos colocar cifrões em todos os cartões com uma etiqueta sobrescrita Como você pode ver, o cifrão é colocado um pouco acima, mas é muito maior. Então, vamos diminuir o tamanho da fonte. Selecione o cabeçalho correto do cartão e a sopa e defina o tamanho da fonte como 35 pixels Tudo bem, então vamos falar sobre o cifrão. A única coisa que eu quero fazer em relação a essa parte é diminuir o tamanho da matemática porque, como você pode ver, ela é bem maior. Como você se lembra, agrupamos essa palavra por elemento de extensão. Vamos prosseguir e selecionar o cabeçalho direito do cartão, span. Em seguida, defina o tamanho da fonte e faça com que seja 18 pixels. Terminamos de trabalhar no cabeçalho do cartão. Ambos os títulos estão estilizados e agora temos que seguir em frente e cuidar do corpo do cartão Dentro do corpo do cartão, temos listas de recursos com fontes, ícones incríveis e alguns textos. Vamos selecionar o primeiro corpo do cartão e criar algum espaço na parte inferior usando a margem inferior, 60 pixels. Em seguida, vou abordar aqui os elementos LI, que na verdade envolvem ícone e texto. Então, vamos selecioná-lo, certo, Baldry esculpido. I. Primeiro de tudo, vamos nos livrar dos marcadores padrão usando o estilo de lista Nenhum. Em seguida, altere a família da fonte. Nesse caso, vou usar uma fonte chamada Josephine Sans san-serif em vez E o peso da fonte direita é 300. Tudo bem, então os itens da lista parecem bons, mas precisamos de algum espaço entre eles. E para isso, vou usar margem. Vamos fazer 50 pixels na parte superior e inferior e zero nos lados esquerdo e direito. Com os valores dos textos, terminamos. E agora eu quero personalizar as comparações. A primeira coisa que precisamos aqui é criar algum espaço entre o ícone e o texto. Para isso, vamos selecionar elementos chamados corpo. Eu uso margem, certo? 25 pixels. A próxima coisa que eu quero fazer é mudar a cor dos ícones. Em caso de verificação, quero usar a cor verde. Quanto aos X iguais, vou torná-los vermelhos. Então, vamos seguir em frente e selecionar o corpo do cartão. Em seguida, verifique e defina sua cor como 06838. Vamos duplicar esse código. Altere o nome da classe que precisamos para vezes em vez de verificar, e também altere o valor da cor aqui, 911832 Tudo bem, como você pode ver, a cor dos ícones foi alterada e na verdade, com o corpo do cartão, terminamos Próximo convidado, temos que cuidar do rodapé do cartão. Então, vamos selecionar o desenvolvimento com o rodapé do cartão de nome da classe. E crie algum espaço na parte inferior usando a margem inferior com valor de 40 pixels. Em seguida, vou personalizar o botão, então vamos selecioná-lo. Precisamos do botão do rodapé do cartão. Primeiro, vamos definir sua largura como 120 pixels. Em seguida, crie algum espaço dentro do botão usando o preenchimento pixels mudam a cor de fundo Vou usar sua cor de chocolate. E também mude a cor do texto. Faça-o mais claro usando as cores d, d, d. Ok, agora vou pegar aqui os textos dentro do botão. Em primeiro lugar, vamos mudar a família de fontes. Vou usar uma fonte chamada Montserrat, sans serif. Em seguida, defina o tamanho da fonte, faça 12 pixels. Vou deixar a fonte um pouco mais ousada para isso, com a espessura certa da fonte E defina como 600. Também torne os textos em maiúsculas usando a transformação de texto em maiúsculas. E, por fim, crie algum espaço entre as letras usando o espaçamento entre letras com valor de um pixel Tudo bem, isso é tudo sobre os textos. Precisamos aqui de mais alguns estilos para que o botão tenha uma boa aparência. Vamos alterar a borda padrão e criar uma personalizada. Aqui, dois pixels, sólidos, e a cor do chocolate. Em seguida, faça o botão arredondado usando o raio da borda. 50 pixels. Elimina default, outline, outline none. E, finalmente, mude o tipo de grosseiro, faça sentido. Tudo bem, como você pode ver, o botão está estilizado. Agora eu quero adicionar alguns estilos ao cartão em si. Vou fazer com que seu canto seja ligeiramente arredondado. E também quero adicionar algum efeito de sombra. Então, vamos prosseguir e atribuir ao cartão o raio da borda com o valor de dez pixels Em seguida, use sombra de caixa. Insira aqui os valores 010 pixels, dois pixels e a cor RGB 000 e a opacidade Ok, então agora os carrinhos parecem muito melhores. E a seguir, vou criar um pequeno efeito de foco. Ao passar o mouse. Vou aumentar a escala das cartas e também quero mudar um pouco a sombra da caixa. Então, vamos selecionar o cartão com o mouse. Em seguida, insira aqui transformar, escalar. E como argumento no severo 1.1. Na verdade, como você sabe por padrão, escala dos elementos é uma. Em seguida, precisamos de uma sombra de caixa com valores de 015 pixels, 60 pixels e a cor RGB E também para tornar o efeito mais suave, vamos usar a transição com os valores todos e 0,4 s. Então, se eu passar o mouse sobre o cartão, seu tamanho aumentará Além disso, a sombra será alterada e, no geral, teremos um bom efeito, certo? Na verdade, é isso. Estamos quase terminando esse projeto. A única coisa que eu quero fazer é tornar o projeto responsivo em diferentes tamanhos de tela Para isso, vamos inspecionar a página e depois alternar o modo responsivo Então, o ponto de interrupção no qual precisamos fazer algumas alterações, eu acho, é de cerca de 1.200 pixels Porque, como você pode ver no tamanho da tela, o projeto quebra. Então, vamos continuar e criar uma consulta de mídia CSS. Para isso, temos que escrever na Sign Media. Então, dentro dos parênteses, temos que indicar a largura máxima. Como dissemos, precisamos escrever aqui 1.200 pixels. E agora, dentro de uma consulta de mídia, temos que criar alguns estilos CSS, que serão aplicados nesse ponto de interrupção Vamos selecionar o contêiner e definir sua altura como cem por cento. Em seguida, quero embrulhar cartões. Para isso. Vamos selecionar a embalagem do cartão e atribuí-la à embalagem flexível com valor E, finalmente, precisamos de espaço ao redor dos cartões. Para embrulhá-los bem. Vou criar esse espaço usando margem. Então, selecione o cartão e atribua a ele uma margem de 50 pixels. Tudo bem, então se tornarmos a página menor, os cartões serão embrulhados E, eventualmente, o projeto responderá em telas menores 32. Projeto 29 - Botão de alternância em CSS: Olá e bem-vindo ao nosso próximo tutorial. Neste vídeo, criaremos uma caixa de seleção animada em CSS, que permitirá que você crie algum efeito de alternância. Então, como você pode ver, temos aqui nossa caixa de seleção por padrão, temos aqui um círculo colocado no lado esquerdo com um fundo vermelho Se clicarmos nele, o círculo se moverá suavemente para o lado direito E também a cor de fundo será alterada de vermelho para integrar. Além disso, você pode notar aqui um pequeno ponto colocado no centro do círculo. Quando marcamos a caixa de seleção, esse pequeno ponto também muda de cor Ok, então é isso que vamos fazer. Na verdade, criamos essa caixa de seleção com tamanho grande apenas para melhor visibilidade Em geral, em sites modernos, você encontrará uma caixa de seleção menor Ok, vamos começar a construir esse projeto. No código VS. Eu tenho dois arquivos diferentes, um para HTML e outro para CSS. No arquivo index.html. Eu preparei a estrutura básica do documento HTML. Dentro dos elementos principais, passei o link para o arquivo style.css. Tudo bem, vamos primeiro criar um desenvolvimento aberto de marcação HTML, que envolverá todo o conteúdo atribuído a seu contêiner de classe Então, dentro do contêiner, precisamos criar dois elementos. primeiro será um elemento de entrada com caixa de seleção do tipo Em seguida, precisamos criar um rótulo interno para o atributo, certo? Verifique. E também atribuído ao botão de alternância de classes. E, finalmente, precisamos inserir o desenvolvimento dentro do rótulo. Vai ser um círculo. Então, vamos atribuir a ele um círculo de classe. A última coisa que precisamos fazer dentro do documento HTML é vincular entradas e rótulos Para fazer isso, precisamos atribuir dois atributos de ID de entrada E deve ter exatamente o mesmo valor que passamos para o atributo. Quero dizer, cheque. ver claramente do que estou falando. Vamos inserir alguns textos dentro do desenvolvimento. Digamos que clique. Portanto, se clicarmos nesse texto a caixa de bate-papo será marcada automaticamente. Vamos ao arquivo style.css e começar a escrever um pouco de CSS. No começo, vou criar alguns estilos de redefinição. Vamos eliminar a margem e o preenchimento padrão de cada elemento Para selecionar cada elemento, precisamos usar um asterisco E então passe a margem zero e o preenchimento zero. Tudo bem, a seguir vou colocar o conteúdo perfeitamente no centro. Para isso, vamos selecionar o contêiner E inicialmente definindo largura e altura, vou definir a largura como 100 por cento. Quanto à altura, vou configurá-la como cem por cento da janela de visualização Em seguida, altere a cor de fundo. Você vê sua cor E. E agora, para centralizar o conteúdo, vou usar o flexbox Precisamos aqui do display flex. Então, para centralizar o elemento horizontalmente, precisamos justificar o centro precisamos justificar Em seguida, alinhe os itens no centro para centralizar elementos específicos Tudo bem, como você pode ver, a caixa de seleção está perfeitamente colocada no Agora vou selecionar o rótulo. Mas antes disso, vamos nos livrar desse formulário de texto aqui. Em seguida, volte para o arquivo CSS e selecione o rótulo usando a alternância className Vamos definir a largura como cento e 50 pixels do que a altura necessária. Vamos defini-lo como 50 pixels. Mude a cor do plano de fundo. Vou usar sua cor e24 848 e também fazer elementos arredondados usando raio de borda Tudo bem, então a última coisa que eu quero fazer com o rótulo é criar algum efeito de sombra Mas nesse caso, vou criar uma sombra dentro dos elementos. Para isso, precisamos de sombra de caixa. Então, como primeiro valor, precisamos aqui em um conjunto de 02 pixels, dez pixels e a cor 555 Tudo bem, agora você concorda que parece muito melhor. Agora é hora de criar o círculo. Então, selecione o elemento div com o círculo do nome da classe. Primeiro, vamos definir a largura e a altura e definir as duas como cinco pixels. Na verdade, nós os aplicamos para começar a circular porque, ao usá-los, criaremos um pouco. no centro do círculo, S4, a parte branca do Ele deve ser criado pela fronteira. Portanto, precisamos aqui da borda com os valores de 27 pixels, coluna sólida e branca. Para fazer o arredondado, vamos usar o raio da borda com um valor de 50 por cento Tudo bem, então temos aqui o círculo, mas por enquanto ele não está colocado da Temos que cuidar de sua posição. Para isso, vou usar a posição absoluta. Então, para gerenciar a posição do círculo de acordo com seu elemento pai, que é um rótulo, temos que atribuir ao rótulo a posição relativa Ok, vamos mover esse círculo um pouco cima e também para o lado esquerdo. Portanto, precisamos definir as posições superior e esquerda como superior menos quatro pixels e esquerda menos cinco semanas E, finalmente, vou criar um pequeno efeito de sombra, certo? Sombra de caixa com os valores de 005 pixels. A cor AAA. Tudo bem, vamos ver. Personalizamos nossa caixa de seleção e agora é hora de fazê-la funcionar Para isso, precisamos criar o evento de clique. Você pode pensar que, para isso, devemos usar JavaScript. Mas, nesse caso, vou usar alguns truques de CSS que nos permitirão criar o evento de clique. Lembre-se de que vinculamos entradas e rótulos usando id e quatro atributos. Então, é assim que vamos criar o evento de clique. Temos que definir alguns estilos CSS e aplicá-los aos elementos quando a caixa de seleção está marcada Primeiro de tudo, temos que selecionar o elemento de entrada. Tem verificação de identidade. Então, no CSS, temos uma pseudoclasse chamada marcada, que nos permite selecionar a caixa de seleção no modo Agora temos que ter acesso aos elementos que precisamos personalizar. Nesse caso, precisamos selecionar o círculo, mas não podemos simplesmente escrever aqui círculo. Primeiro, precisamos ter acesso ao rótulo, que é irmão da entrada Para selecionar o irmão dos elementos de entrada, precisamos usar um desses combinadores CSS chamado seletor geral de irmãos, que é expresso Agora precisamos de um rótulo, ele tem a opção className E, finalmente, precisamos aqui de um círculo. Ok, agora temos acesso ao círculo e todos os estilos que vamos passar , se aplicarmos ao círculo, uma caixa de seleção serão marcados. No caso de um círculo, precisamos movê-lo da posição atual para o lado direito. Para isso, vamos usar a posição esquerda. E, a princípio, vamos atribuir a ele 100 por cento. Além disso, precisamos de uma transição para efeito suave atribuído aos valores à esquerda e 0,5 s. Vamos verificar o que acontecerá se eu clicar aqui o círculo se moverá para o lado direito. Mas isso acabará longe demais. Então, para obter os resultados necessários, precisamos subtrair 200% do tamanho do círculo Vamos calcular o tamanho do círculo. Na verdade, no tamanho do círculo, quero dizer o diâmetro do círculo. Tem largura de cinco pixels e borda de 27 pixels. Mas precisamos ter em mente que 27 pixels devem ser duplicados porque temos lados esquerdo e direito Portanto, no geral, o valor deve ser a soma de 27 pixels mais 27 pixels e mais cinco pixels. Tem 59 pixels. Então, precisamos subtrair 200 por cento, 59 picos. Como você pode ver, temos aqui diferentes unidades de medida, porcentagem e pixel. Na verdade, essa operação não é válida em CSS. E para torná-lo válido, temos que usar uma função chamada calc, que significa calcular Agora, essa operação é válida. Então, se clicarmos novamente, o círculo se moverá e obteremos resultados muito melhores. Em um piscar Esse é o resultado que precisávamos obter. Mas, na verdade, precisamos mover círculo um pouco mais para o lado direito. Para ser mais preciso, precisamos movê-lo em cinco pixels. Porque, como posição padrão, definimos a esquerda menos cinco pixels Então, em vez de 59 pixels, precisamos de 54 pixels. E espero que faça sentido para você. Então, se clicarmos, tudo funcionará. Perfeito. Agora precisamos mudar a cor do rótulo. Temos que torná-lo verde. Na verdade, precisamos que você use a mesma técnica. Então, vamos duplicar esse código. Temos que mudar a cor de fundo do elemento do rótulo. Então, vamos nos livrar do círculo a partir daqui. Em seguida, exclua essa linha de código também e em cores de fundo severas com o valor 3963 Finalmente, também precisamos de uma transição para o rótulo. Então, aqui, faça a transição com os valores de fundo, cor e 0,5 s. Então, como você pode ver agora, tudo funciona bem e, na verdade, estamos quase terminando. A única coisa que precisamos fazer é esconder essa pequena caixa de seleção. Para isso, vou ao arquivo index.html e atribuo ao atributo do elemento de entrada chamado hidden. Tudo bem, então é isso. Nosso projeto está concluído. Criamos uma bela caixa de seleção animada com efeito de alternância 33. Projeto 30 - Galeria de grade CSS: Neste vídeo, vamos construir uma galeria responsiva usando a grade CSS Hoje em dia é muito popular e tenho certeza que você já encontrou essas calorias em sites modernos. Então, como você pode ver, temos aqui 12 imagens com pequenas lacunas E essas imagens estão alinhadas em um espaço bidimensional. É isso mesmo. O que você pode conseguir usando a grade CSS. É um módulo de layout CSS bidimensional. Como dissemos, a galeria é responsiva. Se tornarmos os navegadores menores, as imagens encolherão bem e a galeria em si não quebrará Tudo bem, vamos começar a construir esse projeto que tenho aqui no VS Code, alguns arquivos, index.html e style.css E também tenho uma pasta chamada imagens, que inclui todas as imagens que vamos usar ao longo deste projeto. Na verdade, como uma nota rápida aqui, quero dizer que vamos construir esse projeto no Mozilla Firefox, porque esse navegador tem um ambiente de trabalho um pouco melhor para a grade CSS É por isso que eu executei o projeto neste navegador. Tudo bem, então no arquivo index.html, eu preparei uma estrutura HTML básica Como você pode ver no elemento principal, temos um link para nosso arquivo CSS. Vamos começar a construir nossa galeria. Em primeiro lugar, vou criar uma marcação HTML. Então, vamos abrir o desenvolvimento. Deve ser um invólucro para toda a galeria. Então, vamos atribuir a ele um contêiner de classe. Em seguida, vou abrir outro desenvolvimento que envolverá todas as imagens. Vamos atribuir a ela uma galeria de classes. Agora é hora de inserir suas imagens. Vamos abrir os elementos IMG e indicar o caminho da imagem. Temos imagens de pastas e, em seguida, temos que selecionar IMG, JPG de um ponto Além disso, precisamos atribuir algumas classes ao elemento de imagem O primeiro serão quatro estilos comuns, escreva IMG também O segundo deve ser para estilos individuais. Então escreva IMG dash one. Tudo bem, então, como dissemos, no geral, teremos 12 imagens Então, vou duplicar essa linha de código 11 vezes. Em seguida, altere rapidamente os nomes das imagens e também os nomes das classes. Tudo bem? Então, como você pode ver, temos aqui todas as imagens, mas por enquanto elas são bem grandes. Além disso, eles parecem feios porque temos aqui apenas HTML puro Então é hora de começar a estilizar para isso. Vamos para o arquivo style.css. Em primeiro lugar, vou criar alguns estilos de redefinição. Vamos definir a margem e o preenchimento todos os elementos como zero Além disso, vou definir o tamanho da caixa de borda. Depois disso, vou cuidar do contêiner. Então, vamos prosseguir e selecioná-lo. Em seguida, defina a largura e a altura. Vamos definir como 100%. Quanto à altura. Vou defini-lo como 100 por cento da porta de visualização. Tudo bem, é isso por enquanto. Em relação ao contêiner, vou selecionar uma galeria que envolva todas as A galeria será um contêiner de grade. Quanto às imagens, nós as criaremos como itens da grade. Portanto, para tornar o contêiner da grade de elementos, temos que atribuir a ele uma grade de exibição Agora temos que definir colunas de grade e linhas de grade. Para fazer isso, precisamos usar propriedades chamadas colunas de modelo de grade e linhas de modelo de grade. Vamos começar pelas colunas. Use aqui as colunas do modelo de grade de propriedades. Na verdade, como uma nota rápida aqui, quero dizer que, se você não está muito confiante na grade CSS , recomendo conferir nosso boot camp de CSS, no qual explicamos esse módulo em detalhes. E também construímos todo o projeto com base na grade CSS. Então, se você estiver interessado, você pode encontrar o link deste curso na descrição. Tudo bem? Então, teremos oito colunas semelhantes que terão o mesmo tamanho. E para isso, eu quero usar uma função chamada repeat. A função de repetição usa dois argumentos. Como primeiro, temos que indicar o número de colunas, oito. Quanto ao segundo, temos que indicar o tamanho de cada coluna. Nesse caso, vou usar uma função chamada min-max. Isso nos permite definir os valores mínimo e máximo de cada coluna. Então, como valor mínimo, vamos passar aqui dez pixels. Quanto ao valor máximo, vou usar uma unidade especial chamada unidade fracionária, certo? Um. Isso significa que o espaço disponível será dividido em oito partes do evento. E cada coluna ocupará uma parte do espaço disponível. Como você pode ver, as imagens mudaram o layout. Temos aqui uma situação meio complicada. Vamos inspecionar a página e abrir as Ferramentas do Desenvolvedor Eu disse no início deste tutorial que o Firefox tem um ambiente de trabalho muito bom para a grade CSS No lado direito, temos aqui a guia Layout, na qual você pode encontrar uma seção para a grade onde temos nossos elementos div, que é Galeria Se marcarmos essa caixa, o GridLayout será exibido Quero dizer, você pode encontrar as oito colunas que acabamos criar e os números corretos das linhas da grade. Ok? Em seguida, vou cuidar das linhas das grades. Para isso, vou usar uma propriedade chamada linhas do modelo de grade. Então, teremos quatro linhas. Cada um deles terá o mesmo tamanho. Portanto, vou usar novamente a função de repetição. Vamos indicar aqui uma série de funções, para ser mais preciso, vou usar aqui um pequeno ajuste que nos ajudará a dar a resposta da galeria Então, vou fazer com que o tamanho de cada linha 10% da largura da janela de visualização Isso significa que, uma vez que a largura da página diminua , o tamanho das funções diminuirá de acordo. E, eventualmente, obteremos um layout responsivo. Para ver melhor, vamos ao navegador. Portanto, se eu tornar o navegador menor do que o tamanho da rosa diminuirá. Tudo bem, então, por enquanto, as imagens são bem grandes E para corrigir isso, vamos selecionar imagens com o nome de classe comum IMG e , em seguida, definir a largura e a altura como cem por cento Agora, as imagens são colocadas dentro das células da grade. Além disso, eles são menores. Mas temos aqui um pequeno problema. Se você olhar mais de perto, verá que as imagens estão um pouco esticadas e não parecem muito bonitas Então, para corrigir isso, vamos usar a propriedade chamada pés do objeto e atribuída a cada cobertura de valor. Então, agora eles parecem melhores. Em seguida, quero criar algum espaço entre as células da grade. Para isso, temos que atribuir uma lacuna na grade da galeria. Vamos defini-lo como 16 pixels. E também vamos mudar a cor de fundo. Vou usar sua chamada ou zero, d quatro a zero. Então, como você pode ver, temos algum espaço entre as células da grade e também o fundo é alterado. Tudo bem? Agora precisamos alinhar cada imagem individualmente e, eventualmente, elas ocuparão toda a galeria Então, vamos começar pela primeira imagem. Eu quero que você pegue as duas primeiras colunas e a primeira linha. Então, vamos selecioná-lo com o nome de classe individual IMG. Em seguida, defina a propriedade chamada coluna de grade. Essa propriedade nos permite definir o número da linha da coluna inicial e também a final. Então, como dissemos, a primeira imagem ocupará as duas primeiras colunas e a primeira linha. Portanto, precisamos aqui como linha de partida número um, depois barra e três E também, vamos escrever uma linha de grade com números de linha 1.2. Como você pode ver, a primeira imagem ocupou as duas primeiras colunas e foi colocada na primeira linha. A segunda imagem ocupará as próximas três colunas e as duas primeiras linhas. Então, vamos copiar o código da primeira imagem. Em seguida, altere o nome da classe. E também valores para coluna da grade e linha da grade. Precisamos de 3,6 S de quatro linhas de grade, certo? 1.3. Tudo bem, a seguir temos a terceira imagem Eu quero deixá-lo onde está. Quero dizer, ele vai assumir toda a dívida de uma célula. Portanto, para a terceira imagem, precisamos da coluna da grade como 6,7 e do papel da coragem como 1,2 Em seguida, ocuparemos duas colunas e duas linhas. Então, para a quarta imagem, vamos escrever linhas de grade. Para a coluna da grade, precisamos de 7,9. Adicionar para a linha 1.3 da grade. Tudo bem, a seguir temos a imagem número cinco. Eu quero que você ocupe duas colunas e duas linhas também. Quero dizer segunda e terceira filas. Então, para a quinta imagem, vamos mudar as linhas da grade da seguinte maneira. Precisamos aqui de 1,3 como quatro linhas de grade, certo? 2.4. Ok? Na verdade, foi assim que decidi alinhar as imagens Mas é claro que você pode fazer isso sozinho. Você pode usar mais imagens ou menos e criar o layout como desejar. Eu sei que escrever código para a galeria é meio repetitivo e talvez um pouco preocupante Mas é assim que funciona. Eventualmente, obteremos um bom resultado. Tudo bem, a seguir temos a imagem número seis. Eu quero que ele seja colocado dentro da terceira e quarta colunas. Quanto à linha, ela ocupará a terceira. Então, para os seis MHz, vamos escrever números de linha para a coluna 3.5 da grade, linha da grade S4, precisamos de 3,4 Tudo bem, então alinhamos seis imagens. Ainda restam outras seis imagens. Como dissemos, escrever o código para esse layout é meio rotineiro Então eu vou passar aqui o código para o resto das imagens e então você pode simplesmente sobrescrevê-lo Ok, espero que você tenha escrito o código para as outras seis imagens. Vamos acessar o navegador e ver a aparência da nossa galeria. Então, as imagens estão bem alinhadas e nossa galeria já está com boa aparência, certo Na verdade, eu quero fazer aqui algumas mudanças. Como você pode ver, temos uma lacuna entre as imagens e eu também quero criar esse espaço nas bordas da galeria. Quero dizer, nos quatro lados, superior, inferior, esquerdo e direito. Para isso, vou usar estofamento. Vamos escrever aqui 16 pixels. A próxima coisa que eu quero fazer é colocar a galeria inteira verticalmente no centro Para isso, vou usar o Flexbox. Vamos atribuir ao contêiner display flex. E para centralizar os itens flexíveis verticalmente, precisamos alinhar Portanto, a galeria está centralizada. E a última coisa que eu quero fazer é criar um efeito de foco Por padrão, quero diminuir a opacidade das imagens. Em seguida, vamos aumentá-lo ao passar o mouse. Então, vamos atribuir à imagem a opacidade de 0,7. Em seguida, selecione a imagem com mouse e aumente a opacidade aqui Por fim, vamos usar a transição com valores de opacidade e 0,5 s. valores de opacidade e 0,5 s. Tudo bem? Então, como você pode ver, temos aqui um bom efeito de foco E, na verdade, nosso projeto está concluído 34. Projeto 31 - Página de destino com Formulários Modais: Neste vídeo, vamos criar uma boa página de empréstimo usando HTML, CSS e um pouco de JavaScript. Antes de começarmos a trabalhar neste projeto. Como de costume, vou examiná-lo e descrevê-lo rapidamente. Então, como você pode ver, temos aqui um plano de fundo em tela cheia. No centro da página, tínhamos um banner que consistia em títulos e E também no canto superior direito, estão colocados dois botões diferentes. Se clicarmos neles, formulários bonitos serão exibidos como caixas de modelo. Na verdade, esses formulários são semelhantes. Só há uma diferença. Um formulário é para login e o segundo é para inscrição. Tudo bem, é isso. O que vamos fazer. Espero que seja interessante e que você goste desse projeto. Então, vamos começar. Na área de trabalho. Eu criei uma pasta chamada formulários modelo, na qual criei três arquivos diferentes para HTML, CSS e JavaScript. Também aqui está uma pasta que inclui a imagem da página de destino. Ok, vamos abrir essa pasta com o código VS. Em seguida, vou verificar o arquivo index.html. Como você pode ver, temos aqui a estrutura básica do documento HTML. Dentro do elemento principal, temos alguns elementos de ligação. Quero dizer, links para ícones do Font Awesome, também um link para fontes do Google. Ao longo deste projeto, vou usar fontes chamadas Josephine Sans Por fim, temos aqui um link para nossos estilos CSS personalizados Na verdade, você pode baixar os arquivos iniciais no link na descrição Ok, vamos executar esse arquivo no navegador. Eu vou fazer isso usando um servidor ativo. É uma ótima extensão do VS Code, então você pode procurá-la no Extension Manager e instalar este pacote. Tudo bem, vamos colocar o editor e o navegador lado a lado e começar a criar inicialmente a marcação HTML para Todo o conteúdo será embalado pelo desenvolvimento. Então, vamos abri-lo. E atribuído ao contêiner do nome do cluster. O contêiner consistirá em três partes diferentes. Como primeira parte, teremos aqui um banner, que incluirá um título e um parágrafo Em seguida, no canto superior direito, teremos botões para login e inscrição Quanto à terceira parte, será um contêiner cheio e incluiremos nossos formulários. Então, vamos em frente e abrir o desenvolvimento. E atribuído ao nome da classe, texto do banner. E insira nele elementos de cabeçalho H1 com código de texto e crie Em seguida, abra os elementos p e insira alguns textos. Digamos que aprenda a lidar com isso. Tudo bem, a seguir devemos ter aqui os botões. Então, vamos abrir o desenvolvimento, que terá o nome da classe btn. Em seguida, insira-o em partes e elementos. Vou atribuir a cada cluster um nome para estilos comuns, btn E também precisamos aqui de outra classe para estilo individual Vamos chamá-lo de Login, btn como texto, vou inserir seu login Na verdade, também fizemos o botão semelhante para se inscrever. Então, vamos duplicar essa linha de código e mudar o nome da classe que precisamos aqui, inscreva-se btn E também vou mudar o texto. Vamos escrever para você se inscrever. Tudo bem, isso é tudo sobre botões. Em seguida, temos que começar a trabalhar em formulários. Para isso, vou criar outro desenvolvimento. Deve ser um contêiner de formulário. Então, vamos atribuir a cada classe o nome do contêiner. Então, teremos aqui duas partes diferentes. O primeiro será para uma inscrição. Então, vamos abrir o desenvolvimento e atribuir a inscrição no nome da turma. Para embalagem. Esta aula será para estilos individuais. Precisamos aqui de outro para um estilo comum. Então, vamos chamá-lo de modelo. O modelo consistirá em alguns elementos. Teremos o botão X de fechamento. Além disso. Vou criar alguns cabeçalhos. Em seguida, teremos várias entradas com os ícones Font, Awesome E, por fim, teremos um botão. Tudo bem, vamos criar esses elementos, em desenvolvimento aberto e designados para comer vários nomes de classes O primeiro será x btn, e então precisamos inscrever x. Dentro desses elementos div. Dentro desses elementos div Vou inserir uma das entidades HTML, à direita, no sinal e às vezes com ponto e vírgula Então, como você pode ver, temos aqui x. Em seguida, teremos alguns títulos Então, vamos abrir outro desenvolvimento e atribuir a ele o nome da classe, cabeçalho do formulário Em seguida, insira os elementos de cabeçalho H1 com o código de texto e crie Em seguida, precisamos que outro título seja o elemento de título h3 Vamos inserir seu texto. Junte-se a nós. Tudo bem, agora é hora de criar um elemento de formulário em si, que incluirá algumas entradas Então, vamos abrir os elementos do formulário e atribuir ao formulário eat className Portanto, o elemento do formulário consistirá em três grupos diferentes. Cada um deles incluirá Font, Awesome, ícone e o elemento de entrada. Então, vamos criar um elemento div e atribuir a ele a classe input, group Em seguida, insira nele os elementos I. Então, o primeiro ícone será para nome de usuário. Vamos atribuir a cada classe o nome FAS, um usuário. Então, precisamos de um elemento de entrada. Seu tipo será texto. E também precisamos aqui de outro atributo chamado espaço reservado com um valor de nome de usuário Então, como dissemos, precisamos de três grupos de entrada. Vamos duplicá-lo duas vezes e depois fazer algumas alterações. A segunda entrada será para e-mail. Então, vamos mudar o nome da classe dos elementos de IA. Precisamos aqui, F, a, F, um envelope. Em seguida, altere o tipo de entrada, transforme-o em e-mail. E também como valor do espaço reservado, precisamos inserir o e-mail Ok, a terceira entrada será para uma senha. Vamos mudar o nome da classe dos elementos de IA. Precisamos da sua chave FASFA. Em seguida, altere o tipo de elementos de entrada. Precisamos da senha e também inserimos a senha para o espaço reservado. Tudo bem, vamos ver as entradas. O último elemento que precisamos criar é um botão. Então, vamos abri-lo. Então. Vou definir o atributo de tipo como parte inferior e, em seguida, inserir seus textos, inscrever-se. Tudo bem, então criamos as quatro primeiras inscrições. Também precisamos de um similar para fazer login. Então, vamos duplicar o invólucro do formulário de inscrição e, em seguida, fazer algumas alterações Vou mudar o nome da turma que precisamos aqui, faça o login. Em seguida, precisamos alterar o nome da classe de x bottom. Precisamos fazer o login novamente. Então, em vez de nos juntarmos a nós, precisamos fazer login. No caso do formulário de login, não precisamos de nenhum e-mail. Então, vamos nos livrar do segundo grupo de entrada. E por último, alterou o valor do fundo. Precisamos fazer o login aqui. Tudo bem, isso é tudo sobre marcação HTML. Agora, é hora de começar a escrever um pouco de CSS. Vamos para o arquivo style.css. Em primeiro lugar, vou criar alguns estilos de redefinição. Vamos eliminar a margem e o preenchimento de cada elemento. Precisamos usar asterisco para selecionar cada elemento. Então, vamos passar suas margens e preencher zero também. Em seguida, vou selecionar o contêiner. Vamos definir sua largura e altura como uma largura. Vou usar o Hazard Present. Altura S4 Quero definir a altura como 100% da janela de visualização. E para isso, temos que usar uma unidade de medida relativa chamada VH. Então, precisamos de 100 vh. Em seguida, vamos definir a imagem como plano de fundo em tela cheia. Vou usar seu gradiente linear. Em seguida, passe alguns valores RGBA. O primeiro vai ser preto, certo? 000 com opacidade de 0,6. partir do segundo, precisamos novamente da cor preta RGBA, mas com opacidade Em seguida, vamos indicar o URL. Quero dizer parte da imagem. Temos imagens de pasta e , em seguida, uma imagem chamada PG dot JPG, na qual precisamos posicionar o plano de fundo como centro. E também sem repetição. Finalmente, vamos usar a propriedade de tamanho de fundo com a capa do valor. Tudo bem, como você pode ver, temos aqui uma imagem de fundo em tela cheia Agora, vou estilizar banners e botões. E depois disso, cuidaremos dos formulários de estilo e também os faremos funcionar por enquanto Para tornar o processo de trabalho mais conveniente, vou esconder todo o contêiner do formulário por um tempo Você pode fazer isso usando display none ou simplesmente usar um dos atributos HTML chamados hidden. Então, vamos usar o atributo Keaton e atribuí-lo ao formulário Container. Como você pode ver, as duas formas estão ocultas e temos aqui apenas texto e botões do banner Vamos começar a estilizar o texto do banner. Então, vamos selecionar desenvolvimentos que tenham textos de banner com o nome da classe Eu vou cuidar da posição do banner. Eu quero que seja colocado no centro. Para isso, vou usar alguma técnica usando posições e propriedades de transformação. Se você assistiu nossos vídeos recentes , já deve conhecer essa técnica. Mas se não, eu vou te mostrar em um segundo. Antes de tudo, precisamos definir a posição como absoluta. Em seguida, precisamos da posição superior, definida como 40 por cento e posição esquerda com um valor de 50 por cento. Então, agora dizemos que as verificações de limites foram deslocadas de cima para baixo em 40% e da esquerda para a direita em 50% Não é isso que queremos. Para centralizar os elementos, temos que movê-lo de sua posição atual em 50 por cento para o lado esquerdo e em 50 por cento para o lado positivo Para isso, precisamos usar o Transform. Em seguida, traduza. Temos que passar para produzir os seguintes valores. Precisamos de -50 por cento e , novamente, -50 por cento. Ok, então, com a posição do texto do banner, terminamos. E agora temos dois estilos de título e um parágrafo. Vamos começar pelo título. Selecione à direita, textos do banner, H1. Antes de tudo, vamos mudar de cor. Eu vou fazer com que seja branco. Em seguida, altere a família da fonte. Vamos usar sua fonte chamada Montserrat san-serif. Isso aumentou o tamanho da fonte. Vou configurá-lo como 80 pixels. Além disso, vou tornar a fonte mais clara usando a gramatura da fonte. Vamos defini-lo como 300. Em seguida, crie algum espaço entre as letras. Use espaçamento entre letras com o valor de dois pixels. E por último, vou criar algum espaço na parte inferior usando a margem inferior, dois picos Tudo bem, isso é tudo sobre o título. Agora, vou selecionar o parágrafo. Então, o texto do banner direito p. Na verdade, precisamos aqui de propriedades quase similares que usamos para o título Então, eu vou copiá-los. Vamos colar aqui e fazer algumas alterações como cor. Vamos usar e. então. Vou mudar a família de fontes em vez de Montserrat aqui, Josephine Isso diminui o tamanho da fonte, faz com que seja de 40 pixels. Como espessura de fonte, precisamos aqui do mesmo. Então, vamos deixar como está. Em seguida, vou diminuir o espaço entre as letras. Precisamos de um pixel. E por último, em vez da margem inferior, vamos usar o alinhamento de texto Tudo bem, isso é sobre o banner. Eu acho que está parecendo bom. E agora eu quero trabalhar nos botões. Antes de tudo, vamos cuidar de suas posições. Eu quero que eles sejam colocados no canto superior direito. Para isso, vamos selecionar o desenvolvimento, que envolve os dois botões. Tem o nome da classe BTN. Vamos fazer com que sua posição seja absoluta. Em seguida, defina os 50 pixels principais e os 60 pixels certos. Como você pode ver, os dois botões são colocados no canto superior direito. E agora vou estilizá-los. Em primeiro lugar, vamos dar aos dois botões alguns estilos comuns. Como você lembra, eles têm uma classe comum, BTN. Vamos selecioná-lo. Primeiro, defina a largura como cento e 70 pixels. Em seguida, crie algum espaço dentro dos botões usando o preenchimento. Na parte superior e inferior, precisamos de dez pixels e, em seguida, 15 px nos lados esquerdo e direito. Em seguida, vamos criar espaço no lado direito dos botões usando 20 pixels na margem direita Além disso, quero torná-los arredondados. Para isso, vamos usar o raio da borda e torná-lo em 50 pixels. Agora, vamos cuidar dos textos. Antes de tudo, mude a família de fontes. Nesse caso, vou usar telefones chamados Josephine Serifa. Em seguida, aumente o tamanho da fonte, torne-o 16 pixels. Crie algum espaço entre as letras. Use espaçamento entre letras. Um pixel. Também elimina o padrão, contorno, contorno, nenhum e, por último, altera o tipo de grosseiro. Faça disso um ponteiro. Isso é tudo sobre estilos comuns. Agora, vou dar alguns estilos individuais aos dois botões. Vamos selecionar o primeiro usando className, Login, btn. Em seguida, altere a cor de fundo. Vou usar sua cor chamada tomate. Agora, quero mudar a cor do texto. E na verdade eu preciso da mesma cor para os dois botões. Então, vou escrevê-lo dentro de estilos comuns. Vamos usar sua cor branca. Além da cor, eu também quero a mesma borda. Então, vamos definir a fronteira. Dois pixels, sólidos e coloridos, certo? Tomate. Por fim, selecione o segundo botão que tem o nome da turma, inscreva-se btn e torne a cor de fundo transparente Tudo bem, isso é tudo sobre esse ladrilho dos botões. Em seguida, quero criar alguns efeitos de passar o mouse e clicar. Ao passar o mouse. Quero que o botão mova Elizabeth para cima. Para isso. Vamos selecionar btn com Harvard e, em seguida, definir a transformação Precisamos traduzir Y com valor menos dois pixels. E também para tornar o efeito mais inteligente, precisamos fazer a transição de 0,3 s. Se passarmos mouse sobre os botões , chegaremos aqui Bom efeito. Em seguida, como dissemos, precisamos clicar no efeito. Para isso, temos que usar uma dessas pseudoclasses Portanto, precisamos selecionar BGN com ativo. E agora podemos definir os estilos que queremos que os botões obtenham quando clicamos neles. Então, como você sabe, ao passar o mouse para cima e clicar, precisamos colocá-los em suas posições antigas Portanto, precisamos copiar essa linha de código e apenas alterar o valor. Precisamos escrever aqui zero. Então, quando clicarmos, obteremos um bom efeito de clique. Tudo bem, isso é sobre personalizar botões. Agora é hora de começar a trabalhar em fazendas. Então, por enquanto, o contêiner do formulário está oculto. A primeira coisa que precisamos fazer é exibi-lo de volta. Mas não precisamos exibir os dois formulários ao mesmo tempo. Vou começar pelo primeiro formulário de inscrição. Em seguida, o segundo formulário será estilizado automaticamente. Isso acontecerá porque as duas empresas compartilham as mesmas classes. Então, vou esconder o formulário de login para isso. Vamos atribuir ao seu wrapper o atributo hidden. Em seguida, volte para o arquivo style.css. Vou selecionar os dois rappers com um modelo de classe comum Em seguida, defina a largura como 400 pixels. Em seguida, vou definir uma imagem como plano de fundo. Vamos usar aqui o gradiente linear e passar aqui alguns valores RGBA O primeiro será 148422, depois vou para 42 e a opacidade 0,8 S para o segundo será 185-12-9129 e a opacidade 0,6 segundo será 185-12-9129 e a Em seguida, selecione a imagem. Precisamos aqui de bg dot JPG como posição, centro direito do que sem repetição. E também precisamos da propriedade do tamanho do plano de fundo com a capa do valor. Tudo bem? Portanto, os formulários devem ser colocados no centro da página. Quero dizer, eles devem estar perfeitamente centralizados. Para isso, vou usar a mesma técnica que usamos para o banner Então, vamos definir a posição do modelo como absoluta. Que precisamos dos melhores 50 por cento, à esquerda, 50 por cento. E também transforme, traduza com os valores -50 por cento e novamente -50 por cento. Por fim, vamos fazer cantos modais um pouco arredondados usando raio de borda com valor de 20 pixels Ok, então, por enquanto, o formulário está realmente horrível, mas faremos com que pareça bom em breve Vamos começar a estilizar elementos que são colocados dentro do modal Vou começar com o padrão de fechamento x. Então, vamos selecioná-lo. Precisamos do nome da classe x BTM. Vou colocá-lo no canto superior direito do modal. Para isso, vou usar a posição absoluta. Então, pronto? Como 20 peças. Por enquanto, como você pode ver, o botão é bem pequeno, então vamos cuidar do aumento do tamanho da fonte. Faça com que sejam 50 pixels Além disso, vou mudar a cor. Vamos usar aqui chamado ou dois a dois. E, finalmente, mude o tipo mais grosseiro, torne-o mais ponteiro. Ok, isso é tudo sobre o botão X. Agora temos que cuidar desses elementos de cabeçalho. Vamos selecionar seus elementos principais, que são o cabeçalho do formulário Vou colocar o texto no centro usando o centro de alinhamento de texto Em seguida, crie algum espaço na parte superior e também na parte inferior do cabeçalho usando margem, direita, oito pixels, zero, cento e 50 pixels E novamente zero. E por último, mude a cor dos dois títulos, torne-os brancos. Tudo bem, agora vou selecionar o primeiro título para isso. Precisamos escrever aqui o cabeçalho H1 do formulário. Vamos mudar a família de fontes. Nesse caso, vou usar a fonte Josephine Sans Em seguida, vou aumentar o tamanho da fonte. Vamos fazer com que sejam 40 pixels. Então. Torne os textos mais leves usando o peso de fonte 300. Em seguida, crie algum espaço na parte inferior do título usando os terços inferiores da margem. Depois das dívidas, vou selecionar o segundo título. Então, à direita do cabeçalho h3. No caso do segundo título, precisaremos de propriedades quase semelhantes. Então, vamos pegar essas três linhas de código. Cole-os para o segundo título. Em seguida, altere a família da fonte. Precisamos aqui de mais Surat. Então, como tamanho da fonte, à direita , 25 pixels, peso da fonte, não precisamos alterá-la, então vamos deixar como E por último, adicione texto, transforme, maiúsculas. Tudo bem, isso é sobre os elementos do título. Agora temos que começar a trabalhar nas entradas. Primeiro, vamos selecionar os elementos do formulário, que têm o formulário className Eu quero cuidar de sua posição. E para isso vou usar o flexbox. Então, a flexão correta da tela. Os itens flexíveis são colocados horizontalmente em uma linha. Portanto, precisamos mudar a direção da flexão e torná-la uma coluna Então, para centralizar os elementos, precisamos alinhar os itens, centralizar Tudo bem, agora temos que começar a estilizar essas entradas. Primeiro, vou selecionar o grupo de entrada, que envolve os ícones Font, Awesome e as Quero criar algum espaço na parte inferior de cada grupo de entrada. Então, vamos usar aqui a margem inferior com o valor de dez pixels. Depois disso, vamos selecionar a entrada em si, certo? Grupo de entrada. Essa entrada. Largura definida como 250 pixels. Em seguida, quero criar algum espaço dentro da entrada usando o preenchimento Nos lados superior, direito e inferior, precisamos da mesma quantidade de espaço. Então, aqui, 15 pixels, três vezes S para o lado esquerdo, vou criar um pouco mais de espaço porque, eventualmente, colocaremos seus ícones Font, Awesome. Então, aqui, 50 pixels. Em seguida, vou me livrar da borda e do contorno padrão, e da borda direita nenhuma E não descreva nenhum. Também faça a entrada ligeiramente arredondada. Usando raio de borda com valor de 30 pixels. Em seguida, vou mudar o plano de fundo das entradas. Vamos usar aqui o valor RGBA com a cor preta e com seis pontos de opacidade. Tudo bem, depois disso, vou trabalhar no texto. Então, vamos mudar a família de fontes. Vou usar sua fonte chamada Josephine Sans. Sem serifa. Isso aumentou o tamanho da fonte. Faça 16 pixels e depois mude de cor. Você vê sua cor di, di, di. Ok, então acabamos de iniciar os elementos de entrada. É hora de seguir em frente e cuidar dos ícones do Font Awesome. Então, vamos selecioná-los usando o grupo de entrada. I. No começo eu quero gerenciar suas posições. Como dissemos, vou colocá-los dentro dos elementos de entrada. Para isso, vamos definir a posição deles como absoluta. E para fazê-los funcionar de acordo com o elemento pai, que neste caso é o grupo de entrada Temos que atribuir ao elemento pai a posição relativa Em seguida, defina quatro elementos I, parte superior como 13 pixels e a esquerda como 17 pixels. Agora, como você pode ver, eles são colocados dentro das entradas Vamos apenas aumentar o tamanho da fonte. Faça 18 pixels e mude de cor. Use aqui. Tudo bem, então, com os grupos de entrada, terminamos com uma boa aparência E o único elemento que queremos cuidar de forma interna é um botão. Então, vamos selecioná-lo diretamente para o botão. Primeiro de tudo, vamos definir larguras, torná-las 310 pixels Em seguida, crie algum espaço dentro do botão usando o preenchimento. Defina-o como 12 pixels, elimina a borda e o contorno padrão , certo? Fronteira: nenhuma. E não descreva nenhum. Em seguida, faça o botão arredondado. Use aqui, o raio da borda com valor é pensado em pixels. Depois disso, vou mudar a cor de fundo do Batson Vamos usar sua cor ou d8678. Além disso, precisamos mudar a cor do texto. Vamos torná-lo branco. Em seguida, vou trabalhar em textos. Eu quero mudar a família de fontes. Vamos usar aqui Josephine Sans. Serifa. Também aumente o tamanho da fonte. Faça 16 pixels e transforme texto em maiúsculas usando texto, transforme em maiúsculas Tudo bem, como você pode ver, o botão está quase estilizado Parece bom, mas temos que adicionar alguns estilos. Como você pode ver, precisamos de algum espaço na parte inferior. E também vou criar algum espaço na parte superior. Para isso, temos que usar margem. No canto superior direito, dez pixels em zero, 50 pixels na parte inferior e zero. Em seguida, crie alguma sombra. Use sombra de caixa com os seguintes valores. Como 05 pixels, 20 pixels. E como cor RGBA direita, cor preta posterior com opacidade E, finalmente, trocado de forma mais grossa, faça com que aponte para a direita, aquele assento sobre a personalização de A última coisa que quero fazer é criar efeitos de mouse e clique, como fizemos no caso do botão de login e inscrição Então, vamos selecionar o botão com Harvard que precisamos aqui, Transformar, Traduzir Y com argumentos menos dois pixels Além disso, quero mudar um pouco a sombra ao passar o mouse Então, sombra da caixa direita. Precisamos aqui de valores zero, ou seja, oito pixels, 25 pixels. E como cor certa, RGBA 000 e opacidade Além disso, precisamos usar a transição, certo? Todos os 0,3 s. Então, como você pode ver, efeito de foco está funcionando Está lindo. Agora vamos criar um efeito de clique. Vou selecionar para e para baixo com a pseudoclasse E2. Então vamos pegar essa linha de código. Cole-o aqui e, como argumento, passe zero. Tudo bem, então é isso. O modelo é estilizado, na verdade, este é um formulário de inscrição. Por enquanto, o formulário de login está oculto. Mas se a exibirmos novamente, você descobrirá que ela também tem estilo porque ambas as formas de modelo têm as mesmas classes comuns Ok, então tudo está pronto para fazer com que esses formulários modelo funcionem por padrão. Nós os esconderemos. E quando clicamos nos botões de login ou inscrição, eles devem ser exibidos. Além disso, o resto da página deve ser desativado. Para conseguir isso, vamos usar um pouco de JavaScript. Ok, então antes de escrevermos um pouco de JavaScript, primeiro vou esconder os formulários, mas não vou fazer isso do HTML. Faremos isso a partir do CSS. Então, primeiro, vamos nos livrar do atributo escondido aqui. Em seguida, vá para o arquivo style.css. Para ocultar formulários, vou usar opacidade zero e visibilidade E devemos atribuí-los ao modelo. As espumas estão escondidas. Agora, para exibi-los, quando clicamos nos botões, temos que criar uma nova classe, que na verdade não existe em HTML. E então, usando JavaScript, temos que adicionar a essa classe dois formulários onclick event Então, vamos primeiro criar uma classe e chamá-la de display. Em seguida, pegue essas duas propriedades. E mude os valores. Precisamos de opacidade de um e visibilidade visível. Agora é hora de escrever um pouco de JavaScript. Na verdade, precisamos vincular nossos arquivos JavaScript à célula HTML. Vamos ao arquivo index.html e abaixo, antes de fechar a tag do corpo, abra a tag do script. E no atributo fonte indica parte do arquivo JavaScript. Precisamos aqui do script.js e, em seguida, abrir o arquivo script.js. Então, antes de anexarmos dois botões de um evento de clique, vou criar algumas variáveis. Temos que criar variáveis para modelos e selecionar os dois modelos separadamente. Como se lembra, atribuímos a cada um deles nomes de classes individuais Quero dizer, invólucro de formulário de inscrição e invólucro de formulário de login. Portanto, precisamos usar essas classes para selecionar modelos separadamente. Então, vamos voltar ao arquivo script.js e criar uma variável, chamá-la de modelo de inscrição Na verdade, como uma nota rápida aqui, se você não estiver familiarizado com JavaScript, neste caso dom , confira nosso bootcamp de JavaScript na Udemy, no qual explicamos todos os conceitos principais, do básico ao avançado, em detalhes Você pode encontrar o link deste curso na descrição. Agora temos que selecionar o invólucro do formulário de inscrição para isso. Vamos escrever aqui o documento. Em seguida, vou usar o método chamado seletor de consulta. Entre parênteses, vamos indicar className, que é inscrever-se E da mesma forma que temos que selecionar o invólucro do formulário de login. Então, vamos duplicar essa linha de código. Em seguida, altere o nome da variável que precisamos aqui, modelo de login. E também mudei className aqui, faça o login. Ok, além dos modelos, também precisamos selecionar os botões de inscrição e login. Então, vamos criar outra variável e chamá-la de sign up btn, que deve ser igual ao seletor de consulta de pontos do documento E entre parênteses como nome de classe, certo ? Inscreva-se no BTM. O mesmo que precisamos para um botão de login. Então, vamos duplicar essa linha de código. Em seguida, altere o nome da variável. Precisamos aqui Login btn. E também mude o nome da turma, certo? Faça o login btn. Tudo bem, então, por enquanto, todos nós sabemos ou eles podem anexar dois botões do evento de clique para isso temos que escrever aqui, inscreva-se btn Em seguida, temos que anexar a ele um método chamado add event listener Dentro dos parênteses, temos que indicar o nome do evento como primeiro argumento E então temos que passar sua função. Nesse caso, vou usar a função de seta ES6. E agora temos que adicionar à inscrição a exibição da classe de modelo, que acabamos de criar em CSS. Para isso, temos que escrever aqui modelo de inscrição que precisamos usar a propriedade chamada lista de classes E para adicionar uma classe ao modelo, temos que usar o método chamado add. Parêntese interno. Temos que passar um nome de classe como argumento. Então, agora, se clicarmos no botão Inscrever-se, o modelo de inscrição será exibido. Bom, o botão de inscrição está funcionando. Também precisamos do mesmo para o botão de login. Então, vamos duplicar esse código e alterar os nomes das variáveis Precisamos de Login, btn e também do modelo de login Ok, vamos clicar no botão Login e você pode ver que ele funciona como o botão de inscrição. Por enquanto. Apenas esses dois botões estão funcionando. Não podemos fechar modelos usando os botões X. Além disso, o plano de fundo não é desativado quando os modais são exibidos Então, agora é hora de cuidar dessas coisas. No começo, quero fazer com que os botões X funcionem. Para isso. Vamos criar novas variáveis separadamente para o botão X de inscrição e também para o botão X de login Vamos chamá-la de variável seno de x, que deve ser igual ao seletor de consulta de pontos do documento E então vamos indicar o nome da sua classe, seno de x. Vamos duplicá-lo Mude o nome da variável aqui, faça o login x. E também mude className Precisamos de login x, como botões de inscrição e login Também precisamos anexar o evento de clique aos botões X. Na verdade, vou duplicar esse código Então vamos mudar o nome da variável, à direita, seno de x. Agora, quando clicamos no botão X, temos que remover a classe display, à qual adicionamos dois modelos Então, aqui, em vez do método add, precisamos usar o método chamado remove. Vamos fazer o mesmo com o login x. Duplique esse código Mude o nome do botão aqui mesmo, faça o login x. E também mude o nome do modelo, certo? Modal de login. Tudo bem, vamos exibir os modelos. Então, se clicarmos em X garrafas , elas desaparecerão. Portanto, os botões X estão funcionando bem. Na verdade, por enquanto, temos aqui uma situação meio confusa. Podemos exibir os dois modelos ao mesmo tempo, mas é definitivamente uma experiência ruim para o usuário. Precisamos de algumas restrições. Em outras palavras, quando um desses modelos é exibido, devemos desativar a página inteira para que não possamos clicar no segundo botão. Para dissolver a página, devemos cobrir oito pelo contêiner do formulário. E então não poderemos clicar em nenhum lugar da página. Para isso. No início, tivemos que atribuir alguns estilos ao contêiner do formulário Vamos ao arquivo style.css e selecionar. Para contêiner. Vou definir sua posição como fixa. Então, para visibilidade, vamos definir essa cor de fundo aqui, RGBA, e inseri-la na cor preta com opacidade Por enquanto, o recipiente formado não está visível. E, na verdade, para corrigir isso, temos que espalhá-lo em toda a página. Para isso, vou definir todas as quatro posições como zero. Quero dizer, precisamos de zero acima, zero direito, depois zero inferior e, finalmente, zero esquerdo. Então, agora a partir do contêiner é possível. Mas, ao mesmo tempo, não podemos clicar nos botões e também clicar em qualquer lugar da página. É claro que não é o que queremos por padrão. Queremos que isso aconteça quando exibimos um desses modelos. Então, por padrão, temos que nos esconder do contêiner. E para isso, precisamos de opacidade, visibilidade zero oculta. Em seguida, precisamos criar uma nova classe que será adicionada ao contêiner do formulário usando JavaScript, que gerenciará a exibição do contêiner do formulário. Então, vamos criar uma classe e chamá-la de desativada. Precisamos copiar essas duas propriedades. Em seguida, cole-os aqui e altere os valores. Precisamos de opacidade um e visibilidade visível. Tudo bem, agora vamos voltar ao arquivo script.js. Portanto, precisamos desativar a página quando clicamos em uma dessas batalhas, quero dizer, fazer login ou inscrever-se. Então, temos que criar uma nova variável. Vamos chamá-lo de contêiner de formulário. Deve ser igual ao seletor de consulta de pontos de documentos. E vamos indicar o nome do cluster para o contêiner. Então, dentro dessa função, temos que adicionar à classe de contêiner da fazenda desativada, que acabamos de criar. Então, para isso, precisamos de um contêiner estrangeiro. Em seguida, a propriedade chamada lista de classes. Temos que usar aqui o método add. E dentro dos parênteses, temos que indicar o mesmo nome da classe O mesmo que também precisamos para um botão de login. Então, vamos copiar essa linha e colá-la aqui. Então, se clicarmos em um desses botões, o modelo será exibido. E a página também será desativada. E então, se clicarmos no botão X, ficará oculta, mas a página permanecerá, ainda desativada. Então, quando clicamos nos botões X, devemos remover a classe desativada do contêiner do formulário. Vamos copiar esse código e colá-lo nos dois botões X. E basta alterar o método de adição em removido. Então, agora, se testarmos, tudo funcionará corretamente. A única coisa que precisamos fazer é facilitar a exibição e a ocultação dos efeitos. Para isso, temos que usar a transição. Precisamos atribuí-lo ao modelo. Vamos inserir seus valores todos e 0,5 s. Em seguida, pegue-os e atribua-os também ao contêiner do formulário Tudo bem, então nosso projeto está concluído. Espero que tenha sido muito interessante e que você aprenda muitas coisas. Obrigado por assistir. Nos vemos no próximo tutorial. 35. Projeto 32 - Página de aterrissagem em animação: Olá e bem-vindo ao nosso próximo tutorial do YouTube criado por código e criação. Neste vídeo, vamos criar uma landing page bonita com alguns efeitos de animação O projeto será criado com base em HTML e CSS. Vamos usar quadros-chave CSS. Então, neste vídeo, você poderá aprender como criar animações usando apenas CSS puro Vamos prosseguir e, antes de tudo, descrever nosso projeto. Como você pode ver, temos aqui fundo da imagem em tela cheia E no centro da página, temos alguns elementos. Você pode ver aqui título, parágrafo, dois botões diferentes. Se eu recarregar a página, título e um parágrafo aparecerão nas direções opostas com algum efeito de desvanecimento E assim que terminarem, os botões em movimento serão exibidos em ordem. Todos esses efeitos de animação serão criados usando CSS, quadros-chave e algumas propriedades de animação Tudo bem, vamos começar no desktop. Eu tenho uma nova pasta chamada página de destino animada, na qual temos dois arquivos diferentes para HTML e CSS. E também uma pasta chamada imagens, que inclui uma única imagem plano de fundo da página de destino. Vamos abrir essa pasta com o VS Code. Dentro do arquivo index.html. Eu preparei uma estrutura básica do documento HTML. Você pode encontrar aqui dois links dentro do elemento principal. Uma para fontes do Google, vou usar uma fonte chamada doses. E temos outro link para os estilos CSS. Tudo bem, vamos executar esse projeto no navegador usando um servidor ativo Se você não usar esse pacote, recomendo instalar o servidor ativo a partir do Extension Manager. Na verdade, é um pacote muito prático e útil. Ok, vamos colocar o editor de código e o navegador lado a lado e começar a criar Ele vai ser simples. Teremos apenas alguns elementos. Então, primeiro de tudo, vamos criar desenvolvimentos que serão um contêiner para todo o conteúdo. Então, vamos atribuir a ele um contêiner de classe. Em seguida, precisamos de outro desenvolvimento que envolva alguns elementos. Vamos atribuir a ela o nome da classe, banner. E então, dentro do banner, crie elementos de cabeçalho H1 Vamos inserir algum texto. Digamos que meu site. Na verdade, vou agrupar o site por elemento de extensão porque quero estilizar a segunda palavra do título de uma maneira um pouco diferente. Em seguida, precisamos de um parágrafo. Vamos inserir aqui alguns textos criados por código e criar. Depois disso, vou criar um botão com o botão de digitação. Além disso, vamos atribuir a ela um nome de classe, BTN, à esquerda. E como texto, vamos inserir você para explorar. Tudo bem, precisamos de um botão semelhante ao segundo. Então, vamos duplicar essa linha de código. Então mude o nome da classe que precisamos aqui, btn, certo? E também em vez de explorar, vamos escrever Subscribe. Tudo bem, isso é tudo sobre marcação HTML. Estamos prontos para começar a estilizar o banner. Vamos para o arquivo style.css. No início, estilizaremos todos os elementos e depois cuidaremos das animações. Vamos continuar e criar alguns estilos de redefinição. Selecione todos os elementos usando asterisco. Vou definir a margem e o preenchimento como zero. E também mude a família de fontes. Vamos usar a fonte chamada ptosis e depois sans-serif. Tudo bem, em seguida, vou selecionar o contêiner. Antes de tudo, vamos definir sua largura e altura. Defina conosco cem por cento S para a altura. Vamos usar 100 vh. Se você não estiver familiarizado com a unidade de medição VH, ela significa altura da janela de visualização E nesse caso, dizemos que a altura dos contêineres deve ser cem por cento da janela de visualização Depois disso, vou definir uma imagem como plano de fundo. Vamos usar aqui o gradiente linear e passar aqui alguns valores RGBA O primeiro será 53, depois dois a 66. E opacidade 0,5. Como um segundo valor RGBA. Vamos passar o ano 47, 80, 63 e a opacidade 0.6 Em seguida, vou indicar parte da imagem Temos uma pasta chamada imagens e precisamos selecionar bg dot JPG. Em seguida, precisamos que a posição da imagem de fundo seja definida como centro. Também não precisamos repetir aqui. E, finalmente, vou usar a propriedade de sites em segundo plano com cobertura de valor. Tudo bem, como você pode ver, a imagem é definida como plano de fundo do contêiner E agora temos que começar a trabalhar no banner. Então, vamos selecioná-lo usando className Banner. Primeiro, vamos definir sua largura como 100%. Isso significa que o banner ocupará 100 por cento da largura de seu elemento principal, neste caso, o contêiner Agora vou cuidar da posição do banner. Vou colocá-lo no centro da página. Na verdade, não será uma centralização perfeita. Quer dizer, eu quero centralizá-lo perfeitamente na horizontal, mas não Para isso, vou usar alguma técnica. Vamos definir sua posição como absoluta. Em seguida, defina a posição superior como 40 por cento, depois à esquerda como 50 por cento. Então, agora o banner é movido de cima para baixo em 40 por cento e da esquerda para a direita em 50 por cento Mas essa não é a posição que queremos obrigá-los a ter Temos que colocá-lo no centro. E para isso, temos que usar transform translate. Temos que passar os seguintes valores. Precisamos de -50 por cento e , novamente, -50 por cento. Então, usando o transform translate, movemos o banner de sua posição atual em 50 por cento para o lado esquerdo e em 50 por cento para o lado superior A próxima coisa que eu quero fazer em relação ao banner é colocar elementos no centro da caixa E para isso, temos que usar o centro de alinhamento de texto. Ok, vamos em frente e estilizar os elementos do título. Selecione, à direita, banir ou H1. Vamos aumentar o tamanho da fonte. Faça com dois pixels. Em seguida, mude a cor. Vou usar suas cores D, D, D. Além disso, quero deixar a fonte um pouco mais clara usando a gramatura da fonte Então 800. E, por fim, crie algum espaço na parte inferior usando margem, dois pixels inferiores Tudo bem? Lembre-se de que encerramos a segunda palavra do título. Quero dizer site por elemento de extensão. Então, vou selecioná-lo corretamente, extensão do banner. Quero transformar texto em maiúsculas. Para isso, vamos usar a transformação de texto em maiúsculas. Em seguida, torne-o um pouco mais ousado. Peso da fonte 700. E também torne sua cor branca. Colarinho branco, f, f, f. Tudo bem, isso é tudo sobre o cabeçalho Vamos dar alguns estilos ao parágrafo. Selecione-o, banner direito p. Vamos definir o tamanho da fonte como 50 pixels Em seguida, torne os textos mais claros usando o peso da fonte, 300, mude a cor torne-o e, e. E, por último, crie algum espaço na parte inferior usando margem, 20 pixels inferiores Tudo bem, então também gosto do estilo do parágrafo do título. E agora temos que cuidar desses dois botões. Na verdade, eles deveriam ser quase idênticos. Então, primeiro, vou definir alguns estilos comuns para botões. Selecione os dois. Certo? Botão de banner. Defina a largura como 180 pixels. Em seguida, crie algum espaço usando o preenchimento atribuído a ele, 12 pixels Em seguida, quero criar algum espaço ao redor dos botões para isso Vamos usar a margem e defini-la como 20 pixels. Então, em vez da borda padrão, vamos definir uma borda direita personalizada com os valores de dois pixels, sólida. E vamos fazer a cor E. Além disso, vou fazer botões arredondados usando o raio da borda Vamos defini-lo como 50 pixels. Além disso, quero aumentar o tamanho da fonte. Vamos fazer com que sejam 18 pixels. Em seguida, livre-se do contorno padrão usando outline none. Também crie algum espaço entre as letras. Para isso, vamos usar espaçamento entre letras com valor de um pixel. E, finalmente, mude o tipo de curso, mostre o ponto de vista. Tudo bem, isso é sobre estilos comuns de botões. Agora, vou atribuir a cada um deles alguns estilos individuais Então, vamos selecionar o botão, que é colocado no lado esquerdo. Ele tem um className btn left. Vamos mudar a cor de fundo. Use sua cor, ou seja, E e depois mude a cor do texto. Vou usar aqui a cor para. Na verdade, precisamos de propriedades semelhantes para esse segundo botão. Então, vamos continuar e duplicar esse código. Mude o nome da turma que precisamos aqui, certo? Em seguida, vou definir a cor de fundo como transparente. Es de quatro cores. Vamos usar o ie. Ok, então, finalmente, todos os elementos estão estilizados. A página de empréstimo parece boa e agora é hora de criar nossas animações Em CSS, você pode criar animações usando quadros-chave Dentro dos quadros-chave, você pode definir regras CSS diferentes em diferentes etapas da animação Em seguida, usando algumas propriedades de animação, você pode aplicar essas regras CSS a diferentes elementos para vê-las na prática. Vamos criar quadros-chave Para isso, precisamos assinar. Em seguida, palavra-chave, quadros-chave. Ele deve ser seguido pelo nome da animação. Na verdade, é opcional. Você pode chamá-lo do que quiser. E neste caso, quero chamá-lo de mover para a esquerda. Tudo bem? Portanto, essa parte da animação será para o título um, título dois será colocado no lado direito por padrão. Além disso, quero que ele fique oculto por padrão, quero dizer, o estado inicial de um elemento quando a animação começa. Então, quando recarregamos a página, quero que ela se mova da direita para a esquerda e também apareça com algum efeito de desvanecimento Então, para conseguir isso, devemos definir esses estilos dentro de quadros-chave Quero dizer, estado inicial de um elemento e seu estado final também. Para definir os estilos quando a animação começa, precisamos escrever aqui zero por cento. Além disso, em vez de zero por cento, você pode usar a palavra-chave de. Então, como dissemos, o título deve ser colocado no lado direito e oculto. Para isso, temos que escrever para você, transformar e depois traduzir X. E como argumento, vamos colocar aqui cento e 20 pixels E também para ocultar um elemento, precisamos de opacidade. Zero. S4, o ponto final da animação em que queremos que o título seja colocado de volta em sua posição anterior E também deve estar visível. Para definir o ponto final, podemos escrever aqui a palavra-chave para. Na verdade, neste caso, temos apenas duas etapas. Somos capazes de usar essas palavras-chave, quero dizer, do N2 Mas, às vezes, acho que na maioria das vezes, temos mais de duas etapas. E então, nesse caso, devemos usar valores percentuais. De qualquer forma, vamos mudar essas palavras-chave e usar valores percentuais. Em vez de do zero. Em vez de dois. Precisamos de 100%. Em seguida, pegue as estrelas desde a primeira etapa. Insira seu zero S para opacidade, precisamos de um. Tudo bem, por enquanto, nada está acontecendo aqui. O cabeçalho não está se movendo. Precisamos de outra coisa para aplicar esses estilos a um elemento, precisamos usar algumas propriedades de animação. Então, vamos seguir em frente e atribuir dois títulos a essas propriedades O primeiro será o nome da animação. Vamos atribuir a ele um nome de quadros-chave, mover para a esquerda. E então precisamos da duração da animação. Vamos configurá-lo como 2 s. Então, se salvarmos isso, o título se moverá da esquerda para a direita com algum efeito de desvanecimento Na verdade, aqui temos um pequeno problema. Estamos recebendo uma barra de rolagem abaixo enquanto o título está em movimento Isso porque, por padrão, ele é colocado no lado direito e o espaço na página não é suficiente. Então, para resolver esse problema, precisamos usar overflow hidden E temos que atribuí-lo ao contêiner. Como você pode ver, aço. E talvez inesperadamente tenhamos o mesmo problema aqui. Isso acontece porque o banner está posicionado como absoluto. E, por enquanto, está funcionando de acordo com o elemento corporal. Temos que fazer com que funcione de acordo com o contêiner. Para isso, temos que atribuir ao contêiner a posição relativa Então, agora tudo funciona perfeitamente. Em seguida, vou criar quadros-chave para um parágrafo. Será semelhante aos quadros-chave do título. Mas, nesse caso, precisamos usar uma direção oposta. Quero que o parágrafo seja movido da esquerda para a direita. Então, vamos continuar e duplicar esse código. Mude o nome da animação. Nesse caso, vou escrever mover para a direita. Então, em vez de 120 pixels, precisamos aqui menos cento e 20 pixels Em seguida, vá em frente e atribua duas propriedades de parágrafo que usamos para o título Então, vou pegá-los, colar os elementos p e apenas mudar o nome da animação. Precisamos mover para a direita Portanto, se salvarmos, o parágrafo do título se moverá da esquerda para a direita com algum efeito de desbotamento E, no geral, isso criará um bom efeito de animação. Ok? Então, como convidado, agora temos que trabalhar nos botões por padrão, quero que eles fiquem ocultos. E depois de exibir o título e um parágrafo, quero que eles apareçam em ordem e com algum efeito de desvanecimento Então, vamos criar novos quadros-chave. Nomeie-o como animate btn. Portanto, no caso do botão, precisamos apenas manipular por Opacidade Então, em zero por cento, precisamos que a opacidade seja S para 100%. Eu vou fazer disso um. Tudo bem? Então, os quadros-chave estão prontos Vamos prosseguir e atribuir dois botões, propriedades de animação Vamos começar com btn, com o nome da animação definido à esquerda e defini-lo como BTN animado. Então, enquanto duro, vamos usar um segundo. Além dessas duas propriedades, precisamos de um pouco de atraso porque quero que as de Batson apareçam quando as animações de título e parágrafo estiverem prestes a terminar Então, vamos usar o atraso de animação da propriedade e defini-lo como 1,5 s. Em seguida, pegue essas três propriedades e cole-as para btn, da maneira certa Para o segundo botão, precisamos de um pouco mais de tempo de atraso. Então, vamos mudar seu valor e torná-lo 2,3 s. Ok, vamos salvar e ver o que vai acontecer. Como você pode ver, enquanto as animações do título e um parágrafo estão em execução, para ser mais preciso, durante o tempo de atraso, os botões ficam visíveis e, assim que terminam, eles começam a ser animados Portanto, precisamos escondê-los durante o tempo de atraso. E para isso, temos que usar outra propriedade chamada modo de filme de animação. E temos que configurá-lo como invertido. Portanto, nesse caso, dizemos que, durante o tempo de atraso, os elementos, por padrão, terão esse estilo específico. Em outras palavras, durante o tempo de atraso, os botões ficarão ocultos. Vamos pegar esse código e colá-lo também no segundo botão. Em seguida, salve. E aqui vamos nós. Agora tudo funciona perfeitamente. Temos aqui uma bela página de destino animada. Tudo bem, na verdade é isso. Nosso projeto está concluído. E antes de terminarmos este tutorial, quero mostrar mais uma coisa sobre as propriedades da animação. Como você pode ver, usamos vários deles. E em vez de fazer isso, podemos escrevê-los de forma curta. Só precisamos usar uma propriedade chamada animação. E então temos que atribuir a cada nome, mover para a esquerda, o que deve ser seguido pela duração Vamos copiar essa linha e colá-la para o parágrafo. Alterar nome. Precisamos ir para a direita. Vamos economizar. E você vê que tudo funciona exatamente da mesma maneira. Tudo bem? Na verdade, não vou mudar as propriedades do Batson Acho que você verá claramente como funciona para poder fazer isso sozinho. Ok, vamos ver. Concluímos esse projeto. Espero que você tenha gostado e aprendido algumas coisas úteis. Nos vemos no próximo tutorial. 36. Projeto 33 - Botão 3D: Olá a todos e bem-vindos ao nosso próximo tutorial. Neste vídeo, vamos criar um botão 3D usando apenas HTML e CSS puros. E acho que será muito interessante e útil porque você poderá aprender alguns truques e técnicas interessantes usando apenas HTML e CSS. Então, vamos começar. Como sempre. Em primeiro lugar, vamos descrever o que vamos criar. Como você pode ver, temos aqui uma imagem de fundo em tela cheia. E no centro da página temos o botão 3D. É colocado no espaço 3D. E quando passamos o mouse sobre ele, ele está girando com um efeito muito bom Então, espero que você esteja gostando desse pequeno projeto. No desktop, criei uma nova pasta na qual tenho dois arquivos diferentes para HTML e CSS. Além disso, eu tenho aqui outra pasta que inclui uma imagem como plano de fundo. Vamos abrir essa pasta com o código VS. Dentro do arquivo index.html. Temos a estrutura básica do documento HTML. O interior tinha elementos. Há dois links, um para o arquivo style.css e outro para fontes do Google. Ao longo deste projeto, vamos usar telefones chamados slab. Ok? Tudo bem, vamos executar esse arquivo no navegador usando o servidor ativo Para obter essa extensão, você precisa procurá-la no Extension Manager e instalá-la. Ok, vamos colocar o editor e o navegador lado a lado para trabalhar de forma mais conveniente e flexível e começar a criar a Vai ser muito simples. Só precisamos criar empreendimentos, que serão contêineres. Então, dentro dele, temos que inserir o botão. Vamos atribuir a ela o nome de classe BTN. E também como texto aqui, assine. Tudo bem, é isso em relação ao HTML, vamos ao arquivo style.css e escrever alguns estilos Em primeiro lugar, vou criar alguns estilos de redefinição. Vamos selecionar todos os elementos usando asteriscos e definir a margem e o preenchimento Em seguida, precisamos cuidar do contêiner. Então, vamos selecioná-lo. No início. Vou definir sua largura e altura. Vamos definir com 100 por cento. Quanto à altura. Vou atribuir a ele 100 vh. Na verdade, explicamos como a altura da janela de visualização funciona em outros vídeos Mas, novamente, neste caso, dizemos que a altura do contêiner deve ser cem por cento da janela de visualização Em seguida, vou definir a imagem como plano de fundo do contêiner. Vamos usar seu gradiente linear. Vou passar seus valores de RGBA, certo? 000 e pontos de opacidade sete. Então, novamente, precisamos do valor RGBA 000, opacidade 0,8. Em seguida, vou indicar a parte interna da URL da imagem, temos uma pasta chamada imagens. Vamos selecionar por ponto JPEG. Em seguida, vou definir a posição do plano de fundo. Vai ser o centro. E também não precisamos repetir aqui. E, por fim, vou usar a propriedade de tamanho de fundo com uma capa de valor Tudo bem, então agora o fundo parece muito bom. E a última coisa em relação ao contêiner é que colocaremos o botão perfeitamente no centro da página. Na verdade, vamos gerenciá-lo usando o Flexbox. Então, vamos escrever aqui display flex. E então precisamos usar o conteúdo justificado com os itens de centralização e alinhamento de valores Novamente com um centro de valor. Tudo bem, isso é tudo sobre o contêiner. Em seguida, temos que cuidar, mas vamos selecionar se está no nome da classe BTN. No início. Vamos atribuir para comer alguns estilos usuais de largura definida e torná-la 350 pixels Em seguida, defina a altura como 100 pixels e altere a cor de fundo. Nesse caso, vou usar gradiente linear. Vamos passar suas duas cores diferentes. O primeiro será 8539, 16s4. Segundo, vou passar aqui 63019. Ok. Então é assim que nosso botão está procurando agora. É muito grande, mas na verdade precisamos disso. Vamos continuar e adicionar mais alguns estilos. Elimina a borda e o contorno padrão , a borda direita nenhuma E não descreva nenhum. Então, vamos prosseguir e trabalhar no texto. Mude a família de fontes. Use sua fonte chamada laje 27 pixels do que serif, maior tamanho da fonte Vamos fazer com 35 pixels. Em seguida, vou fazer letras maiúsculas usando a transformação de texto maiúsculas, também crie algum espaço entre elas usando o espaçamento entre letras Vamos defini-lo como quatro pixels e depois mudar de cor, torná-lo branco. Passo a passo. Nosso botão está ficando melhor. Em seguida, vou adicionar um pouco de sombra ao texto. Para isso, temos que usar a propriedade chamada sombra de texto. Vamos inserir aqui os seguintes valores. Precisamos de zero, depois dez pixels, novamente, dez pixels e cor preta. E também mude o tipo de grosseiro. Vamos deixar isso claro. Tudo bem. Neste ponto, com a personalização do botão, terminamos. É hora de seguir em frente e começar a transformá-lo em elementos 3D Antes de tudo, precisamos criar um ambiente 3D para Bateson E para isso, temos que atribuir ao elemento pai uma propriedade chamada perspectiva Vamos atribuir a cada valor mil pixels. Na verdade, a perspectiva define distância entre um elemento e o usuário. Agora precisamos girar o botão de acordo com as direções x e z. Então, vamos atribuir a ela a propriedade de transformação. Primeiro, vamos girar o botão ao longo do eixo x. Gire x e insira seus 70 graus. Então, como você pode ver, o botão é girado, mas além da direção x, temos que girá-lo ao longo do eixo z. Então, precisamos aqui girar Z com o valor de 30 graus. Tudo bem? Então essa é a posição que queremos que eles tenham por padrão. Agora precisamos dar a forma de botão do cubóide. Na verdade, o cubóide é como um cubo, mas tem a forma de Estamos fazendo isso para transformá-lo em ainda mais elementos 3D. Eu gostaria de observar que isso não será algo muito simples. Usaremos algumas coisas avançadas do CSS. Então, eu recomendo estar mais concentrado e focado nas coisas que vamos mostrar. Então, vamos usar pseudoelementos antes e depois. Vamos selecionar o botão com. Antes dos pseudoelementos. Escreva btn antes do conteúdo ao vivo como vazio, atribuído a ele uma string vazia Em seguida, defina a largura como cem por cento e a altura como 15 pixels. Para tornar os elementos visíveis, vamos atribuir a ele a cor de fundo e torná-lo vermelho por Quero dizer, só para demonstração. Além disso, precisamos definir essa posição porque caso contrário, a altura e a largura não serão aplicadas a ela. Então, vamos definir sua posição como absoluta. Então, aqui está antes dos pseudoelementos, precisamos mudar sua posição e colocá-la em algum lugar aqui na frente do botão Então, vamos definir as posições inferior e direita como zero. O elemento mudou de posição, mas não é isso que queremos. Eventualmente, precisamos girá-lo ao longo do eixo x em 90 graus. Tudo bem? Então, como você pode ver, neste momento, elemento não está mais visível. O motivo é que ele não tem seus próprios ambientes 3D porque é um elemento secundário do botão. E ele não herda telas do contêiner. Para conseguir isso, em CSS, temos uma propriedade chamada estilo de transformação, que deve ter valor preservado em 3D, e precisamos atribuí-la a. Mas então vamos escrever o estilo de transformação e atribuí-lo a ele para preservar o 3D. O elemento é exibido de volta incorretamente, temos aqui outro problema. Por padrão, a origem da transformação é definida como centro. Em outras palavras, você pode imaginar que eixo x está no centro dos elementos. Nesse caso, não queremos isso. Queremos fazer a origem do fundo de transformação. Na verdade, eu sei que essas coisas são um pouco difíceis de entender, mas é assim que elas funcionam. Se eu viajei para entender, será melhor testar essas coisas sozinho. Então, vamos escrever a origem da transformação e defini-la como parte inferior. Tudo bem, então vamos ver o que queremos que ele obtenha. Passo a passo Estamos adquirindo a forma de um cubóide. Agora, vou mudar a cor de fundo. Vamos usar cores da combinação de gradiente linear. Vou copiar o segundo e colá-lo aqui. Agora, como você pode ver, parece muito melhor. Então, como na parte frontal, precisamos do mesmo. No lado direito. Temos que criá-lo usando pseudoelementos posteriores. Na verdade, precisaremos de propriedades semelhantes. Então, vamos duplicar esse código inteiro. Em seguida, mude antes para depois. Em primeiro lugar, vamos mudar de posição em vez de baixo, precisamos aqui de cima. Você vê que os elementos acabaram atrás do botão. Portanto, precisamos girá-lo de acordo com o eixo y com valor de -90 Assim, você vê onde os elementos vão parar de relance, parece peso, mas o motivo é que precisamos alterar os valores de altura e largura No caso de pseudoelementos posteriores, precisamos alternar os valores de altura e largura Largura de 15 pixels de altura com cem por cento. Ok, agora estamos quase lá. A única coisa que precisamos fazer é mudar a origem da transformação. Nesse caso, em vez de fundo, precisamos fazer isso da maneira certa. Tudo bem, então finalmente chegamos aqui, precisávamos nos moldar. A última coisa em relação ao estilo é alterar a cor de fundo após os pseudoelementos Nesse caso, vamos pegar a primeira cor do gradiente linear e colá-la Ok, isso é sobre Batson. Agora precisamos fazer com que funcione. Quero dizer, precisamos criar um efeito de foco ao passar o mouse. Vou girá-lo ao longo dos eixos x e z. Então, escreva btn com o mouse e insira seu Transform. Gire X com argumentos em 30 graus. Em seguida, precisamos girar Z com zero grau. E, finalmente, para um efeito suave, vou usar a transição. Vamos escrever aqui a transformação com duração de 0,5 s. Tudo bem, vamos passar o mouse sobre o botão E ele disse que temos um efeito realmente incrível. Ok, então isso é tudo sobre nossos projetos. Criamos um ótimo botão 3D e espero que você tenha gostado. Obrigado por assistir. Nos vemos no próximo tutorial.