css message boxes for different types


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

A simple message box created with only one div container with background and border color, some margin and padding for position the text message nicely, I set the width for 500px, you can change it to auto or any fixed value you want.


Copy this code and paste it in your HTML
  1. <style>
  2. .error_msg_001, .success_msg_001, .info_msg_001, .warning_msg_001{
  3. width: auto;
  4. height: auto;
  5. margin: 1px;
  6. padding: 2px 4px;
  7. text-align:center;
  8. font: bold 15px Arial,sans-serif;
  9. }
  10.  
  11. .error_msg_001{
  12. border:solid 1px #FBD3C6;
  13. background:#FDE4E1;
  14. color: #B10009;
  15. }
  16.  
  17. .success_msg_001{
  18. border: solid 1px #ADDE5C;
  19. background: #DFF2BF;
  20. color: #008000;
  21. }
  22.  
  23. .info_msg_001{
  24. border:solid 1px #46B6EC;
  25. background:#BDE5F8;
  26. color: #00529B;
  27. }
  28.  
  29. .warning_msg_001{
  30. border:solid 1px #FDDD5B;
  31. background:#FEEFB3;
  32. color: #9F6000;
  33. }
  34. </style>
  35.  
  36. <div id="msg_1" class="error_msg_001">
  37. Error: This username is not available.
  38. </div>
  39.  
  40. <div id="msg_2" class="success_msg_001">
  41. Your account has been created successfuly.
  42. </div>
  43.  
  44. <div id="msg_3" class="info_msg_001">
  45. Important information for your account.
  46. </div>
  47.  
  48. <div id="msg_4" class="warning_msg_001">
  49. Warning: please update your profile information.
  50. </div>

URL: http://function-code.blogspot.com/2012/12/css-message-boxes-for-different-types.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.