Малюємо шкалу на HTML+CSS

по

31.12.2021

360

У повсякденному житті, в середовищі інтернету ми часто стикаємося з різними даними. Серед них є величини різного роду, дають нам зрозуміти становище тих чи інших обставин по числах. Скажімо, це може бути ступінь заповнення простору на диску сервера, статус виконання якої-небудь операції, значення рейтингу ну і так далі. Прагнення зробити інформацію більш зручною для сприйняття, призводить до того, що досить часто в просторах інтернету можна помітити відображення тих чи інших даних у вигляді шкал. Шкала – візуальний елемент, що може позначати якусь величину, і може використовуватися досить широко в усіх сферах.
В даному посту, ми розглянемо простий приклад того, як можна намалювати шкалу на CSS у себе на сайті. Першим ділом, в HTML додаємо код, який буде візуалізувати шкалу.

Як видно, нічого складного і нечитабельного, два блоку з класами grayback і strips, укладені в загальний блок progress. Вся магія малювання шкали буде реалізована за допомогою CSS.

.progress {
position: relative;
width: 600px;
height: 20px;
overflow: hidden;
background: #ff3232;
background: linear-gradient(to right, #ff3232 0%,#ff9600 33%,#ffff00 66%,#00ff00 100%);
}
.strips {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to right, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
background-size: 6px 100%; /* Ширина поділу = 6px / 2 = 3px */
}
.grayback {
position: relative;
left: 79%; /* Поточний стан */
width: 100%;
height: 100%;
background-color: #ddd;
}

Як видно, тут теж нічого космічного. Для трьох класів описані параметри, які сприяють візуалізації стану шкали. Змінюючи деякі з них (див. сам CSS код), ви можете вносити зміни в поточний стан величини. Такий метод дуже зручний у випадках, коли величина повинна динамічно змінюватися, для цього досить маніпулювати заданими параметрами, і все це справа буде візуалізуватися.

Дивимося живий приклад

Додав: htmaker, 25.12.2016 р.
(2 голосів, середній: 4,50 із 5)

Завантаження…

Діліться з друзями:

См. також:

Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript