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
27 Декабря 2021 Загрузок: 3 Просмотров: 1126 Комментариев: (3)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

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

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

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