CSS kullanarak duyarlı tasarım görüntüleri nasıl eklenir?
Bugün popüler web sitelerine bakın ve göreceğinizden emin olduğunuz bir tasarım tedavisi büyük, ekrana uzanan arka plan görüntüleri. Bu görüntülerin eklenmesiyle ilgili zorluklardan biri, web sitelerinin farklı ekran boyutlarına ve cihazlarına yanıt vermesi gereken en iyi uygulamalardan gelmektedir. Bu, duyarlı web tasarımı olarak bilinen bir yaklaşımdır.
Web sitenizin düzeni değiştiğinden ve farklı ekran boyutlarıyla ölçeklendiğinden, bu arka plan resimleri de boyutlarını buna göre ölçeklendirmelidir.
Aslında, bu "akışkan görüntüler", duyarlı web sitelerinin (akışkan ızgarası ve medya sorguları ile birlikte) kilit parçalarından biridir. Bu üç parça, başlangıçtan beri duyarlı web tasarımının temelidir, ancak bir siteye duyarlı satır içi resimler eklemek her zaman oldukça kolay olsa da (satır içi görüntüler HTML biçimlendirmesinin bir parçası olarak kodlanmış grafiklerdir) Arka plan görüntüleri ile aynı (CSS arka plan özelliklerini kullanarak sayfaya biçimlendirilmiş) uzun bir süre, birçok web tasarımcıları ve ön uç geliştiricileri için önemli bir zorluk sağlamıştır. Neyse ki, CSS'de "arka plan boyutu" özelliğinin eklenmesi bunu mümkün kıldı.
Ayrı bir makalede, görüntüleri bir pencereye sığacak şekilde genişletmek için CSS3 özelliği arka plan boyutunun nasıl kullanılacağını ele aldım, ancak bu özellik için daha iyi, daha kullanışlı bir yol var. Bunu yapmak için aşağıdaki özellik ve değer kombinasyonunu kullanacağız:
arka plan boyutu: kapak;
Kapak anahtar sözcüğü özelliği, tarayıcıya pencerenin ne kadar büyük veya küçük olduğuna bakılmaksızın görüntüyü pencereye sığacak şekilde ölçeklendirmesini söyler. Görüntü tüm ekranı kaplayacak şekilde ölçeklendirilir, ancak orijinal oranlar ve en boy oranı bozulmadan görüntü bozulmasına engel olur.
Görüntü, tüm pencere yüzeyinin kaplanacağı şekilde mümkün olduğunca büyük pencereye yerleştirilir. Bu, sayfanızda herhangi bir boş noktaya veya görüntüdeki herhangi bir bozulmaya sahip olmayacağınız anlamına gelir, ancak aynı zamanda, ekranın ve söz konusu görüntünün en boy oranına bağlı olarak görüntünün bir kısmının kesilebileceği anlamına gelir. Örneğin, arka plan konumu özelliği için kullandığınız değerlere bağlı olarak, bir resmin kenarları (üst, alt, sol veya sağ) resimlerde kesilebilir. Arka planı "sol üst" olarak yönlendirirseniz, resmin üzerindeki herhangi bir fazlalık, alt ve sağ taraflardan çıkar. Arka plan görüntüsünü ortalarsanız, fazlalık tüm kenarlardan çıkar, ancak bu fazlalık yayıldığı için, herhangi bir taraftaki etki daha az hizmet verecektir.
Arka plan büyüklüğü nasıl kullanılır?
Arka plan resminizi oluştururken, oldukça büyük bir resim oluşturmak iyi bir fikirdir. Tarayıcılar, görüntü kalitesi üzerinde gözle görülür bir etki yaratmadan görüntüyü küçültebilirken, bir tarayıcı görüntüyü orijinal boyutlarından daha büyük bir boyuta getirdiğinde, görsel kalite düşecek, bulanıklaşacak ve pikselleşecektir. Bunun dezavantajı, sayfanızın tüm ekranlara dev görüntüler dağıtırken bir performans isabet almasıdır.
Bunu yaptığınızda, bu görüntüleri indirme hızı ve web teslimatı için uygun şekilde hazırladığınızdan emin olun. Sonunda, yeterince büyük bir resim boyutu ve kalitesi ile indirme hızları için makul bir dosya boyutu arasında mutlu ortamı bulmanız gerekir.
Arka plan görüntülerini ölçeklemenin yaygın yollarından biri, bu görüntünün bir sayfanın tüm arka planını almasını, bu sayfanın geniş olup olmadığını veya bir masaüstü bilgisayarda mı yoksa çok daha küçük bir şekilde mi görüntülendiğini ve bir cep telefonuna cihazlar.
Resminizi web barındırıcınıza yükleyin ve arka plan resmi olarak CSS'nize ekleyin:
arkaplan-görüntü: url (fireworks-over-wdw.jpg);
arka plan tekrarı: tekrar etmeyin;
arka plan konumu: merkez merkezi;
arka plan eki: sabit;
Önce tarayıcı öneki CSS'yi ekleyin:
-webkit-arka plan-boyutu: kapak;
-moz-arka plan-boyutu: kapak;
-o-arka plan-boyutu: kapak;
Ardından CSS özelliğini ekleyin:
arka plan boyutu: kapak;
Farklı Aygıtları Kullanan Farklı Görüntülerin Kullanılması
Bir masaüstü veya dizüstü bilgisayar deneyimi için duyarlı tasarım önemli olsa da, Web'e erişebilen cihazların çeşitliliği önemli ölçüde artmıştır ve daha çeşitli ekran boyutları ile birlikte gelmektedir.
Daha önce bahsedildiği gibi, bir akıllı telefona çok büyük tepki veren bir arka plan görüntüsü yüklemek, örneğin verimli veya bant genişliği bilinci olmayan bir tasarımdır.
Görüntülenecek cihazlara uygun resimleri sunmak ve web sitenizin mobil cihazlarla uyumluluğunu daha da iyileştirmek için medya sorgularını nasıl kullanabileceğinizi öğrenin.
Jennfier Krynin'in orijinal makalesi. Jeremy Girard 9/12/17 tarafından düzenlendi