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

3770
8.6 из 10
Проголосовало: 12




  • Скачать с сервера
  • Скачать
  • Смотреть демо
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 2120
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • По просьбам поправили!.
    1. Делаем все как написано.
    2. Находим файл /Ucoz4/ctena_user2_wall_v2.js и меняем все в файле из нашего файла:
    Код
    http://mbs.usite.pro/ctena_user2_wall_v2.js
  • rayven написал:
  • в любом случае, всегда надо под свои нужды настраивать руками. А скрипт пригодиться, не тут, так там.
  • rayven написал:
  • даже Вовчик со мной согласен. tongue
  • Marishka написал:
  • Upd 1.4 Кому лень https://jsfiddle.net/7js6tfp1/5/
  • Marishka написал:
  • Мы обновили код и упростили его установку:
    Что нового:
    1. Новый легкий js код.
    2. Отправка по Enter если есть или нет Aa цвета.
    3. Простая установка.

    Принцип работы:
    Используется родное поле ввода текста с выбором цвета, родная кнопка отправки скрывается позволяя отправить форму по Enter.

    Демо: https://jsfiddle.net/7js6tfp1/4/
    Последние темы
    Опрос
    484
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: