Оформить красиво текст, это значит привлечь внимание к нему пользователей. Сегодня я покажу как оформить текст только с использованием 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
|