CSS message boxes for different types

Using Message boxes is a great way to display error, success, info and warning messages. a lot of famous websites use a similar message box to display different type of messages. To Enhance the message box, I, have added different styles and icons for different Message Status. I also added a complete download file with code and icons for most projects.

Error and success CSS message boxes 001

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.

Error and success CSS message boxes 002

A good message box for web page with icon and title, a great border style, I set width for 400px but height is auto so you can write multi line in the message body, I also support this subject with php programming to make a simple function message box.

Error and success CSS message boxes 003

A simple message box created with two div elements with a small icon, 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.

Error and success CSS message boxes 004

A great css message boxes for error, success, info and warning, with title ,icon and great border style. I make a flexible and movable message box so you can drag it anywhere using jQuery, finally I added a close button at the corner, I also support this subject with php programming to make a simple function message box.



I will add more message box later :)

If this post was good and helpful for you, Please give it Like.

.