COMO FAZER ANIMAÇÃO EM IMAGEM CSS

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=mcgRSpwSOt8

Minutagem • 00:00 INTRODUÇÃO • 00:26 LINK PARA UTILIZAR A FONTE AWESOME • 00:47 ZERANDO OS ESPAÇAMENTOS • 01:00 COMO COLOCAR TAMANHO NA IMAGEM - CSS • 01:28 COMO FAZER UMA DIV TIPO CLASS • 01:50 COMO COLOCAR IMAGEM HTML • 02:13 COMO FAZER TAG H3 • 02:30 CRIANDO UMA TAG HR • 02:46 COMO FAZER UM BOTÃO • 03:05 FONT AWESOME NO HTML • 07:18 ESTILIZANDOA A DIV CONTAINER • 09:48 COMO MODIFICAR IMAGEM COM O EFEITO HOVER • 10:49 COMO CRIAR ANIMAÇÃO DE BOTÂO COM EFEITO HOVER • 13:24 COMO APLICAR EFEITO HOVER NO BOTÃO • 13:55 APLICANDO COR COM FONT AWESOME • 14:27 COMO FAZER UM KEYFRAMES • Nesse vídeo vamos fazer animações em produtos e botões para deixar página de e commerce mais iterativa e melhorar a experiência com usuário. • No corpo do html faremos uma div para colocar as outras três, uma que agrupamos as outras duas e com sua imagens, textos e botões. • No html vamos começar com reset de espaçamento, colocamos tamanho, posição, margem, alinhamento. Nas classe que colocamos imagem e texto faremos uma sombra com box shadow. • Na imagem faremos um efeito hover para aumentar a imagem com a propriedade translate X e Y , escala e rotação. • Também customizamos o botão com dimensões, tamanho, bordas, imagem de fundo, posicionamento, cor aplicado com efeito hover. • Na classe do ícone da fonte awesome, terá uma cor vermelho e animação linear infinita com keyframes com inicio de opacidade 1 e final 0. • #LayoutResponsive #FrontEnd #CascadingStyleSheets #SiteResponsivo #HypertextPreprocessor #LinguagemMarcaçãoHipeTexto • • 🎵 Música: Snake on the Beach - Nico Staf • ✨IDE: ( Integrated Development Environment )Microsoft Visual Studio. • ✨IDE: ( Integrated Development Environment ) Visual Studio Code. • EXTENSÕES VISUAL STUDIO CODE: • LIVE SERVER: Carrega a página automaticamente. • BEAUTIFY : Padroniza a formatação do código • COLOR HIGHLIGHT : Mostra as cores que você está criando no arquivo css. • INTELLISENSE FOR CSS: Fornece o auto completo da classe que você escreveu no seu código. • Software Editor de videos: Shotcut. • Software para gravar a tela do computador: OBS Studio. • • 📌Fontes de ícones • https://fontawesome.com/v5.15/icons?d... • https://fontawesome.com/ • Dicas de site: • 📌HTML E CSS: • https://www.w3schools.com/default.asp • 📌Tabelas de cores: • https://www.flextool.com.br/tabela_co... • 📌Imagem para baixar: • https://pixabay.com/pt/ • 📌Site para criar Thumbnails: • https://www.canva.com/

#############################

New on site