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.

Джерело: You Might Not Need JS