Современный CSS мощнее, чем вам кажется: 12 примеров, в которых вам не нужен JavaScript

53814

В наши дни CSS развивается очень быстрыми темпами и может полностью заменить традиционные способы реализации многих классических веб-фишек, для которых обычно использовался JavaScript. Приводим примеры некоторых из них.

Раскрывающийся спойлер / Accordion

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

Карусель

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

Переворот по клику

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

Всплывающие подсказки при наведении или клике

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

Выпадающее многоуровневое меню

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

Модальные окна и попапы

See the Pen Popup/Modal without JS by Paul (@peiche) on CodePen.

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

Переключаемые вкладки

See the Pen Tabs CSS & HTML, no JS & Jquery by llgruff (@llgruff) on CodePen.

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

Красивые поля ввода текста

See the Pen Pure CSS Floating Label Textfield by Matthias Benkort (@KtorZ) on CodePen.

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

Древовидный список

See the Pen Pure CSS Tree by Rafael González (@rgg) on CodePen.

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

Игры на чистом CSS и HTML

See the Pen Zero lines JS game by Alexander Majorov (@i0z) on CodePen.

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

See the Pen Sudoku without JS by Tab Atkins (@TabAtkins) on CodePen.

Свои примеры скидывайте в комментарии в виде короткого описания и ссылок на codepen.io или jsfiddle.net, мы будем обновлять статью.

Улучшаем адаптивность сайта с помощью CSS функции clamp()
tproger.ru
Следите за новыми постами по любимым темам

Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.

Веб-разработка
CSS
HTML
53814
Что думаете?
0 комментариев
Сначала интересные