Вс Май 2018

Эффектный checkbox на CSS без использования Java Script.

Сегодня хочу поделиться с вами интересным эффектом для checkbox, который добавит вашей форме или странице изюминку и не потребует использования Java Script.

Как стилизовать чекбокс я уже рассказывал в одной из своих статей. Если у вас возникнут трудности с пониманием данного рецепта, то рекомендую сначала ознакомиться с рецептом по стилизации checkbox на CSS, так как я буду модифицировать его базовую структуру.

Как работает эффектный checkbox на CSS

В обычном состоянии псевдо-элемент :before выглядит как квадрат. При активации чекбокса с помощью свойств transition плавно поворачиваем элемент на 45 градусов и изменяем цвет двух границ на прозрачный. Что бы оставшиеся с цветом границы стали похожими на галочку, изменяем длины сторон и добавляем box-shadow для увеличения толщины границ.

Демонстрация и полный код эффекта checkbox

See the Pen yeLZRw by Konstantin (@fliginskih) on CodePen.0