Skip to content

Instantly share code, notes, and snippets.

@csndra0504

csndra0504/CSS: Message Boxes

Created December 12, 2012 19:55
Show Gist options
  • Save csndra0504/4271004 to your computer and use it in GitHub Desktop.
Save csndra0504/4271004 to your computer and use it in GitHub Desktop.
Download ZIP
Css message boxes: Info, Success, Warning, Error, Validation
Raw
CSS: Message Boxes
<!DOCTYPE HTML>
<html>
<head>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding: 15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('img/info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image: url('img/success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('img/warning.png');
}
.error{
color: #D8000C;
background-color: #FFBABA;
background-image: url('img/error.png');
}
.validation{
color: #D63301;
background-color: #FFCCBA;
background-image: url('img/validation.png');
}
</style>
</head>
<body>
<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>
<div class="validation">Validation message 1<br>Validation message 2</div>
</body>
</htm>
@haihoa
Copy link

haihoa commented Jan 27, 2016

You can see message box here: http://emailchecker.info/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment