О web-разработке
и даже немного больше...

Рисуем шкалу на HTML+CSS

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

<div class="progress">
  <div class="grayback"></div>
  <div class="strips"></div>
</div>

Как видно, ничего сложного и нечитабельного, два блока с классами 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 код), вы можете вносить изменение в текущее состояние величины. Такой метод очень удобен в случаях, когда величина должна меняться динамически, для этого достаточно манипулировать заданными параметрами, и всё это дело будет визуализироваться.

Смотрим живой пример

Опубликован: 25.12.2016 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Мобильное меню для сайта на CSS
Опасность использования атрибута target="_blank"
Бесконечная анимация вращения на CSS
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта

Комментарии

  1. Илья пишет:

    Спасибо за большую помощь!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта