Создание сообщений с помощью CSS


Создание сообщений с помощью CSS

3543
8.6 из 10
Проголосовало: 11




  • Скачать с сервера
  • Скачать
  • Смотреть демо
1. Информирующее сообщение

Информирующее сообщение должно быть голубыми, так как люди ассоциируют этот цвет с информацией. Это может быть любая информация, которая может быть полезна юзеру.


2. Сообщения об успешной операции 

Сообщения об успехе должны быть показаны после того, как юзер успешно выполнил какую-либо операцию. Успешно - означает полностью и без ошибок. Обычно такие сообщения зеленого цвета.


3. Предупреждающее сообщение

Предупреждающее сообщения должны быть показаны пользователю если операция не может быть завершена. Обычно они желтого цвета.


4. Сообщения об ошибке

Сообщения об ошибке должны быть показаны только в том случае, если операцию невозможно выполнить. Красный идеальный цвет для этого, так как многие ассоциируют этот цвет с тревогой


5. Сообщение ратификации

Сообщение ратификации, подобные сообщения показывают пользователю его ошибки (например, при заполнении форм).



В CSS вставляем данный код:

Code
<STYLE>  
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>

Теперь нам достаточно в теле документа создать слой с необходимым классом:

Code
<DIV class="info">Информирующее сообщение</DIV> <BR>  
<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 вставляем данный код:

Code
<STYLE>  
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>

Теперь нам достаточно в теле документа создать слой с необходимым классом:

Code
<DIV class="info">Информирующее сообщение</DIV> <BR>  
<DIV class="success">Сообщение об успешной операции</DIV> <BR>  
<DIV class="warning">Предупреждающее сообщение</DIV> <BR>  
<DIV class="error">Сообщение об ошибке</DIV> <BR><P>


Источник: http://webo4ka.3dn.ru/

Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 8

silver
0
silver написал: Написано 27 Марта 2014 в 11:25
Комментарий №8
http://wss-steam.com.ua/news/ukrainskij_startap_multitest_privlek_investicii_v_razmere_480_tys_grn/2014-03-26-1071

BLAzER
0
BLAzER написал: Написано 31 Января 2012 в 10:51
Комментарий №7
четко)

DAN1L
0
DAN1L написал: Написано 14 Июня 2011 в 23:14
Комментарий №5
а как такое на форум организовать??

Вовчик
0
Вовчик написал: Написано 15 Июня 2011 в 14:35
Комментарий №6
в интернете поищи, такое есть для форума.

Главный
+1
Главный написал: Написано 05 Февраля 2011 в 02:47
Комментарий №4
Вовчик,молодец))

WooFi
0
WooFi написал: Написано 09 Августа 2010 в 11:38
Комментарий №1
А где архив с картинками? Я в первом виде точно вижу, что там "тело" с картинками сбоку, а потом текст, как во втором варианте angry

Вовчик
0
Вовчик написал: Написано 09 Августа 2010 в 12:40
Комментарий №2
Щас найду загружу

WooFi
0
WooFi написал: Написано 09 Августа 2010 в 13:27
Комментарий №3
Спаса большое. smile

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2112
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
  • MeVeR написал:
  • Вовка, привет. А вот такой интереснейший вопрос, возможно ли изменить количество посетителей онлайн на форуме?
    Моё авторство:)
    Последние темы
    Опрос
    431
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: