10 популярных фронтенд-элементов, для реализации которых не нужен JavaScript

JavaScript — это отличный язык, и вам однозначно стоит использовать его в своих проектах, но не нужно забывать, что большое количество функциональных элементов можно реализовать и без этой зависимости. Мы взглянем на мощь современных HTML и CSS с небольшим добавлением синтаксического сахара Sass. Скрипты нам не потребуются!
Слайдер изображений
See the Pen CSS-Only Slider: youmightnotneedjs.com by Una Kravets (@una) on CodePen.
Использованные материалы:
Модальное окно
See the Pen CSS-Only Modal: youmightnotneedjs.com by Una Kravets (@una) on CodePen.
Использованные материалы:
Переключатель изображений
See the Pen CSS-Only Image Switcher: youmightnotneedjs.com by Una Kravets (@una) on CodePen.
Использованные материалы:
Выбор цвета
See the Pen HTML Color Picker: youmightnotneedjs.com by Una Kravets (@una) on CodePen.
Использованные материалы:
Загрузка файла
See the Pen HTML File Upload: youmightnotneedjs.com by Una Kravets (@una) on CodePen.
Валидация форм
See the Pen HTML Form Validation: youmightnotneedjs.com by Una Kravets (@una) on CodePen.
Использованные материалы:
- MDN Data Form Validation;
- Phone Number Validation by SitePoint.
Индикатор пролистывания
See the Pen CSS Only Scroll Indicator: youmightnotneedjs.com by Una Kravets (@una) on CodePen.
Использованные материалы:
Аккордеон-меню
See the Pen CSS Only Accordion: youmightnotneedjs.com by Una Kravets (@una) on CodePen.
Использованные материалы:
Вкладки
See the Pen CSS-Only Tabs: youmightnotneedjs.com by Una Kravets (@una) on CodePen.
Использованные материалы:
Lightbox
See the Pen CSS Only Lightbox: youmightnotneedjs.com by Una Kravets (@una) on CodePen.
Использованные материалы:
В продолжение темы — 8 хитрых приёмов, реализуемых с помощью одного лишь CSS.