Blogger: Css ile hazırlanmış mesaj kutuları

Css ile hazırlanmış bu mini kutucuklar yazılarınızda belirgin olarak gösterilmesini istediğiniz onay, uyarı, hata, ve bilgi mesajlarınızı öne çıkarmanıza yarar.İhtiyaç duydukça bende bu css kodlarından yararlanıyorum. Özellikle bazı yazılarımı izinsiz olarak alan kullanıcıları uyarmak amaçlı.
Benim gibi css işinin esasını öğrenmeye çalışanlar için gerçekten faydalı kodlar.
Kullanım alanlarından birisi de "İlgili Aramalar Eklentisi". Bu sayede eklentiyi düzenleyerek blog temanızla uyumlu hale getirebiliyorsunuz.
Bu konuda size 4 farklı stilde css kutucuğu göstereceğim siz dilerseniz farklı resimler ve kodları ile kutucukları değiştirebilirsiniz.

Html-css kodları, resimler ve demolar aşağıda, güle güle kullanın :)

CSS KODLARI

.tamamdir, .olmadi, .bilgi, .uyari {
background-repeat: no-repeat;
background-position: 10px center;
height: 25px;
text-transform: uppercase;
font-size: 11px;
line-height: 22px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 50px;,
-webkit-border-radius: 3px;  
-moz-border-radius: 3px;  
border-radius: 3px
}

.tamamdir     {
background-color: #EBF8D6;
border: 1px solid #A6DD88;
color: #555555;
background-image: url(http://4.bp.blogspot.com/-biFKm3cEbog/T2t-NmBILXI/AAAAAAAADKM/9Se6RGJXwTE/s1600/tamam.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset; 
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}

.olmadi      {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #555555;
background-image: url(http://1.bp.blogspot.com/-qqVi6UlRvag/T2t-MYLzTBI/AAAAAAAADKE/7ry8ttmJcw8/s1600/olmadi.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset; 
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}

.bilgi    {
background-color: #D3EEF1;
border: 1px solid #81CDD8;
color: #555555;
background-image: url(http://4.bp.blogspot.com/-Qxtxt1oiOnY/T2t-Lyf6-8I/AAAAAAAADJ8/Qx-RbCyWbVU/s1600/bilgi.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset; 
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}

.uyari   {
background-color: #FFFBCC;
border: 1px solid #FFF35E;
color: #555555;
background-image: url(http://2.bp.blogspot.com/-hPx3l7bOuSA/T2t-OzqfIOI/AAAAAAAADKQ/Wh2QwnbOHek/s1600/uyari.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset; 
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}

HTML KODLARI

<div class="uyari">Bu bir uyarı kutusudur.</div>
<div class="olmadi">Bu bir hata bildiri kutusudur.</div>
<div class="bilgi">Bu bir bilgi kutusudur.</div>
<div class="tamamdir">Bu bir ne yazacağımı bilemedim kutusudur.</div>

Güle güle kullanıın, kullandıkça beni hatırlayıın :)