»

[HAKAN]

HTML ile ilk uğraştığım zamanlar bir türlü elde edemediğim bazı arkaplan etkilerini CSS de çok kolaylıkla yapabileceğimi ilk keşfettiğim anda nasıl sevindiğimi aradan geçen yllara rağmen hala dün gibi 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 problemler olabilir. Ya da şu an benim inanılmaz karmaşık ve zorlayıcı gördüğüm bazı problemler, o problemin çözümünü bilen insanlar için aslında problem dahi kabul edilmeyecek derecede basit uygulamalar olabilir. Bu noktadan hareketle ben de bir zamanlar içinden çıkamadığım arkaplan uygulamalarının CSS'nin sihirli değneği ile aslında ne kadar kolay ve etkili çözümler üretebileceğini anlatmaya çalışacağım;

background-color:Web sayfanızın, tablonuzun, satırınızın, ya da hücrelerinizin arka plan rengini 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 nesnelerin yolunu belirlemeniz için kullanacağınız parametrelerdir. Ek parametrelerle detaylı bir şekilde özelleştirebilirsiniz. En altta bununla ilgili tek satırlık bir CSS kodu açıklaması yapacağım.. Kullanımı;

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ı:

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 Y ekseninde tekrar sayısını kontrol edebileceğiniz parametredir. Bu şekilde arkaplana koymayı düşündüğünüz imajı x ekseninde ya da Y eksenin tekrarlatabilir, ya da tekrar etmemesini sağlayabilirsiniz. Kullanımı;

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ızla beraber arkaplan resmi de scrollbar ile beraber kayar. Eğer fixed değerini verirsek arkaplan resminin konumu scrollbara göre değişmez, sabit kalır. Kullanımı;

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ı piksel cinsinden 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 sefer gösterimi yapıldıktan sonra tekrar gösterimi yapılmamasını istedik. Son olarak 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 kaliteli CSS sitesinde gördüğünüz görsel kaliteyi yakalamanız mümkündür. Örneğin;

BODY { background: url(logonuz.gif) top right;
    background-attachment: fixed }

__________________

ARAMASIN GÖZLER O ŞİMDİ ASKER!..