CSS Arka Plan Deseni Üretici

Nasıl çalışır?

Sol panele iki renk yazın: birinci satır desenin çizgi ya da nokta rengi, ikinci satır arka planın rengidir. Yalnız bir satır yazarsanız zemin beyaz kabul edilir. HEX, RGB ve HSL yazımlarının hepsi tanınır. Sonra deseni seçip adım genişliğini ayarlayın: adım, desenin kendini kaç pikselde bir tekrarladığını söyler — 16 piksellik bir çizgili desende 16 piksel renkli, 16 piksel boş şerit yan yana gelir ve motif 32 pikselde bir başa döner. Sağ panelde çıkan CSS'i olduğu gibi stil dosyanıza yapıştırın; sınıf adını kendi düzeninize göre değiştirebilirsiniz. Çıktının altındaki iki kutu, CSS'te geçen HEX değerleriyle aynı etiketleri taşır, böylece hangi rengin desende hangi rengin zeminde olduğunu karıştırmazsınız. Desen bir görsel dosyası değil, tarayıcının çizdiği bir gradyandır: büyütünce bulanıklaşmaz ve sayfaya ek bir istek yükü bindirmez.

Bu araç css arka plan deseni, css background pattern, kareli arka plan css, css gradient desen aramalarıyla da biliniyor.

repeating-linear-gradient nedir?

repeating-linear-gradient, iki nokta arasında tanımladığınız renk geçişini sonsuza kadar tekrar eden bir CSS fonksiyonudur. Sıradan linear-gradient son rengi kalan alana yayarken, tekrarlı sürüm sonuncu duraktan sonra başa döner — çizgili ve çapraz desenlerin tek satırla yazılabilmesinin sebebi budur. Renk durakları arasında geçiş istemiyorsanız bir rengin bittiği noktayla ötekinin başladığı noktayı aynı piksele koyarsınız; böylece yumuşak geçiş yerine keskin bir şerit kenarı elde edersiniz.

background-size nedir?

background-size, arka plan katmanının kaplayacağı kutunun ölçüsünü belirler ve desen üretiminde asıl döşeme işini yapan özelliktir. Bir radial-gradient tek başına yalnızca bir nokta çizer; o çizimi 16×16 piksellik bir kutuya sığdırıp yüzeye tekrarlattığınızda düzenli bir nokta deseni ortaya çıkar. Birden çok arka plan katmanı kullanıldığında değerler virgülle ayrılarak katman sırasına göre yazılır ve eksik kalan katmanlar listeyi baştan tekrar okur.

conic-gradient nedir?

conic-gradient, renk duraklarını bir merkez etrafında dönerek dizen gradyan türüdür; linear-gradient'in düz çizgi boyunca, radial-gradient'in merkezden dışa yaptığı işi açı üzerinde yapar. Pasta grafiği görünümü, renk çemberi ve satranç tahtası deseni bununla tek satırda kurulabilir. Bu araç dama desenini iki linear-gradient katmanıyla üretir; conic-gradient ile yazılan daha kısa sürümü ise yalnızca yeni tarayıcılarda çalışır, bu yüzden çıktıda tercih edilmemiştir.

Gradyan deseni ile döşenebilir PNG arasındaki fark nedir?

Döşenebilir PNG, hazır çizilmiş küçük bir görselin yüzeye tekrar tekrar basılmasıdır: tarayıcı için ek bir dosya indirmesi demektir, yüksek yoğunluklu ekranlarda bulanıklaşır ve rengini değiştirmek görseli yeniden üretmeyi gerektirir. Gradyan deseni ise stil dosyasının içinde bir kural olarak durur, tarayıcı tarafından o anda çizilir; her çözünürlükte keskindir, rengi ve adımı tek satır düzenlemeyle değişir, ek istek üretmez. PNG'nin üstün kaldığı tek alan, düzensiz ve organik dokulardır — kâğıt lifi ya da gürültü dokusu gradyanla makul biçimde yazılamaz.

Desen neden PNG yerine gradyanla çiziliyor?

Döşenebilir bir PNG, sayfanın indirmesi gereken ayrı bir dosyadır; ekran yoğunluğu iki katına çıktığında bulanıklaşır ve rengini değiştirmek için görseli yeniden üretmek gerekir. Gradyanla çizilen desende bunların hiçbiri olmaz: renk değişikliği tek satırlık bir düzenlemedir ve çizim her çözünürlükte keskin kalır.

Dikkat edilmesi gereken tek yer, çok küçük adımlarda ortaya çıkan tarama izleridir. Adım 4-6 pikselin altına indiğinde tarayıcı kenarları yumuşatırken ince bir titreşim yaratabilir; ekranı kaydırınca dalgalanma gibi görünür. Bu tür sık desenlerde 8 pikselin altına inmemek en güvenlisidir.

Hangi desen nerede işe yarar?

Arka plan deseni içeriğin okunmasını zorlaştırmamalıdır; bu yüzden desen rengi ile zemin arasındaki fark genellikle bilinçli olarak küçük tutulur.

• Çizgili → bölüm ayırıcı şeritler, boş durum kutuları
• Çapraz çizgi → "devre dışı", "taslak" ya da rezerve alan işareti
• Kareli (dama) → saydamlık göstergesi; görsel düzenleyicilerin klasik zemini
• Noktalı → hafif dokulu sayfa zemini, kart arkası
• Izgara → çizim tuvali, yerleşim planı ve kroki arka planı

Sık sorulanlar

Ürettiğim CSS'i nereye yapıştırmalıyım?

Stil dosyanıza olduğu gibi ekleyin ve desen sınıfını istediğiniz öğeye verin. Sınıf adını değiştirmekte serbestsiniz; kuralların içindeki satırlar aynı kaldığı sürece desen bozulmaz.

Desen adımı tam olarak neyi değiştiriyor?

Motifin tekrar aralığını. Çizgili ve çapraz desende adım tek bir şeridin kalınlığıdır, noktalı ve ızgara desende iki motif merkezi arasındaki mesafedir, kareli desende ise tek bir karenin kenarıdır.

Bu desenler eski tarayıcılarda çalışır mı?

Evet. Çıktıda çok konumlu kısa yazım yerine klasik dört duraklı renk yazımı kullanılır; repeating-linear-gradient, radial-gradient ve background-size uzun süredir tüm güncel tarayıcılarda desteklenir.

Deseni bir görsel dosyası olarak indirebilir miyim?

Bu araç görsel değil CSS üretir; indirdiğiniz dosya .css uzantılıdır. Desene ihtiyaç duyan yer bir e-posta şablonu gibi CSS gradyanını desteklemiyorsa döşenebilir bir PNG hazırlamanız gerekir.