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

Konik degradeler, bu güzel kenarlık örneği gibi 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 getirin. Döndürme açısını depolayan bir CSS özel mülkünü güncelleyen küçük bir JavaScript sayesinde gradyanın değiştiğini göreceksiniz.

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

Tarayıcı desteği

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

Kaynak

Konik gradyan