CSS Arka Plan Deseni Oluşturucu
Gradyanlarla geometrik CSS arka plan desenleri oluşturun ve hazır kodu kopyalayın.
Açı yalnızca çizgili ve çapraz tarama desenlerini etkiler; kalınlık dama ve karbon üzerinde işe yaramaz. Etkisiz kaydırıcılar otomatik olarak kapatılır.
Nasil calisir
Desen yalnizca CSS gradyanlarindan olusur; hicbir gorsel yuklenmez.
Iki rengi, boyutu ve aciyi ayarlayin; canli onizleme aninda guncellenir.
Hazir CSS kodunu herhangi bir ogenin arka planina birakin.
Ipucu
Gorselsiz oldugu icin ag istegi eklemez ve buyutuldugunde bulaniklasmaz.
Hafif bir arka plan icin desenin dikkat dagitmamasi adina birbirine yakin iki renk secin.
Desen kusursuz bir doseme olarak tekrarlanir, boylece her boyuta uyar.
CSS Arka Plan Deseni Oluşturucu hakkında
Buradaki desenlerin tamamı yalnızca gradyanlardan üretilir; ne resim dosyası ne de SVG vardır, bu yüzden sıfır HTTP isteği maliyeti taşır ve her yakınlaştırma düzeyinde keskin kalır. Çoğu kişiyi yanıltan bir ayrıntı var: repeating-linear-gradient kutu boyunca değil kendi gradyan ekseni boyunca tekrar eder, bu yüzden 0 derecelik bir desen alt kenardan başlar ve öğe uzadıkça kayar. Bu nedenle ızgara deseni burada 90 ve 180 dereceye sabitlenmiştir; böylece çizgiler üst ve başlangıç kenarına demirlenir.
CSS Arka Plan Deseni Oluşturucu nasıl kullanılır
- 1
Üstteki şeritten yedi desenden birini seçin: çizgili, dama, nokta, zikzak, çapraz tarama, ızgara veya karbon.
- 2
Arka plan rengini ve desen rengini iki renk seçiciyle belirleyin; renk takas düğmesi ikisinin yerini değiştirir.
- 3
Karo boyutunu, kalınlığı ve açıyı kaydırıcılarla ayarlayın; seçili desende etkisi olmayan kaydırıcılar otomatik olarak kapanır.
- 4
Çıktının bir .pattern seçicisi içinde gelmesini istiyorsanız CSS sınıfı içine sar kutusunu işaretleyin.
- 5
Üretilen CSS kodunu kopyalayıp doğrudan öğenize yapıştırın.
Sıkça sorulan sorular
Açı kaydırıcısı neden dama, nokta, zikzak, ızgara ve karbon desenlerinde kapalı?
Bu beş desenin geometrisi conic-gradient, radial-gradient veya sabit konumlu üst üste linear katmanlarla kurulur ve hiçbiri yalnızca background özellikleriyle döndürülemez. Gerçek bir döndürme için öğeye transform: rotate uygulamanız gerekir, bu da kutunun kendisini döndürür. Açılı bir desen istiyorsanız çizgili ve çapraz tarama seçenekleri 0-360 derece aralığını tam destekler.
CSS deseni gerçekten arka plan resminden daha mı hafif?
Ağ tarafında evet: sıfır bayt indirme, sıfır istek ve çözünürlükten bağımsız keskinlik. Ama bedava değildir; her gradyan katmanı her boyama işleminde yeniden hesaplanır. Karbon deseni altı katman kullanır ve bunu tam ekran hareketli bir öğeye verirseniz kare düşüşü görürsünüz. Sabit bir arka planda ise fark edeceğiniz bir maliyeti yoktur.
Dama desenindeki kareler neden ayarladığım boyutun yarısı?
Ayarladığınız değer tekrarlanan karonun boyutudur ve her karo tam olarak dört kare içerir. Yani 40 piksellik bir karoda her kare 20x20 piksel olur. Köşedeki kare de her zaman desen rengini değil arka plan rengini alır.
Eski tarayıcılarda ne olur?
Yedi desenin altısı yalnızca linear-gradient ve radial-gradient kullanır; bunlar yıllardır her yerde çalışır. Sadece dama deseni conic-gradient gerektirir ve bu da Chrome, Firefox ile Safari tarafında 2020 yılından beri desteklenir. Daha eski tarayıcılarda dama yerine düz arka plan rengi görünür.