BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про HTML » Тег «meter» – вывод значений в заданном диапазоне

Тег «meter» – вывод значений в заданном диапазоне

2017-03-29 / Вр:22:01 / просмотров: 1042

В этой статье хочу рассказать о теге «meter», который отвечает за вывод значений в заданном диапазоне.
Применяется тег «meter» для отображения:

- дискового пространства;
- количества результатов запросов;
- количество голосов в голосовании (рейтинг);
- объема жидкости и т.д

Внимание:  не перепутайте – тег «meter» не применяется в качестве индикатора,  для этого есть тег «progress».

Атрибуты тега «meter»:

  • value - устанавливает значение. Обязательный атрибут
  • min - задает минимально возможное значение
  • max - задает максимально возможное значение
  • low - определяет предел, при достижении которого значение считается низким
  • high - определяет предел, при достижении которого значение считается высоким
  • optimum - определяет наилучшее или оптимальное значение

Внешний вид: представляет собой частично или полностью закрашенную полоску:

Тег «meter» - вывод значений в заданном диапазоне

Также полоска может быть зеленого, желтого или красного цвета:

Тег «meter» - вывод значений в заданном диапазоне

Цвет зависит от расположения значения optimum:

  • красный - min ≤ optimum < low
  • желтый - low ≤ optimum ≤ high
  • зеленый - high < optimum ≤ max

Простой пример:

<meter value="90" min="0" max="100" ></meter>

Результат:

Попробуйте изменить в атрибуте «value» значение.

Можно использовать и нецелые числа:

<meter value="0.15" min="0" max="1" ></meter>

Пример с цветной полоской:

Значение value="0"

<meter value="0" low="20" high="80" min="5" max="100" optimum="10" title="0ГБ из 100ГБ занято"></meter> 0ГБ из 100ГБ занято

Результат:

0ГБ из 100ГБ занято

Значение value="50"

<meter value="50" low="20" high="80" min="5" max="100" optimum="10" title="50ГБ из 100ГБ занято"></meter> 50ГБ из 100ГБ занято

Результат:

50ГБ из 100ГБ занято

Значение value="90"

<meter value="90" low="20" high="80" min="5" max="100" optimum="10" title="90ГБ из 100ГБ занято"></meter> 90ГБ из 100ГБ занято

Результат:

90ГБ из 100ГБ занято

Также можно изменить вид полоски через CSS:

meter {
margin-top: 10px;
width: 50%;
height: 25px;
background: #e5e5e5;
background: -webkit-gradient(linear, left top, right bottom, from(#e5e5e5), to(#e5e5e5), color-stop(0.33, #e5e5e5), color-stop(0.33, #cecece), color-stop(0.66, #cecece), color-stop(0.66, #e5e5e5));
background: linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background-size: 50px 25px;
}
meter::-webkit-meter-bar {
background-color: #e5e5e5;
background: -webkit-gradient(linear, left top, right bottom, from(#e5e5e5), to(#e5e5e5), color-stop(0.33, #e5e5e5), color-stop(0.33, #cecece), color-stop(0.66, #cecece), color-stop(0.66, #e5e5e5));
background: -webkit-linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background: linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background-size: 50px 25px;
}
meter::-webkit-meter-optimum-value {
background: -webkit-gradient(linear, left top, left bottom, from(#bdf), to(#bdf), color-stop(0.20, #def), color-stop(0.45, #7ac), color-stop(0.55, #7ac));
background: -webkit-linear-gradient(top, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
}
meter.my_meter:-moz-meter-optimum::-moz-meter-bar {
background: linear-gradient(to bottom, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
}

Результат:

Тег «meter» - вывод значений в заданном диапазоне

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 784
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4296