Решения на CSS

Красиво оформляем сообщения используя только CSS

Оформить красиво текст, это значит привлечь внимание к нему пользователей. Сегодня я покажу как оформить текст только с использованием CSS, не усложняя сайт и не замедляя его работу. Плюс "оживление" проекта и стилизации.

Все очень просто и не грузит наш сайт JavaScript, которых и так у нас используется много на проектах.

Оформлять текст блоками сообщений выделенными различными цветами соответствующими сообщению в блоке, это привлекает внимание и выглядит красиво. Добавляет в ваш
Ниже приведу примеры блоков(описания даны для понимания применения, но вы вольны использовать их как вам удобно):

1. Информационный

Красиво отделит и подчеркнет важную информацию, на которой нужно сконцентрировать внимание пользователей.

2. Выделить достижение успех

Выделит сообщение о достигнутом успехе или другом событии описываемом в вашем материале.

3. Внимание

Выделение говорящее пользователю о придельном внимании на эту часть текста и тд.

4. Ошибка

Привлеките внимание к событиям при которых возникает ошибка или возможна ошибка исходя из вашего материала.

5. Проверка

Всегда есть что выделить этим блоком в материале. Он подойдёт для выделения значимых мест и тд.

Для всех этих красот нам понадобится добавить в наш файл стилей несколько строк добавляющих оформление к нашим блокам:

Код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

.info, .success, .warning, .error, .validation {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
padding: 2px 0;
width:auto;padding:2px 2px 20px;
}
.info {
color: #BDE5F8;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#BDE5F8), to(#3394EE));
background: -webkit-linear-gradient(#BDE5F8, #3394EE);
background: -moz-linear-gradient(#BDE5F8, #3394EE);
background: -ms-linear-gradient(#BDE5F8, #3394EE);
background: -o-linear-gradient(#BDE5F8, #3394EE);
background: linear-gradient(#BDE5F8, #3394EE);
border: 1px solid #2BB0D7;
font-family: Arial, Helvetica, sans-serif;font-size: 12px; color:#020202;
background-color: #BDE5F8;

}
.success {
color: #4F8A10;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#DFF2BF), to(#EE8D33));
background: -webkit-linear-gradient(#DFF2BF, #EE8D33);
background: -moz-linear-gradient(#DFF2BF, #EE8D33);
background: -ms-linear-gradient(#DFF2BF, #EE8D33);
background: -o-linear-gradient(#DFF2BF, #EE8D33);
background: linear-gradient(#DFF2BF, #EE8D33);
border: 1px solid #83e51b;
font-family: Arial, Helvetica, sans-serif;font-size: 12px; color:#020202;
background-color: #DFF2BF;

}
.warning {
color: #9F6000;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FEEFB3), to(#EE3C33));
background: -webkit-linear-gradient(#FEEFB3, #EE3C33);
background: -moz-linear-gradient(#FEEFB3, #EE3C33);
background: -ms-linear-gradient(#FEEFB3, #EE3C33);
background: -o-linear-gradient(#FEEFB3, #EE3C33);
background: linear-gradient(#FEEFB3, #EE3C33);
border: 1px solid #FFAD33;
font-family: Arial, Helvetica, sans-serif;font-size: 12px; color:#020202;
background-color: #FEEFB3;

}
.error {
color: #D8000C;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFE8BA), to(#EE3367));
background: -webkit-linear-gradient(#FFE8BA, #EE3367);
background: -moz-linear-gradient(#FFE8BA, #EE3367);
background: -ms-linear-gradient(#FFE8BA, #EE3367);
background: -o-linear-gradient(#FFE8BA, #EE3367);
background: linear-gradient(#FFE8BA, #EE3367);
border: 1px solid #d8000c;
font-family: Arial, Helvetica, sans-serif;font-size: 12px; color:#020202;
background-color: #FFBABA;

}
.validation {
color: #D63301;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFE0BA), to(#EE8033));
background: -webkit-linear-gradient(#FFE0BA, #EE8033);
background: -moz-linear-gradient(#FFE0BA, #EE8033);
background: -ms-linear-gradient(#FFE0BA, #EE8033);
background: -o-linear-gradient(#FFE0BA, #EE8033);
background: linear-gradient(#FFE0BA, #EE8033);
border: 1px solid #d63301;
font-family: Arial, Helvetica, sans-serif;font-size: 12px; color:#020202;
background-color: #FFCCBA;
}

Мне показалось удобным возможность изменять любые параметра для каждого блока и тем самым настроить под свой дизайн и потребности. Дано все наглядно и соответственно вы сможете составить и скомпоновать как вам удобно, убрав или изменив параметры для каждого элемента. Я не большой специалист в составлении стилей, но думаю проблем не должно возникнуть. Единственно в IE пока не все так красиво, но в скором времени сделаю для него так же все красоты.
Таблицу можно вставить в файл или вынести.

Для вызова его в нашем сайте достаточно добавить слой с классом необходимым нам:

Код
1 2 3 4 5	<div class="info">Инфо</div> <div class="success">Успех</div> <div class="warning">Внимание</div> <div class="error">Ошибка</div> <div class="validation">Проверка</div>

Вот собственно и все.
Не забывайте, привлечь внимание пользователя - поднять популярность вашего сайта.

Картинки к сообщениям можете конечно поменять на свои, ниже прикладываю текущие.

Скачать картинки

Опишу установку для CMS SLAED. Ставим один из этих модулей добавления кнопок в редактор из админки:
Для Open slaed:
Скачать
Страница плагина

Для более ранних версий:
Скачать
Страница плагина

Пример создания кнопки в модуле:

Код
1	<div class='error'><img src='images/error.png' alt='Ошибка' height='32' width='32' align='left' />{TAG}</div>

Для Wordpress ставим плагин добавления кнопок в редактор и создаем теги вызова нужного блока, прописываем стили в свой файл темы.
Вызов примерно такой: