Css Uygulama

Web sitenizi renklendirmeden önce kafanızda tasarlamalısınız ne yapmak istediğinizi... yoksa ya programlarken zaman kaybedersiniz zada kafanızda somutlaştırmadığınız isteğiniz tamamen başka bir görünüm işe sonuçlanır... Bu nedenle önce alın kağıt kalemi elinize ve resim yapın

Hazirsaniz başlayalım BÜTÜN CSS KODLARINI EKLEMENİZ GEREKEN YER: Tasarım Ayarları -> Gelişmiş Ayarlar -> 4. en alttaki kutucuk (CSS Kodu yazan yer). Not: bu kutucuk diğer tasarımlarda olmayabilir.

Öncelikle tasarıma konsantre olalım sonra bir kere öğrendik mi isteidiğimiz kadar katman ekler içeriğimizi genişletiriz...

1. Arkaplan Rengi / Resmi
2. Header (Bas) ve Footer (Alt) / RESIMLER
3. Devamı sonra...

Arkaplan Rengi / Resmi
Normalde öncelikle HTML elemanlarını düşünmeli, ancak onlar yetmiyorsa kendi elemanlarımızı tanımlamalıyız, zaman kaybı olmasın diye...

RENK:

body {
background-color: #000000;
}

#000000 siyah demektir. RGB (Hexadesimal) kodu denir bir rengin bu tarz yazilmasina...
Istediginiz renk icin bakiniz: http://www.rgbpicker.com/
Bir de: http://www.wackerart.de/mixer.html Bu sayfada cok yararli buldugum bir fonksiyon var, solda sectiginiz renge sagda onun tamamlayici rengi veriliyor yani karsit rengi... renk uyumlari cok guzel oldugundan iki renkli sitelerde uyum yakalamak amaci ile süper bir site (altta RGM-Value dedigi yerden kopyalayip 000000 yerine yazmaniz yeterli olacaktir ....
Ayrica herhangi belirli bir rengi istediginizde, normalde o rengi iceren ekran görüntüsünü almak, buu bir grafik programinda acmak ve rengi secmek gerekiyor. Bunun yerine yeni buldugum bir programi tavsiye etmek istiyorum: Pixie 1.0, Bu program sayesinde, ekraninizda ne var ise hemen renginin kodunu alabiliyorsunuz. Indirmek icin: tiklayin

RESIM:

body {
background-image: url("resminURLsi");
}

Eğer amacınız arkaplanı simsiyah yapmak ise siyah bir resim eklemek yerine color özelliği ile renk seçmeniz daha iyidir çünkü resim önce sayfaya başka bir yerden ekleneceği için yüklenmesi daha çok zaman alır....

Ama eğer bütün sayfa yerine katmanların (div) arkaplanlarını da ayrı ayrı belirleyebiliriz, mesela header_container diye belirlenmiş olan DİVin arkaplanını da değiştirebiliriz... Eğer bu tüm sayfa genişliğinde ise body ile aynı işi yapar....

#header_container {
background-image: url("URL");
}

Bir arkaplanda renk ve resim birbirine karistirarak harika bir gorünüm de elde edebiliriz, mesela en yukarisi turuncudan sariya acilan, ortasi tamamen sari olan, en alti saridan yesile gecerek biten bir site icin butun arkaplanin bir resim olmasi cok mantiksiz (resim olursa zaten sabit olur, bir sitenin boyu ne olacak onceden tahmin etmek gerekir yoksa ya cok uzun olur resim bos alan kalir site de ya da cok kisa olur resim ve yesilin tam altindan kesinti sseklinde turuncu yeniden baslar, resim bittigi yerden kendini tekrarlar cunku...)

O nedenle turuncudan sariya gecen bir resim yukariya konulup, saridan yesile gecen bir resim de asagiya konulup ortanin arkaplanini sari yaparsak, tamamen istedigimiz görünüme ulasiriz.... Böylece ortadaki arkasi sari olan alan metin büyüklügüne göre uzar ve kisalir.... selin.tr.gg nin arkaplani bu sekilde yapilmistir. Bir benzer islem de su sekilde yapilmaktadir:

body {
background-image: url("resminURLsi");
background-repeat:repeat;
}

Bu repeat elemani ile bir minicik resmi eklersiniz, sayfayi dolduracak kadar cogalir...Mozaik gibi arkaplanlar  böyle yapilir... Aslinda bu satiri yazmasaniz da, kod yazilmis sayar, tam tersini yapmak icin background-repeat:no-repeat; demek gerekir.... selin.tr.gg nin arkaplani turuncudan sariya ve yesile gecis gibi görünse de, arkaplani aslinda saridir sadece...Bu nedenle bu sitenin arkaplani genis bir turuncudan sariya dönme resmi degildir (üst resim), sadece 1-2 piksel genisligindedir, repeat sayesinde sayfa genisligi kadar kendini tekrarlayarak yayilir... Alttaki saridan yesile gecis de ayni sekilde... background-repeat: repeat-x; ve background-repeat: repeat-y; resimleri saga-sola yada yukari-asagi seklinde cogaltir (gemotrik x ve y duzlemini dusunun

background-attachment: fixed; eklentisi ile de arkaplan resminin sayfayi kaydirma cubugu ile kaydirdiginizda kaymamasini saglayabilirsiniz...
Her eleman ; ile birbirinden ayrilmasi gerektigi icin, bu noktali virgülü hep "cümle" sonuna eklemeyi unutmayin


SELIN.TR:GG
1. https://img.webme.com/pic/s/selin/selinback.jpg bu resmi siteme yükledim
2. Resimlerden bu isimli resme sağ tıklayıp özelliklere bakarak URLsını aldım.
3. Bu kodu Tasarım Ayarları -> CSS-Kodu (4. kutucuk) kısmına ekledim.

---

Header (Bas) ve Footer (Alt) / RESIMLER

Simdi biraz resim teknikleri ögrenmemiz gerekiyor. Öncelikle herseyi Wondows'un PAINT programinda da yapabilirsiniz, ancak tavsiye tmiyorum cünkü cok kisitli bir program... Resimlerin kalitesi web kalitesi icin yeterli olmayabiliyor, ayrica renk gecisleri, transparan yapmak vs. paint ile neredeyse imkansiz... PHOTOSHOP gibi bilindik bir program da cok pahali... OPEN SOURCE adini verdigimiz bedava olan hizmetler sagolsun, bedava olan SÜPER bir resim programi var... Bunun adi GIMP... Windows Vista icin indirmek icin: http://www.gezginler.net/modules/mydownloads/singlefile.php?download=gimp&lid=3418

GIMP nasil kullanilir ögrenmek icin: http://gimpology.com/
Malesef ingilizce...

---