Card Mágico no Elementor | Efeito Hover Degradê Animado

[@PauloReis-f1j]

Amigo por aqui deu certo, obrigado por compartilhar o seu conhecimento, mais um escrito.

[@gucampelo]

Código CSS na descrição do vídeo!! :D

[@valdinei_aparecido]

Vou me inscrever para que o canal cresça e o criador não desista e assim continuamos a ter conteúdo de ouro na internet. Parabéns além de ensinar ainda oferece o código sem ter que entrar em canal de membros, Telegram....

[@gucampelo]

Muito obrigado pelo apoio Valdinei!! Minha intenção é ajudar a rapaziada! :D

[@maurosilva-wg3jd]

Aconselho ver todos os videos do canal muito bom mesmo !!

[@gucampelo]

Poxa, muito obrigado Mauro! Fiquei muito feliz com seu comentário!! :D

[@159123dani]

Deu muito certo!! 🎉

[@RaphaelRodrigues13]

Muito topo Gustavo, ganhou mais um inscrito....parabéns pela didática.

[@gucampelo]

Muito obrigado Raphael! Fico feliz que gostou

[@idLazzaretti]

Mano, que coisa linda 👏👏👏

[@gucampelo]

Fica muito maneiro o efeito né Igor? Obrigado por assistir!!

[@ElyMarchelAraujo]

Conteúdo top! Ganhou mais um inscrito... Sucesso ao canal!

[@gucampelo]

@@ElyMarchelAraujo muito obrigado amigo! Fico muito grato 🙏🏼 🙌🏼

[@eududumelo]

Excelente conteúdo, parabéns! Existe a possibilidade de deixar a animação fixa na caixa? Sem ser somente no modo hover?

[@gucampelo]

Fala parceiro! Claro, basta tirar o :hover do seletor, que o efeito ficará sempre ativo

[@ArthurSantos-wd6bq]

Gustavo, eu coloquei o efeito dentro do contêiner e gostei.. Gostaria de saber como deixo o degradê animado fixo dentro do meu conteiner? Da pra fazer mexendo nos códigos CSS ?

[@ArthurSantos-wd6bq]

no caso o efeito está pegado toda parte interna do contêiner ao invés só da borda.. gostaria de deixar ele fixo sem aparecer só quando passar o mouse

[@gucampelo]

@@ArthurSantos-wd6bq fala amigo! Vc precisa colocar overflow hidden no container de fora, que aí ele não deixa sair nada além dele. No elementor vc vai em layout, nas configurações ali embaixo, transbordar e coloca oculto

[@papelartchannel]

sensacional

[@gucampelo]

Obrigado!! :D

[@renangomes6185]

Mano muito bom obrigado

[@gucampelo]

Valeu Renan!! :D

[@marcelolopes5780]

Fala Gustavo, chegando no canal agora, TOP D+ o conteúdo. Estou con uma pequena dificuldade aqui, quando eu coloco o código CSS ele é traduzido automaticamente. Alguma sugestão?

[@gucampelo]

Fala Marcelo! Que bom que está curtindo!! Então, tira o tradutor automático do navegador, pq se colocar o código traduzido vai dar problema mesmo kkk

[@AgencyExperience-qc1ws]

Como deixar o gradiente contínuo ?

[@gucampelo]

Olá!! Como assim continuo?

[@felipecampos5763]

eu fui usar o efeito mas o meu card quando eu duplico fica modicando o tamanho que quero pro meu card, fiz tudo passo a passo do vídeo mas não deu certo 😢

[@gucampelo]

@@felipecampos5763 eita, altera o tamanho do card? Ou do retângulo do efeito? Eu teria q ver a página para entender melhor

[@steliobrunellisiqueira3744]

Para mim ficou um retângulo sólido rodando por trás. Não pegou o efeito só na borda

[@gucampelo]

Fala amigo! Precisa deixar o container pai com overflow hidden, que é pra ocultar tudo que está saindo dele. Se o seu elemento estiver em português é o Transbordar -> Oculto

[@gustavocorrea6662]

@@gucampelo Eu fiz isso mas não resolveu

[@bernardoscaramella]

E como daria para fazer se eu quisesse deixar o efeito sempre ativo, sem a necessidade do hover?

[@gucampelo]

Fala Bernardo! Você diz o efeito do Blur e a borda roativa ativos? Basta ir cada selector do código e exlcuir o :hover

[@bernardoscaramella]

@@gucampelo Legal mano! Obrigado.

[@keila386]

Show!!!

[@gucampelo]

Obrigado por comentar Keila!!

[@bernardoscaramella]

Tenho uma outra dúvida... O código funciona somente para desktop?

[@gucampelo]

Então amigo, hover não funciona bem para mobile pq não tem como passar pelo objeto, no mobile apenas clicamos nos itens. Então o que dá para fazer é colocar esse efeito quando o elemento é clicado

[@gucampelo]

Ou quando é selecionado (utilizando :focus) acho que ficaria mais interessante pois ia dar tempo da animação acontecer

[@AgencyExperience-qc1ws]

@@gucampelo Eu não to conseguindo para mobile, aparece porém só no layout do site

[@gucampelo]

@@AgencyExperience-qc1ws talvez seja necessário duplicar o atributo css e colocar -webkit- antes, p ter ctz que vai rodar no navegador mobile, principalmente apple

[@CapelaDesigner]

Código off, padrinho :/

[@gucampelo]

fala amigo! Peço perdão, estamos fazendo algumas configurações no servidor, o site voltará hoje até a noite

[@CapelaDesigner]

@@gucampelo Boooa!