Информационные сообщения, рамка для текста, админ сообщения

Информационные сообщения

Снова всем привет.

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

Предлагаю 5 цветовых решений таких информационных сообщений. Такие выделяющиеся блоки являются просто отличным способом привлечь внимание ваших посетителей к важной информации.

Установка CSS
Code
.info_box {
  margin:10px 0px 10px;
  font-size:13px;
  line-height:18px;
  position:relative;
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
}
.info_box_content {
  text-shadow:1px 1px 1px white;
  padding:18px 43px 17px 66px;
  min-height:35px;
}

.warning {
  border:1px solid #E0B1B1;
}
.warning .info_box_content {
  color:#AD7676;
  background:#FFD9D5;
  border:1px solid #FCEEEC;
  -moz-box-shadow:inset 0 0 45px #f0bfba;
  -webkit-box-shadow:inset 0 0 45px #F0BFBA;
  box-shadow:inset 0 0 45px #F0BFBA;
}
.warning::before {
  width:17px;
  height:17px;
  background:url(http://mvcreative.ru/example/3/sprite_ico_box.png) no-repeat;
}
.note {
  border:1px solid #B9DBB6;
}
.note .info_box_content {
  color:#7EA57B;
  background:#DFF7DD;
  border:1px solid #F1F9F0;
  -moz-box-shadow:inset 0 0 45px #cbe5c9;
  -webkit-box-shadow:inset 0 0 45px #CBE5C9;
  box-shadow:inset 0 0 45px #CBE5C9;
}
.note::before {
  width:19px;
  height:14px;
  background:url(http://mvcreative.ru/example/3/sprite_ico_box.png) no-repeat 0 -17px;
}
.nice {
  border:1px solid #E2E2BA;
}
.nice .info_box_content {
  color:#ADA771;
  background:#F9F9DC;
  border:1px solid #FBFBEF;
  -moz-box-shadow:inset 0 0 45px #efefc0;
  -webkit-box-shadow:inset 0 0 45px #EFEFC0;
  box-shadow:inset 0 0 45px #EFEFC0;
}
.nice::before {
  width:22px;
  height:20px;
  background:url(http://mvcreative.ru/example/3/sprite_ico_box.png) no-repeat -19px -15px;
}
.advise {
  border:1px solid #B3D8D3;
}
.advise .info_box_content {
  color:#80ACB0;
  background:#DDF5F7;
  border:1px solid #F1FAFB;
  -moz-box-shadow:inset 0 0 45px #c6edf0;
  -webkit-box-shadow:inset 0 0 45px #C6EDF0;
  box-shadow:inset 0 0 45px #C6EDF0;
}
.advise::before {
  width:19px;
  height:15px;
  background:url(http://mvcreative.ru/example/3/sprite_ico_box.png) no-repeat -17px 0;
}
.normal {
  border:1px solid #DDD;
}
.normal .info_box_content {
  color:#737373;
  background:#FAFAFA;
  border:1px solid #FAFAFA;
  -moz-box-shadow:inset 0 0 45px #e7e7e7;
  -webkit-box-shadow:inset 0 0 45px #E7E7E7;
  box-shadow:inset 0 0 45px #E7E7E7;
}
.normal::before {
  width:20px;
  height:16px;
  background:url(http://mvcreative.ru/example/3/sprite_ico_box.png) no-repeat 0 -34px;
}

.warning::before, .note::before, .nice::before, .advise::before, .normal::before {
  content:'';
  position:absolute;
  top:22px;
  left:28px;
}

Добавьте эти стили в ПУ / Дизайн / Управление дизайном (css) либо к себе в отдельный css файл

Установка HTML

Все очень просто, данный html код вы можете вставить в любое удобное для вас место, будь то новостной материал, или сообщения на форуме...


информационное сообщение html
Code
<div class="info_box warning">
<div class="info_box_content">
  Внимание, убедитесь в том, что на этом этапе настройки параметров соответствуют рекомендуемым, в противном случае мы не может гарантировать стабильную работу...
</div>
</div>

информационное сообщение html
Code
<div class="info_box note">
<div class="info_box_content">
  Внимание, убедитесь в том, что на этом этапе настройки параметров соответствуют рекомендуемым, в противном случае мы не может гарантировать стабильную работу...
</div>
</div>

информационное сообщение html
Code
<div class="info_box nice">
<div class="info_box_content">
  Внимание, убедитесь в том, что на этом этапе настройки параметров соответствуют рекомендуемым, в противном случае мы не может гарантировать стабильную работу...
</div>
</div>

информационное сообщение html
Code
<div class="info_box advise">
<div class="info_box_content">
  Внимание, убедитесь в том, что на этом этапе настройки параметров соответствуют рекомендуемым, в противном случае мы не может гарантировать стабильную работу...
</div>
</div>

информационное сообщение html
Code
<div class="info_box normal">
<div class="info_box_content">
  Внимание, убедитесь в том, что на этом этапе настройки параметров соответствуют рекомендуемым, в противном случае мы не может гарантировать стабильную работу...
</div>
</div>
Различие все блоков лишь в одном классе:
  • warning - красный
  • note - зеленый
  • nice - желтый
  • advise - голубой
  • normal - серый

Вот и все, спасибо за внимание

Понравилась статья? Перейди по рекламной ссылке ниже.
Раздел: Веб детали html css js ∫ Просмотров: 4903 ∫ 18.11.20124.9
» Оцени и добавь:
оцени статью
4.9
8 Комментариев Поделись своим мнением
#8 Написал BSide, 02.11.2014 22:24 Цитатнуть
Цитата Chicago
В чем может быть проблема?

Может быть из-за конфликта с другими стилями на сайте.
Отправьте ссылку на свой сайт (в ЛС), посмотрим.
#7 Написал Chicago, 02.11.2014 11:55
Цитатнуть
Здравствуйте. Помогите, пожалуйста. Поставила код в ксс, но у меня криво отображается: http://savepic.net/6177974.png
В чем может быть проблема?
#6 Написал PrinceP, 28.08.2013 00:03
Цитатнуть
У меня в краткой версии новости отображается нормально, а внутри новости - не работает. В чем причина?
#5 Написал DISCONNECT, 05.05.2013 04:27
Цитатнуть
Спасибо, очень приятные на вид окна, забераю :)
#4 Написал cech, 29.11.2012 16:04
Цитатнуть
Quote (Vedmak)
Вставить их в панельку BB и будет как на WordPress

что-то вы напутали значит при попытке вставить в бб панель WP
#3 Написал Vedmak, 29.11.2012 14:29
Цитатнуть
Вот что выдает
Quote (Vedmak)
This XML file does not appear to have any style information associated with it. The document tree is shown below.
#2 Написал Vedmak, 29.11.2012 14:27
Цитатнуть
Вставить их в панельку BB и будет как на WordPress

При входе на сайт выдает что XML фаил не связан с чем то там...
#1 Написал MAKAROV, 23.11.2012 17:45
Цитатнуть
Спасибо:) Пригодится!
Вы зашли на сайт как незарегистрированный пользователь. Чтобы получить полный доступ к сайту, дополнительные возможности, пройдите пятиминутную регистрацию, либо войдите на сайт под свои логином.
Что говорят заказчики?
Наша команда сотрудничает с MVC достаточно продолжительное время. Мы очень довольны результатами работы. Рекомендуем!
Брович Денис, Россия
Заказывал шаблон, всё на высшем уровне, все что я просил было выполненно, даже больше, перевыполнено. Всё получилось просто супер, сочетания цветов и красота просто поражают.
Велисов Юрий, Украина
Приятно работать! Отзывчивость, исполнительность, заинтересованность в результате и качестве работы! Спасибо!
Смолен Аленксандо, Украина