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

JavaScript — это отличный язык, и вам однозначно стоит использовать его в своих проектах, но не нужно забывать, что большое количество функциональных элементов можно реализовать и без этой зависимости. Мы взглянем на мощь современных HTML и CSS с небольшим добавлением синтаксического сахара Sass. Скрипты нам не потребуются! 

Слайдер изображений

See the Pen CSS-Only Slider: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

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

• CSS Slider Builder;
• 12 CSS Slider Examples;
• CSS Gallery.

Модальное окно

See the Pen CSS-Only Modal: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

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

• Austin Lord’s CodePen;
• Simple Example by Daniel Griffith.

Переключатель изображений

See the Pen CSS-Only Image Switcher: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

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

• CSS Image Switcher Tutorial;
• Tiffany Tse CSS Slider.

Выбор цвета

See the Pen HTML Color Picker: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

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

• HTML Form Guide.

Загрузка файла

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.

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

• Example by Mike Riethmuller.

Аккордеон-меню

See the Pen CSS Only Accordion: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

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

• 4 Ways to Create CSS Accordions;
• CodePen Example by Oliver Knoblich.

Вкладки

See the Pen CSS-Only Tabs: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

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

• Functional CSS Tabs Revisited;
• Material Design CSS Tabs.

Lightbox

See the Pen CSS Only Lightbox: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

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

• Gregory Schier’s Codepen.

В продолжение темы — 8 хитрых приёмов, реализуемых с помощью одного лишь CSS.