Css Mesaj Kutusu Örnekleri

Projenizde göze hoş gelen mesaj kutuları için biraz css bilgisi ile kullanıcıya hitap edebilirsiniz. coderler.com css mesaj kutusu stilleri v.1 örneklerini inceleyebilir ve kullanabilirsiniz.

Yukarıdaki resimde gördüğünüz gibi göze hoş gelen css mesaj kutuları için aşağıdaki html kodlarına sitenizde kullanabilirsiniz.

<div class="mesajKutusu tamam">coderler.com tanrıverdi</div>
<div class="mesajKutusu hata">coderler.com tanrıverdi</div>
<div class="mesajKutusu bilgi">coderler.com tanrıverdi</div>
<div class="mesajKutusu uyari">coderler.com tanrıverdi</div>
<div class="mesajKutusu seffaf">coderler.com tanrıverdi</div>

Yukarıdaki kodların css kodları ise aşağıda yer almaktadır. Aşağıdaki kodları stil dosyanıza ekledikten sonra mesaj kutuları kullanıma hazır.

.mesajKutusu {
  text-align: left;
  padding: 5px 8px;
  color:#333;
  margin: 0px 0px 20px;
}
 
.mesajKutusu.seffaf {
  background-color: #efefef;
  border-top: 2px solid #dedede;
  border-bottom: 2px solid #dedede;
  color: #555;
}
.mesajKutusu.bilgi  {
  background-color: #f7fafd;
  border-top: 2px solid #b5d3ff;
  border-bottom: 2px solid #b5d3ff;
}
.mesajKutusu.tamam {
  background-color: #d7f7c4;
  border-top: 2px solid #82cb2f;
  border-bottom: 2px solid #82cb2f;
}
.mesajKutusu.uyari {
  background-color: #fef5be;
  border-top: 2px solid #fdd425;
  border-bottom: 2px solid #fdd425;
}
.mesajKutusu.hata {
  background-color: #ffcdd1;
  border-top: 2px solid #e10c0c;
  border-bottom: 2px solid #e10c0c;
}
.mesajKutusu ol {
  margin: 6px 20px 6px 20px;
  list-style-type: lower-roman;
}
.mesajKutusu ol li {
  margin-left: 20px;
  padding-left: 10px;
  list-style-type: decimal;
}