CSS kenarlık animasyonları

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

Bramus

Kenarlıkları ayarlama

Bir öğeye kenar çizgisi ayarlamak 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. Uygun bir CSS border kullanılmamasının ana nedeni animasyon amaçlarıdır.

Yakın zamanda dikkatimi çeken bir makale, yazar Coco'nun 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.

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

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. Riski azaltmak için, istenen border-width öğesini padding olarak 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 kenarlık oluşturarak ve birden çok 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ırılıyor

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. Arka planı genişletip yeniden konumlandırarak bunu manuel olarak yapabilirsiniz, ancak arka planı border-box değerine göre boyutlandırmak için background-origin özelliğini kullanmanız önerilir.

/* 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%);

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.

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 etki için kenarlığı transparent yapı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:

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

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

Hepsi birleştirildiğinde kod şu hale gelir:

Bonus İçerik: border-image

Gradyan sınırı çizmeye yönelik daha önce ele alınmış bir yaklaşım da CSS border-image kullanmaktır.

Çakışan arka planlarla uğraşmanıza gerek olmadığından kodu daha basit hale getirir. Animasyon önceki gibi 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 alanı dolduracak şekilde ayarlandığında, border-image öğesi background grubunun altına değil, üstüne boyanmış. 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.