CSS Repeat-x & Repeat-y Özellikleri
Merhaba Arkadaşlar,
Bu makalede sizlere CSS3 ‘ ün bizi nasıl resimli ve haliyle de yüklü olan arkaplanlardan iyiden iyiye uzaklaştırdığını iki özellik ile anlatmaya çalışacağım. Bu özelliklerimiz ” background-repeat ” tag ‘ i içerisinde kullanılan ve arkaplanımızın x , y koordinatları doğrultusunda bir kaç piksellik bir resim ile doldurulabilmesini sağladığımız özelliklerimizdir.
Bu ikiliyi kullandığımız alanlar genellikle tek renkli arka planlar olmamakla birlikte örneğin üstten alta 10px gibi bir yüksekliği olup bütün x koordinatı boyunca aynı düzende uzayan biçimlerde olmaktadır. Şimdi küçük bir örnek ile hemen bir cümle önce açıkladığım işlemi yapalım ve yatay eksendeki görünümünü elde edelim. Hem böylelikle dikey(y) eksendeki kullanımı da direkt olarak anlaşılmış olur.
İlk olarak bir klasör açıyoruz ve içerisine ” index.html ” ile ” stil.css ” isimli iki sayfa oluşturuyoruz. Daha sonra aşşağı da belirttiğim bölümden dosyayı indiriyoruz be içerisindeki ” 1.jpg ” isimli resmi Photoshop veya benzeri bir program ile açıyoruz. Gördüğünüz üzere resmin gerçek boyutu ” 975 * 679 ” dur. Şimdi ilk iş olarak genişliği 1px ve yüksekliği %100 olacak biçimde bu resmi kesiyoruz. Yeni resmi ” bg.jpg ” ismi ile kaydediyoruz. Arkaplan resmimiz de böylelikle hazırlanmış oluyor.
Şimdi html sayfamız içerisine geçiyoruz ve class ‘ ı ” uyg ” olan bir div yaratıyoruz.
<html>
<head>
<title>BilgiSayaci.Org - Background Repeat</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
<div class="uyg"></div>
</body>
</html>
Daha sonra css sayfamız içerisine geçiyoruz ve ” uyg ” class ‘ lı div ‘ in genişliğini %100 , yüksekliğini ise 679px olarak belirliyoruz.
.uyg{width: 100%; height: 679px;}
Bunu da yaptıktan sonra index.html sayfamızı çalıştırdığımızda bomboş beyaz arkaplanlı bir sayfa göreceğiz. Bu da artık makalemizin ana konusunun işlevine geçerek bu anlatımı sonlandırabileceğimiz anlamına gelmektedir 🙂 . Uyg Class ‘lı div içerisine ek olarak bir background atıyoruz ve son olarakta ” background-repeat: repeat-x ” vererek sonucu hep birlikte görüyoruz.
.uyg{width: 100%; height: 679px; background: url('bg.jpg'); background-repeat: repeat-x;}
Hepimiz göreceğiz ki istediğimiz sonuca fazlasıyla ulaşılmıştır.
Örneğin bir küçük deneme ile konuyu daha iyi kavrayabiliriz. repeat-x yerine repeat-y verdiğimizde sayfada yalnızca kestiğimiz resmin kalacağını göreceğiz. Bunun nedeni koyduğumuz sınırlandırma da resmin yatay eksende değil dikey eksende çoğalmasını istemiş olduk. İçerisinde bulunduğu div ‘ in uzunluğu sebebiyle de resmi yalnızca bir adet görebiliyoruz.
Başka bir örnek ile bakmak gerekirse ” uyg ” div ‘ imizin height & width değerlerinin her ikisini de ” 100% ” verdiğimizde eğer ” background-repeat ” tag ‘ ini kaldırırsak sayfada yatay ve dikey eksende tekrarlanan bozuk bir görüntü elde edeceğiz. İlk önce ” repeat-x ” ve daha sonra da ” repeat-y ” yi denediğimizde nasıl düzenli bir görüntü ile karşılaşacağımızı göreceğiz.
Peki Bu Özelliği Neden Kullanma Gereği Duyuyoruz ?
Çünkü arka planı büyük bir resim ile tek bir seferde kaplamak istediğimizde yeteri kadar uzun olmaması , değişik ekran büyüklüklerinde istenilen görüntünün bir türlü alınamaması gibi bariz bir şekilde bilinen durumların yanında sayfanın her açıldığında resmin yüklenmesi sorunu bulunmaktadır. Unutmamalıyız ki ” 1000px * 1000px ” büyüklüğün de bir resim ile ” 1px * 679px ” büyüklüğündeki bir resmin yüklenme hızı aynı olmayacaktır. Küçük bir resim daha hızlı yükleneceği için kullanıcılar sayfayı açtıklarında arka planın hazır olduğunu göreceklerdir.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 25 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar