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

error,success,info and warning css message box 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

error,success,info and warning css message box 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

error,success,info and warning css message box 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

error,success,info and warning css message box 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.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment