CSS3 и jQuery = стильные закладки


Содержание

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

Приветствую Вас, дорогие читатели блога beloweb.ru. Сегодня я спешу представить Вам замечательную и свежую подборку удивительных HTML5, CSS3 и JQuery плагинов для сайта за 2012 год.

Друзья, здесь Вы найдёте для себя очень много полезного и интересного. Но меня поразил старый кассетный магнитофон, который сделан только на HTML5. По моему это шедевр. Чего стоит только додуматься до этого, не говоря уже о реализации. В общем, вау :-)

Если Вы случайно пропустили прошлые подборки, то рекомендую посмотреть:

Закладки css3

В этой статье я продемонстрирую, как можно при помощи CSS3 и HTML5 сделать закладки для сайта. Наши закладки будут похожи на закладки браузеров. В статье приведено большое количество новых свойств CSS, например: блочная тень, тень у текста, радиус у границ и css градиенты. Это означает, что код наводнен разными префиксами.

Префиксы для различных браузеров:

Конечно, не все браузеры поддерживают новые свойства CSS3, таким образом, мы должны быть уверены, что эти свойства нивелируются в старых браузерах, не ухудшая внешний вид страницы.

Как видите разница небольшая

Разметка HTML

Сперва давайте взглянем на разметку страницы. В нашем примере я использую HTML5 элементы. Голова ( Head ) документа выглядит следующим образом:

Чтобы все браузеры понимали новые элементы HTML5, я включил код от John Resig (John Resigs HTML5 Shiv), также я добавил скрипт, регулирующий поведение закладок. О новых структурных тегах HTML вы можете узнать в статье структурные теги HTML5.

Следующий в структуре документа header :

…перейдем к навигационным элементам. Это простой неупорядоченный список:

Закладки связаны с секциями ( section ), разметку которых можно наблюдать ниже:

Все что нужно добавлено, разметка HTML готова. Все просто!

Магия CSS3

Для начала отформатируем header . Шапке ( header ) зададим фиксированную ширину, также добавим тонкий CSS градиент от темного к светлому.

Элемент nav также имеет фиксированную высоту, элементы списка сделаны плавающими ( float:left ) относительно левой стороны, и имеют одинаковую ширину. Также давайте добавим CSS градиент, тень и округлим нижние границы.

Выбранная закладка должна сливаться с header , то есть цвета у закладки и header должны быть одинаковыми. «Конечный» цвет градиента header должен соответствовать «стартующему» цвету выбранной закладки. Также установим обычный фоновый цвет ( background ) для тех браузеров, которые не понимают css градиенты.

Добавляем тень ссылкам

Я полагаю, вы знакомы со свойством box-shadow (если нет прочтите статью: эффекты с CSS3 box-shadow) и знаете, как его применять. Мы можем определить горизонтальное смещение, вертикальное смещение, размытие и цвет. Мы можем добавить внутреннюю тень с помощью атрибута inset . Но есть проблема…у невыбранной кнопки тень должно падать только с верхней стороны, с других сторон тени должны отсутствовать.

  • Тень зададим с помощью вертикального смещения
  • Сделаем вложенную ссылку по ширине больше элемента родителя ( li )
  • Абсолютно позиционируем ссылку внутри элемента li
  • Назначим overflow:hidden элементу li (то есть спрячем содержимое, которое не поместится в теге li )

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

Взгляните на изображение, чтобы лучше понять.

Здесь CSS стиль для ссылок:

Выбранная ссылка не должна иметь внутренней тени:

JavaScript

Наконец, я добавил простой скрипт закладок.

Отметьте, что мы передаем селектор как параметр функции. В данном случае наш селектор – это неупорядоченный список закладок.

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

Подборка самых популярных WordPress плагинов для любого сайта.

Здесь вы сможете скачать различные jQuery скрипты для любых проектов.


Бесплатно скачать CSS3 наработки с различными эффектами анимации.

Можно скачать файлы HTML5 с современными возможностями разработки.

Множество различных free PSD объектов для WEB-дизайна.

Колекция различных элементов form jQuery для вашего сайта.

Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.

Коллекция всегда обновляющихся модальных окон на jQuery.

Разные примеры jQuery validate собраны в одном месте сайта.

Симпатичные варианты реализации ваших jQuery gallery.

Большой сборник широкоформатных и адаптивных jQuery slider`ов.

Ишите примеры реализации jQuery scroll? Это то, что вам нужно.

Красивые и динамичные всплывающие подсказки на jQuery и CSS3.

Интересные материалы на тему веб разработок, главные новости.

Подобрка плагинов Javascript, библиотек, фреймворков и т.д.

Коллекция потрясающих примеров анимации для вашего сайта.

Модернизация элементов форм, создание систем автозаполнения

Плагины для выбора и настройки даты и времени в формах

Предзагрузчики, анимация загрузки, перлоадеры и т.д.

Компоненты, содержащие в себе реализацию параллакс-эффекта.

Создание вкладок, оформление списков в удобную навигацию.

Все, что касается таблиц с данными: фильтр, сортировка и т.д.

Наработки SVG-графики и наложение на нее анимации. Просто красиво.

Отрисовка элементов на веб-странице с помощью html5 canvas.

Примеры элементов, которые реагируют при наведении на них.

Цукерберг рекомендует:  15 правил деловой электронной переписки

Плагины для фото и видео галерей, способные приблежать контент.

Кнопки. Создание красивы и незабываемых кнопок для сайта.

Все, что касается сортировки данных на странице. Плагины html5.

Выборка данных. Множество примеров jQuery select.

Различные способы создания красивого и эффектного меню для сайта.

Дерево элементов. Построение множественных списков на странице.

Примеры объектов в трехмерном пространстве с помощью CSS3 и jQuery.

Эффектные вкладки на CSS3 и jQuery

Скачать

Источник


Крутые табы (tabs) для вашего сайта. Данный пример jQuery обладает мягкой анимацией и приятным глазу появлением текста. Что еще нужно для удобных и запоминающихся вкладок?

Смотрите также:

SEO-продвижение

Автоматическое продвижение сайта в TOP.

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Последняя версия jQuery:

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

Делаем простые и легкие вкладки (tabs) на jQuery без наворотов

В одном из проектов понадобилось использовать горизонтальные текстовые вкладки, хотел найти что-то готовое, но подключать bootstrap ради такого дела — это извращение нелогично. Попробовал найти простые jQuery плагины для вкладок, однако нашел только множество плагинов с кучей настроек, эффектами анимации и прочим. Было найдено пару вариантов «без выкрутасов», написанных на скорую руку, однако где-то было ограничение по количеству вкладок. В общем, меня ни один вариант не устроил. Как результат, в течении 15 минут родился несложный jQuery плагин, удовлетворяющий моим запросам. Решил поделиться, думаю, кому-нибудь да пригодится.

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

Сам код плагина:

Демку можно посмотреть тут: jsfiddle.net/du9cbd9j

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

Это «Песочница» — раздел, в который попадают дебютные посты пользователей, желающих стать полноправными участниками сообщества.

Если у вас есть приглашение, отправьте его автору понравившейся публикации — тогда её смогут прочитать и обсудить все остальные пользователи Хабра.

Чтобы исключить предвзятость при оценке, все публикации анонимны, псевдонимы показываются случайным образом.

17 нововведений jQuery 3 и советы по их использованию

Прошло уже более 10 лет с того момента, как библиотека jQuery начала своё широкое распространение по Интернету, и она до сих пор пользуется большой популярностью. В июле 2015 года jQuery анонсировала альфа-версию 3.0 — крупнейшее обновление за долгие годы.

Текущая версия 3.1.1, вышедшая в сентябре 2020 года, исправила множество багов, добавила новые методы и удалила избыточные, также изменив поведение некоторых функций. Давайте разберемся в нововведениях, которые были представлены в этой версии.

Методы скрытия и отображения

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

Кроме того, методы .hide() , .show() и .toggle() будут ориентироваться на inline-стили. Эта особенность позволит корректно работать с функцией display , что позволит правилам CSS изменяться динамически в зависимости от таких событий, как изменение разрешения окна и ориентации экрана.

Методы wrapAll() и unwrap()

В jQuery 2 метод .wrapAll() при передаче функции в качестве аргумента вёл себя точно так же, как и метод .wrap() . Это изменили — теперь .wrapAll(function) вызывает функцию и использует строковое представление результата как обёртку коллекции.

В jQuery 3 также появился опциональный параметр-селектор метода unwrap() . Это нововведение позволяет передавать методу строковое значение, которое содержит выражение селектора.

Полосы прокрутки высоты и ширины теперь учитываются

В jQuery 2 вызов $(window).width() возвращал ширину содержимого, не учитывая полосы прокрутки, добавленные браузером, когда содержимое превышало размеры элемента. Для того, чтобы предоставить возможность измерения, эквивалентную CSS-медиазапросу, $(window).outerWidth() и $(window).outerHeight() теперь возвращают ширину и длину с учётом полос прокрутки. Это эквивалентно свойству DOM window.innerWidth .

Поведение data()

В jQuery 3 поведение метода data() было немного изменено, чтобы он подходил под спецификации Dataset API. Теперь он переводит имена свойств в верблюжью нотацию.

При использовании старой версии вы получите следующий результат:

В jQuery 3 вы получите:

Как вы заметили, название параметра переведено в верблюжью нотацию, в то время как в старых версиях параметр оставался в нижнем регистре с дефисом.

Поддержка SVG при операциях с классами

jQuery до сих пор не полностью поддерживает SVG, но методы наподобие .hasClass() или .addClass() , которые управляют CSS-классами, могут быть использованы для работы с SVG. Вы можете изменять или находить классы в SVG, затем применять стили к классам, используя CSS.

Фильтры скрытия и отображения


jQuery 3 изменяет смысл фильтров :visible и :hidden . Он воспринимает элементы как :visible , если у них есть хоть какие-то окна макета, включая те, которые имеют нулевую ширину и длину. Для примера, элемент br и строковые элементы без содержимого будут выделены фильтром :visible .

Если вы имеете следующую HTML-страницу:

и запускаете выражение:

то в jQuery 2, вы получите результат 0 , а в третьей версии результат будет равен 3 .

jQuery больше не округляет параметры высоты и ширины

Теперь jQuery возвращает дробные значения .width() и .height() вместо целого числа, если браузер поддерживает это. Для пользователей, которым нужна субпиксельная точность (например, при дизайне веб-сайтов), это может быть полезным.

Например, у вас есть 3 элемента с шириной, равной одной третьей (33.333333%), внутри контейнера шириной 100px:

Если вы запросите ширину дочернего элемента:

то получите значение 33.33333 , что будет являться более точным результатом.

Дополнительный уровень защиты

Дополнительный уровень был добавлен для защиты от межсайтового скриптинга (XSS). Разработчикам теперь нужно уточнять dataType:”script” в опциях методов $.ajax() и $.get() . Это предотвращает возможность атак. Предоставляем пример кода:

Неприменимый хеш

jQuery 3 возвращает синтаксическую ошибку, если строка селектора состоит лишь из хеша, вроде jQuery(«#») или .find(«#») . В старой версии $(«#») возвращал пустое множество, а .find(«#») — ошибку.

Новый метод для выделения строк

Новый метод jQuery.escapeSelector() позволяет вам выделить любую строку или символ, которые имеют определенное значение в CSS-селекторах.

21 ноября, Москва, беcплатно

Например, если элемент на странице имеет id “abc.xyz”, то он не может быть выбран методом $(«abc.xyz») , т.к. селектор будет распознан как элемент с id “abc”, и классом “xyz”. Однако он может быть выбран новой функцией $(«#» + $.escapeSelector(«abc.xyz»)) .

Аргументы jQuery.when()

В jQuery 3 при добавлении методом then() аргумента к $.when() , он возвращает его promise-версию. Это расширяет возможности для ввода, включая промисы Bluebird и промисы ES6, что дает возможность писать более сложные асинхронные обратные вызовы.

Цукерберг рекомендует:  Зачем фрилансеру договор

Хеш в URL

Теперь функция jQuery.ajax() больше не удаляет хеш в URL, если он присутствует. Однако, вам придется удалять его вручную до отправки запроса, если сервер на другом конце соединения не может обработать URL с хешем.

Deferred-объекты совместимы с JS-промисами

Deferred’ы — это объекты которые можно соединять цепными обратными вызовами. jQuery 3 сделал их совместимыми с новыми стандартами Promises/A+. Также есть ключевое изменение в функции .then() . Любое исключение, выбрасываемое в рамках обратного вызова .then() , теперь конвертируется в отклоняемое значение. Непромисообразные значения, возвращенные обработчиком отклонений, меняются на выполняемые значения.

Новый стандарт поведения Promises/A+:

Новый API для анимации

jQuery 3 использует API requestAnimationFrame() для работы с анимацией. Этот API воспроизводит анимации плавнее и быстрее, затрачивая меньше вычислительного времени. Он используется лишь в тех браузерах, которые поддерживают этот API. Для старых же браузеров, таких как Internet Explorer 9, jQuery использует старый API в качестве запасного варианта.

jQuery 3 работает в строгом режиме

Большинство браузеров, поддерживающих jQuery3, используют строгий режим (strict mode). Новая версия была создана с учётом это. Несмотря на то, что jQuery 3 была написана в строгом режиме, вашему коду не обязательно использовать его. Следовательно, вам не нужно переписывать уже существующий код, если вы желаете перейти на новую версию. Однако есть одно исключение: некоторые версии ASP.NET не совместимы из-за строгого режима.

Новая сигнатура методов get и post

jQuery получила новые сигнатуры сервисных функций $.get() и $.post() для единообразия с $.ajax() .

Оператор цикла for…of

jQuery 3 поддерживает оператор цикла for..of , который имеется в спецификации ECMAScript 6. Это позволяет вам запускать цикл по итерируемым объектам, таким как Map , Set , Array и т.д.

Оператор цикла for..of может быть использован для замены синтаксической конструкции $.each( ) . Предположим, что вы хотите применить имя к каждому вводимому элементу страницы.


Код на jQuery 2 выглядит так:

Но код на jQuery 3 будет иметь следующий вид:

30 jQuery плагинов для стилизации элементов форм

Элементы HTML-форм всегда были проблемой для дизайнеров, они некрасивы и никогда не совпадают c веб-дизайном или стилем приложений. А также они по-разному выглядят в зависимости от того, какой браузер используется. Представляем 30 jQuery плагинов, которые помогут вам создавать собственные радиокнопки, checkbox и select элементы. Вы можете использовать нашу форму и изменить внешний вид полей формы с помощью плагинов. Некоторые из плагинов также помогут расширить функциональные возможности элементов формы.

Deep Checkbox

Плагин добавляет некоторую логику к вложенным checkbox.

FancySelect

jQuery плагин для стилизации выпадающего меню.

Checkator

jQuery плагин для стилизации радиокнопок и checkbox элементов. Поддерживает CSS стилизацию.

Select2

Select2 позволяет расширить возможности стандартных элементов форм и стилизировать их под ваш дизайн. Плагин позволяет создавать поля таких видов как: выпадающие списки, поле ввода и поиска тегов, списки множественного выбора (multiselect) и много чего другого.

Checkbo

Легкий jQuery плагин для стилизации чекбокс и радиокнопок.

customSelect

Легкая, ненавязчивая стилизация форм с JQuery.

Chosen

Плагин для стилизации элементов формы. Делает более удобными поля ввода и поиска тегов, списки множественного выбора, выпадающие списки и др.

wSelect.js

Плагин jQuery для стилизации поля выбора (select boxes). Он основан на блоках div, что позволяет, например, добавлять иконки к вариантам поля выбора.

Image Picker

Image Picker простой jQuery плагин поможет создать более удобный графический интерфейс, изменяя внешний вид элемента select.

Select-or-Die

Плагин jQuery для стилизации элементов формы на качественно новом уровне.

selectToAutocomplete

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

Bootstrap Switch

Плагин для стилизации checkbox и радиокнопок в переключатели (toggle switches).

Jquery CSS Multi Column Select Box

Плагин для стилизации поля select в список множественного выбора.

CSS “Ripple/Wave” checkbox and radio button

Css стилизация checkbox и радиокнопок.

CSS3 Checkbox Styles


CSS стилизация checkbox.

jQuery Form Styler

jQuery-плагин для CSS стилизации элементов html-форм.

jQuery Cascading Dropdown

Простой и легкий jQuery плагин для создания выпадающего списка.

uSwitch pure CSS select control

CSS стилизация полей select.

SCSS Radio Buttons

SCSS стилизация радиокнопок.

Selectator

Плагин jQuery, которой поможет изменить внешний вид полей select.

jQuery Selectric

jQuery плагин для стилизации полей select.

ScrewDefaultButtons

Простой плагин jQuery для стилизации radio buttons и checkbox.

Selectik

Selectik стилизации select на jQuery. Простой, кроссбраузерный. альтернатива стандартной формы выбора элемента, которую можно настроить с помощью CSS.

Labelauty jQuery Plugin

Хороший и легкий плагин jQuery, который придаст стилизацию чекбокс и радиокнопок. Также позволяется использовать пользовательские метки для каждого состояния input поля.

EasyDropDown

jQuery плагин для стилизации полей input в выпадающие меню.

customSelect

Простой jQuery UI widget для стилизации select и input элементов.

iCheck

Плагин jQuery и Zepto для стилизации чекбокс и радиокнопок.

DropKick.js

Плагин jQuery, который заменяет стилизацию элементов ul li в поля select.

Accessible toggle-style checkbox

CSS стилизация chexbox элементов в переключатели.

Glowing Radio Buttons and Checkboxes using only CSS

CSS стилиазция радиокнопок и checkbox элементов.

radiosToSlider

Плагин для создания слайдера из списка радиокнопок.

Анимированные вкладки на CSS3 и HTML5


Вкладки очень распространенный элемент в веб-дизайне, и зачастую он очень полезен. Ведь вкладки позволяют красиво и, главное, компактно оформить текст или комментарии, а также многое другое. Итак, в этом уроке мы собираемся реализовать несколько простых CSS3 вкладок при помощи радиокнопок и псевдоэлемента :checked.

Пример разных видов переходов вкладок можно увидеть здесь:

Посмотреть примерСкачать

Возможно вам понравится прошлый урок, где мы также создавали красивые вкладки — Красивые анимированные вкладки на CSS.

HTML часть

Мы будем использовать элемент с разными классами, для переключения между вкладками. А в теге содержится название вкладки:

CSS часть

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

Вкладки будут похожи на элемент , но на самом деле мы будем нажимать на :

Так как не нужна нижняя часть тени для этого элемента, то мы используем псевдоэлемент :after с пустым значением свойства content:

Когда вкладка становиться активной, то у нее есть для этого свой стиль отображения. А также она становится поверх остальных. Делается это с помощью свойства z-index:

Итак, мы скрываем все остальные вкладки с помощью выставления opacity: 0. Мы не можем использовать свойство display: none, т.к. оно не поддерживает эффекты перехода:

Когда мы делаем вкладку активной, то выставляется значение opacity: 1, а также большой z-index:

Вывод

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

Цукерберг рекомендует:  С++ - Какой язык выбрать для первого изучения

Успехов!

Еще материалы по этой теме

Отправить статью

Сохраните ссылку на статью, чтобы прочитать позже. Отправить ссылку на материал в:

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

10 комментариев к записи

Добрый день, подскажите начинающему в данном примере .tabs input.tab-selector-1:checked

.content .content-1, что означает знак «

Здравствуйте, Артур. Тильда значит что будут выбраны все элементы с классами «.content .content-1», которые следуют за элементами с классами и псевдоселектором «.tabs input.tab-selector-1:checked».

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

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

Денис, придется тогда немного изменить CSS. Необходимо задавать background не для одного блока (сейчас белый фон задается для блока с классом «content»), в котором находятся все 4 вкладки, а для каждого отдельно в 106-й строке файла style.css.

Как сделать прямую ссылку на конкретную вкладку. Например, чтобы человек, нажав на ссылку, попал на 3 вкладку сразу? Якоря не работают ((

Николай, у активной вкладки есть атрибут checked. Его можно задавать динамически с помощью jQuery при нажатии на ссылку.

Но как реализовать это? Попадение на вкладку с ссылки. Подскажите пожалуйста

Доброго времени суток! Возможно как-нибудь сделать во вкладках вложенные вкладки? Пробовал скопировать в одну из вкладок код секции с вкладками, но при нажатии на любую из вложенных вкладок они все пропадают.

Добрый день, Владимир!


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

Кроме этих вкладок, на сайте также есть следующие виды вкладок:

Универсальные вкладки (табы) CSS3 и jQuery

Безусловна первая вкладка, которая по своей форме очень понравиться по дизайн. Что в светлой форме кладки или как называют их табы. Большой плюс в них, это корректно на всех браузерах отражается корректно. Применение у них обширное, это от содержания информации, как дополнительный блог, где можно разместить статью. Но больше Tabs можно заметить в применение в функционале. Это переключение скриптов или операторов. Но как всегда берем формы ответов, так как на них большинство используются эти вкладки.

Что можно поставить скрипты со всех социальных площадок, где на кнопках написать их название. И здесь даже гость может оставить сообщение. Однако, нужно заметить, что здесь также применены эффекты при нажатии на текущую вкладку. Теперь вы можете видеть какая вкладка открыта, все сделано на стилях, это не добавление оттенка, а визуально смотрится что включено, что намного современнее от других похожих по своим функциям.

Разметка самоочевидна, хотя title атрибуты могут показаться лишними, в этом случае они необходимы для материала jQuery. Но здесь обновлены эти все элементы. Таким образом вы избегаете видеть ненужную подсказку при наведении курсора на вкладки.

#tabs — неупорядоченный список содержащий элементы навигации вкладки.
#content — оболочка для каждого содержимого вкладки.

Ниже вы найдете строки CSS, что будет необходимо для создания этих вкладок. Кроме того предоставлена демонстрация где содержатся все префиксные свойства CSS3.

#tabs <
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
>

#tabs li <
float: left;
margin: 0 .5em 0 0;
>

#tabs a <
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0,0,0,.4);
>

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after <
background: #fff;
>

#tabs a:focus <
outline: 0;
>

#tabs a::after <
content:»;
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
transform: skew(10deg);
border-radius: 0 5px 0 0;
>

#tabs #current a,
#tabs #current a::after <
background: #fff;
z-index: 3;
>

#content <
background: #fff;
padding: 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
>

Подключаем библиотеку на системе uCoz, она по умолчанию установлена.

И скрипт, где будут вкладки. можно попробовать в низ сайта, для того, чтоб работали на всех страницах.

ez code

Просто о сложном.

Закладки на чистом CSS3

CSS3 становится очень популярным, практически все современные браузеры поддерживают этот стандарт. Многие фичи, которые раньше можно было сделать только с помощью JavaScript, сегодня можно реализовать на чистом CSS.

В этой статье мы рассмотрим создание закладок с использованием только CSS.

Прежде всего, для замены функционала JavaScript чистым CSS, надо найти способ отслеживать нажатия на кнопки с помощью CSS. Мы будем использовать скрытые переключатели (radio button), которые будут указывать на соответствующий им тег . Тег будет работать как кнопка и при нажатии на него будет меняться атрибут checked соответствующего переключателя. Теперь мы можем обрабатывать нажатия с помощью селектора :checked.

Из разметки вы можете видеть, что для каждой закладки необходимы переключатель (radio button), метка (тег ) и, собственно, контейнер, содержащий текст закладки. И все элементы находятся на одном уровне, что отличается от обычной структуры закладок, сделанных с помощью JavaScript. Это возможно благодаря селектору «

», который позволяет применять стили к элементам одного уровня (имеющих общего родителя).

Таким образом вы можете полностью реализовать функции закладок абсолютно без JavaScript.

В демо также использована CSS библиотека для анимации чтобы добавить немного эффектов анимации при появлении текста закладок.

Вкладки на CSS и jQuery

В этом примере мы реализуем с помощью jQuery и CSS очень полезный приём который часто можно встретить на сайтах, это вкладки между которыми можно переключаться.

Шаг -1 Начнём с HTML

Для меню вкладок используем неупорядоченный список, далее создаём контейнер div с классом tab_container и в нём ещё два div контейнера, id у которых такие же как и атрибут у href в списке вкладок.

Normal 0 false false false RU X-NONE X-NONE

Шаг -2 CSS

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих