Регулятор громкости в плеере для IE
Я недавно делал плеер для Internet Explorer по функциональности похожий на VideoJS. Как я уже упоминал, там ни одной картинки — всё VML. Регулятор громкости и кнопочки — UTF-арт.
Попробую описать как сделан регулятор громкости, но писать буду под стандартные браузеры, так что код будет несколько отличаться.
В UTF-8 есть такой символ «❚», им у меня сделана кнопка «Пауза» и им же нарисован регулятор громкости. Нарисовать нужно что-то подобное вот этому:
На рисунке мы видим прямоугольник со скруглёнными углами, это сумеет сделать даже моя бабуля (в IE для этой цели я использовал VML):
Теперь надо снизу обрезать лишнее. В IE я просто ограничил размеры и выставил overflow-y в hidden, тут я поступлю иначе — воспользуюсь crop.
Что делать? Всё просто, это текст, значит, его можно просто развернуть в другую сторону, указав ему direction, правда при указании direction элементы регулятора прилипают к правому краю, для того, что это исправить, укажем отступ справа.
Теперь осталось обрамить это ещё одним родительским контейнером, так как указав абсолютную позицию всех элементов мы вывели их из потока. Родительский контейнер позволит регулятору занять своё место в потоке.
Получился такой код:
Попробую описать как сделан регулятор громкости, но писать буду под стандартные браузеры, так что код будет несколько отличаться.
В UTF-8 есть такой символ «❚», им у меня сделана кнопка «Пауза» и им же нарисован регулятор громкости. Нарисовать нужно что-то подобное вот этому:
На рисунке мы видим прямоугольник со скруглёнными углами, это сумеет сделать даже моя бабуля (в IE для этой цели я использовал VML):
#video_volume {
width: 34px;
height: 20px;
font: 14px Arial;
color: white;
background: gray;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-khtml-border-radius: 0.5em;
border-radius: 0.5em;
}<span>❚<span>❚<span>❚<span>❚<span>❚</span></span></span></span></span>#video_volume span {
position: absolute;
margin-top: 1px;
}Теперь надо снизу обрезать лишнее. В IE я просто ограничил размеры и выставил overflow-y в hidden, тут я поступлю иначе — воспользуюсь crop.
#video_volume div {
clip: rect(auto, auto, 14px, auto);
position: absolute; /* crop работает только у абсолютно позиционированных элементов */
/* кстати, ребята из W3C, почему вы забыли про crop? почему только прямоугольник, зачем position? */
}Что делать? Всё просто, это текст, значит, его можно просто развернуть в другую сторону, указав ему direction, правда при указании direction элементы регулятора прилипают к правому краю, для того, что это исправить, укажем отступ справа.
Теперь осталось обрамить это ещё одним родительским контейнером, так как указав абсолютную позицию всех элементов мы вывели их из потока. Родительский контейнер позволит регулятору занять своё место в потоке.
Получился такой код:
<head>
<style type="text/css">
#video_volume, #video_volume div {
width: 34px;
height: 20px;
font: 14px Arial;
color: white;
background: gray;
padding-right: 5px;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-khtml-border-radius: 0.5em;
border-radius: 0.5em;
}
#video_volume div {
clip: rect(auto, auto, 14px, auto);
position: absolute;
direction: rtl;
}
#video_volume span {
position: absolute;
margin-top: 1px;
}
</style>
</head>
<body>
<div id="video_volume">
<div>
<span>❚<span>❚<span>❚<span>❚<span>❚</span></span></span></span></span>
</div>
</div>
</body>
На «Хабре»