Usar gradientes cônicos para criar uma borda fria
bookmark_borderbookmark
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Gradientes cônicos podem ser usados para criar alguns efeitos interessantes, como este exemplo de borda.
Este CodePen criado por Adam
Argyle, originalmente compartilhado neste
tweet no Twitter,
mostra como usar um gradiente
cônico para
criar uma borda.
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
Terry Mun criou uma
bifurcação
do codepen de Adam e criou este
CodePen. Mova o mouse sobre o
elemento e você vai notar que o gradiente muda, graças a um pouco de JavaScript
que atualiza uma propriedade personalizada do CSS que armazena o ângulo de rotação.
Estes exemplos usam a propriedade
border-image-source
. Essa propriedade define a imagem de origem usada para criar a borda
de um elemento. Assim como outras propriedades que aceitam um valor de imagem, qualquer tipo de gradiente
CSS também é válido.
border-image-source
Compatibilidade com navegadores
Origem
Gradiente cônico
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2022-05-27 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2022-05-27 UTC."],[],[]]