Clip Path e Drop Shadow na Seção Aprender - Curso de HTML e CSS [Aula 4]
Quer saber mais sobre o nosso Curso Completo de HTML e CSS? Clique no link abaixo para garantir sua vaga na próxima turma:
https://dlp.hashtagtreinamentos.com/h...
PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS:
https://pages.hashtagtreinamentos.com...
-----------------------------------------------------------------------
► Arquivos Utilizados no Vídeo:
https://pages.hashtagtreinamentos.com...
► Site da MasterClass de Full Stack que foi Utilizada na Aula:
https://lp.hashtagtreinamentos.com/fu...
-----------------------------------------------------------------------
Caso prefira o vídeo em formato de texto:
https://www.hashtagtreinamentos.com/l...
-----------------------------------------------------------------------
PARA CONTRATAR A HASHTAG PARA SUA EMPRESA:
https://www.hashtagtreinamentos.com/t...
-----------------------------------------------------------------------
Fala Impressionadores! Hoje vamos para quarta aula do Curso de HTML e CSS que tem como objetivo te ensinar a criar uma Landing Page do ZERO!
Nessa aula nós vamos criar a seção aprender da nossa Landing Page, que é muito similar ao que fizemos na seção passos (da aula anterior).
Além disso, nós vamos criar o hexágono no CSS com ajuda do clip path generator, para criar essa forma.
Depois disso, vamos criar camadas do hexágono e a sombra no hexágono, pois ela não é simplesmente o nosso box shadow, ela vai ser um drop shadow!
Por fim, nós vamos utilizara posição relativa de um elemento no CSS para poder posicionar o hexágono no local correto, para isso vamos utilizar o position e translate!
Para concluir vamos fazer alguns ajustes no hexágono, para que o visual fique igual ao que temos na página de modelo que estamos utilizando!
-----------------------------------------------------------------------
Vídeos Recomendados
► Curso Básico de HTML e CSS
• Curso Básico de Html e CSS - Aprenda ...
► Como Baixar e Configurar o VSCode para HTML e CSS
• Instalação do VS Code para Programaçã...
-----------------------------------------------------------------------
Hashtag Programação
► Inscreva-se em nosso canal: http://bit.ly/3c0LJQi
► Ative as notificações (clica no sininho)!
► Curta o nosso vídeo!
-----------------------------------------------------------------------
Redes Sociais
► Blog: https://bit.ly/2MRUZs0
► YouTube: http://bit.ly/3c0LJQi
► Instagram: https://bit.ly/3o6dw42
► Facebook: http://bit.ly/3qGtaF2
Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos!
-----------------------------------------------------------------------
Conteúdo da Aula
00:00 Introdução
02:08 O que já fizemos?
02:28 O que está faltando?
02:45 Seção aprender (Similar à seção passos)
13:14 Hexágono no CSS (clip path generator)
16:50 Formatações do hexágono
20:58 Camadas do hexágono (ajustes e formatações)
26:50 Sombra no hexágono (filter drop shadow)
31:00 Reduzir/aumentar tamanho com proporção (aspect-ratio)
32:23 Posição relativa de um elemento no CSS (position e translate)
40:55 Replicando o processo para os outros temas da seção
42:48 Replicando o hexágono para a logo
53:00 Ajustes (hexágono intermediário)
54:15 Conclusão
#htmlecss #htmlcss #html #css #hashtagprogramacao
Watch video Clip Path e Drop Shadow na Seção Aprender - Curso de HTML e CSS [Aula 4] online without registration, duration hours minute second in high quality. This video was added by user Hashtag Programação 05 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 760 once and liked it 51 people.