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

nojsmini

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.

Использованные материалы:


Индикатор пролистывания

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.

Источник: You Might Not Need JSИван Бирюков, страж правописания