Здравствуйте уважаемые начинающие веб-мастера. Ещё один Оригинальный эффект CSS.
Сейчас будем делать красивый ползунок для сайта. Простой-то ползунок сделать просто. Достаточно ввести в html код тег input с атрибутом type=»range», как любой браузер поймёт, что на экране нужно вывести ползунок.
Вот пожалуйста, вставляем в любом месте
<input type="range">И получаем там же
Невзрачненько. Чтоб сделать этот бегунок красивым, можно применить css, но не всё так просто. Дело в том, что каждый браузер отображает бегунок по своему.
Я не стану забивать Вам мозги подробностями, почему так происходит, Вы же ещё только начинающие, и многое Вам будет совершенно не понятно.
Скажу только, что для того чтоб наш бегунок получился красивым во всех браузерах, мы будем использовать вендорные (браузерные) префиксы.
Далее я Вам дам несколько вариантов кода с объясняющими комментариями, и Вы методом научного тыка и матерного слова (самый результативный метод), сможете поработать в Notepad ++ над внешним видом бегунка.
Про незнакомые элементы кода, лучше всего можно узнать на сайте htmlbook. Более понятного и подробного описания, с примерами, в интернете нет.
Итак, код красивого бегунка:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
/* Контейнер */
input[type=range] {
-webkit-appearance: none;
margin: 50px;
width: 20%;
}
input[type=range]:focus {
outline: none;
}
/* Полоса в Хроме */
input[type=range]::-webkit-slider-runnable-track {
height: 8px;
cursor: pointer;
animate: 0.2s;
border: 1px solid #575656;
background: #AD020D;
}
/* Бегунок в Хроме */
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000;
border: 1px solid #000;
height: 35px;
width: 15px;
border-radius: 40%/60%;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
/* Полоса в Мозиле */
input[type=range]::-moz-range-track {
height: 8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000;
background: #AD020D;
border: 1px solid #575656;
}
/* Бегунок в Мозиле */
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 40%/60%;
background: #ffffff;
cursor: pointer;
}
</style>
</head>
<body>
<input type="range" value="0" max="100"/>
</body>
</html>
А вот и он сам, работает, можно подвигать:
Ещё один пример, в котором линия, по которой двигается бегунок, является индикатором.
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
/* контейнер */
input[type=range] {
-webkit-appearance: none;
appearance: none;
width: 260px;
height: 20px;
padding: 0;
box-shadow: inset 0 0 0 2px #2D7CFA;
background: #AD020D;
overflow: hidden;
}
/* Линия-ндикатор для Firefox */
input[type=range]::-moz-range-track {
background: none;
border: none;
}
/* ползунок в Firefox */
input[type=range]::-moz-range-thumb {
-moz-appearance: none;
width: 20px;
height: 20px;
border-radius: 70%/30%;
border: 2px solid #818181;
box-shadow:
-13px 0 #4A0101, -26px 0 #4A0101, -39px 0 #4A0101,
-52px 0 #4A0101, -65px 0 #4A0101, -78px 0 #4A0101,
-91px 0 #4A0101, -104px 0 #4A0101, -117px 0 #4A0101,
-130px 0 #4A0101, -143px 0 #4A0101, -156px 0 #4A0101,
-169px 0 #4A0101, -182px 0 #4A0101, -195px 0 #4A0101,
-208px 0 #4A0101, -221px 0 #4A0101, -234px 0 #4A0101,
-247px 0 #4A0101, -260px 0 #4A0101;
}
/* ползунок в Хроме */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width:20px;
height:20px;
border-radius: 70%/30%;
border: 2px solid #818181;
background: #fff;
box-shadow:
-13px 0 #4A0101, -26px 0 #4A0101, -39px 0 #4A0101,
-52px 0 #4A0101, -65px 0 #4A0101, -78px 0 #4A0101,
-91px 0 #4A0101, -104px 0 #4A0101, -117px 0 #4A0101,
-130px 0 #4A0101, -143px 0 #4A0101, -156px 0 #4A0101,
-169px 0 #4A0101, -182px 0 #4A0101, -195px 0 #4A0101,
-208px 0 #4A0101, -221px 0 #4A0101, -234px 0 #4A0101,
-247px 0 #4A0101, -260px 0 #4A0101;
}
</style>
</head>
<body>
<input type="range" value="0" max="100"/>
</body>
</html>
Результат, так же рабочий:
Чтоб метод тыка и матерного слова, не свёлся у Вас к простому копированию, а был осмысленным и, значит, более плодотворным, я убрал из кода обеих ползунков участок, предназначенный для IE.
Постарайтесь сделать его самостоятельно, и Вы получите наибольшую пользу от этой статьи.
Желаю творческих успехов.
Перемена
Мужчина упал с десятого этажа, и не разбился. Так целиком и похоронили.
Страница из блоков < < < В раздел > > > Вращающийся куб-баннер CSS
???
500000
Спасибо за интересный материал. Да круто будет выводить отдельное значение в зависимости от положения слайдера.
Тут уж без JavaScript не обойтись, но об этом будет отдельная статья в разделе PHP
От ползунка толку мало, вот если бы в поле ввода значение изменялось
Применить javascript. По этой теме будет отдельный пост, так как она достаточно объёмная, и относиться к php.
Здравствуйте, как увидеть текущее значение?