HTML ile ilk uğraştığım zamanlar bir türlü elde edemediğim bazıarkaplan etkilerini CSS de çok kolaylıkla yapabileceğimi ilkkeşfettiğim anda nasıl sevindiğimi aradan geçen yllara rağmen hala düngibi hatırlarım. Bugün benim için çok basit ayrıntı olan bazıuygulamalar, bir çok insan için aşılması mümkün olmayan problemlerolabilir. Ya da şu an benim inanılmaz karmaşık ve zorlayıcı gördüğümbazı problemler, o problemin çözümünü bilen insanlar için aslındaproblem dahi kabul edilmeyecek derecede basit uygulamalar olabilir. Bunoktadan hareketle ben de bir zamanlar içinden çıkamadığım arkaplanuygulamalarının CSS'nin sihirli değneği ile aslında ne kadar kolay veetkili çözümler üretebileceğini anlatmaya çalışacağım;
background-color:Websayfanızın, tablonuzun, satırınızın, ya da hücrelerinizin arka planrengini değiştirebileceğiniz CSS parametresidir. Kullanımı
HTML Code:
background-color:#ff3366;
şeklindedir. Burada kullanılan renk kodlarını hangi mantığa dayandığı hakkında ayrı bir makale yazılabilir..
background-image: Arka planızenginleştirmek için kullanacağını resim/fotoğraf gibi nesnelerinyolunu belirlemeniz için kullanacağınız parametrelerdir. Ekparametrelerle detaylı bir şekilde özelleştirebilirsiniz. En alttabununla ilgili tek satırlık bir CSS kodu açıklaması yapacağım..Kullanımı;
HTML Code:
background-image:url(klasor_adi/foto.jpg);
background-position: Parametrenin uygulandığı çerçeve içerisinde yer alan nesnelerin x ve y eksenindeki pozisyonunu ayarlamamıza yarar. Kullanımı:
HTML Code:
background-position:top;
background-position:bottom;
background-position:center;
background-position:left;
background-position:right;
background-position:inherit;
background-repeat:Arkaplanı zenginleştirmek için kullandığınız image nesnesinin X ve Yekseninde tekrar sayısını kontrol edebileceğiniz parametredir. Buşekilde arkaplana koymayı düşündüğünüz imajı x ekseninde ya da Yeksenin tekrarlatabilir, ya da tekrar etmemesini sağlayabilirsiniz.Kullanımı;
HTML Code:
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;
background-repeat:repeat;
background-repeat:inherit;
background-attachment:Bu parametre ile arkaplan resminin sayfayla beraber kayıp kaymayacağınıbelirliyoruz. Eğer bu özelliğe scroll değerini verirsek, sayfamızlaberaber arkaplan resmi de scrollbar ile beraber kayar. Eğer fixeddeğerini verirsek arkaplan resminin konumu scrollbara göre değişmez,sabit kalır. Kullanımı;
HTML Code:
background-attachment:scroll;
background-attachment:fixed;
ÜSttekileri yazdıktan sonra bu parametrelerin tümünü birden tek bir background parametresinde kullanma
şeklini de gösterelim.
background:url(klasor_adi/image.gif) 15px 8px repeat #444444; ya da
background:url(klasor_adi/image.gif) bottom left repeat #444444;Burada önce
url() ile image.gif'in kaynak yolunu belirttik, araya bir karakterlik boşluk(space)bırakıp image.gif nesnesinin X Sıfır noktasına uzaklığını pikselcinsinden belirttik. Yani sol-üst köşeden
15px lik bir sağa kayma olsun istedik. Hemen ardından da
8px yazarak Y Sıfır noktasından 8 piksellik pozisyon belirlemesi yaptık. Böylece arkaplan için seçtiğimiz
image.gif 8 piksel aşağı itilmiş oldu. Akabinde yazdığımız
no-repeat parametresi ile de image.gif in tekrar etmemesini, yani bir sefergösterimi yapıldıktan sonra tekrar gösterimi yapılmamasını istedik. Sonolarak yazdığımız
#444444 ile de arkaplan rengimizi belirledik.. Alttaki örnekte ise image.gif i bottom-left, yani dip-sol pozisyonunda yerleştirdik.
Bu parametreleri kullanarak yapacağınız varyasyonlarla pek çok kaliteliCSS sitesinde gördüğünüz görsel kaliteyi yakalamanız mümkündür. Örneğin;
HTML Code:
BODY { background: url(logonuz.gif) top right;
background-attachment: fixed } şeklinde bir kodla logonuz devamlı sayfanızın sağ üst köşesinde kalacaktır. Sayfayı aşağı kaydırsanız bile..
Vakit bulabilirsem her kod için örnek siteler eklemeye çalışacağım.
Umarım birilerinin işine yarar, kolay gelsin..
Yazan: Daiwid Wenham
