CSS kenarlık animasyonları

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

Bramus

Kenarlık ayarlama

Bir öğede kenarlık ayarlamak için kullanılabilecek birkaç yöntem vardır: border, outline ve box-shadow. Stephanie Eckles'ın The 3 CSS Methods for Element Borders (Öğe Kenarlıklarını Ekleme 3 CSS Yöntemi) başlıklı makalede açıklandığı gibi, her yaklaşımın kendine özgü avantajları ve dezavantajları vardır. Uygun bir CSS border kullanılmamasının temel nedeni animasyon amaçlıdır.

Kevin J.outline-offset Powell

Son zamanlarda dikkatimi çeken bir makale, yazar Coco'nun daha fazla seçeneği keşfettiği Fantastik CSS sınır animasyonu oldu. Oluşturulan içeriği ::before ve ::after kullanarak eklediğinizde, animasyonlu bir sahte kenarlık oluştururlar.

Benim için en önemli olan, makalede kullanılan destekleyici animasyonlu görselleştirmeler. İstenen etkiyi elde etmek için tam olarak ne yapıldığını açıklamaya gerçekten yardımcı olurlar.

Coco tarafından oluşturulan içeriği kullanan sınır animasyonları

Hem beyaz katman hem de renkli çizgiler üretilen içeriklerdir. Beyaz katmanın girip kaybolduğu zaman, bunların nasıl yığıldığı ve animasyonun nasıl çalıştığı netleşir.

Kutu modelini koruma

Bir sınırı taklit etmek için Oluşturulan İçerik'i kullanmanın dezavantajı, bozuk bir kutu modelinin ortaya çıkmasıdır: İçerik artık, altına "kenarlık" yazılı olduğu için sahte kenarlığı gizleyebilir. Sorunun etkisini azaltmak için padding olarak istenen border-width değerini uygulamanız gerekir.

Gerçek bir kenarlığa sahip olmak (ve böylece kutu modelinin çalışmalarını korumak) için birden fazla arka plan kullanabilir ve daha sonra, kenarlık alanının içine genişletebilirsiniz.

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
  )
;

background-origin ile arka planlar boyutlandırılıyor

Burada arka planlarla ilgili komik bir durum var: Kenarlığa boyanmışlar, ancak conic-gradient tamamen yanlış görünüyor. Aslında amaçlanan davranış budur: Varsayılan arka plan resimleri, başlangıç noktası öğenin padding-box olduğundan dolayı sınırın içine çizilmez. Sonuçta bir kenarlık oluşturmak için, belirlenen arka plan resimleri kenarlığın kendi içinde tekrarlanarak tuhaf bir görsel efekt ortaya çıkar.

Bu sorunu çözmek için arka planı, sınırın boyutunu da kaplayacak şekilde uzatmanız gerekir. Arka planı genişletip yeniden konumlandırarak bunu manuel olarak yapabilirsiniz. Ancak en iyisi, arka planı border-box ile ayarlamak için background-origin özelliğini kullanmaktır.

Tarayıcı Desteği

  • 1
  • 12
  • 4
  • 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;

Şu ekleme her şeyin çok daha iyi görünmesini sağlıyor:

background-clip ile beyaz arka plan katmanı daraltılıyor

Arka planlar şu anda tüm alanı kapladığından yarı şeffaf katmanın tekrar küçültülmesi gerekir. background-size ile tekrar uğraşmak yerine daha kolay bir şekilde bunu yapabilirsiniz: background-clip kullanarak bunu padding-box olarak ayarlayın. Bu şekilde, arka plan artık kenarlık alanının altına çizilmez.

Tarayıcı Desteği

  • 1
  • 12
  • 4
  • 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 efektin etkili olması için kenarlığı transparent yapın.

border: 0.3rem dotted transparent;

Animasyonlar

Kenarlığın animasyonunu geri yüklemek için conic-gradient 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 özelliği sayesinde bu, destekleyen tarayıcılarda kolaylık sağlar:

Tarayıcı Desteği

  • 85
  • 85
  • 16,4

Kaynak

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

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

Tümü toplandığında kod şu hale gelir:

Bonus İçerik: border-image

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

Tarayıcı Desteği

  • 16
  • 12
  • 15
  • 6

Kaynak

Çakışan arka planlarla uğraşmanıza gerek kalmadığı için kodları daha basit şekilde kullanabilirsiniz. Animasyon önceden olduğu 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ı özelliklerin çalışmadığını fark edeceksiniz:

  • border-image, border-radius çizgisini izlemez; her zaman dikdörtgen biçiminde kalır.
  • border-image-slice, doldurulacak şekilde ayarlanırken border-image öğesi background kümesinin altına değil, üstüne boyar. Arka planın yarı şeffaf olmasını istiyorsanız bu işlem sorun yaratabilir.

Kapanışta

CSS'de kenarlıkları canlandırmak için çok sayıda olasılık vardır. Kullanım alanına bağlı olarak, ikisinden birini tercih edebilirsiniz.