Сегодня приведем несколько интересных примеров вкладок (tabs) с контентом без привлечения средств JavaScript или прочих сторонних инструментов. Пользуйтесь!
Кому нужны вкладки CSS?
Чаще всего вопросом «как сделать вкладки CSS» задаются либо новички, которые не могут\не умеют пользоваться скриптами, либо разработчики, преследующие оптимизацию и производительность. Разумеется, легче дополнить файл style.css несколькими строками кода, чем подключать специальные плагины и нагружать сайт еще больше. Ниже мы приведем несколько примеров того, как легко и просто можно реализовать вкладки с контентом на чистом CSS3.
1. Симпатичные вкладки с быстрым откликом на переключения. Здесь нет лишних анимаций и прочей ерунды. Грамотно и по делу. Результат достигается за счет:
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
2. Второй вариант содержит в себе небольшую анимация при переключении вкладок, да и выглядит тоже неплохо. Средства реализации те же: элемент формы input с атрибутом radio. Поклацать можно во фрейме ниже:
3. Ну и последний вариант интересен тем, что выглядит, как переключение между этапами взаимодействия с пользователем. Алгоритм похожий, только вместо атрибута radio используется check. Результат ниже:
Как этими вкладками CSS пользоваться?
Чтобы забрать пример полностью, откройте фрейм в новой вкладке и вызовите контекстное меню. В нем выберите «Исходный код фрейма» и сохраните к себе на компьютер. Далее скопируйте HTML и CSS код в свой проект. Удачи!
