Utilizei no meu site e ficou incrível! Só que eu precisei fazer um pequeno ajuste, pois eu queria que essa estilização fosse aplicada somente aos 3 primeiros links, excetando-se os demais. Então precisei utilizar o pseudo-elemente: :nth-child(-n+3) para aplicá-lo somente aos 3 primeiros. Só uma pitada a mais de criatividade. rs Obrigado! Já vou me inscrever no canal!
Muito bom e muito obrigado. Continue com vídeos assim, bem detalhados e muito explicativos. É com esse tipo de vídeo que me animo cada dia mais a aprender.
Estou acompanhando seu canal. Muito bom! Mas poderia aplicar nos códigos um modo onde quem é iniciante tenha um entendimento mais claro e objetivo ... porque voce nao colocou um header e uma div para deixar bem organizado ?
otimo video! só queria tirar uma dúvida, não estou conseguindo acessar os botões com ícones, não sei se por que, ja coloquei links, mas n vai, poderia ajudar?
Mano, eu cheguei a testar desse jeito. Mas foi bem complicado e mesmo assim não obtive o resultado que queria kkkkkkk essa é a forma mais fácil (se não considerarmos os frameworks)
Show, estava justamente procurando por algo assim, mas eu queria também sabem se tem como deixar a linha a baixo quando mudar para a página selecionada, isso sem JS claro. \o
Irmão, sem javascript vc pode criar uma classe personalizada, tipo "ativo", e vc adiciona essa classe conforme vai mudando a página, exemplo Na página home você o link "home" com a classe "ativo" na página sobre vc deixa o link "sobre" com a classe "ativo" e assim vai kkkkk
Fala mano, blz? Nota que no minuto 3:00 eu substituí o 'top' por 'bottom', nesse caso, basta vc aumentar o valor do bottom. Exemplo: bottom: 20px; Aí vc coloca o que ficar melhor no seu projeto. Abraços 😉
Tem esses mano: :nth-of-type( ) :nth-child( ) dentro dos parênteses vc coloca o número do item que vc quer alterar. Tipo, se for o segundo é nth-of-type(2) 🙂
Tentei implementar isso no site que estou desenvolvendo mas não consegui colocar esse efeito que vc ensinou nesta aula, queria colocar em conjunto com o hover pra mudar a cor das letras mas mesmo assim não consegui, o traço em baixo das letras só aparece com 100% quando deixo 0 e sigo codando em seguida no final não fica igual e sinplemente ele não cresce de 0 a 100% fica como se não tivesse traço nenhum, infelizmente não consegui fazer 😢
Fala Ricardo, talvez vc tenha esquecido da propriedade 'transition' ela que é responsável por adicionar uma transição e deixar a animação mais suave. Confere depois seu código com o código do vídeo
Oi professor tudo bem? Deu certo aqui, eu tinha colocado um espaço entre o nav a:hover e o after ficando nav a:hover ::after por isso que não tinha dado certo, agradeço pelo vídeo e gostei muito deste efeito no meu site que estou desenvolvendo 😊, muito obrigado professor.
Para quem quiser fazem com TailwindCss: className="text-gray-200 hover:text-gray-400 after:w-0 hover:after:w-full after:duration-500 after:ease-in-out after:block after:h-1 after:bg-gray-400"
Olá bom dia, estou iniciando em front-end. porém, estou fazendo um portifólio simples com CSS e HTML, usei esse efeito em cima do meu projeto e nada. quando eu coloco no projeto como se fosse a classe " nav a: : after "com o width de 100% ele aparecea lesta em baixo, mas quando eu coloco 0% ele some e não faz o efeito de crescimento.
Fala mano! Isso é muito comum quando algo envolve código. As vezes esquecemos um detalhe bobo. O que posso sugerir é você rever a parte específica no vídeo em que fiz o código que deu errado com vc, aí vc compara e vê se está 100% igual.🙂
olá! eu tb não tava conseguindo pq realmente igual o professor falou não tava igual rs eu estava colocando "nav a:hover a::after{ width:100%}" sendo que é "nav a:hover::after{width:100%}" veja se é seu erro tb.
Muito bom, sou desenvolvedor de Bi e estou aprendendo a trabalhar com HTML e CSS pra futuramente aprender JS... achei muito legal esse efeito!
Cara, parabéns! tirou minha duvida rapidinho, parabéns!! todo sucesso do mundo Brunão.
Meu xará kkkkk muito obrigado irmão, fico feliz em ter te ajudado! 😁
Minha dúvida tmb.
parabéns.... dom de ensinar é para os iluminados. continue com seus vídeos. ajudou demais aqui.
Obrigado professor!
Mano...vc ensina muito bem! Já sei fazer isso...porém assistir por curiosidade!!
Me surpreende ensina muito bem!!!!👏👏👏👏
Valeu mesmo Ruan. Tamo junto mano 👊🏾🧡
Eu amo esse canal, aprendo muito truques de CSS.
Ajudou demais, estava com dúvida em como implementar o código!
Utilizei no meu site e ficou incrível! Só que eu precisei fazer um pequeno ajuste, pois eu queria que essa estilização fosse aplicada somente aos 3 primeiros links, excetando-se os demais. Então precisei utilizar o pseudo-elemente: :nth-child(-n+3) para aplicá-lo somente aos 3 primeiros. Só uma pitada a mais de criatividade. rs
Obrigado! Já vou me inscrever no canal!
Muito bom e muito obrigado. Continue com vídeos assim, bem detalhados e muito explicativos. É com esse tipo de vídeo que me animo cada dia mais a aprender.
Cara, muito bom mesmo seu vídeo. Sem enrolações e bem direto e ainda por cima explicou bem direitinho e funcionou. Top dms
parabens pelo video, bem rapido e funciona mt bem! tava precisando
Muito bom e direto ao ponto, gostei, ganhou mais um inscrito
Esse canal é muito valioso parabéns pelo trabalho
Muito didatico e explicativo, muito obrigado professor!!!
Show de mais! Obrigado por compartilhar! 👍
Muito obrigado! Vi esse efeito no site da Azzaro e quis replicar. Muito bom!!
obrigado cara eu estava tendo dificulades em fazer isso, mas seu video me ajudou com o meu problema muito obrigado
Obrigada. Fácil e Prático. Ótima didática.
Sensacional 🎉... Vou maratonar.
Maravilha, muito obrigada pelo conteúdo incrível!!!
Incrível, eu vou aplicar também no meu site com certeza.❤🎉
muito top mano. obg pela dica.
top meu amigo, tem um tempo q tava querendo aprender esse truque
obrigado cara foi muito útil
show man, vou usar em meus projetos
Muito massa, valeu pelo vídeo!
Me ajudou muito cara tava precisando, valeu Jesus Te Ama!
Parabéns mano, ajudou demais. +1 inscrito
Vou salvar pra usar com certeza!!
ficou incrivel, muito obrigado
top demais cara!!! VALEW!!!
Obrigado por compartilhar seu conhecimento ❤
cara, incrivel, vlw dms!!
Show de bola < > 🤜🤛
caramba que simples, muito bom
Obrigado ajudou muito Deus te abençoe sempre em nome de Jesus abração
show cara deu certo aqui !!!!
Vlw!! Ajudou dms!!!
Obgd mn
Ajudou mt
Estou acompanhando seu canal. Muito bom! Mas poderia aplicar nos códigos um modo onde quem é iniciante tenha um entendimento mais claro e objetivo ... porque voce nao colocou um header e uma div para deixar bem organizado ?
faz mais assim
show de bola
Pode deixar mano! Se inscreve aí pra não perder quando sair mais vídeos
Css é brabo demais.
simplismente D+
mano, muito obrigado mesmo! Só uma dúvida, como faço pra diminuir o tamanho vazio entre a palavra e essa linha animada?
Mano, vc pode diminuir a quantidade do top q mostro no vídeo quando crio a linha :)
Ameeeei
🤭😁
Tu é foda!
canal maravilhoso
otimo video! só queria tirar uma dúvida, não estou conseguindo acessar os botões com ícones, não sei se por que, ja coloquei links, mas n vai, poderia ajudar?
Boa Noite!!!
Seria possível vocême orientar a fazer um player no meu site de mp3?
Desde ja agradeço
daria pra criar esse efeito utilizando um "border bottom" em vez do pseudo elemento "after" pra criar a borda dinâmica?
Mano, eu cheguei a testar desse jeito. Mas foi bem complicado e mesmo assim não obtive o resultado que queria kkkkkkk essa é a forma mais fácil (se não considerarmos os frameworks)
Framework pode facilitar muito o processo, precisa ver se tem algum que ofereça essa funcionalidade 🙂
eu tive um problema no meu, não sei por que mais o efeito não funcionou no meu codigo to achando estranho ate agora nem aparece fixo la as bordas
Pretendo criar um sit, m as os é a minha primeira vez, podes me ajudar?
parabéns
Muito bom!
muito top
Show, estava justamente procurando por algo assim, mas eu queria também sabem se tem como deixar a linha a baixo quando mudar para a página selecionada, isso sem JS claro. \o
Irmão, sem javascript vc pode criar uma classe personalizada, tipo "ativo", e vc adiciona essa classe conforme vai mudando a página, exemplo
Na página home você o link "home" com a classe "ativo"
na página sobre vc deixa o link "sobre" com a classe "ativo"
e assim vai kkkkk
mano. quando clicar nele eu quero que ele fica marcado, como eu faço isso ?
eu fiz as palavras menores, e as barras estão muito em baixo como posso deixa-las mais perto das palavras?
Fala mano, blz? Nota que no minuto 3:00 eu substituí o 'top' por 'bottom', nesse caso, basta vc aumentar o valor do bottom. Exemplo:
bottom: 20px;
Aí vc coloca o que ficar melhor no seu projeto. Abraços 😉
Qual é propriedade que n aplica efeito pto último item msm? Nth-clild ...?
Tem esses mano:
:nth-of-type( )
:nth-child( )
dentro dos parênteses vc coloca o número do item que vc quer alterar. Tipo, se for o segundo é nth-of-type(2) 🙂
Tentei implementar isso no site que estou desenvolvendo mas não consegui colocar esse efeito que vc ensinou nesta aula, queria colocar em conjunto com o hover pra mudar a cor das letras mas mesmo assim não consegui, o traço em baixo das letras só aparece com 100% quando deixo 0 e sigo codando em seguida no final não fica igual e sinplemente ele não cresce de 0 a 100% fica como se não tivesse traço nenhum, infelizmente não consegui fazer 😢
Fala Ricardo, talvez vc tenha esquecido da propriedade 'transition' ela que é responsável por adicionar uma transição e deixar a animação mais suave. Confere depois seu código com o código do vídeo
Oi professor tudo bem?
Deu certo aqui, eu tinha colocado um espaço entre o nav a:hover e o after ficando nav a:hover ::after por isso que não tinha dado certo, agradeço pelo vídeo e gostei muito deste efeito no meu site que estou desenvolvendo 😊, muito obrigado professor.
obrigado tive o mesmo problema,kkkkk@@ricardoraphael1135
Só funciona em links?
Como fazer pra essa animação partir do centro para as pontas?
Mano, nesse estilo que explico no vídeo n tem como não. Tem que fazer de outra forma
Mto bom! eu estava tentando fazer com keyframes.. transforms.. um montao de coisa e nao funcionava kkkkkkkkkk
kkkkkkkkkk a gente tenta até conseguir, é errando que se aprende
Para quem quiser fazem com TailwindCss: className="text-gray-200 hover:text-gray-400 after:w-0 hover:after:w-full after:duration-500 after:ease-in-out after:block after:h-1 after:bg-gray-400"
Olá bom dia, estou iniciando em front-end. porém, estou fazendo um portifólio simples com CSS e HTML, usei esse efeito em cima do meu projeto e nada. quando eu coloco no projeto como se fosse a classe " nav a: : after "com o width de 100% ele aparecea lesta em baixo, mas quando eu coloco 0% ele some e não faz o efeito de crescimento.
Fala mano! Isso é muito comum quando algo envolve código. As vezes esquecemos um detalhe bobo. O que posso sugerir é você rever a parte específica no vídeo em que fiz o código que deu errado com vc, aí vc compara e vê se está 100% igual.🙂
olá! eu tb não tava conseguindo pq realmente igual o professor falou não tava igual rs eu estava colocando "nav a:hover a::after{ width:100%}" sendo que é "nav a:hover::after{width:100%}" veja se é seu erro tb.
Eu estava com esse problema também, dei uma olhadinha e era um espaço entre hover e after
hover ::after
hover::after
Faz esse vídeo de novo,com a logo no canto, e com a href
E se eu quiser colocar essa borda em um botão, tem como ?
Tbm quero saber kkkk
meu 'nav a:hover ::after' não funciona. Alguem consegue me ajudar??? Tá exatamente igual ao vídeo... 😫
no meu também deu isso, é só tirar o espaço entre os dois pontos antes do after e o hover no css, ficaria assim o código nav a:hover::after { }
Não funcionou
A minha animação está no chão'-'
Recomendo vê o q vc errou no código, tenta comparar o código do vídeo com o seu 😉
O meu não funcionou