CSS Message Boxes

CSS message boxes with icons that don't require an image! Includes: success, info, warning, and error.

by Erin

HTML

<div class="msg successMsg">
    <p>Success! Woo-Hoo! Yatta! YAY! WAAHOO!</p>
</div>
<div class="msg infoMsg">
    <p>Information: this message is created with only CSS -- no images!</p>
</div>
<div class="msg warningMsg">
    <p>Warning! Warning!  You are the Doctor! You are the enemy of the Daleks!</p>
</div>
<div class="msg errorMsg">
    <p>Oops! Something has gone very wrong...</p>
</div>

CSS

.msg {
    padding: 0.5em;
    margin: 0.7em auto 0;
    min-width: 11em;
    width: 50%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 }
 .msg p {
    font-family: Arial, Helvetica sans-serif;
    font-weight: bold;
    font-size: 0.7em;
    display: inline; 
    text-align: center;
    word-break: break-word;
 }
 /* =============== */
 /* SUCCESS MESSAGE */
 .successMsg::before {
    content: "\2713";
    color: rgba(0,90,11,1);
    font-weight: bold;
    display: inline-block;
    padding: 0.3em;
    margin: 0 0.3em 0 0;
    text-align: center;
    border-radius: 50%;
    border: 1px solid rgba(0,90,11,1);
    width: 10px;
    height: 10px;
    line-height: 0.6em;
    background: rgba(158,255,164,1);
    background: -moz-linear-gradient(left,rgba(158,255,164,1) 0%,rgba(0,171,37,1) 100%);
    background: -webkit-gradient(left top,right top,color-stop(0%,rgba(158,255,164,1)),color-stop(100%,rgba(0,171,37,1)));
    background: -webkit-linear-gradient(left,rgba(158,255,164,1) 0%,rgba(0,171,37,1) 100%);
    background: -o-linear-gradient(left,rgba(158,255,164,1) 0%,rgba(0,171,37,1) 100%);
    background: -ms-linear-gradient(left,rgba(158,255,164,1) 0%,rgba(0,171,37,1) 100%);
    background: linear-gradient(to right,rgba(158,255,164,1) 0%,rgba(0,171,37,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9effa4',endColorstr='#00ab25',GradientType=1);
 }
 .successMsg {
    border: 1px solid rgba(0,90,11,1);
    background-color: rgba(198,249,202,1);
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,90,11,1);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,90,11,1);
    box-shadow: 2px 2px 0px 0px rgba(0,90,11,1);
 }
 .successMsg p {
    color: rgba(0,90,11,1);
 }

 /* ============ */
 /* INFO MESSAGE */
 .infoMsg::before {
    content: "i";
    color: rgba(0,39,56,1);
    font-weight: bold;
    display: inline-block;
    padding: 0.3em;
    margin: 0 0.3em 0 0;
    text-align: center;
   ...