Оригинальное оформление вкладки в html. Делаем красивые табы (вкладки) с помощью CSS и JQuery
Здравствуйте, уважаемые читатели . В этот, такой морозный день мы будем делать с Вами красивые табы с помощью CSS и JQuery . Оказывается, что эти, так называемые, табы очень полезны для сайта в целом, они позволяют существенно сэкономить место на странице. Их можно разместить везде, в сайдбаре, или не посредственно, в самом контенте, статье.
Так же, табы, которые мы будем делать, красивого дезайна, они существенно украсят Ваш сайт. Во как:-) красиво и полезно, мне кажется редкое совпадение. Тем более делаются они только при помощи , соответственно: быстро загружаются, и не несут никакой нагрузки на сервер.
JQuery
$(document).ready(function() { $("#content div").hide(); // Скрытое содержимое $("#tabs li:first").attr("id","current"); // Какой таб показать первым $("#content div:first").fadeIn(); // Показ первого контента таба $("#tabs a").click(function(e) { e.preventDefault(); $("#content div").hide(); //Скрыть всё содержимое $("#tabs li").attr("id",""); //Сброс идентификаторов $(this).parent().attr("id","current"); // Активация идентификаторов $("#" + $(this).attr("title")).fadeIn(); // Показать содержимое текущей вкладки }); })();Вот в принципе и всё, Вы главное экспериментируйте, В данные вкладки можно добавить фоновые изображения, которые существенно предадут им вида, только вот загружаться они будут дольше.
Совместимость с браузерами
Эти табы поддерживают практически все браузеры, только в некоторых они будут выглядеть чуть по другому, потому что многие, ещё пока, не поддерживают CSS3.
Вот и всё, надеюсь Вам понравилось:-) Если что то Вам будет не понятно обязательно спрашивайте в комментариях. До скорых встреч.
Не так давно, мы рассмотрели реализации вкладок (табов) с содержанием, без подключения javascript, используя в работе исключительно стандарты .
Сегодня я хочу познакомить вас, с ещё одним, не менее интересным решением по формированию компактного блока вкладок (табов), построенных на чистом CSS3 и использованием элементов адаптивной вёрстки. Как и в первом варианте, ничего лишнего и громоздкого, самый минимум кода css, и в вашем распоряжении появится адаптивный блок с переключаемыми вкладками, который отлично впишется в любой раздел страницы, будь то отдельное сообщение, боковая колонка, или же модальное окно.
Какие изменения были внесены относительно первого варианта?
Прежде всего, блок вкладок стал адаптивным, т.е. при просмотре на мобильных устройствах, размер вкладок изменяется в зависимости от размеров экранов пользовательских устройств, текст заголовков убирается и остаются только шрифт-иконки, указывающие на смысл содержания той или иной .
Шрифт-иконки прикрутил от , коллекция очень богатая и к тому же абсолютно бесплатна. Вы можете интегрировать иконки в любой проект используя скачанный набор со шрифтами, или же подключить к вашему файлу стилей css напрямую, с сайта разработчика через @import , используя такую строчку:
| @ import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" ) ; |
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
В демонстрационном примере именно так я и сделал, так что взглянув на исходники, легко разберётесь что к чему.
Структура вкладок в Html довольно проста. Базовый div-контейнер, связка
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> Здесь размещаете любое содержание.... |
Для организации блоков с содержанием я использовал тег .
Переключение вкладок происходит посредством взаимодействия атрибута 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 появились те самые готовые решения, которые вам нужны. Да-да, на сайте теперь можно ознакомиться с лучшими . Локализованные шаблоны — это именно то, что нужно, если вы хотите построить свой онлайн-проект за минимальное количество времени. Кроме того, что тексты для шаблонов писались вручную, они обладают всеми необходимыми инструментами для создания профессионального сайта.
С Уважением, Андрей
В прошлых статьях вы научились делать вкладки для сайта на и . И разобрались, как социальных сетей.
Но порой требуется сделать самую простую вкладку с помощью связки html и css и разместить ее в любом месте страницы сайта независимо от того, какую cms используете.
В такой вкладке можно разместить любой контент или код. И для этого не придется подключать никаких дополнительных библиотек и скриптов – голые Html и css.
Пример html css вкладки на странице:
Создание вкладки html
1 шаг. Для табов пишем простой код:
Содержимое вкладки 1
Содержимое вкладки 2
Содержимое вкладки 3
Содержимое вкладки 4
Создание css для новой html вкладки
2 шаг. Пишем стили для внешнего оформления.
В стилях можно менять что угодно и как угодно. В этом примере прописаны закругленные углы у табов. Если вам это не нужно, то просто удалите этот блок.
/* CSS Document */ .tabs { opacity: 0; visibility: hidden; } .tab{ position:absolute; visibility: hidden; z-index: 10; color:#000; font: bold 9pt arial; } .tabs:target+.tab { opacity: 1; visibility: visible; } .tabsLink a{ background-color:#F06406; padding:2px; font: bold 10pt arial; color:#fff; text-decoration:none; /* Начало закругленные табы */ -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; /* Конец закругленные табы */ }
Как видите, вариантов создания обычных вкладок для скрытия контента в неактивных табах много. И это самый простой, делается за 5 минут.
Октябрь 25, 2019 Запись была обновлена
Юрий Немец
Подборка красивых вкладок - набор красивых вкладок для сайта
Сегодня я предлагаю вашему вниманию подборку красивых и оригинальных вкладок. При создании данных эффектов были использованы псевдо-элементы, изображения SVG и CSS переходы. Дизайн всех вкладок выполнен в современном стиле и подойдет практически для любого сайта. Посмотрите примеры этих вкладок и вы сами удивитесь насколько необычно можно оформить, казалось бы, такой часто используемый элемент на сайте.
Подборка красивых вкладок
Скачать
Подборка красивых вкладок
Если вы смотрели демо версию, то смогли заметить что все примеры находятся на одной странице. Поэтому если вы скачаете и откроете исходники, то увидите длинную страницу как на изображении слева. Не пугайтесь! Там всё красиво структурировано. Вам лишь нужно взять нужный «кусочек» кода и вставить его себе на сайт.
Каждый новый пример расположен в отдельном блоке
Тоже самое обстоит и с файлом стилей. Он также большой но там всё прокомментировано, поэтому проблем возникнуть не должно.
Если кто-то до сих пор не посмотрел демо, то для вас я сделал несколько скриншотов 🙂 :
Вывод
Неплохая подборка вкладок с нестандартными эффектами и переходами. Уделите несколько минут своего времени и посмотрите все вкладки. Бывает так, что смотришь и думаешь: «Ну обычные вкладки, что тут такого. Да и не очень и нужны они мне.». Но один, какой-нибудь необычный, дизайн настолько сильно запоминается, что когда нужно реализовать вкладки на сайте, именно таким образом и хочется их сделать. А где их видел даже и не вспомнишь!
Поэтому не забываем добавлять мой сайт в закладки в браузере (делается это сочетанием клавиш CTRL+D ) 😉 .