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

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

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

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

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

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

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

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

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

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

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

Выбор цвета

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

• HTML Form Guide.

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

Валидация форм

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

• MDN Data Form Validation;
• Phone Number Validation by SitePoint.

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

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

• Example by Mike Riethmuller.

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

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

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

Вкладки

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

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

Lightbox

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

• Gregory Schier’s Codepen.

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