Создание сообщений с помощью CSS
Проголосовало: 14
- Скачать с сервера
- Скачать
- Смотреть демо
Информирующее сообщение должно быть голубыми, так как люди ассоциируют этот цвет с информацией. Это может быть любая информация, которая может быть полезна юзеру.
2. Сообщения об успешной операции
Сообщения об успехе должны быть показаны после того, как юзер успешно выполнил какую-либо операцию. Успешно - означает полностью и без ошибок. Обычно такие сообщения зеленого цвета.
3. Предупреждающее сообщение
Предупреждающее сообщения должны быть показаны пользователю если операция не может быть завершена. Обычно они желтого цвета.
4. Сообщения об ошибке
Сообщения об ошибке должны быть показаны только в том случае, если операцию невозможно выполнить. Красный идеальный цвет для этого, так как многие ассоциируют этот цвет с тревогой
5. Сообщение ратификации
Сообщение ратификации, подобные сообщения показывают пользователю его ошибки (например, при заполнении форм).
В CSS вставляем данный код:
body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('validation.png');
}
</STYLE>
Теперь нам достаточно в теле документа создать слой с необходимым классом:
<DIV class="success">Сообщение об успешной операции</DIV> <BR>
<DIV class="warning">Предупреждающее сообщение</DIV> <BR>
<DIV class="error">Сообщение об ошибке</DIV> <BR>
<DIV class="validation">Сообщение ратификации</DIV><P>
Источник: http://forucoz.com
А теперь мои наработки и объяснения
1. Информационные сообщения.
2. Сообщение об успешной операции.
3. Предупреждающее сообщение.
4. Сообщения об ошибке.
В CSS вставляем данный код:
body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.info, .success, .warning, .error {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #000000;
background-color: #32A6FF;
background-image: url('http://webo4ka.3dn.ru/favicon.ico');
}
.success {
color: #000000;
background-color: #9FF204;
background-image:url('http://webo4ka.3dn.ru/favicon_zelen.png');
}
.warning {
color: #000000;
background-color: #F6F931;
background-image: url('http://webo4ka.3dn.ru/favicon_zeltii.png');
}
.error {
color: #000000;
background-color: #FC3232;
background-image: url('http://webo4ka.3dn.ru/favicon_krasnii.png');
}
</STYLE><P>
Теперь нам достаточно в теле документа создать слой с необходимым классом:
<DIV class="success">Сообщение об успешной операции</DIV> <BR>
<DIV class="warning">Предупреждающее сообщение</DIV> <BR>
<DIV class="error">Сообщение об ошибке</DIV> <BR><P>
Источник: http://webo4ka.3dn.ru/
- Всего комментариев: 8
0
|
http://wss-steam.com.ua/news/ukrainskij_startap_multitest_privlek_investicii_v_razmere_480_tys_grn/2014-03-26-1071
|
0
|
четко)
|
0
|
а как такое на форум организовать??
|
0
|
в интернете поищи, такое есть для форума.
|
+1
|
Вовчик,молодец))
|
0
|
А где архив с картинками? Я в первом виде точно вижу, что там "тело" с картинками сбоку, а потом текст, как во втором варианте
|
|
0
|
Щас найду загружу
|
|
0
|
Спаса большое.
|
- Оставить комментарий:
| 0 онлайн |
0 наших |
0 чужих |
| |  |  | |  |  |
 | | |  |  |  |
- Обратная связь
- Правила
- RSS
- +18
- Мобильная версия
- Хостинг от uCoz
- Copyright - webo4ka.ru © 2010-2024 г.
- Design by Вовчик Администратор:)