Como criar o efeito Flip com HTML e CSS
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- ✅ Conheça o treinamento Modo Front-end e crie projetos incríveis do absoluto zero: bit.ly/3KY8mpn
✅ Quer ter acesso a projetos exclusivos que vão agregar ainda mais na sua carreira? Torne-se membro do Inteliogia:
bit.ly/program...
Aprenda a fazer o efeito Flip usando apenas HTML e CSS. Esse efeito é útil para aplicar em lojas online para mostrar mais informações sobre o produto, dentro do teu site para mostrar mais informações sobre você, redes sociais. Enfim, as possibilidades são muitas. Use como quiser.
✅ ME SIGA NAS REDES SOCIAIS
🔹 Instagram: bit.ly/3DHrMdj
🔹 GitHub: bit.ly/3tVboSS
✅ Participe da nossa comunidade no Facebook:
bit.ly/3vaJdiy
✅ Bibliografia que recomendo:
🔹 HTML 5. Entendendo E Executando: amzn.to/41y7YUw
🔹 HTML5 e CSS3: guia prático e visual: amzn.to/3Hbg1yv
🔹 Use a cabeça! HTML e CSS: amzn.to/3Lq5P84
🔹 JavaScript: O Guia Definitivo: amzn.to/3L3cuDu
✅ SE LIGA SÓ
🔹 Meu objetivo é levar o mundo da computação para todos. Você deve saber, né? Existem muitas vagas de emprego para poucos profissionais no mercado. E assim como eu você quer crescer no mundo da programação me acompanhe aqui no canal: / inteliogiatech
✅ EMAIL PARA CONTATO EMPRESARIAL (não tiro dúvidas por aqui):
🔹 contato@inteliogia.com
✅ EMAIL PARA DÚVIDAS:
🔹 duvidas@inteliogia.com
✅ É isso #programMaker, seguimos por aqui, codando 👨🏼💻
![ตีสิบเดย์ [FULL] | นางเอกหมอลำเงินล้าน "อุ๋งอิ๋ง เพชรบ้านแพง" & ไฮโซสาวสุดฮอต "ลิลลี่ เหงียน"](http://i.ytimg.com/vi/jPxQS_EgrJ4/mqdefault.jpg)
Conteúdo sensacional. Parabéns!
Muitíssimo obrigada mesmo, me ajudou muito, quase desisti de fazer esse efeito, porém seu video me fez tentar mais uma vez, e finalmente consegui❤️
tu é muito bom!!! didática top
Parabéns Estou te acompanhando faz alguns dias eu aprendi mais em seu vídeo de 15 mins do que em 3, 4 e até 6 horas de html e css que tem por ai. estou estudando html, css e Javascript as pessoas pulam as vezes tags importantes que vc tanto aborda como comenta até com minucias sugiro que tente fazer um curso mais mais longo mesmo que vc divida as aulas mas que vc deixe tudo em uma playlistou video grande com marcas por exemplo html bem estruturado com essas tags que muita gente não comenta e também uso de tags de botões, labels e etc os videos que circulam são muito confusos, funções de CSS básicas e como estrutura-las e depois uma base solida de Javascript usando esses seus projetos bonitos e elegantes.
Muito obrigado pelo seu feedback Frankleno. Minha proposta é essa, trazer conteúdo mais detalhado para as pessoas que estão começando assimilar o conteúdo com mais facilidade. Futuramente pretendo fazer um curso voltado para essa área. Mas por enquanto tenho faculdade e trabalho que tomam meu tempo para produzir esse tipo de conteúdo kkkkkkkk minha vontade é de viver só disso aqui, trazendo conteúdo para vocês. 😁👊🏾
mt bom e objetivo
Excelente conteúdo amg, traga vídeos de interações com JavaScript
Vou trazer mais conteúdo como esse 😉
Apesar de eu ter feito exatamente como você fez não deu certo, talvez por eu utilizar o Sublime Text, ou quem sabe pelo meu código já estar com 717 linhas no CSS e 210 linhas do HTML tenha algo a mais que eu precise declarar, porém não sei oque, de toda forma obrigado pelo dica, quem sabe mais pra frente eu utilize e dê certo
Parábéns, Bruno! Excelente vídeo! Muito obrigado mesmo.
Estou com um problema. Quero fazer isso com os cards invertidos, por exemplo, que fique aparecendo no site primeiramente a div "leite" e, quando passamos o mouse, o card vira e mostra, digamos "a surpresa", que seria a imagem com a foto. Já tentei inverter tudo, as divs, os códigos, porém não consegui. Pode me ajudar em relação à isso?
Desde já agradeço.
Que efeito massa Bruno! Já apliquei ao meu projeto..rs Me pintou uma dúvida, não sei se é possível, mas por exemplo, fiz esse efeito num logo da minha página. Antes do efeito, era uma imagem estática, que inclusive eu usava ela como um link pra voltar pro index ou home da minha página. Aplicado esse efeito, é possível eu ainda manter esse logo, mesmo que com o efeito agora, funcionar como um link como era antes? Viajei será? hahahhaha Desde já parabéns por compartilhar conhecimentos, seus vídeos são muito bons!
Fala Guilherme, tudo certo! Então mano é totalmente possível, basta vc colocar a estrutura do efeito dentro da tag e fazer o direcionamento 😁
@@InteliogiaDev descobri o erro..rs eu estava colocando o href dentro da tag 'img', ao invés de uma tag 'a'..rs Menino novo né, criado com a vó..rs logo aprende haha, Obrigado pelos ensinamentos, seus vídeos são top demais!
Muito massa! Saberia me dar um norte, caso eu queira esse efeito só quando clicar em um link ou botão?
Nesse caso meu mano, temos q usar Javascript, vc coloca o atributo 'onclick' no link ou botão que chama uma função do Js. Aí essa função vai adicionar uma classe dinamicamente no elemento. E essa classe fará o elemento fazer o Flip😁
Brunão vamos fazer um jogo da memória com esse card ai? o que acha?
Projeto complexo, mas a ideia ta anotada kkkkk
como seria com um efeito de click, por exemplo clicar e ele vira e permanecer virado ?
É possível sim, aí teríamos que usar os eventos de "click" no Javascript e criar uma classe dinamicamente, infelizmente não ensinei nesse vídeo, mas vc pode estar dando uma olhada em outros vídeos com JS para ter uma base
será que você consegue disponibilizar o código. O meu está apenas trocando o lado da div e não consigo encontrar o erro
Fala mano, ele te disponível no meu repositório do GitHub :)
o meu esta dando o mesmo erro...
@@APPLA_ mano, coloca o código do HTML e do CSS no chatgpt que ele consegue corrigir. O meu era uma palavrinha q tava errado
Coloquem perspective: 1000px; dentro do .container
Me agradecam depois shsjsjsk