Como criar um degradê (gradiente) animado - Tutorial HTML e CSS
ฝัง
- เผยแพร่เมื่อ 9 ก.พ. 2025
- ✅ Quer ter acesso a projetos exclusivos que vão agregar ainda mais na sua carreira? Torne-se membro do Inteliogia:
bit.ly/program...
Criar elementos animados usando apenas HTML e CSS é mais fácil do que você pensa. Nesse vídeo eu te ensino como criar um degradê (ou gradiente) animado e que causa um efeito ultra estiloso... se você souber usar com moderação.
👀 ME SEGUE LÁ:
📸 Instagram: @rbruno.exe
✔ O QUE É UM KEYFRAME:
Como o próprio termo em inglês diz, ele é um quadro-chave, ou seja, uma imagem estática que marca um ponto dentro de um vídeo. Ele é utilizado para demarcar a primeira e a última imagem de uma sequência simples de movimento dentro de uma animação.
mano do céu.... eu sou professor e sempre reconheço quando encontro outro: você é por natureza professor. Tem carisma, tem firmeza e é uma pessoa maravilhosa ensinando. obrigado por postar. sucesso em 2023
Oh loko professor kkkkkkkkk sério muito muto obrigado!!! Fiquei até sem palavras kkkkkk obrigadão mesmo. Sucesso para o senhor também
Excelente vídeo !!! Estou retomando os meus estudos de HTML e CSS e esse canal está me ajudando bastante.
Cara muito bom velho. Meus parabéns 👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾
Estou quebrando a cabeça para fazer uma barra de cabeçalho, e estou querendo deixar em gradiente. Esse vídeo me deu um pouco de noção do que eu tenho que fazer, já que estou começando a aprender. Muito obrigado, mano. 🙏🏾🙏🏾🙏🏾🙏🏾🙏🏾🙏🏾👏🏾👏🏾👏🏾👏🏾👏🏾
Fala Peterson! Ainda bem q consegui te ajudar kkkkk fazer gradiente é simples, basta aplicar o que passei nesse vídeo no header do site
@@InteliogiaDev kkkk, valeu. Já estou pondo em pratica rs. Como eu falei, estou começando agora, então tenho muito a aprender.
Vou me escrever no seu canal, tem coisas legas que podem ajudar bastante.
MUITO BACANA!!!!!!!
Não sei se ainda esta fazendo videos, mas ganhou mais um inscrito com essa aula... estou fazendo curso de fullstack e ainda não tinha visto essa estilização, vlw demais e tmj.
Muito bom. Simples e prático. Parabéns !!!
Caramba mano seus videos são muito bons, muito obrigado mesmo
Apartir de hoje maratonando seu canal do primeiro video (ja vi o anterior a esse kk)
Seus vídeos são ótimo! Continue, pois, eu estou gostando de acompanha o conteudo
Muito brabo meu querido.
mano sério vc salvou minha vida, te amo.
kkkkkkk vlw mano, tbm amo vc kkkk
Eu adorei, amigo!!! Vou colocar no meu portfólio
Aí sim, fico feliz em saber q te ajudei 👊🏾 TMJ
VOCE É O CABULOSO RAPA, O BRABOOOOOOOO
Chave. muito bom mesmo. Já estou tentando utilizar nas minhas páginas
amassou se é brabo
Muito bom irmão! Parabéns pelo conteúdo!
muito bom mesmo👍boa didatica.
Muito massa!
Video top, obrigado!!!
Seus vídeos são excelentes!
Muito obrigado mano😃
Ola bom dia, quando vou ver a minha live server, não atualiza de jeito nenhum, o gradiente não aparece, só a div. o que fazer
Traz mais videos com conteudo de animaçoes em html css e talvez javascript
Muito bom
Poderia disponibilizar de alguma forma o código..
oi como salva um arquivo o meu ta em ingles
Mano como eu faço pra fazer um botão animado? Tipo como se o botão estivesse vazio e depois preenchido pela uma cor
Fala mano, tudo bem? É simples. Vc pode deixar o botão originalmente com a propriedade
background-color: transparent
mas pra ficar visível vc coloca tbm
Border: 1px solid #alguma_cor
Ai para preencher basta usar a propriedade:hover com alguma cor no background-color. Exemplo:
botão:hover{
Background-color: blue
}
meu não vai só fica no degrade posso usar no body? direto?
Olha se você fez o código corretamente como está no vídeo. Muitas vezes pode ser um detalhe que a gente esquece kkkkk
fiz do mesmo jeitinho do video e naum pegou
To tentando fazer o fundo do meu body com esse degradê, segui a mesma linha que vc e não consegui...
Só consigo mudar o fundo quando uso 'background-color', de resto, nenhuma funciona
tbm n estou conseguindo :(
fussando nas animacoes eu consegui fazer uma animação para a sombra do texto (text-shadow), é o seguinte:
h1 /*se o seu texto está em outra tag, ex: ou voce muda a tag aqui.*/{
animation: degrade 5s infinite alternate;/*defini qual animação este elemento terá.*/
}
/*No text-shadow, o primeiro parâmetro defini o quanto a sombra vai para a esquerda ou direita, o segundo parâmetro define o quanto a sombra vai para cima ou para baixo, e o terceiro parâmetro define o quanto a sombra vai se espalhar, e por fim você define a cor da sombra*/
@keyframes degrade {
0% /*Início da animação*/ {
text-shadow: 4px 4px 4px blue;/* A animação começa com a cor azul */
}
50% /*Meio da animação*/ {
text-shadow: 4px 4px 4px orangered;/* meio da animação com a cor orangered */
}
100% /*Final da animação*/ {
text-shadow: 4px 4px 4px yellow; /* Fim da animação com yellow */
}
}
Sem os comentários:
h1 {
animation: degrade 5s infinite alternate;
}
@keyframes degrade {
0% {
text-shadow: 4px 4px 4px blue;
}
50% {
text-shadow: 4px 4px 4px orangered;
}
100%{
text-shadow: 4px 4px 4px yellow;
}
}
explicação:
Primeiro: eu selecionei a tag h1(onde está meu texto) na parte do css e defini qual animação ele terá.
Segundo: criei a animação e separei os momentos dela por início (0%), meio (50%) e fim (100%).
E por fim: apenas copiei o comando que define a sombra do texto ( text-shadow ) e mudei a cor de cada um para que ficasse alternando.