Çatlak Dünya » Anasayfa » Webmaster

CSS Renkli Mesaj Kutuları

31 Mart 2012 | Yazar: Mümin Köykıran | 1 yorum | 6.414 Kez Ziyaret Edildi.

Merhaba Arkadaşlar Sitenizde Kullanabileceğiniz Renkli Mesaj Kutu Kodlarını Paylaşacağım Toplam 4 Adettir.
Hata Mesajı İçin, İkaz Mesajı İçin, Onay Mesajı İçin ve Bilgi Mesajı İçin Ben Öyle Dedim Diye Hata İkaz Onay Bilgi Mesaj Kutularını Aynı Kullanmak Zorunda Değilsiniz İstediğiniz Şekilde İstediğiniz Her de Kullanabilirsiniz Örnek WordPress Siteniz Var Diyelim Ana Sayfada Duyuru Paylaşabilirsiniz Yada Yazı Altında Etiketleri Paylaşabilirsiniz Aşağıda HTML CSS ve Demo’yu Aşağıda Belirttim.

Demo

CSS Kodları

.onay, .hata, .bilgi, .ikaz {
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
}

.onay     {
background-color: #EBF8D6;
border: 1px solid #A6DD88;
color: #555555;
background-image: url(http://img.webme.com/pic/c/catlak-dunya/onayy.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
}

.hata      {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #555555;
background-image: url(http://img.webme.com/pic/c/catlak-dunya/hata.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://img.webme.com/pic/c/catlak-dunya/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
}

.ikaz   {
background-color: #FFFBCC;
border: 1px solid #FFF35E;
color: #555555;
background-image: url(http://img.webme.com/pic/c/catlak-dunya/ikaz.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 Kodları

<div class="ikaz">Bu bir ikaz kutusudur. Önizleme Catlak-Dunya.Com</div>
<div class="hata">Bu bir hata kutusudur. Önizleme Catlak-Dunya.Com</div>
<div class="bilgi">Bu bir bilgi kutusudur. Önizleme Catlak-Dunya.Com</div>
<div class="onay">Bu bir onay kutusudur. Önizleme Catlak-Dunya.Com</div>
Bir önceki yazımız olan başlıklı makalemizi de okumanızı öneririz.
quup FaceBook'ta paylaş
 Yazının Etiketleri  
  Gelen Aramalar 
avatar

Mümin Köykıran

http://catlak-dunya.com Araştırmayı seven birisiyim, meraklı bir kişiliğim var bilgisayar ile ilgili hiçbir konuda uğraşmaktan sıkılmam. Kendimi bilgisayar ile ilgili her konuda geliştirmeye çalışıyorum. Çanakkale On Sekiz Mart Bilgisayar Mühendisliği Öğrencisiyim. Google+

Teknoloji Haberleri

Teknoloji Haberleri

sayac