Table of Contents

Alert Style

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

× Example alert for .alert-success.

HTML

<div class="alert alert-success">
  <a class="close" data-dismiss="alert" href="#">×</a>
  Example alert for <em>.alert-success</em>.
</div>
HTML

CSS

.alert-success {
  color: #272;
  background-color: #dfd;
}
CSS

Informative Alert

× Example alert for .alert-info.

HTML

<div class="alert alert-info">
  <a class="close" data-dismiss="alert" href="#">×</a>
  Example alert for <em>.alert-info</em>.
</div>
HTML

CSS

.alert-info {
  color: #278;
  background-color: #def;
}
CSS

Warning Alert

× Example alert for .alert-warning.

HTML

<div class="alert alert-warning">
  <a class="close" data-dismiss="alert" href="#">×</a>
  Example alert for <em>.alert-warning</em>.
</div>
HTML

CSS

.alert-warning {
  color: #750;
  background-color: #ffe;
}
CSS

Error Alert

× Example alert for .alert-error.

HTML

<div class="alert alert-error" style="display:block">
  <a class="close" data-dismiss="alert" href="#">×</a>
  Example alert for <em>.alert-error</em>.
</div>
HTML

CSS

.alert-error {
  color: #933;
  background-color: #fdd;
}
CSS

My Own Custom Alerts

Construction Alert

× Example alert for .alert-caution.

HTML

<div class="alert alert-caution">
  <div class="alert-inner">
    <a class="close" data-dismiss="alert" href="#">×</a>
    Example alert for <em>.alert-caution</em>.
  </div>
</div>
HTML

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;
  }
}
CSS

Development Alert

× Example alert for .alert-blueprint.

HTML

<div class="alert alert-blueprint">
  <a class="close" data-dismiss="alert" href="#">×</a>
  Example alert for <em>.alert-blueprint</em>.
</div>
HTML

CSS

.alert-blueprint {
  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;
}
CSS

Alerts as Sections

Below are alert-styled <section> elements that already adjust with window resizing.

× Example alert for .alert-success.
× Example alert for .alert-info.
× Example alert for .alert-warning.
× Example alert for .alert-error.
× Example alert for .alert-caution.
× Example alert for .alert-blueprint.

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;
  }
}
CSS

Special Thanks

This page is comprised of my own additions and either partially or heavily modified elements from the following source(s):