CSS kenarlık animasyonları

CSS'de kenarlıkları animasyonlu hale getirmenin birkaç yolu

Bramus

Sınırları belirleme

Bir öğeye kenarlık eklemek için kullanabileceğiniz birkaç yöntem vardır: border, outline ve box-shadow. Stephanie Eckles'ın Öğe Kenarlıkları Eklemek İçin 3 CSS Yöntemi başlıklı makalesinde ayrıntılı olarak açıklandığı gibi, her yaklaşımın özellikle kenarlıkları canlandırma konusunda kendi avantajları ve dezavantajları vardır. Doğru CSS border kullanmamanın temel nedeni animasyon amaçlıdır.

Kevin J. tarafından outline-offset kullanılarak oluşturulan kenarlık animasyonları Powell

Son zamanlarda dikkatimi çeken bir makale, yazar Coco'nun daha fazla seçeneği incelediği Harika CSS kenarlık animasyonu oldu. ::before ve ::after kullanarak oluşturulan içeriği ekleyerek sahte bir kenarlık oluştururlar ve bu kenarlık daha sonra animasyonlu hale getirilir.

Benim en çok dikkatimi çeken, 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çerik kullanılarak hazırlanan kenarlık animasyonları

Hem beyaz katman hem de renkli çizgiler yapay zekayla üretilmiş içeriklerdir. Beyaz katmanı soldurarak ve belirginleştirerek katmanların nasıl üst üste bindiği ve animasyonun nasıl çalıştığı net bir şekilde anlaşılır.

Kutu modelini koruma

Kenarlık taklit etmek için oluşturulan içeriği kullanmanın dezavantajı, bozuk bir kutu modeli elde etmenizdir: İçerik, söz konusu "kenarlık" altında boyandığı için artık sahte kenarlığı gizleyebilir. Bu sorunu gidermek için istediğiniz border-width değerini 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ık alanına uzatabilirsiniz.

Temel bilgiler

Noktalı bir kenarlık oluşturup 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ırılıyor

Gördüğünüz gibi, buradaki arka planlarda tuhaf bir durum var: Kenarlığa boyanmışlar ancak conic-gradient tamamen yanlış görünüyor. Bu aslında amaçlanan davranıştır: Varsayılan olarak arka plan resimleri, kaynağı öğenin padding-box olduğu için kenarlığa çizilmez. Sonuçta bir kenarlık oluşturmak için, ayarlanan arka plan resimleri kenarlığın içinde tekrarlanır ve bu da garip bir görsel efekt oluşturur.

Bu sorunu çözmek için arka planı, kenarlık boyutunu da kaplayacak şekilde genişletmeniz gerekir. Bunu, arka planı uzatıp yeniden konumlandırarak manuel olarak yapabilirsiniz ancak en iyisi, arka planı border-box öğesine göre boyutlandırmak için background-origin özelliğini kullanmaktır.

Browser Support

• 1
• 12
• 4
• 3

Source

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 ekleme her şeyin çok daha iyi görünmesini sağlar:

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

Arka planlar artık 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 yöntem kullanabilirsiniz: background-clip öğesini kullanın ve padding-box olarak ayarlayın. Böylece arka plan artık kenarlık alanının altına çizilmez.

Browser Support

• 1
• 12
• 4
• 5

Source

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 yapın.

border: 0.3rem dotted transparent;

Animasyon

Kenarlığın 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 özellik destekleyen tarayıcılarda çok kolay bir şekilde kullanılabilir:

Browser Support

• 85
• 85
• 128
• 16.4

Source

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

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

Tüm bu parçalar birleştirildiğinde kod şu şekilde olur:

Bonus içerik: border-image

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

Browser Support

• 16
• 12
• 15
• 6

Source

Çakışan arka planlarla uğraşmanız gerekmediğinden daha basit bir kod kullanmanıza olanak tanır. Animasyon, eskisi 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 bazı özelliklerin artık çalışmadığını fark edeceksiniz:

• border-image, border-radius şeklini takip etmez; her zaman dikdörtgen olarak kalır.
• border-image-slice, doldurma olarak ayarlandığında border-image, ayarlanan background altına değil, üstüne boyanır. Arka planın yarı şeffaf olmasını istiyorsanız bu durum sorun yaratabilir.

Sonuç olarak

CSS'de kenarlıkları canlandırmak için birçok olasılık vardır. Kullanım alanına bağlı olarak birini veya diğerini tercih edebilirsiniz.