Уже есть небольшая памятка о том как стилизовать checkbox спрайтами, но я решил продемонстрировать вариант, когда поле ввода находиться внутри "этикетки" (тега label).
CSS:
Оформление checkbox'а внутри label
Небольшая памятка о том как стилизовать checkbox, если никаких особых анимаций и элементов оформления не требуется.
Оригинальное зачеркивавшие checkbox'ов
Красивая анимация зачеркивая пунктов чеклиста на css и javascript
и темная тема:
Подборка визуальных эффектов с минимум CSS кода. Реакции на наведение / клик, ввод текста.
Красивое оформление - обрезание картинки на CSS
При наведении круг немного увеличивается, а картинка всплывает (приближается к нам), сделано на чистом CSS.
Сразу смотрим демо.
Довольно красиво на сайте может смотреться эффект, когда текст отображается по одной букве, так, словно его набирают на печатной машинке, или клавиатуре.
Javascript вариаций я встречал много, но ниже приведу вараинт, сделанный на чистом CSS
Как изменить размер SVG
Вроде бы простая задача - изменить размер SVG изображения, пропорционально его ужав, но тут бывают подводные камни.
Столкнулся с очень навороченным логотипом в формате svg, который никак не хотел адаптироваться. Изменение же width и hight, через сss, обрезало у него края.
CSS Grid Мозаика / Плитки
Пример создания сетки (набора плиток) на CSS grid. Мозаика выглядит интересно, с учетом использования grid-row: span 2; и grid-column: span 2; для объединения ячеек.
Неоновый текст на CSS с эффектом мерцания
Один из тех случаев, в которых лучше один раз увидеть, чем много раз услышать.
По сути это неоновая ободка текста (text-shadow) и эффект мерцания через @keyframes
Подборка сетов иконок iconduck
Сайт с хорошими паками / сетами иконок, есть как довольно стандартные, так и весьма интересные:
Получить иконку можно в разных форматах:
Также присутствует поиск по ключевым словам.
Ссылка на проект: IconDuck.