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


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

3429
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: