Решения на 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 ставим плагин добавления кнопок в редактор и создаем теги вызова нужного блока, прописываем стили в свой файл темы.
Вызов примерно такой:
Код
1
<div class='error'><img src='images/error.png' alt='Ошибка' height='32' width='32' align='left' />Сюда тег</div>


Далее установка красивых подсказок с использованием только SCC, их вы можете увидеть вверху урока, текст имеющий подсказку подчеркивается пунктиром.



Ссылка на источник обязательна: www.yworld.ru
Разместил: garry | Дата: 26.02.2012
Рейтинг статьи

Средняя оценка: 0.00/0Средняя оценка: 0Всего голосов:0

Отлично
Хорошо Нормально Пойдёт Плохо
Комментарии

Гость- Gudzon
Комментарий: 3
Гость- GudzonДа бог с этим IE, зато в нормальных браузерах красиво, хотя и ишаке не плохо выделение работает.
Зачет!!!!
Дата регистрации: Нет информации
Гость- Изюм
Комментарий: 2
Гость- ИзюмПолезно и практично, спасибо. Немного переделаю под дизайн своего сайта и самое то.
Буду ждать про подсказки, смотрится здорово.
Дата регистрации: Нет информации
Коля2
Комментарий: 1
Коля2Очень полезный урок, спасибо. Как раз задумывался о чем то таком. Теперь прикручу у себя.
Дата регистрации: 30.01.2012
Вы не можете отправить комментарий анонимно, пожалуйста зарегистрируйтесь.