Трикод

Блог программиста {три::код}

CSS боксы уведомления: success, error, info, etc..

CSS боксы уведомления: success, error, info, etc..
ИсходникиДемо

Подборка из трех вариантов CSS блоков уведомлений.
Подборка состоит из следующих блоков CSS уведомлений:

  • Success (Успешная операция)
  • Error (Уведомление об ошибке)
  • Info (Информационное сообщение)
  • Warning (Предупреждение)
  • Print (Уведомление печати)
  • Purchase (Уведомление покупки)
  • Secure (Уведомление безопасности)
  • Message Простое сообщение)
  • Download(Бокс скачивания)
  • Tip (Подсказка)

Эта статья не является уроком создания блоков CSS уведомлений. Я сделал подборку из трех вариантов, берите и качайте.

Стоит отметить, что иконки входящие в состав подборки вы можете заменить по своему вкусу, скачав iconpack на с вой вкус из просторов интернета.

И еще. На стиль текста внутри CSS boxes влияет стиль параграфа и заголовка H4, определенные в стилях вашего сайта.
В примере, на текст влияют эти настройки:

 
body{
font-family:Arial, Helvetica, sans-serif; 
font-size:13px;
}
h4 { 
margin:5px 5px 5px 80px;
padding:0; 
font-size:16px; 
}
p { 
font-size:12px; 
color:#000; 
margin:5px 5px 5px 80px; 
}

ИсходникиДемо
Поля со * обязательны.