0

CSS Desen Arka Plan Oluşturucu

Gerçek katmanlı CSS degradelerinden (sıfır görüntüler) döşenebilir şeritler, noktalar, dama tahtası, ızgara, çapraz çizgi ve üçgen arka planlar oluşturun veya aynı deseni SVG belgelerinde kullanmak üzere bir SVG <desen> olarak dışa aktarın.

20px
45°
İşleniyor... 0%

Sonuç

Çoğu "desen oluşturucu" aracı, her seçenek için aynı tekrarlanan doğrusal degrade formülünü sessizce yeniden kullanır ve yalnızca sayıları değiştirir. Bu öyle değil: buradaki altı desen türünün her biri, o şekli gerçekten üreten spesifik CSS tekniğinden oluşturulmuştur. Şeritler, iki renk bandıyla tek bir yinelenen doğrusal degrade kullanır. Noktalar, dairesel bir noktayı dikdörtgen bir ızgaraya temiz bir şekilde döşeyemeyen tekrarlanan bir radyal degrade yerine, yalnızca arka plan boyutuna göre döşenen bir radyal degrade kullanır (klasik CSS noktaları hilesi). Dama Tahtası gerçek dört çeyrekli konik degrade formülünü kullanır: kare bir döşemede ortalanan konik bir degrade, doğal olarak 90 derecelik sınırlarda dört çeyrek kareye bölünür ve bu çeyrekler boyunca iki rengi değiştirerek gerçek bir dama tahtası haline getirir, bir yaklaşım değil.

Izgara ve çapraz taramanın her ikisi de, kenarlık hileleriyle ikinci yönü taklit etmek yerine, ayrı arka plan görüntüsü girişleri olarak iki tekrar eden doğrusal degradeyi katmanlar. Izgara, net yatay ve dikey çizgi çizgileri için "sağa" ve "aşağıya" yinelenen degradeyi birleştirir. Çapraz tarama, sepet örgüsü tarzı diyagonal bir örgü için +45 derece ve -45 derece tekrar eden bir eğimi katlar - bu konuda kesin olmaya değer: bu dürüst bir çapraz taramadır, gerçek balıksırtı geometrisi değildir ve araç, onu aşırı iddia etmek yerine bu şekilde etiketler. Üçgenler, dama tahtasının dört kama konik degrade tekniğini yeniden kullanır, ancak 45 derece döndürülmüş degradeyi başlatır; bu, kama sınırlarını döşemenin kenar orta noktalarından köşelerine kaydırır ve aynı dört takozu dört çeyrek kare yerine dört köşeden köşeye üçgene dönüştürür.

Her desen türü yalnızca kendisine gerçekten uygulanan kontrolleri ortaya çıkarır; şeritler için bir açı kaydırıcısı görünür, noktalar için nokta yarıçapı ve aralık görünür, ızgara ve çapraz çizgi için çizgi kalınlığı gösterilir - ve büyük döşemeli önizleme kutusu her değişiklikte yeniden boyanır, böylece bir değere karar vermeden önce birkaç tam tekrarı görebilirsiniz. Çıkış modunu SVG'ye çevirin; aynı desen, bağımsız bir .svg dosyası için tek tıklamayla indirmeyle herhangi bir SVG belgesinin <defs> içine yapıştırmaya hazır, düz dikdörtgen, daire, yol veya çokgen temel öğelerinden oluşturulmuş bir <pattern> öğesi olarak yeniden görünür.

Her şey tarayıcınızda yerel olarak çalışır: resim yükleme yok, sunucu gidiş-dönüş yok, hesap yok. Tekrarlamayan katı veya degrade dolgular için bu sitedeki CSS degrade oluşturucu doğru araçtır; bu özellikle sıfır görüntü varlığından oluşturulan döşenebilir geometrik arka planlar içindir.