Сегодня мы бы хотели поделиться с вами несколькими идеями стильных вкладок. Данный сборник содержит вкладки с различными эффектами, от простых прямоугольных до форм с SVG. Вы увидите, какими интересными могут быть обычные вкладки.

В примерах мы использовали свойство flexbox поэтому убедитесь, что ваш браузер его поддерживает, как правило, это актуальные версии браузеров.

Для некоторых примеров вкладок мы будем использовать готовый набор красивых иконок Elegant Themes Line Icon Set, и шрифтовый вариант иконок Icomoon app.

Для функционала вкладок мы используем решение, которое делали ранее «Адаптивные вкладки» и дальше стилизуем его уже под себя.

Общее оформление для всех наших вкладок можно найти в файле tabs.css, а все индивидуальные стили в tabstyles.css

Взгляните на некоторые из примеров:

В примере есть несколько адаптивных вариантов. 

Демо тут, исходники тут.

Перевод: Art

Оригинал: tympanus.net