Bordas estilizadas com efeito hover e fundo transparente em CSS

Curso gratuito de programação WEB
↪discover.maykbrito.dev
Neste vídeo educativo, você aprenderá como criar efeitos de borda degradê com fundo transparente utilizando CSS. O tutorial aborda desde os conceitos básicos até técnicas avançadas para implementar bordas estilizadas em seus projetos web. Você descobrirá como aplicar gradientes nas bordas, ajustar efeitos hover para interações dinâmicas, e resolver desafios comuns ao trabalhar com bordas arredondadas. Este conteúdo é ideal para desenvolvedores iniciantes e intermediários que desejam aprimorar suas habilidades de design web com CSS de forma prática e eficaz.
- [00:00]( • Bordas estilizadas com... ) 🎨 Para criar um efeito de borda transparente com gradientes, é necessário usar border-image em vez de `border-radius`.
- [00:28]( • Bordas estilizadas com... ) 🛠️ Ao aplicar gradientes nas bordas com efeitos de hover, é desafiador ajustar o efeito conforme as especificações desejadas.
- [01:50]( • Bordas estilizadas com... ) 🖌️ O desafio inclui criar bordas degradê com fundo transparente, destacando a complexidade de ajustar os efeitos de hover.
- [02:33]( • Bordas estilizadas com... ) 🏆 Reconhecimento aos participantes que conseguiram implementar corretamente o efeito desejado de borda degradê com fundo transparente.
- [03:27]( • Bordas estilizadas com... ) 🎉 Celebração do vencedor que conseguiu criar o efeito desafiador de borda degradê com fundo transparente.
Mais conteúdo?
↪ maykbrito.dev

[@MordyDeep]

.button {
position: relative;
padding: 1rem;
overflow: hidden;
text-align: center;
min-width: 7rem;
width: fit-content;
background: transparent;
border-radius: .7rem;
border: none;
text-decoration: none;
color: #fff;
cursor: pointer;
}
.button:hover {
color: transparent;
background: linear-gradient(to right, #eccb23, #ec1f1f);
background-clip: text;
/* suporte */
-webkit-background-clip: text;
}
/* BORDER GRADIENT */
.button::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
top: 0;
left: 0;
padding: .19rem;
background: #fff;
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#ff1 0 0);
mask-composite: exclude;
/* suporte */
-webkit-mask-composite: destination-out;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#ff1 0 0);
-webkit-mask-composite: destination-out;
}
.button:hover::before {
background: linear-gradient(to right, #eccb23, #ec1f1f);
}

[@maykbrito]

Melhor comentário! Vou até pinar 💛

[@toshyroyamata4197]

eu estava nessa live, Melhor professor do mundo "Mayk Brito"

[@matheusmoreira08]

Foi muito bom participar dessa live kkkkk

[@douglascarloscamargo2749]

F thumbnail, matt o menino subestimado

[@SamuelSousa-ku4ng]

onde é suas lives?

[@maykbrito]

@@SamuelSousa-ku4ng aqui no CZcams toda segunda e quinta às 10:01

[@Gabriel-kz2ws]

Eu nao consegui entender como foi feito, se alguem puder me fornecer o codigo eu agradeço pra eu dar uma estudada

[@maykbrito]

Pinnei o comentário de um colega que colocou o código!

[@eduardooliveira5620]

O CZcams está te sabotando, dei like foi para 1 depois voltou para 0.

[@Shandler_Dev]

Ate agr em 0

[@carolinateixeira222]

Aconteceu o mesmo aqui 🥲

[@maykbrito]

@@eduardooliveira5620 😔