Классные уведомления на CSS3. Их автором является Peter Viszt. 

Я сделал несколько изменений в CSS и HTML, а также добавил Предупреждающие уведомления (блок с жёлтым оттенком). Сами они создавались с помощью нескольких базовых свойств CSS3, например, таких как box-shadow для границ и внутреннего блеска и linear-gradient для фона и т.д.

Давайте посмотрим код.

HTML:

<div class="warning alert-message">
    <a href="#" class="close">✘</a>
    <p>First and Last Warning.</p>
</div>
<div class="error alert-message">
    <a href="#" class="close">✘</a>
    <p>Oh Snap, Something went wrong.</p>
</div>
<div class="success alert-message">
    <a href="#" class="close">✔</a>
    <p>Everything is Great!</p>
</div>

CSS:

.alert-message {
    font-family: sans-serif;
    margin: 20px;
    font-weight: bold;
 border-radius: 3px;

    padding: 1px;
    position: relative;
    font-size: 12px;
}

.alert-message .close {
    color: #745050;
    text-decoration: none;
    float: right;
    margin: 7px 7px 0 0;
    font-weight: bold;
    font-size: 16px;
}

.alert-message p {
    display: block;
    margin: 0;
    padding: 8px 20px 7px 10px;

    border-radius: 3px;
}

.error {
    background-color: #d29191;

    box-shadow: 0px 0px 6px rgba(244,187,187,0.7);
}

.error p {
    background-color: #f4baba;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#f4baba), to(#db7f7f));
    background-image: -webkit-linear-gradient(top, #f4baba, #db7f7f);
    background-image: -moz-linear-gradient(top, #f4baba, #db7f7f);
    background-image: -o-linear-gradient(top, #f4baba, #db7f7f);
    background-image: linear-gradient(to bottom, #f4baba, #db7f7f);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f4baba', EndColorStr='#db7f7f');

    box-shadow: inset 0px 1px 0px #f7d0d0;

    color: #745050;
    text-shadow: 1px 1px 0px #eaadad;
}

.success {
    background-color: #c6cdaa;
box-shadow: 0px 0px 6px rgba(223,230,198,0.7);
}

.success p {
    background-color: #e2e8c9;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#e2e8c9), to(#c1c8a7));
    background-image: -webkit-linear-gradient(top, #e2e8c9, #c1c8a7);
    background-image: -moz-linear-gradient(top, #e2e8c9, #c1c8a7);
    background-image: -o-linear-gradient(top, #e2e8c9, #c1c8a7);
    background-image: linear-gradient(to bottom, #e2e8c9, #c1c8a7);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#e2e8c9', EndColorStr='#c1c8a7');

    box-shadow: inset 0px 1px 0px #ebf0da;

    color: #676b5b;
    text-shadow: 1px 1px 0px #d6dcc3;
}

.warning {
    background-color: #D0D291;

    box-shadow: 0px 0px 6px rgba(223,230,198,0.7);
}

.warning p {
    background-color: #D0D291;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1b4), to(#dede85));
    background-image: -webkit-linear-gradient(top, #f1f1b4, #dede85);
    background-image: -moz-linear-gradient(top, #f1f1b4, #dede85);
    background-image: -o-linear-gradient(top, #f1f1b4, #dede85);
    background-image: linear-gradient(to bottom, #f1f1b4, #dede85);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1b4', EndColorStr='#dede85');

    box-shadow: inset 0px 1px 0px #ebf0da;

    color: #676b5b;
    text-shadow: 1px 1px 0px #d6dcc3;
}

Не поддерживаются браузеры:

• Internet Explorer 8.0 и ниже.

А вот и пример:

Перевод статьи "Simple and Soothing CSS3 Notifications" с сайта "cssdeck.com, автор CSS Creations.

От переводчиков. Оригинал статьи содержит в коде устаревшие элементы (напр., -ms-linear-gradient, ставший ненужным благодаря поддержке linear-gradient в IE10, и устаревший вариант синтаксиса самого linear-gradient без "to"). В нашем переводе это исправлено, поэтому код выше (в отличие от кода оригинала) можно использовать в реальных проектах.

P.S. Это тоже может быть интересно:

• CSS-выражения от контейнера для дизайнеров
• «Родительскому селектору» :has(), скорее всего, запретят быть вложенным
• Как читать W3C-спецификации