CSS İle Tüm Kategorilere Farklı Arkaplan Resmi Koyma

CSS İle Tüm Kategorilere Farklı Arkaplan Resmi Koyma

Web tasarım yaparken birçok kullanıcı sitenin renk uyumunu ve arka plan resmini siteyle uyumlu halde tasarlar. Mesela bir film sitesinde arka planda klişe filmlerin kapakları kullanılırken bir oyun sitesinde efsane oyunların görselleri yer alır. Özellikle akılda kalan karakterler kullanılır. Ancak çok yönlü bir web sitesi tasarlayacaksanız her kategori için farklı renk yada görsel kullanmak isteyebilirsiniz. Örneğin kadınlarla ilgili içerikler paylaştığınız bir kategoride pembe ağırlıklı tasarım yaparken, erkeklerle ilgili paylaşım yaptığınız kategoride mavi tonları kullanmanız gerekebilir. Her kategori için ayrı bir class ismi vereceğiz ve her class için ’de istediğimiz renk ve arka plan resmi için gerekli kodları tanımlayacağız.


Kategoriler İçin Class Tanımlama

<ul class="icon">
<li class="Anasayfa"><a href="#">Anasayfa</a></li>
<li class="Kadin><a href="#">Kadın</a></li>
<li class="Erkek"><a href="#">Erkek</a></li>
</ul>

Burada dikkat etmeniz gereken nokta her kategori için tanımlanan li tagına bir class ismi verildi. Bu sayede her class’a ayrı ayrı background-image veya background-color özelliği tanımlayıp istediğimiz renk veya resmi atamış olacağız. Yukarıdaki kodu sitenizin görünmesini istediğiniz bir noktaya kopyalayın. Bu işlemi yaptıktan sonra her kategori için farklı arkaplan özelliği vereceğimiz CSS kodlarına geçelim.

Arkaplan Resmi için Gerekli CSS Kodları

.icon
{
list-style: none;
margin: 0;
padding: 0;
}
 
li.Anasayfa
{
background-image: url(bullet_home.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 2px 0 2px 10px;
margin: .3em 0;
}
 
li.Kadin
{
background-image: url(kadin_resim.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 2px 0 2px 10px;
margin: .3em 0;
}
 
li.Erkek
{
background-image: url(erkek_resim.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 2px 0 2px 10px;
margin: .3em 0;
}

Yukarıdaki CSS kodlarında her class için bir resim atandı. Resim yerine sadece renk vermek istiyorsanız background-image kodlarını background-color ile değiştirmeniz gerekiyor. Örnek kullanım;

background-color: red;

Facebook'ta Paylaş Whatsapp'ta Paylaş
Facebook'ta Paylaş Whatsapp'ta Paylaş
Yorumlar

Yorumunuzu Yazın

E-posta adresiniz yayınlanmayacaktır.


Son Yorumlar

  • Çetin Yitmener:İlgili ilgisiz o kadar açıklama var ki? Hiçbirisi ...
  • kıymet:fesbuk açın eski hesabımı....
  • kıymet:fesbuk kapandı eskı hesabımı açın...
  • kıymet:Yanlışlıkla fesim kapandı.eski hesabımı nasıl yükl...
  • Tuncay:silinen foto ve videolar geri getirme zamanı varmı...
  • upper maker:zaten videoları 600 saniye ye kadar indiriyor....
  • osman:oyun kaldırmıyor ve enkötü telefon bence kullanma...
  • Arda:Düzenle kısmı nerede...