Иван Бирюков

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

23535
Обложка поста 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.

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

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

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

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.

23535