CSS İle Manşet Alanı Oluşturma

Herkese merhaba ! Blogumda, meraklı olduğum ve ilgilendiğim CSS ile ilgili paylaşımlar yapacağımı bu yazım ile duyurmak isterim.

Bugün ki konumuz ise Manşet Alanı Oluşturma (Öne Çıkan Yazılar).Unutmadan ekleyeyim, bu manşetin CSS dökümü Uğur Dalkıran tarafından gerçekleşmiştir.Ben sadece biraz editledim. Sizleri daha fazla bekletmeden hemen kodlarımıza geçiyorum.


CSS kodlarımızı eklemek için aşağıdaki kodu bulun.

]]></b:skin>

Bulduğunuz kodun hemen üzerine aşağıdaki kodları ekleyin.

#manset-aerakman{
    background-color:#FFFFFF;
    width:915px;
    border:solid 1px #ccc;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    padding:10px;
    text-align:center;
    margin:10px auto;
    -moz-box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.1);
}
#manset-aerakman li{
    display:inline-block;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
}

Şimdi ise HTML kodlarımız

<div id='manset-aerakman'>
  <li><a href='YAZI-ADRESI'><img height='120' src='RESIM-ADRESI' width='180'/></a>
  </li>

  <li><a href='YAZI-ADRESI'><img height='120' src='RESIM-ADRESI' width='180'/></a>
  </li>

</div>

HTML kodları arasında bulunan YAZI-ADRESI ve RESIM-ADRESI bölümlerini kendinize göre değiştireceksiniz.

İyi bloglamalar ! // aerakman