Оформляем чекбоксы для сайта с помощью CSS3 | RUDEBOXКаждому из Вас хоть раз но приходилось сталкиваться с чекбоксами или как еще их часто называют радио-кнопки. Будь то голосование или подтверждение входа на сайте, вы всегда наблюдаете чеки на сайте. Зачастую они скучны и однообразны, не всегда бросаются в глаза и вообще их легко пропустить, но что, если вы хотите исправить эту ситуацию к примеру стилями CSS и небольшой графикой SVG, это все проще чем Вы думаете, но в результате мы получим замечательные чеки с красивой анимацией.

 

Просим обратить внимание, что прорисовка SVG изображений не поддерживается мобильными браузерами. После добавления элементов input, так же добавим элементы SVG через JavaScript. Изначально они не будут видимы, так как поначалу не отрисованы (пустые); только после клика, мы запустим отрисовку путей. И так, давайте приступим.

Шаг 1. HTML

Для начала мы создаем простую разметку, для примера мы взяли один опрос из демонстрации:

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

Оформляем чекбоксы для сайта с помощью CSS3 | RUDEBOX

Шаг 2. CSS

Стили для скрытия полей input и создания боксов для анимации с помощью псевдо-элементов:

При клике по элементу input, мы анимируем свойство opacity “псевдо-чекбокса” и закрашиваем элемент label:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: