CSS Message Boxes for different message types


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  1. div class="info">Info message</div>
  2. <div class="success">Successful operation message</div>
  3. <div class="warning">Warning message</div>
  4. <div class="error">Error message</div>
  5.  
  6. body{
  7. font-family:Arial, Helvetica, sans-serif;
  8. font-size:13px;
  9. }
  10. .info, .success, .warning, .error, .validation {
  11. border: 1px solid;
  12. margin: 10px 0px;
  13. padding:15px 10px 15px 50px;
  14. background-repeat: no-repeat;
  15. background-position: 10px center;
  16. }
  17. .info {
  18. color: #00529B;
  19. background-color: #BDE5F8;
  20. background-image: url('info.png');
  21. }
  22. .success {
  23. color: #4F8A10;
  24. background-color: #DFF2BF;
  25. background-image:url('success.png');
  26. }
  27. .warning {
  28. color: #9F6000;
  29. background-color: #FEEFB3;
  30. background-image: url('warning.png');
  31. }
  32. .error {
  33. color: #D8000C;
  34. background-color: #FFBABA;
  35. background-image: url('error.png');
  36. }

URL: http://css.dzone.com/news/css-message-boxes-different-me

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.