Como criar o efeito borda dinâmicas no menu com HTML e CSS

[@dpescador]

Muito bom, sou desenvolvedor de Bi e estou aprendendo a trabalhar com HTML e CSS pra futuramente aprender JS... achei muito legal esse efeito!

[@oxenburguer7279]

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!

[@jeffsilva]

parabéns.... dom de ensinar é para os iluminados. continue com seus vídeos. ajudou demais aqui.

[@InteliogiaDev]

Obrigado professor!

[@RuanSantos-qk6gz]

Mano...vc ensina muito bem! Já sei fazer isso...porém assistir por curiosidade!! Me surpreende ensina muito bem!!!!👏👏👏👏

[@InteliogiaDev]

Valeu mesmo Ruan. Tamo junto mano 👊🏾🧡

[@Neoknax]

Cara, muito bom mesmo seu vídeo. Sem enrolações e bem direto e ainda por cima explicou bem direitinho e funcionou. Top dms

[@brunosbianchi]

Cara, parabéns! tirou minha duvida rapidinho, parabéns!! todo sucesso do mundo Brunão.

[@InteliogiaDev]

Meu xará kkkkk muito obrigado irmão, fico feliz em ter te ajudado! 😁

[@anadycarvalho4925]

Minha dúvida tmb.

[@Coastony]

Ajudou demais, estava com dúvida em como implementar o código!

[@dcanhanga]

Eu amo esse canal, aprendo muito truques de CSS.

[@PROLIIMA]

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.

[@Vibes_11-]

Me ajudou muito cara tava precisando, valeu Jesus Te Ama!

[@VictorAFM13]

Muito obrigado! Vi esse efeito no site da Azzaro e quis replicar. Muito bom!!

[@fellype5006]

obrigado cara eu estava tendo dificulades em fazer isso, mas seu video me ajudou com o meu problema muito obrigado

[@AmirCadete-fx2ug]

Incrível, eu vou aplicar também no meu site com certeza.❤🎉

[@GuilhermeRodrigues-kk9le]

Muito bom e direto ao ponto, gostei, ganhou mais um inscrito

[@WESLAOyt]

Muito didatico e explicativo, muito obrigado professor!!!

[@nildogalvino6394]

Esse canal é muito valioso parabéns pelo trabalho

[@KlosbanR]

Show de mais! Obrigado por compartilhar! 👍

[@gabmiski]

parabens pelo video, bem rapido e funciona mt bem! tava precisando

[@julianjogos]

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 ?

[@HAWK-is7ee]

top meu amigo, tem um tempo q tava querendo aprender esse truque

[@danivelardi8835]

Maravilha, muito obrigada pelo conteúdo incrível!!!

[@jairdhyego7544]

show man, vou usar em meus projetos

[@EVALDOSDIAS]

Sensacional 🎉... Vou maratonar.

[@caiombm9553]

Muito massa, valeu pelo vídeo!

[@anadycarvalho4925]

Obrigada. Fácil e Prático. Ótima didática.

[@lukassauro]

Vou salvar pra usar com certeza!!

[@ardillessantos]

top demais cara!!! VALEW!!!

[@genildocs]

muito top mano. obg pela dica.

[@fabioverlaine7274]

Show de bola < > 🤜🤛

[@mestrow]

mano, muito obrigado mesmo! Só uma dúvida, como faço pra diminuir o tamanho vazio entre a palavra e essa linha animada?

[@InteliogiaDev]

Mano, vc pode diminuir a quantidade do top q mostro no vídeo quando crio a linha :)

[@ianabrigido6520]

Boa Noite!!! Seria possível vocême orientar a fazer um player no meu site de mp3? Desde ja agradeço

[@brunocriafe]

Parabéns mano, ajudou demais. +1 inscrito

[@michelzinhogeocafbatera8215]

Obrigado ajudou muito Deus te abençoe sempre em nome de Jesus abração

[@AndreOlive]

Obrigado por compartilhar seu conhecimento ❤

[@yurimaluf]

Excelente explicação, parabéns!!!!

[@InteliogiaDev]

Obrigado mano! Tmj 👊❤️

[@shirakotakamoda1862]

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

[@humbertoaraujo5511]

ficou incrivel, muito obrigado

[@icaro294]

show cara deu certo aqui !!!!

[@1lorenzin]

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?

[@genivaldolima608]

obrigado cara foi muito útil

[@DevSttrong]

mano. quando clicar nele eu quero que ele fica marcado, como eu faço isso ?

[@ronilucas8788]

faz mais assim show de bola

[@InteliogiaDev]

Pode deixar mano! Se inscreve aí pra não perder quando sair mais vídeos

[@kira_San]

caramba que simples, muito bom

[@ricardoraphael1135]

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 😢

[@InteliogiaDev]

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

[@ricardoraphael1135]

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.

[@stopbeer.8060]

obrigado tive o mesmo problema,kkkkk@@ricardoraphael1135

[@ThiagooSilvadev]

Ameeeei

[@InteliogiaDev]

🤭😁

[@NinjaRankGo]

eu fiz as palavras menores, e as barras estão muito em baixo como posso deixa-las mais perto das palavras?

[@InteliogiaDev]

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 😉

[@FariaPalanga]

Pretendo criar um sit, m as os é a minha primeira vez, podes me ajudar?

[@Lsantos021-z1x]

Qual é propriedade que n aplica efeito pto último item msm? Nth-clild ...?

[@InteliogiaDev]

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) 🙂

[@luqitashehe]

cara, incrivel, vlw dms!!

[@ElidianneFerreira]

Tu é foda!

[@murillomatos]

Css é brabo demais.

[@jhonjhon9205]

simplismente D+

[@felipeoliveira8307]

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.

[@InteliogiaDev]

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.🙂

[@mariasabrinasantos897]

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.

[@markeyverson]

Eu estava com esse problema também, dei uma olhadinha e era um espaço entre hover e after hover ::after hover::after

[@kelvinymickael5855]

Vlw!! Ajudou dms!!!

[@leoaarruda]

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

[@InteliogiaDev]

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

[@GuilhermeCim]

Obgd mn Ajudou mt

[@natanielbarreto3212]

Como fazer pra essa animação partir do centro para as pontas?

[@InteliogiaDev]

Mano, nesse estilo que explico no vídeo n tem como não. Tem que fazer de outra forma

[@jairdhyego7544]

daria pra criar esse efeito utilizando um "border bottom" em vez do pseudo elemento "after" pra criar a borda dinâmica?

[@InteliogiaDev]

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)

[@InteliogiaDev]

Framework pode facilitar muito o processo, precisa ver se tem algum que ofereça essa funcionalidade 🙂

[@elielgato7]

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"

[@edsonhorta2732]

canal maravilhoso

[@lucianocardoso568]

meu 'nav a:hover ::after' não funciona. Alguem consegue me ajudar??? Tá exatamente igual ao vídeo... 😫

[@carlosestevaobezerra2606]

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 { }

[@mayzkT]

Só funciona em links?

[@akose-gabriel]

muito top

[@eduardogomes579]

Muito bom!

[@brunomonegatto3628]

E se eu quiser colocar essa borda em um botão, tem como ?

[@mayzkT]

Tbm quero saber kkkk

[@edsonhh]

Mto bom! eu estava tentando fazer com keyframes.. transforms.. um montao de coisa e nao funcionava kkkkkkkkkk

[@InteliogiaDev]

kkkkkkkkkk a gente tenta até conseguir, é errando que se aprende

[@abioliver2250]

parabéns

[@maurosouza9490]

Não funcionou

[@RafaelSilva-lt7tu]

Faz esse vídeo de novo,com a logo no canto, e com a href

[@viniciuslorenzetti3693]

O meu não funcionou

[@senpai-san1172]

A minha animação está no chão'-'

[@InteliogiaDev]

Recomendo vê o q vc errou no código, tenta comparar o código do vídeo com o seu 😉