Задавайте вопросы

Задавайте вопросы и получайте ответы от нашего сообщества

Отвечайте

Отвечайте на вопросы и станьте экспертом по своей теме

Свяжитесь с администрацией

Наши специалисты готовы ответить на ваши вопросы

jQuery создание улучшенных переключателей с использованием css3 (2.0)

Информация о теме

О теме Здравствуйте, вы читаете тему создание улучшенных переключателей с использованием css3 (2.0) созданную в в разделе JavaScript пользователем Альваро. Эта тема была просмотрена 2 757 раз(а), получила 0 комментариев и 0 очки реакции...
Название категории JavaScript
Название темы создание улучшенных переключателей с использованием css3 (2.0)
Автор темы Альваро
Дата начала
Ответы
Просмотры
Количество реакций
Последнее сообщение Альваро

Альваро

Пользователь
Регистрация
26.10.2015
Сообщения
76
Реакции
34
Баллы
25
Лучшие ответы
0
Пожалуйста, Вход или Регистрация для просмотра содержимого URL-адресов!




Здравствуйте! В прошлой
Пожалуйста, Вход или Регистрация для просмотра содержимого URL-адресов!
я рассказал как создать переключатели при помощи CSS3. В этой теме я покажу улучшенную версию этих переключателей.
Приступим.

Радиокнопки

Простая задача для начала. Радиокнопки работают почти так же, как переключатели-флажки, так что мы можем просто добавить класс switch (переключатель) каждому полю ввода, чтобы все заработало, например:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Очень приятно посмотреть, как два переключателя меняют положение одновременно.

Также были подняты несколько вопросов. Раньше переключатели менялись от красного к зеленому, так что дальтоникам могло быть сложно определить, включен или выключен переключатель. Чтобы решить эту проблему, мы добавили символы крестик и галочку на фон

Дополнительных элементов не потребовалось, мы просто использовали символ крестик вместо пробела и расположили его справа на фоне, используя свойство:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Когда переключатель-флажок или радоикнопка активны, символ меняется на галочку и сдвигается влево по фону:

Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!


Анимация,работающая во всех браузерах

Изначально мы разместили символы галочку и крестик на белой части переключателя. Это непростая задача для браузеров, так как им нужно создать переход между двумя символами. В браузере Firefox все отработало правильно, а браузеры Chrome и Internet Explorer 10 пошли по легкому пути: вообще не воспроизводили анимацию. Оказалось, что движки Webkit и Trident не разрешают анимацию псевдо-элементов, чье содержимое меняется, даже если однозначно указать, что только внешний отступ или цвет должны анимироваться.
Чтобы решить эту проблему, мы применили галочку и крестик псевдо-элементу :before до изменения фона и удалили его эффект перехода, из-за чего цвет не будет меняться плавно, но это едва заметно. Теперь анимировано только положение белого переключателя псевдо-элемента :after.
Следующая проблема с удобством использования — выбор переключателя при помощи клавиатуры. Старые переключатели было сложно использовать при помощи клавиатуры, так что мы использовали другой цвет подписи и добавили тень блока переключателя, когда он выбран:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Возможно, результат получился не слишком заметным, но легко добавить другие эффекты на ваше усмотрение.
 
Верх Низ