Gönderen Konu: CSS ile Arkaplanları kontrol etme, (Okunma sayısı 2328 defa)

YaBuBeCaN · « : 10 Haziran 2006 10:46:25 »

CSS ile Arkaplanları kontrol etme,

Cascading Style Sheets (CSS) arkaplanları kontrol etmemizi sağlayan mükemmel bir tekniktir. Aşağıdaki örnekler web sayfalarınız için çeşitli arkaplan ve metin elemanları içermektedir.

Önemli Not: Bütün CSS scriptleri web sayfanızın <HEAD></HEAD> etiketleri arasına yerleştirilmelidir. İlk örnek nereye yerleştireceğinizi göstermekte, diğer örnekler ise artık öğrendiğiniz varsayılarak hazırlanmıştır.

>> Background Color (arkaplan rengi)

Kod: [Seç]


<html> 
<head> 
<style> 
body {background-color: lightblue} 
h1 {background-color: #FFFFCC} 
h2 {background-color: transparent} 
p {background-color: rgb(200,0,200)} 
</style> 
</head> 

<body> 
<h1>Head Style 1</h1> 
<h2>Head Style 2</h2> 
<p>Paragraph Style</p> 
</body> 
</html>

Burada ne olduğunu farkettiniz mi? Önceden kararlaştırılmış elemanlara arkaplan renkleri atamış olduk (bu durumda H1, H2 ve P etiketlerinden söz ediyoruz.) Dikkat edin H2 ye "transparent" ( şeffaf ) değerini atadık, sadece arkaplan rengini gösterecek. Bu kodu kopyalayın ve değişkenlerle oynayın.

>> Background Image (arkaplan resmi)

CSS ile arkaplan resmi aşağıdaki gibi ayarlanır. Şimdi neden BODY etiketi yerine CSS kullanacağımızı sorabilirsiniz... çünkü, CSS arkaplan resimlerimizi çeşitli fonksiyonlarla kontrol etmemizi sağlar. Önce hiçbir efekt olmayan bir arkaplan resmi etiketi görelim.

Kod: [Seç]

<style> 
body 
{ 
background-image: 
url(images/my_background.gif) 
} 
</style>

>> Background Repeat (arkaplan tekrarı)

Bu gerçekten güzel... normalde arkaplan resimleri "tile" halinde yada tüm ekranı tekrarlanan resimlerle doldurarak görüntülenir. CSS ile, görüntüyü dikey yada yatay olarak tekrarlayabilirsiniz. Bunu yapmak için aşağıdaki kodu kullanacaksınız.

Kod: [Seç]

<style> 
body 
{ 
background-image: 
url(images/my_background.gif); 
background-repeat: repeat- 
y 
} 
</style>

repeat-y yi repeat-x ile değiştirerek dikey görünümden yataya dönebilirsiniz.

>> Background Position (arkaplan pozisyonu)

Diyelim ki, arkaplan resminizi websayfanızın belli bir kısmına koymak istiyorsunuz, örneğin, ortasına. Bunu gerçekleştirmek için sayfanızın x ve y koordinatlarına özellikler atamalısınız. Arkaplanı merkezlemek için aşağıdaki kodu kullanın:

Kod: [Seç]

<style> 
body 
{ 
background-image: 
url(images/my_background.gif); 
background-repeat: no-repeat; 
background-position: center center 
} 
</style>

>> Background Fixing (arkaplan sabitleme)

Bu örnek arkaplanın nasıl sabitleneceğini gösterir. Resim sayfanın diğer kısmıyla birlikte kaymak yerine sabit olacaktır. Bu özellik Netscape tarafından şu anda desteklenmemektedir.

Kod: [Seç]

<style> 
body 
{ 
background-image: 
url(images/my_background.gif); 
background-repeat: no-repeat; 
background-position: top center; 
background-attachment: fixed 
} 
</style>

Kodbank İndir

Gönderen Konu: CSS ile Arkaplanları kontrol etme, (Okunma sayısı 2328 defa)

YaBuBeCaN

CSS ile Arkaplanları kontrol etme,