Alert Styles

An example of some alert patterns based on their needs.

by Victor

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="error"> <span class="fa fa-times-circle"></span> Error message! <span class="close fa fa-times"></span>

</div>
<div class="success"> <span class="fa fa-thumbs-up"></span> The record has successfully saved. <span class="fa fa-times close"></span>

</div>
<div class="alert"> <span class="fa fa-warning"></span> Something needs your attention. Would you like to view it? <a href="#">Go</a>  <a href="#">Later</a>  <a href="#">Never</a>
 <span class="close fa fa-times"></span>

</div>

CSS

/* apply a natural box layout model to all elements */
 *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family:sans-serif;
}
.error {
    border:1px solid #999;
    /* box-shadow:inset 0 5px 0 red; */
    margin:3px;
    padding:0;
    padding-right: 19px;
    position:absolute;
    bottom:0;
    left:0;
    border-radius:4px;
    /* letter-spacing:1px; */
    /* width:20px; */
    overflow:hidden;
}
.success {
    border:1px solid #999;
    box-shadow:inset 0 5px 0 #1E824C;
    margin:0;
    padding:30px 20px 18px;
    position:absolute;
    top:10px;
    left:1%;
    width:98%;
    border-radius:4px;
    text-align: center;
}
.alert {
    border:1px solid #999;
    box-shadow:inset 0 5px 0 #F7CA18;
    margin:3px;
    padding:20px;
    position:absolute;
    bottom:0;
    right:0;
    /* max-width:50%; */
    border-radius:4px;
}
.alert a {
    display:inline-block;
    padding:1px 5px;
    background:black;
    background:#999999;
    border-radius:5px;
    color:white;
    text-decoration: none;
    border:1px solid #777;
}
span.fa.fa-times-circle {
    margin-right:5px;
    color:white;
    display:inline-block;
    margin:0;
    margin-right: 5px;
    background:red;
    height:100%;
    padding:15px;
    background: rgb(255, 48, 25);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 48, 25, 1) 0%, rgba(207, 4, 4, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 48, 25, 1)), color-stop(100%, rgba(207, 4, 4, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 48, 25, 1) 0%, rgba(207, 4, 4, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 48, 25, 1) 0%, rgba(207, 4, 4, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 48, 25, 1) 0%, rgba(207, 4, 4, 1) 100%);
    /* IE10+...

JavaScript

$('.success').css('opacity', "0").animate({
    "opacity": "1"
}, 900).delay(3300).animate({
    "opacity": "0"
}, 900, function () {
    $(this).remove();
});

$('.fa-thumbs-up').animate({
    left: "50%"
}, 1200).delay(3000).animate({
    left: "100%"
}, 1200);

$('.error').slideUp(0).slideDown(1100).delay(3500).slideUp(900, function(){$(this).remove()});

$('.alert').hide(0).show(340);

$('.close').click(function () {
    $(this).parent().fadeOut(900, function () {
        $(this).remove();
    });
});