[Bordas] Animada loop
[Bordas] Animada loop Você vai criar a seguinte estrutura, uma sessão para os cards (nessa sessão defina a Classe CSS: card) e dentro dela crie o seu Card com a Classe CSS: media-object) Configure o Container Card com uma altura Mínima (Exemplo usei 350px) Aplique o Código CSS no Container do Card Código CSS Copiar Código .card { isolation: isolate; } .media-object { –border-width: 2px; /* Variável para largura da borda */ –radius: 24px; /* Variável para raio da borda */ position: relative; border-radius: var(–radius); border: var(–border-width) solid transparent; width: 500px; /* Largura do objeto */ height: 200px; /* Altura do objeto */ } .media-object::before { content: ” “; position: absolute; inset: calc(var(–border-width) * -1); border: inherit; border-radius: inherit; background-image: conic-gradient(from var(–angle), #696969 80%, #45FF67 88%, #45FF67 92%, #696969 100%); /* Gradiente cônico */ background-origin: border-box; -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black); mask: linear-gradient(black, black), linear-gradient(black, black); -webkit-mask-clip: content-box, border-box; mask-clip: content-box, border-box; -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 3s linear infinite; /* Animação giratória */ } .media-object:hover::before { animation-play-state: paused; /* Pausa a animação ao passar o mouse */ } @property –angle { syntax: ““; inherits: true; initial-value: 0turn; } @keyframes spin { to { –angle: 1turn; /* Animação para girar o gradiente */ } }
[Bordas] Cima Descendo
[Bordas] Cima Descendo Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector { z-index: 1; /* Nível base */ } selector:before { content: “”; position: absolute; z-index: 10; /* Acima do conteúdo */ border-radius: 20px; /* Cantos arredondados */ margin: 0px; margin-top: 0px; pointer-events: none; /* Não interage */ top: 0; left: 0; right: 0; bottom: 0; padding: 4px; /* Espaçamento da borda */ background: linear-gradient(to bottom, #00FF73, transparent); /* Gradiente verde vibrante */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Máscara WebKit */ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Máscara padrão */ -webkit-mask-composite: xor; /* Recorte WebKit */ mask-composite: exclude; /* Recorte padrão */ }
[Bordas] Cantos + Arredondamento
[Bordas] Cantos + Arredondamento Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector { z-index: 1; /* Nível do seletor */ } selector:before { content: “”; position: absolute; z-index: 10; /* Z-index acima */ border-radius: 20px; /* Cantos arredondados */ margin: 0px; margin-top: 0px; pointer-events: none; /* Ignorar cliques */ top: 0; left: 0; right: 0; bottom: 0; padding: 4px; /* Largura da borda */ background: linear-gradient(-35deg, #00FF73, transparent, transparent, #5DFAA4); /* Gradiente de luz verde */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Máscara WebKit */ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Máscara padrão */ -webkit-mask-composite: xor; /* Efeito de recorte */ mask-composite: exclude; /* Efeito de recorte */ }
[Bordas] Cima Degrade
[Bordas] Cima Degrade Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector { background: #090909; /* Fundo escuro */ border-radius: 20px; border-top: 3px solid; /* Largura da borda superior */ border-image: linear-gradient(to right, transparent, #5DFAA4, transparent) 1; /* Gradiente verde claro */ }
[Bordas] Degrade + Arredondamento
[Bordas] Degrade + Arredondamento Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector{ border-radius: 20px; /* Borda curva do elemento */ position: relative; z-index: 5; /* Z-index principal */ } selector::before{ content: “”; background: linear-gradient(to right, #00FF73, #5DFAA4); /* Gradiente de borda verde */ position: absolute; border-radius: inherit; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -3; /* Camada mais baixa */ width: calc(100% + 4px); /* Largura aumentada */ height: calc(100% + 4px); /* Altura aumentada */ } selector::after{ content: “”; background: #090909; /* Fundo escuro */ border-radius: inherit; z-index: -2; /* Camada intermediária */ width: 100%; height: 100%; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; }
[Bordas] Baixo Subindo
[Bordas] Baixo Subindo Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector::after { content: “”; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #090909; /* Cor principal escura */ z-index: 1; border-radius: 8px; /* Borda curva */ } selector::before{ content: “”; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 2px); /* Largura externa */ height: calc(100% + 2px); /* Altura externa */ background: linear-gradient(to top, #5DFAA4 15%, transparent 100%); /* Gradiente verde claro */ z-index: 0; border-radius: 8px; /* Borda curva */ } selector *{ z-index: 9; /* Conteúdo acima */ }
[Bordas] Cima + Baixo Degrade
[Bordas] Cima + Baixo Degrade Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector { border: 2px solid transparent; /* borda inicial transparente */ border-image: linear-gradient( to right, transparent, #5DFAA4 10%, /* verde claro */ #4FE28F 30%, /* verde médio */ #3DC777 50%, /* verde mais forte */ #28A95F 70%, /* verde escuro */ #5DFAA4 90%, /* volta ao verde claro */ transparent ) 1; /* gradiente aplicado na borda */ border-radius: 10px !important; /* cantos arredondados */ background: linear-gradient( 97deg, rgba(255, 255, 255, 0.12) -1.67%, rgba(255, 255, 255, 0.08) 113.81% ); /* fundo translúcido suave */ box-shadow: 0px 4px 24px -1px rgba(0, 0, 0, 0.20); /* sombra externa */ backdrop-filter: blur(20px); /* desfoque interno */ }