Тоже самое обстоит и с файлом стилей. Он также большой но там всё прокомментировано, поэтому проблем возникнуть не должно.

Если кто-то до сих пор не посмотрел демо, то для вас я сделал несколько скриншотов 🙂 :

Вывод

Неплохая подборка вкладок с нестандартными эффектами и переходами. Уделите несколько минут своего времени и посмотрите все вкладки. Бывает так, что смотришь и думаешь: «Ну обычные вкладки, что тут такого. Да и не очень и нужны они мне.». Но один, какой-нибудь необычный, дизайн настолько сильно запоминается, что когда нужно реализовать вкладки на сайте, именно таким образом и хочется их сделать. А где их видел даже и не вспомнишь!

Поэтому не забываем добавлять мой сайт в закладки в браузере (делается это сочетанием клавиш CTRL+D ) 😉 .

Добрый вечер! Сегодня я вам расскажу, каким образом можно сделать табы (вкладки) на чистом css3 без какого-либо использования jquery или других скриптов. Как вы уже знаете, чем меньше вы будете использовать скриптов, тем лучше для вашего сайта, и тем быстрее он будет работать. А скорость сайта сегодня один из самых важных показателей его ранжирования в поисковых системах.

Итак, начнем

Адаптивные вкладки (табы) на чистом css и без скриптов

Сегодня табы есть практически на любом сайте. Они необходимы для того, чтобы отображать несколько областей контента без перехода пользователя на другие страницы. Например, на одном из моих проектов по разработке интернет-магазина на Joomla было добавление двух табов, которые будут отображать по 3 товара двух типов: «хиты продаж» и «последние». Принято решение делать их на чистом css без перезагрузки сайта ненужными скриптами.

Итак, приступим.

HTML код для табов с использованием css3 по пунктам

1. В первую очередь нам необходимо создать div с классом «tabs» .

2. Добавляем непосредственно кнопки-переключали с именем «tabs», при нажатии на которые они будут включать содержимое наших табов.

3. Добавляем их название через label

4. Под кнопками, которые мы с Вами сделали в пунктах 1-3, мы добавляем уже непосредственно контент, который нам нужно выводить. В моем случае это три последних товара и три лучших товара.

Каждый блок у нас имеет класс tab-content и идентификаторы tab-content-1 и tab-content-2.

Итоговый HTML наших будущих табов

На этом мы закончили с написанием нашего html. Согласитесь, ничего сложного тут не было. Итак, идем дальше.

CSS стили для табов с использованием css3 по пунктам

Теперь самое интересное и сложное. Нам нужно наши табы сделать табами, которые будут переключаться при клике 🙂

Так как у нас будет два таба, то нам нужно назначить им такую ширину, чтобы они помещались на экране и не вылазили за его черту. Для этого мы прописываем ширину 50%. Если у вас будет другое число табов, то и ширину рассчитывайте отталкиваясь от их числа.

Также, обратите внимание, что по умолчанию, мы делаем наши кнопки-переключатели невидимыми

Tabs { max-width: 90%; float: none; list-style: none; padding: 0; margin: 75px auto; border-bottom: 4px solid #ccc; } .tabs:after { content: ""; display: table; clear: both; } .tabs input { display:none; } .tabs label p { padding: 5px; margin-right: 0; } .tabs label { display: block; float: left; width: 50%; color: #ccc; font-size: 30px; font-weight: normal; text-decoration: none; text-align: center; line-height: 2; cursor: pointer; box-shadow: inset 0 4px #ccc; border-bottom: 4px solid #ccc; -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */ transition: all 0.5s; } .tabs label span { display: none; } .tabs label:hover { color: #3498db; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; } .tab-content { display: none; width: 100%; float: left; padding: 15px; box-sizing: border-box; background-color:#ffffff; }

Как заставить это работать

А тут все просто.

Добавляем следующий css код

Tabs :checked + label { background: #FFF; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; color: #3498db; } #tab-first:checked ~ #tab-content-1, #tab-second:checked ~ #tab-content-2 { display: block; }

Строками выше мы добавляем особы стиль для активного таба используя :checked + label

#tab-first:checked ~ #tab-content-1 — данная строка говорит о том, что нам нужно отобразить контент, который имеет id=»tab-content-1″ , если tab-first имеет статус checked.

Делаем наши табы адаптивными

Ну вот по сути и все. Наши табы готовы:). Вы их можете менять как угодно, добавлять-удалять. Спасибо за внимание 🙂

Здравствуйте, уважаемые читатели . В этот, такой морозный день мы будем делать с Вами красивые табы с помощью CSS и JQuery . Оказывается, что эти, так называемые, табы очень полезны для сайта в целом, они позволяют существенно сэкономить место на странице. Их можно разместить везде, в сайдбаре, или не посредственно, в самом контенте, статье.

Так же, табы, которые мы будем делать, красивого дезайна, они существенно украсят Ваш сайт. Во как:-) красиво и полезно, мне кажется редкое совпадение. Тем более делаются они только при помощи , соответственно: быстро загружаются, и не несут никакой нагрузки на сервер.

JQuery

Вот в принципе и всё, Вы главное экспериментируйте, В данные вкладки можно добавить фоновые изображения, которые существенно предадут им вида, только вот загружаться они будут дольше.

Совместимость с браузерами

Эти табы поддерживают практически все браузеры, только в некоторых они будут выглядеть чуть по другому, потому что многие, ещё пока, не поддерживают CSS3.

Вот и всё, надеюсь Вам понравилось:-) Если что то Вам будет не понятно обязательно спрашивайте в комментариях. До скорых встреч.

Не так давно, мы рассмотрели реализации вкладок (табов) с содержанием, без подключения javascript, используя в работе исключительно стандарты .
Сегодня я хочу познакомить вас, с ещё одним, не менее интересным решением по формированию компактного блока вкладок (табов), построенных на чистом CSS3 и использованием элементов адаптивной вёрстки. Как и в первом варианте, ничего лишнего и громоздкого, самый минимум кода css, и в вашем распоряжении появится адаптивный блок с переключаемыми вкладками, который отлично впишется в любой раздел страницы, будь то отдельное сообщение, боковая колонка, или же модальное окно.

Какие изменения были внесены относительно первого варианта?
Прежде всего, блок вкладок стал адаптивным, т.е. при просмотре на мобильных устройствах, размер вкладок изменяется в зависимости от размеров экранов пользовательских устройств, текст заголовков убирается и остаются только шрифт-иконки, указывающие на смысл содержания той или иной .
Шрифт-иконки прикрутил от , коллекция очень богатая и к тому же абсолютно бесплатна. Вы можете интегрировать иконки в любой проект используя скачанный набор со шрифтами, или же подключить к вашему файлу стилей css напрямую, с сайта разработчика через @import , используя такую строчку:

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

В демонстрационном примере именно так я и сделал, так что взглянув на исходники, легко разберётесь что к чему.
Структура вкладок в Html довольно проста. Базовый div-контейнер, связка и непосредственно секции

, в которых скрыт до поры до времени определенный контент. Всё! Ничего лишнего, никаких библиотек js, ни дополнительных файлов изображений в оформлении, внешний вид вкладок, а так же их функциональность, формируется исключительно средствами CSS. Конечно, использование новых стандартов CSS3, не гарантирует стабильной работы во всех браузерах без исключения, но в современных версиях, вкладки работают отлично. IE-шка корректно отображает вкладки начиная с 9-й версии. Так что если вам не безразлична психика и чувства восприятия пользователей упорно сидящих на более старых версиях этого «брууузера», данный способ создания вкладок лучше не применять, а с применением jQuery.

HTML

< div class = "tabs" > < input id= "tab1" type= "radio" name= "tabs" checked> < label for = "tab1" title= "Вкладка 1" > Вкладка 1 < input id= "tab2" type= "radio" name= "tabs" > < label for = "tab2" title= "Вкладка 2" > Вкладка 2 < input id= "tab3" type= "radio" name= "tabs" > < label for = "tab3" title= "Вкладка 3" > Вкладка 3 < input id= "tab4" type= "radio" name= "tabs" > < label for = "tab4" title= "Вкладка 4" > Вкладка 4 < section id= "content-tab1" > < p> < section id= "content-tab2" > < p> < section id= "content-tab3" > < p> Здесь размещаете любое содержание.... < section id= "content-tab4" > < p> Здесь размещаете любое содержание....

Вкладка 1 Вкладка 2 Вкладка 3 Вкладка 4

Для организации блоков с содержанием я использовал тег

из обоймы HTML5, который применяется, в большинстве случаев, для разделения документа на разделы, различные и по смыслу и по содержанию, с возможностью использования собственных заголовков первого уровня

.
Переключение вкладок происходит посредством взаимодействия атрибута checked в теге и псевдокласса:checked , прочно связанными через идентификаторы в CSS. В обработке такого метода и спотыкается старенький, знаменитый тормоз прогресса Internet Explorer 8, с 9-й версии всё работает в лучшем виде.

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

CSS3

/* Базовый контейнер табов */ . tabs { min- width: 320px; max- width: 800px; padding: 0px; margin: 0 auto; } /* Стили секций с содержанием */ . tabs> section { display: none; padding: 15px; background: #fff; border: 1px solid #ddd; } . tabs> section> p { margin: 0 0 5px; line- height: 1.5 ; color: #383838; /* прикрутим анимацию */ - webkit- animation- duration: 1s; animation- duration: 1s; - webkit- animation- fill- mode: both; animation- fill- mode: both; - webkit- animation- name: fadeIn; animation- name: fadeIn; } /* Описываем анимацию свойства opacity */ @- webkit- keyframes fadeIn { from { opacity: 0 ; } to { opacity: 1 ; } } @ keyframes fadeIn { from { opacity: 0 ; } to { opacity: 1 ; } } /* Прячем чекбоксы */ . tabs> input { display: none; position: absolute; } /* Стили переключателей вкладок (табов) */ . tabs> label { display: inline- block; margin: 0 0 - 1px; padding: 15px 25px; font- weight: 600 ; text- align: center; color: #aaa; border: 0px solid #ddd; border- width: 1px 1px 1px 1px; background: #f1f1f1; border- radius: 3px 3px 0 0 ; } /* Шрифт-иконки от Font Awesome в формате Unicode */ . tabs> label: before { font- family: fontawesome; font- weight: normal; margin- right: 10px; } . tabs> label[ for *= "1" ] : before { content: "\f 19a" ; } . tabs> label[ for *= "2" ] : before { content: "\f 17a" ; } . tabs> label[ for *= "3" ] : before { content: "\f 13b" ; } . tabs> label[ for *= "4" ] : before { content: "\f 13c" ; } /* Изменения стиля переключателей вкладок при наведении */ . tabs> label: hover { color: #888; cursor: pointer; } /* Стили для активной вкладки */ . tabs> input: checked+ label { color: #555; border- top: 1px solid #009933; border- bottom: 1px solid #fff; background: #fff; } /* Активация секций с помощью псевдокласса:checked */ #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 { display: block; } /* Убираем текст с переключателей * и оставляем иконки на малых экранах */ @ media screen and (max- width: 680px) { . tabs> label { font- size: 0 ; } . tabs> label: before { margin: 0 ; font- size: 18px; } } /* Изменяем внутренние отступы * переключателей для малых экранов */ @ media screen and (max- width: 400px) { . tabs> label { padding: 15px; } }

/* Базовый контейнер табов */ .tabs { min-width: 320px; max-width: 800px; padding: 0px; margin: 0 auto; } /* Стили секций с содержанием */ .tabs>section { display: none; padding: 15px; background: #fff; border: 1px solid #ddd; } .tabs>section>p { margin: 0 0 5px; line-height: 1.5; color: #383838; /* прикрутим анимацию */ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; } /* Описываем анимацию свойства opacity */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Прячем чекбоксы */ .tabs>input { display: none; position: absolute; } /* Стили переключателей вкладок (табов) */ .tabs>label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #aaa; border: 0px solid #ddd; border-width: 1px 1px 1px 1px; background: #f1f1f1; border-radius: 3px 3px 0 0; } /* Шрифт-иконки от Font Awesome в формате Unicode */ .tabs>label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px; } .tabs>label:before { content: "\f19a"; } .tabs>label:before { content: "\f17a"; } .tabs>label:before { content: "\f13b"; } .tabs>label:before { content: "\f13c"; } /* Изменения стиля переключателей вкладок при наведении */ .tabs>label:hover { color: #888; cursor: pointer; } /* Стили для активной вкладки */ .tabs>input:checked+label { color: #555; border-top: 1px solid #009933; border-bottom: 1px solid #fff; background: #fff; } /* Активация секций с помощью псевдокласса:checked */ #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 { display: block; } /* Убираем текст с переключателей * и оставляем иконки на малых экранах */ @media screen and (max-width: 680px) { .tabs>label { font-size: 0; } .tabs>label:before { margin: 0; font-size: 18px; } } /* Изменяем внутренние отступы * переключателей для малых экранов */ @media screen and (max-width: 400px) { .tabs>label { padding: 15px; } }

Оформить вкладки () вы можете как угодно, всё что в примере, это только пример, моё сиюминутное видение продукта, ничего больше. Значения Unicode нужных вам шрифт-иконок, сможете узнать на сайте разработчика, для этого просто нажмите на выбранную иконку и скопируйте выданный цифровой код, примерно такого вида: \f13b .
Обратите внимание, когда вы уменьшаете размер окна браузера, вкладки автоматом подстраиваются под текущий размер до определённого значения (в примере 680px), после этого значения, текстовые заголовки вкладок исчезают, остаются иконки. Тем самым достигается максимальная компактность всего блока вкладок, остаётся лишь правильно подобрать эти самые иконки, подходящие по смыслу представленному контенту внутри вкладок.

Смотрите живой пример работы вкладок (табов), скачивайте исходники, экспериментируйте с параметрами, и творите, творите, творите...

Если вы устали работать с англоязычными шаблонами и мечтаете о шансе пользоваться русифицированными шаблонами, то вы определенно обрадуетесь одной отличной новости. На маркетплейсе TemplateMonster появились те самые готовые решения, которые вам нужны. Да-да, на сайте теперь можно ознакомиться с лучшими . Локализованные шаблоны — это именно то, что нужно, если вы хотите построить свой онлайн-проект за минимальное количество времени. Кроме того, что тексты для шаблонов писались вручную, они обладают всеми необходимыми инструментами для создания профессионального сайта.

С Уважением, Андрей

Рекомендуем почитать

Устройства

Какой движок выбрать для создания своей игры

Программамы

Lightroom и Photoshop - кто же лучший друг фотографа?

Для начинающих

Чем Lightroom отличается от Photoshop Lightroom делает резервное копирование

Безопасность

Настройки "Фотошопа": рекомендации Что цветовой профиль в фотошопе

Устройство ПК

Как открыть все облики артефакта в WOW Legion Секретный облик дк

Настройка 

Макросы л2 интерлюд. Макросы. Основные правила создания макроса