Usar gradientes cónicos para crear un borde frío
bookmark_borderbookmark
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Los gradientes cónicos se pueden usar para crear algunos efectos interesantes, como este bonito ejemplo de borde.
En este CodePen creado por Adam Argyle, que se compartió originalmente a través de este tweet en Twitter, se muestra cómo usar un gradiente cónico para crear un borde.
.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 creó una bifurcación creativa del codepen de Adam y creó este CodePen. Coloca el mouse sobre el elemento y verás que cambia el gradiente, gracias a un poco de JavaScript que actualiza una propiedad personalizada de CSS que almacena el ángulo de rotación.
En estos ejemplos, se usa la propiedad border-image-source
. Esta propiedad establece la imagen de origen que se usa para crear el borde de un elemento. Al igual que con otras propiedades que aceptan un valor de imagen, cualquier tipo de gradiente de CSS también es válido.
border-image-source
Navegadores compatibles
Origen
Gradiente cónico
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2022-05-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2022-05-27 (UTC)"],[],[]]