» »

Информационные блоки на чистом CSS

Информационные блоки на чистом CSS

Разноцветные таблицы под функций, что можно применить на сайта как оповещение для пользователей, которые созданы в красивом стиле. Информационные блоки работающие на css для вашего сайта. Данные уведомления предназначены для появления когда пользователь совершает какие-либо важные действия, но вы можете использовать их так, как вам подскажет ваша фантазия, где можно применить такой стиль информации.

Html

Код
<div id="error" class="message">
  <a id="close" title="Закрыть" href="#" onClick="document.getElementById('error').setAttribute('style','display: none;');">×</a>
  <span>Внимание!</span> Сообщение о критической ошибке.
</div>

<div id="warning" class="message">
  <a id="close" title="Закрыть" href="#" onClick="document.getElementById('warning').setAttribute('style','display: none;');">×</a>
  <span>Упс!</span> Предупреждающее сообщение.
</div>

<div id="info" class="message">
  <a id="close" title="Закрыть" href="#" onClick="document.getElementById('info').setAttribute('style','display: none;');">×</a>
  <span>Важно!</span> Просто информационное сообщение.
</div>

<div id="success" class="message">
  <a id="close" title="Закрыть" href="#" onClick="document.getElementById('success').setAttribute('style','display: none;');">×</a>
  <span>Поздравляем!</span> Сообщение об успешном действии.
</div>

CSS

Код
/* базовый контейнер уведомлений */
.message{
  background-size: 40px 40px;
  background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,  
  transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
  transparent 75%, transparent);
  background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,  
  transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
  transparent 75%, transparent);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,  
  transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
  transparent 75%, transparent);
  box-shadow: 0 0 8px rgba(0,0,0,.3);
  font:16px 'Open Sans';
  width: 85%;
  margin: 20px auto;
  padding:15px;
  -moz-animation: bg-animate 5s linear infinite;
  -webkit-animation: bg-animate 5s linear infinite;
  -ms-animation: bg-animate 5s linear infinite;
  animation: bg-animate 5s linear infinite;
}

/* заголовок сообщения */
.message span{font-weight:600;}

/* кнопка закрытия */
.message #close{float:right; color:inherit; text-decoration:none;}

/* сообщение об ошибке */
.message#error{
  background-color:tomato;
  border-left:7px #dc3d21 solid;
  color:white;
}

/* предупреждение */
.message#warning{
  background-color: #eaaf51;
  border-left:7px #df8b00 solid;
  color:#6b6d31;
}

/* инфо-блок */
.message#info{
  background-color: #4ea5cd;
  border-left:7px #3b8eb5 solid;
  color:#beecfc;
}
/* успешное событие */
.message#success{
  background-color: #61b832;
  border-left:7px #55a12c solid;
  color:#296829;
}
/* анимация */
@-webkit-keyframes bg-animate {
  from {
  background-position: 0 0;
  }
  to {
  background-position: -80px 0;
  }
}  

@-moz-keyframes bg-animate {
  from {
  background-position: 0 0;
  }
  to {
  background-position: -80px 0;
  }
}  

@keyframes bg-animate {
  from {
  background-position: 0 0;
  }
  to {
  background-position: -80px 0;
  }
}

Демонстрация:
09.03.2018 Просмотров: 551 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 8
-SAM-
-SAM- 10.03.2018 08:261
0
Это красивые всплывающие уведомления на CSS3 и jQyery, а не на чистом CSS. Посмотреть пример работы можно Доступно только для пользователей. В нашем случае прикрутили еще кнопку, чтобы закрыть можно было; на другом еще сайте это решение идёт, но уже с подключенными куки (чтобы запоминание закрытия сделать). Ну, а Kashirina просто свою рекламу в работу поставила, к которой не имеет никакого отношения (даже сам материал скопипастили с другого сайта). Вот демонстрация конкретно для этого материала. В принципе, если убрать кнопку закрытия, то вполне можно применять стили оформления и для информационных табличек. Кому на форум нужно, то вот скрипт можете взять отсюда.
Kashirina
Kashirina 10.03.2018 16:222
0
Критикуете предлагайте свой материал, а не переводи темы в обычное словоблудие, или все ,что у вас получается это работа языком?
-SAM-
-SAM- 10.03.2018 18:313
0
Kashirina
Kashirina 10.03.2018 19:044
0
Разве было где то указано ,что я являюсь автором? или указано то,что это моя наработка? Оставлена ссылка на сайт который не является источником?
Не выворачивайте ситуацию так как вам хочется, от этого умнее не будите.
-SAM-
-SAM- 12.03.2018 06:555
0
Не было указано источника, что здесь, что у вас на сайте. И никто ничего не выворачивает - от как раз вашему сайту проку не будет, когда так начнут копировать с сайта на сайт материал, начиненный ссылкой на ваш сайт (возможно, что только под фильтр быстрее зайдёт)... пользователей более не станет, как и с поисковика не прибудет - ибо копирование текста материала с другого сайта... или на этот счёт готовы поспорить? Было бы перед кем мне что-то оспаривать и оправдываться, как говорите "от этого умнее не будете" (а надо умнее быть? или просто закрывать глаза на попытки привлечь внимание к своему сайту таким образом?). И да, смотрю обнаглели уже... давно пора ввести наказание за публикацию материалов, содержащую рекламу "левую" сайтов, которые не фигурировали на сайтах-источниках материалов (именно, что тех, кто их сделал или доработал). Это же касается и ссылок на постерах материалов.
-SAM-
-SAM- 12.03.2018 07:156
0
Kashirina
Kashirina 12.03.2018 12:047
0
Цитата -SAM- ()
P.S.: и да, "левую" рекламу всяких "авторов", сайтов-посредников, перепечатывающих материалы - пресекать всегда буду (даже когда неосознанно такое со стороны публикующих)

Насмешил на zornet их тонна.. Чего не присекал ?
-SAM-
-SAM- 14.03.2018 14:298
0
avatar