CSS Yinelenen Degradeler - CSS Hileleri | Kod parçacıkları 2024

Tekrarlayan gradyanlar, color-stopson linear-gradient()ve radial-gradient()notasyonların yaratıcı kullanımıyla halihazırda yapabileceğimiz bir numarayı alır ve bizim için pişirir.

Buradaki fikir, yarattığımız gradyanlardan desenler oluşturabilir ve sonsuza kadar tekrar etmelerine izin verebiliriz.

Doğrusal bir degradeyi (solda) tekrar eden doğrusal bir degradeyle (sağda) karşılaştırma.

Gradyanı, küçük bir dikdörtgen olsaydı, kendisinin diğer küçük minik dikdörtgen versiyonlarıyla aynı hizaya gelip tekrar eden bir model oluşturacak şekilde oluşturmak için, tekrar etmeyen gradyanlarla bir numara var. Yani esasen bu gradyanı yaratın ve background-sizeo küçük dikdörtgeni yapacak şekilde ayarlayın . Bu, daha sonra döndürebileceğiniz veya her neyse, çizgiler yapmayı kolaylaştırdı.

Sözdizimi

Üç tür tekrarlayan gradyan vardır, bunlardan ikisi şu anda resmi şartnamede desteklenmektedir ve biri mevcut çalışma taslağında bulunmaktadır.

Her gösterim için sözdizimi, ilgili gradyan türüyle aynıdır. Örneğin, repeating-linear-gradient()ile aynı sözdizimini izler linear-gradient().

Yinelenen Gradyan	İlgili Gösterim	Destekleniyor mu?
`repeating-linear-gradient()`	`linear-gradient()`	Evet
`repeating-radial-gradient`	`radial-gradient()`	Evet
`repeating-conic-gradient`	`conic-gradient()`	Hayır

Degrade tekrarlarının nerede olduğu , son renk durağı ile belirlenir . Bu en az ise 20px, (o tekrarlar) gradyanı büyüklüğü olan 20pxile 20pxkare. Aynı durum, desene zincirlenmiş birden fazla renk varsa da geçerlidir. Son durağı olan son renk, tekrarın boyutunu ve yerini belirleyen şeydir.

.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )

CodePen'de Chris Coyier'den (@chriscoyier) Pen lAkyo'ya bakın.

Radyal ile aynı:

.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )

CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen Repeating Gradients'e bakın.

Tarayıcı Desteği

Yinelenen gradyanlar şu anda harika bir tarayıcı desteğinden yararlanmaktadır. Bununla birlikte, bu yazının yazıldığı sırada sadece doğrusal ve radyal gradyanlardan bahsediyoruz çünkü konik gradyanlar, spesifikasyonun Seviye 4 çalışma taslağında hala önerilen bir özelliktir. İşte aday tavsiyesine ulaştığında geniş çapta benimsenme görmemizi umuyoruz.

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.