Java, UX, HTML, CSS, WEB-design

10 бесплатных настраиваемых фрагментов кода CSS для радиопереключателей и переключателей

Краткое описание по статье 10 бесплатных настраиваемых фрагментов кода CSS для радиопереключателей и переключателей

Название: 10 бесплатных настраиваемых фрагментов кода CSS для радиопереключателей и переключателей . Краткое описание: ⭐ Радиокнопки только недавно были открыты для г . Дата публикации: 15.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


Радиокнопки только недавно были открыты для глубокой настройки с помощью CSS. Дизайн переключателя включения / выключения был взят из оригинальной iOS от Apple и перенесен в Интернет с использованием радио и флажков для тумблеров.

1. Доступные переключатели

Доступность является серьезной проблемой в Интернете, и это то, что вы должны учитывать при изменении стиля HTML-элемента. Эти доступные переключатели Криса Харта показывают, как много вы можете изменить с помощью небольшого CSS.

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

В целом, эти переключатели — одни из лучших, которые вы можете использовать, и их действительно легко настроить. Однако они полагаются на флажки, поэтому отправка форм работает немного иначе, чем переключатели.

2. Переключатели включения/выключения CSS

Если вам нравится минималистский подход к дизайну, обратите внимание на эти радиоприемники, созданные Ником Боттомли. Они настолько просты, насколько это возможно, и работают безупречно.

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

Я бы сказал, что эти переключатели представляют собой самую прочную основу для настройки кнопок включения / выключения без создания их с нуля.

3. Переключатели iOS7

Когда Apple выпустила iOS 7, в ней появилось множество обновлений, включая более плоский дизайн и новые переключатели включения/выключения. Эти переключатели iOS7 были воссозданы с помощью флажков и CSS3 опытным разработчиком Бандаром Раффахом.

Фоны имеют интересный анимационный эффект, когда они появляются и исчезают вместе с кнопкой переключения. Это действительно уникальный подход к дизайну, и тот факт, что он основан на CSS, впечатляет еще больше.

Если вы ищете дизайн, вдохновленный Apple, на своем сайте, то эти переключатели с флажками — лучший вариант.

4. Круги на чистом CSS

Для более индивидуального решения взгляните на эти переключатели iOS от Jesse Couch. Ярлыки созданы в основном для Chrome и Firefox, поэтому они могут работать не во всех браузерах, таких как Opera или Safari.

Но они поддерживают элемент «метка» для радиостанций, которые могут автоматически переключаться между значениями при нажатии. Таким образом, пользователю даже не нужно нажимать на радио, а только на метку, чтобы включить / выключить переключатель.

5. Переключатели Win10

Пользователи Windows 10 будут знать все о своих последних изменениях в лучшую или худшую сторону. Новые настройки Win10 включают в себя множество настраиваемых переключателей включения/выключения, продублированных в этой ручке.

Вы можете редактировать размер, цвет и заполнение всех переменных SCSS прямо в CodePen. Все эти переключатели используют элемент флажка HTML, что делает их более удобными для мобильных пользователей. В них не так много анимации, но они отлично выглядят и хорошо работают — два фактора, благодаря которым всегда продаются качественные элементы интерфейса.

6. Переключатель включения/выключения очистки

Для доступности вы должны учитывать, как флажки обрабатываются в старых браузерах и как работают такие атрибуты, как aria-hidden. Это основа этой ручки, созданной Фелипе Фиальо.

Он доводит этот переключатель включения/выключения до самого высокого уровня поддержки с меткой HTML и пользовательскими стилями, которые изящно деградируют. Это также красивый переключатель, и, учитывая простую настройку, он хорошо работает на любом веб-сайте.

7. Распределительные коробки

Эти продуманно спроектированные входы переключателя были созданы Виктором Кнастом как универсально поддерживаемое решение. Каждый переключатель работает во всех основных браузерах, включая IE7 и выше.

Из-за такой широкой поддержки браузеров вам придется работать с JavaScript. Это не так много JavaScript, но это фактор при принятии решения о том, могут ли эти переключатели работать на вашем сайте.

Но они отлично выглядят и предлагают универсальную поддержку, которая больше, чем у большинства переключателей на основе CSS.

8. Пользовательские квадратные переключатели

Если вы действительно стремитесь к индивидуальности, обратите внимание на эти квадратные переключатели от Эндрю Гехмана. Они полностью меняют дизайн флажка с квадратными углами, квадратным переключателем и настраиваемым текстом.

Я не могу себе представить, что это будет хорошо сочетаться со многими веб-сайтами. Однако он показывает, как далеко вы можете зайти с чистым CSS3, и это может быть хорошей кодовой базой для начала, если вы хотите настроить свои собственные флажки.

9. Светящийся выключатель

Оригинальный дизайн Ника Василе превратился в полнофункциональный светящийся CSS-переключатель благодаря разработчику Валентину Гальманду.

Этот интерфейс почти точно соответствует оригинальному снимку Dribbble, что делает переход еще более впечатляющим. Он полагается исключительно на CSS3 для воссоздания теневых эффектов и значков в центре. Это яркий пример того, как много можно сделать с помощью чистого CSS.

10. Скользящие радиокнопки

Этот пример может быть моим любимым, потому что он имеет такой восхитительный градиент, прикрепленный к каждой кнопке. В этих выдвижных радиоприемниках, созданных Огузханом Джансевером, используются градиенты CSS3 и специальные метки, прикрепленные к каждой стороне переключателя.

Однако это чистые переключатели, поэтому вы можете выбирать только по одной за раз. Это означает, что если вы нажмете на активную сторону, она не переключится.

Но если вам нравится этот стиль, то он более чем применим к любому веб-сайту. Вы даже можете настроить цвета градиента и увеличить расстояние между переключателями через CSS.

Подведение итогов

В CodePen вы можете найти десятки замечательных радиостанций с бесплатными фрагментами кода, которые можно копировать и редактировать.

Если вам нравятся эти примеры, обязательно сохраните свои избранные и не стесняйтесь просматривать тег «переключатель» для получения дополнительных примеров.

Вы должны взглянуть на эти фрагменты кода для создания красивых кнопок CSS далее или на эту коллекцию скопированных и вставленных навигационных фрагментов.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — 10 бесплатных настраиваемых фрагментов кода CSS для радиопереключателей и переключателей

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»