Konik gradyanlar, bu güzel kenarlık örneği gibi bazı ilginç efektler oluşturmak için kullanılabilir.
İlk olarak Twitter'da bu tweet ile paylaşılan Adam Argyle tarafından oluşturulan bu CodePen, kenarlık oluşturmak için konik renk geçişinin nasıl kullanılacağını göstermektedir.
.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 yaratıcı bir şekilde çatallandırdı Adam'ın codepen'ini oluşturdu ve bu CodePen'i oluşturdu. Farenizi öğenin üzerine getirdiğinizde, döndürme açısını kaydeden bir CSS özel özelliğini güncelleyen bir miktar JavaScript sayesinde gradyan değişikliğini görürsünüz.
Bu örneklerde border-image-source özelliği kullanılmaktadır. Bu özellik, bir öğenin kenarlığını oluşturmak için kullanılan kaynak resmi ayarlar. Resim değerini kabul eden diğer mülklerde olduğu gibi tüm CSS gradyan türleri de geçerlidir.
border-image-source
Konik gradyan