CSS3 Çoklu Arka Plan background
15 Mart 2010. Yazar: blackinci
Daha önce background Özelliklerinden bahsetmiştim bunu tekrarlamamızın nedeni tabiki CSS3 peki css bu konuda neler getirdi bunlara bakalım artık CSS3 sayasinde birden fazla arkaplan resmi kullanabiliyoruz aslında bu çok ama çok güzel bir özellik daha önceleri sadece div layer ile oval tablo yapmak için 5 - 6 adet div layer kullanırdık ama artık sabit bir genişlik vermesek bile artık bu durum çok basit oldu gelin bu özelliğimizi örneklerle görelim.
Öncelikle Kullandığımız imajların sıralaması nasıl olur neye göre sıralar bunu bir test edelim öncelikle bir div layer oluşturalım ve buna 4 adet arka plan imaj atayalım nasıl sıralanıyor görelim
div layerimizin adı "kutu" olsun ve css kodlarımızı yazalım
.kutu {
width: 200px;
height: 200px;
border: 1px solid black;
background:
url(img/sari.png) -150px -150px no-repeat,
url(img/mavi.png) -100px -100px no-repeat,
url(img/yesil.png) -50px -50px no-repeat,
url(img/kirmizi.png) 0px top no-repeat;
}
width: 200px;
height: 200px;
border: 1px solid black;
background:
url(img/sari.png) -150px -150px no-repeat,
url(img/mavi.png) -100px -100px no-repeat,
url(img/yesil.png) -50px -50px no-repeat,
url(img/kirmizi.png) 0px top no-repeat;
}
Yukarıdaki örnekte kutumuzun genişliğini ve yüksekliğini 200 pixel olarak atadık ve dörtane arka plan atadık imajlarımızın hepside 200 pixel 200 pixeli 4 e bölerek yukarıdan aşağı doğru sıraladık ilk verdiğimiz resim en üste kalan imaz oluyor yani hangi sıralamada yazarsak kodumuzu imajlarımız o sırada devam edliyor alttaki demo sayfasına bakarak test edebilirsiniz
Demo
Birde eskiden uzun uğraşlar sonucu yaptığımız oval kutular vardı şimdi birde 1 adet div layer ile oval kutu yapmaya nedersiniz hadi hemen başlayalım
.kutu {
width: 200px;
height: 200px;
border: none;
background:
url(../img/ust-sol.png) left top no-repeat,
url(../img/ust-sag.png) right top no-repeat,
url(../img/alt-sol.png) left bottom no-repeat,
#cfcfcf url(../img/alt-sag.png) right bottom no-repeat;
}
width: 200px;
height: 200px;
border: none;
background:
url(../img/ust-sol.png) left top no-repeat,
url(../img/ust-sag.png) right top no-repeat,
url(../img/alt-sol.png) left bottom no-repeat,
#cfcfcf url(../img/alt-sag.png) right bottom no-repeat;
}
yukardaki kodumuzda köşelere birer 8 pixellik bir grafik hazırladım ve en son kısıma bir renk verdim peki neden en son kısımda verdik bu rengi bir önceki örnekte sıralamadan bahsettim demiştim ya en son sırada kalan en arkada kalıyor imazların üstüne binmemesi için renk kısmını en son verdik alttaki demodan nasıl göründüğüne bakabilirsiniz
Demo
Şimdi yaptığımız oval kutu border sizdi birtanede border uygulanmış bir oval kutu yapalım
.kutu {
width: 200px;
height: 200px;
text-align: center;
border: none;
background:
url(../img/ust-sol.png) left top no-repeat,
url(../img/ust-sag.png) right top no-repeat,
url(../img/alt-sol.png) left bottom no-repeat,
url(../img/alt-sag.png) right bottom no-repeat,
url(../img/ust-bg.png) left top repeat-x,
url(../img/sol-bg.png) left top repeat-y,
url(../img/sag-bg.png) right top repeat-y,
#cce8ff url(../img/alt-bg.png) left bottom repeat-x;
}
width: 200px;
height: 200px;
text-align: center;
border: none;
background:
url(../img/ust-sol.png) left top no-repeat,
url(../img/ust-sag.png) right top no-repeat,
url(../img/alt-sol.png) left bottom no-repeat,
url(../img/alt-sag.png) right bottom no-repeat,
url(../img/ust-bg.png) left top repeat-x,
url(../img/sol-bg.png) left top repeat-y,
url(../img/sag-bg.png) right top repeat-y,
#cce8ff url(../img/alt-bg.png) left bottom repeat-x;
}
bu örneğimizde border uygulanmış bir oval tablo yaptık burada diğerlerininden daha fazla resim atadık önceki köşeleri dodurduk sonrada tekrar eden resimlerimizi atadık neden sonra tekrar edenleri hazırladık yine sıralama sorunu olmasın diye bu şekilde yaptık demo yu inceleyin
Demo
Arkadaşlar mantığı anlamışsınızdır umarım elimden geldğince kolay anlatmaya çalıştım takıldığınız yer olursa çekinmeden sorun elimden geldiğince cevaplamaya çalışırım. şimdilik hoşcakalın
Demoları indirmek için alttaki bağlantıyı kullanabilirsiniz