Havalı bir kenarlık oluşturmak için konik gradyanlar kullanın

Konik degradeler, bu güzel kenarlık örneği gibi bazı ilginç efektler oluşturmak için kullanılabilir.

Adam Argyle tarafından oluşturulan ve ilk olarak Twitter'daki bu tweet üzerinden paylaşılan bu CodePen'de, kenar oluşturmak için konik degrade'nin nasıl kullanılacağı gösterilmektedir.

.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, Adam'ın CodePen'ini çatallayarak bu CodePen'i yarattı. Farenizi öğenin üzerine getirdiğinizde, dönme açısını depolayan bir CSS özel mülkünü güncelleyen küçük bir JavaScript sayesinde gradyanın değiştiğini görürsünüz.

Bu örneklerde border-image-source özelliği kullanılmaktadır. Bu mülk, bir öğenin kenarlığını oluşturmak için kullanılan kaynak resmi ayarlar. Resim değeri kabul eden diğer özelliklerde olduğu gibi, tüm CSS degrade türleri de geçerlidir.

border-image-source

Browser Support

  • Chrome: 15.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 6.

Source

Konik gradyan