CSS'de kenarlık animasyonunun çeşitli yollarını inceleme
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.
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.
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.
/* 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;
Ş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.
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:
@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.
Ç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ırkenborder-image
öğesibackground
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.