ZorNet.Ru — сайт для вебмастера » HTML и CSS » Предупредительные уведомления на CSS

Предупредительные уведомления на CSS

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

Здесь идет простая рамка, которая может преображать любой заданный вами оттенок, но изначально вся цветовая гамма идет по умолчанию. Где красный цвет идет больше на предупреждение, так как можно по левой стороне наблюдать знаки. А это означает, что вы самостоятельно можете выставить свою форму уведомлений, которая красиво вписывалась в основную стилистику сайта или страницу. Такой небольшой дизайн, кардинально изменит видимость материала, что преобразит его для красоты.

Если так случилось, и вы еще не подключили шрифтовые знаки Font Awesome, то вот вам стиль, что будет выводить значение, что идут виде значка.

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

При установочном процессе, рамки так выглядят на интернет ресурсе:

Красивый дизайн предупредительных сообщений в CSS

Установка:

HTML

Код
<div class="green_bloom">
  <p>Написанное уведомление в рамке #1.</p>
</div>
<div class="yellow_relection">
  <p>Отправляя текстовое сообщение #2.</p>
</div>
<div class="red_panoramar">
  <p>Активация экрана при уведомлении #3.</p>
</div>
<div class="blue_display">
  <p>Политика конфиденциальности в Интернете #3.</p>
</div>

CSS

Код
.green_bloom,
.yellow_relection,
.red_panoramar,
.blue_display {
  margin: 25px;
  padding: 10px 10px 10px 34px;
  color: #333;
  border-radius: 2px;
  background: #fff;
  position: relative;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  box-sizing: border-box;
}
.green_bloom:before,
.yellow_relection:before,
.red_panoramar:before,
.blue_display:before {
top: calc(50% - 25px);
  content: "";
  background: inherit;
  color: inherit;
  border: inherit;
  display: block;
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 48px;
  position: absolute;
  left: -25px;
  box-sizing: border-box;
  font-family: "FontAwesome";
  font-size: 22px;
}
.green_bloom {
  border: 2px solid #19932d;
  color: #167c27;
}
.green_bloom:before {
  content: "\f00c";
}
.yellow_relection {
  border: 2px solid #d16a16;
  color: #c76312;
}
.yellow_relection:before {
  content: "\f12a";
}
.red_panoramar {
border: 2px solid #d52621;
  color: #b32e2a;
}
.red_panoramar:before {
  content: "\f057";
}
.blue_display {
  border: 2px solid #1a79c7;
  color: #1e7bc7;
}
.blue_display:before {
  content: "\f129";
}

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

PS - спасибо пользователю Snoopak за внимательность и доработки материала. Так как если бы мы в основе написали больше знаков, то она автоматически в ширину увеличилась, и кнопка по левой стороне осталась на месте, а значит не корректно смотрелось.

Теперь внесены небольшие доработки от Snoopak, что как бы не увеличивалась рамка, то кнопка всегда будет по центру, как можно посмотреть ниже на изображение или прочесть первый комментарий.

Красивые и стильные рамки под описание на чистом CSS

Демонстрация
Источник: atuin.ru
2021-12-27 Загрузок: 2 Просмотров: 382 Комментарий: (3)

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

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

Оставь свой отзыв

Комментарий: 3
Snoopak
Snoopak 2021-12-27 21:221
+3
Неплохо, но если текста больше чем на одну строку, то иконка становится не по центру блока Тык. Я бы добавил для псевдоэлемента с иконкой (.green_bloom:before, .yellow_relection:before, .red_panoramar:before, .blue_display:before) следующий код
Код
top: calc(50% - 25px);
Получится следующее Тык

ИМХО, но это дело вкуса, кому как нравится)
Kosten
Kosten 2021-12-28 00:262
+2
Благодарю Snoopak за внимательность, а также за проверку материала, + в карму. Просто не когда на таких мелочах внимание не заострял, что говорить, и не подумал, а здесь бы реально не корректно бы смотрелось, если добавить более знаков.

В стиле CSS материала исправлен:
Код
top: calc(50% - 25px);
-SAM-
-SAM- 2021-12-29 15:563
+3
И в чём же внимательность? Это кастомная настройка, под себя. Я это к тому, что всё там корректно бы смотрелось, поскольку оно изначально и не должно быть по центру. Как Snoopak написал, мол, дело вкуса.
P.S.: знаю, что это материал про стили для кастомного внешнего вида системных диалоговых окон (alert, prompt и confirm), но без плагинов будут их использовать для табличек.
avatar