Alert Styles
Below is the HTML and CSS for the alerts that I have designed based on the alerts of the Bootstrap HTML framework and theming system.
Bootstrap Inspired Alerts
Successful Alert
× Alert for .alert-success example. This is good, and means something actually executed correctly!
HTML
<div class="alert alert-success">
<a class="close" data-dismiss="alert" href="#">×</a>
Alert for <em>.alert-success</em> example. This is good, and means something actually executed correctly!
</div>
CSS
.alert-success {
color: #272;
background-color: #dfd;
}
Informative Alert
× Alert for .alert-info example. This can be helpful or not apply to the current user.
HTML
<div class="alert alert-info">
<a class="close" data-dismiss="alert" href="#">×</a>
Alert for <em>.alert-info</em> example. This can be helpful or not apply to the current user.
</div>
CSS
.alert-info {
color: #278;
background-color: #def;
}
Warning Alert
× Alert for .alert-warning example. You may need to check something!
HTML
<div class="alert alert-warning">
<a class="close" data-dismiss="alert" href="#">×</a>
Alert for <em>.alert-warning</em> example. You may need to check something!
</div>
CSS
.alert-warning {
color: #750;
background-color: #ffe;
}
Error / Danger Alert
× Alert for .alert-danger example. Visible only to logged-in visitors by default, or those attempting to log in with incorrect credentials.
HTML
<div class="alert alert-danger" style="display:block">
<a class="close" data-dismiss="alert" href="#">×</a>
Alert for <em>.alert-danger</em> example. Visible only to logged-in visitors by default, or those attempting to log in with incorrect credentials.
</div>
CSS
.alert-danger {
color: #933;
background-color: #fdd;
}
My Own Custom Alerts
Construction Alert
× Caution: site under construction
HTML
<div class="alert alert-caution">
<div class="alert-inner">
<a class="close" data-dismiss="alert" href="#">×</a>
Caution: <em>site</em> under construction
</div>
</div>
CSS
.alert-caution {
background: -webkit-repeating-linear-gradient(45deg, #000, #000 30px, #dd0 30px, #dd0 60px);
background: -moz-repeating-linear-gradient(45deg, #000, #000 30px, #dd0 30px, #dd0 60px);
background: -o-repeating-linear-gradient(45deg, #000, #000 30px, #dd0 30px, #dd0 60px);
background: repeating-linear-gradient(45deg, #000, #000 30px, #dd0 30px, #dd0 60px);
color: black;
font-weight: bold;
padding: 8px;
}
.alert-caution .alert-inner {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 0px 8px;
background: #dd0;
}
@media (max-width: 767px) { /* & below Tablet only */
.alert-caution .alert-inner {
padding: 3px 8px;
}
}
Development Alert
× Development Page: test_alert_style potentially unstable
HTML
<div class="alert alert-demo">
<a class="close" data-dismiss="alert" href="#">×</a>
Development Page: <em>test_alert_style</em> potentially unstable
</div>
CSS
.alert-demo {
background-color: #49d;
background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
background-position: 16px 16px;
/*background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: 15px 15px;*/
background-image: linear-gradient( rgba(255, 255, 255, .3) 1px, transparent 1px),
linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px),
linear-gradient( rgba(255, 255, 255, .1) 1px, transparent 1px),
linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
background-image: -webkit-linear-gradient( rgba(255, 255, 255, .3) 1px, transparent 1px),
-webkit-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px),
-webkit-linear-gradient( rgba(255, 255, 255, .1) 1px, transparent 1px),
-webkit-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
background-image: -moz-linear-gradient( rgba(255, 255, 255, .3) 1px, transparent 1px),
-moz-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px),
-moz-linear-gradient( rgba(255, 255, 255, .1) 1px, transparent 1px),
-moz-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
background-image: -ms-linear-gradient( rgba(255, 255, 255, .3) 1px, transparent 1px),
-ms-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px),
-ms-linear-gradient( rgba(255, 255, 255, .1) 1px, transparent 1px),
-ms-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
background-image: -o-linear-gradient( rgba(255, 255, 255, .3) 1px, transparent 1px),
-o-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px),
-o-linear-gradient( rgba(255, 255, 255, .1) 1px, transparent 1px),
-o-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
color: white;
font-weight: bold;
padding: 8px 16px;
}
Base CSS
.alert {
border-radius: 8px;
margin: 16px 0px;
padding: 0.5em 16px;
word-wrap: break-word;
}
.alert .close {
color: inherit;
float: right;
font-size: 26px;
font-weight: bold;
line-height: 1;
margin-left: 0.5em;
}
.alert .close:hover {
opacity: 0.5;
}
.alert .close:active {
opacity: 0.25;
}
@media (max-width: 767px) { /* & below Tablet only */
.alert {
border-radius: 0px;
border-width: 1px 0px;
margin: 0px;
}
.alert .close {
font-size: 1.35em;
line-height: 22px;
}
}
Special Thanks
This page is comprised of my own additions and either partially or heavily modified elements from the following source(s):