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
Смотрите видео Clip Path e Drop Shadow na Seção Aprender - Curso de HTML e CSS [Aula 4] онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Hashtag Programação 05 Август 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 76 раз и оно понравилось 5 людям.