CSS kenarlık animasyonları

CSS'de kenarlık animasyonu yapmanın çeşitli yollarını inceleme

Bir öğeye kenar belirlemek için birkaç yöntem vardır: border, outline ve box-shadow. Stephanie Eckles'in Öğe Kenarları Eklemek İçin 3 CSS Yöntemi başlıklı makalesinde ayrıntılı olarak açıklandığı gibi, her yaklaşımın kendine özgü avantajları ve dezavantajları vardır. Özellikle kenarların animasyonu söz konusu olduğunda bu durum geçerlidir. Doğru CSS border kullanılmamasının başlıca nedeni animasyon amaçlıdır.

Kevin J. tarafından
outline-offset kullanan kenar animasyonlar Powell

Yakın zamanda dikkatimi çeken bir makale, Coco adlı yazarın daha fazla seçenek keşfettiği Fantastik CSS kenar animasyonu. ::before ve ::after kullanarak oluşturulan içerik eklemek suretiyle, daha sonra animasyonlu hale getirilen sahte bir kenar oluşturuyorlar.

Makalede kullanılan animasyonlu destekleyici görselleştirmeler benim için en dikkat çekici kısımdı. İstenilen etkiyi elde etmek için tam olarak ne yapıldığını açıklamaya yardımcı olurlar.

Coco tarafından oluşturulan içerikleri kullanan kenar animasyonlar

Hem beyaz katman hem de renkli çizgiler oluşturulmuş içeriktir. Beyaz katmanın görünürlüğünü azaltıp artırarak katmanların nasıl yerleştirildiğini ve animasyonun nasıl çalıştığını net bir şekilde görebilirsiniz.

Kutu modelini koruma

Kenarlık taklit etmek için oluşturulan içeriği kullanmanın dezavantajı, bozuk bir kutu modeli elde etmenizdir: Söz konusu "kenarlık" alttan boyandığı için içerik, sahte kenarı gizleyebilir. Bu sorunu azaltmak için padding olarak istediğiniz border-width değerini uygulamanız gerekir.

Gerçek bir kenarlığa sahip olmak ve böylece kutu modelinin işleyişini korumak için birden fazla arka plan kullanabilir ve bunları kenarlığa doğru uzatabilirsiniz.

Temel bilgiler

Noktalı bir kenar oluşturarak ve birden fazla arka plan ekleyerek başlayalım.

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */

background-image:
  linear-gradient
(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient
(
    from
45deg,
   
#d53e33 0deg 90deg,
   
#fbb300 90deg 180deg,
   
#377af5 180deg 270deg,
   
#399953 270deg 360deg
 
)
;

Arka planları background-origin ile boyutlandırma

Gördüğünüz gibi, arka planlarla ilgili garip bir durum var: Kenarlıklara boyanmışlar ancak conic-gradient tamamen yanlış görünüyor. Bu aslında istenen bir davranıştır: Arka plan resimleri, orijinallikleri öğenin padding-box olduğu için varsayılan olarak kenarlığa çizilmez. Sonuçta, ayarlanan arka plan resimleri kenarlığın kendisinde tekrarlanarak tuhaf bir görsel efekt oluşturur.

Bu sorunu çözmek için arka planı, kenarlığın boyutunu da kaplayacak şekilde genişletmeniz gerekir. Bunu arka planı gererek ve yeniden konumlandırarak manuel olarak yapabilirsiniz ancak en iyi yöntem, arka planı border-box'a göre boyutlandırmak için background-origin mülkünü kullanmaktır.

Tarayıcı desteği

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Kaynak

Yapılmaması gerekenler:
/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);
Yapılması gerekenler
background-origin: border-box;

Bu tek ekleme, her şeyin çok daha iyi görünmesini sağlar:

Beyaz arka plan katmanını background-clip ile küçültme

Arka planlar artık tüm alanı kapladığından yarı saydam katmanın tekrar küçültülmesi gerekir. background-size ile tekrar uğraşmak yerine bunu yapmanın daha kolay bir yolu vardır: background-clip'i kullanın ve padding-box olarak ayarlayın. Böylece arka plan artık sınırın altında çizilmez.

Tarayıcı desteği

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Kaynak

background-clip:
  padding-box
, /* Clip white semi-transparent to the padding-box */
  border-box
/* Clip colored boxes to the border-box (default) */
;

Son olarak, tam etkiyi elde etmek için kenarlığı transparent olarak ayarlayın.

border: 0.3rem dotted transparent;

Animasyon

Kenarlık animasyonunu geri yüklemek için conic-gradient öğesinin başlangıç açısını değiştirebilirsiniz.

--angle: 0deg;
conic-gradient
(
  from var
(--angle),
 
#d53e33 0deg 90deg,
 
#fbb300 90deg 180deg,
 
#377af5 180deg 270deg,
 
#399953 270deg 360deg
);

@property sayesinde bu işlem, özelliği destekleyen tarayıcılarda kolayca yapılabilir:

Tarayıcı desteği

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Kaynak

@property --angle {
 
syntax: "<angle>";
 
initial-value: 0deg;
 
inherits: false;
}

@keyframes rotate {
  to
{
   
--angle: 360deg;
 
}
}

Tüm bunlar birleştirildiğinde kod şu şekilde görünür:

Bonus İçerik: border-image

Renk geçişi kenarlık çizmek için daha önce ele alınan bir yaklaşım, CSS border-image kullanmaktır.

Tarayıcı desteği

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

Kaynak

Çakışan arka planlarla uğraşmanız gerekmediğinden daha basit kodlar oluşturabilirsiniz. Animasyon, öncekiyle aynı şekilde uygulanabilir.

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient
(
    from var
(--angle),
   
#d53e33 0deg 90deg,
   
#fbb300 90deg 180deg,
   
#377af5 180deg 270deg,
   
#399953 270deg 360deg
 
) 1
;

Ancak bu yaklaşımda artık bazı şeylerin çalışmadığını fark edeceksiniz:

  • border-image, border-radius'u takip etmez ve her zaman dikdörtgen kalır.
  • border-image-slice doldurma olarak ayarlandığında border-image, ayarlanan background'nin altına değil üstüne boyanır. Arka planın yarı şeffaf olmasını istiyorsanız bu durum can sıkıcı olabilir.

Sonuç olarak

CSS'de kenarlıkları animasyonlu hale getirmenin birçok yolu vardır. Kullanım alanına bağlı olarak ikisinden birini tercih edebilirsiniz.