Каждый веб-разработчик время от времени сталкивается с задачами, которые вызывают раздражение и нежелание. Одной из таких задач может быть создание индикатора уведомлений. Однако, не все так сложно, как кажется на первый взгляд. В этой статье мы разберем, как можно создать стильный и функциональный индикатор уведомлений, используя только CSS, без единой строки JavaScript.
Шаг 1: Создание базовой структуры HTML
Начнем с базовой структуры, которая включает родительский элемент base, внутри которого находится элемент indicator, а также счетчик уведомлений noti_count:
<div class="base">
<div class="indicator">
<div class="noti_count">5</div>
</div>
</div>Шаг 2: Оформление базового элемента
Элемент base будет основой нашего индикатора, представляя собой круг, внутри которого будет размещен индикатор:
.base {
height: 100px;
width: 100px;
border: 1px solid transparent;
border-radius: 50%;
position: relative;
background-color: #66ffcc;
}В данном случае, высота и ширина одинаковы, что делает элемент base квадратом. Устанавливая border-radius: 50%, мы превращаем его в круг. Свойство position: relative позволяет нам корректно позиционировать дочерние элементы внутри этого круга.
Совет: Если вы хотите сделать индикатор более интересным, можно использовать изображение вместо фонового цвета:
.base {
height: 100px;
width: 100px;
border: 1px solid transparent;
border-radius: 50%;
background-image: url("../assets/unsplash.jpg");
background-size: cover;
background-position: right;
position: relative;
}Шаг 3: Создание индикатора
Теперь займемся созданием самого индикатора. Этот элемент будет размещен в верхнем правом углу родительского элемента base.
.indicator {
position: absolute;
top: 0%;
right: 0%;
left: 60%;
bottom: 60%;
background-color: brown;
border: 3px solid rgb(51, 51, 51);
border-radius: 50%;
}Что происходит:
position: absoluteпозволяет нам позиционировать индикатор относительно элементаbase.- Свойства
top,right,left, иbottomустанавливают позицию индикатора, смещая его от верхнего правого угла. border-radius: 50%снова делает элемент кругом.
Шаг 4: Добавление счетчика уведомлений
Теперь пришло время для блока noti_count, который будет отображать количество уведомлений внутри индикатора. Для оформления текста используем следующий стиль:
.noti_count {
font-family: "Montserrat", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
color: aliceblue;
font-weight: 700;
}Чтобы текст был размещен точно в центре индикатора, добавим display: flex и соответствующие свойства для выравнивания:
.indicator {
position: absolute;
top: 0%;
right: 0%;
left: 60%;
bottom: 60%;
background-color: brown;
border: 3px solid rgb(51, 51, 51);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}Результат
После выполнения всех шагов у вас получится стильный и минималистичный индикатор уведомлений, который можно легко встроить в любой проект. Этот индикатор создан исключительно с помощью CSS и не требует использования JavaScript, что делает его простым и эффективным решением для современных веб-сайтов.
Теперь ваш сайт готов к отображению уведомлений стильно и элегантно!
