CSS'de kenarlık animasyonu yapmanın çeşitli yollarını inceleme
Kenarlıkları ayarlama
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.
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.
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.
/* 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 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:
@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.
Ç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ığındaborder-image
, ayarlananbackground
'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.