Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 40
Круто, конечно. Но его хочется потянуть, а этого нельзя сделать.
Обычный переключатель. Кстати, блюр обрезается.
Непонятно почему нужно нажимать именно на шестиугольник, а не на весь переключатель?
Подсветка лампочки обрезанная, а должна быть круглая :)
Подсветка лампочки обрезанная, а должна быть круглая :)
Я делал такое, тоже CSS, только без картинок cssdeck.com/labs/hp17u02i а pepelsbey еще раньше с SVG pepelsbey.net/2012/08/stylish-switch/
Сразу бросилось в глаза, что свечение на бэкграунде обрезано справа.
Таки действительно бросилось в глаза обрезанное свечение, да и не сразу въехал, что нажимать можно не на весь чекбокс. А так вообще, классно. Пока неочень понял как оно плавно работает, позже поковыряю transition
Лично я на блок не кликал, все таки кликабельную часть сделать лучше всей, а не конкретный участок.
Зеленый свет обрезается справа(
А у меня он при первом клике моргнул (картинка подгружалась), используйте спрайты.
ie8 и младше не поддерживают
Нужно картинки для такого делать спрайтами… Иначе первый раз исчезает фон при переключении.
Раз в месяц кто-нибудь пишет на хабр пост о переключателе на чистом css.
http://pepelsbey.net/2012/08/stylish-switch/
http://pepelsbey.net/2012/08/stylish-switch/
Элегантно! Голь на выдумку хитра :-). Но для реализации всего ожидаемого пользователям функционала и удобства потребуется всё это выбросить и написать с нуля, используя javascript.
Поставьте, пожалуйста, свойства без префикса последними в списке — это важно. Почему? Ответ в статье Мейера про префиксы, ближе к концу: Префикс или постхак.
Какой же это «чистый CSS» — если картинки в бэкграунде используются? Формулировка «чистый CSS» обычно как раз и подразумевает отсутствие изображений.
Красиво, конечно, но слишком уж громоздко. Для личной странички или портфолио отлично, а на практике напоминает 2000-е.
jsfiddle.net/axwNY/ накидал за пару мин пример получше имхо (стили можно нанизывать уже любые… и без картинок можно обойтись)
как сделать переключатель на основе input-а на чистом CSS.
А слабо по-настоящему на чистом CSS сделать такое, без картинок то бишь?
Эх, можно бы было такое для конструкции вида:
Поскорее бы в CSS возможность выбирать предков элемента.
<label><input type="checkbox"/></label>
Поскорее бы в CSS возможность выбирать предков элемента.
По-моему, лучший на сегодня — lea.verou.me/2013/03/ios-6-switch-style-checkboxes-with-pure-css/
Плюс там используется интересный способ отсева старых браузеров — стили сделаны для чекбокса с псевдоклассом :root
Плюс там используется интересный способ отсева старых браузеров — стили сделаны для чекбокса с псевдоклассом :root
Поддерживаю, лучше еще и потому, что поддерживает фокус и изменение пробелом. Все остальные (включая уважаемого pepelsbey) забывают что по элементам еще можно (и иногда удобнее) перемещаться без мыши.
Обновил пост, теперь пример с чекбоксом реагирует на таб и слушается пробела, а вот с радиокнопкой (доп. примером в конце) сложнее: их под слайдером две и сделать переключение по пробелу не получится.
Спасибо за подсказку.
Спасибо за подсказку.
Здорово, в который раз впечатляюсь твоей талантливостью :)
Демо и файлы не работают больше…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Стильный CSS переключатель без JavaScript