Стилизация элемента <meter>

Влад Мержевич

Элемент <meter> применяется для визуального представления числа в заданном диапазоне. <meter> прекрасно стилизуется, хотя браузеры используют для этой цели свои специфические наборы псевдоэлементов. На мой взгляд, <meter> используют необоснованно редко, хотя это простой, наглядный и легко стилизуемый элемент.

Стилизация элемента meter

На webref.ru вышел курс посвящённый стилизации <meter>. В нём рассматривается как его использовать, как стилизовать под Firefox, Chrome и другие браузеры. Чем хорош <meter>, так это тем, что на нём можно отработать практически все приёмы вёрстки. Поэтому рассмотрены следующие темы:

  • градиенты;
  • тени;
  • трансформация;
  • вывод атрибутов.

К каждому уроку приводятся задания на закрепление материала и задачи для самостоятельного решения. В конце курса можно пройти финальную викторину.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.