В этом уроке мы создадим интересную анимированную группу вкладок, которая покажет возможности селектора CSS3 :target, используя только HTML5 и CSS3. Нам не понадобится JavaScript или изображения, и все будет работать в браузерах Internet Explorer версии 9 и выше, Chrome, Firefox, Safari и Opera.

Отличительные особенности

Вы можете найти много групп вкладок на чистом CSS3 в интернете. Но у многих есть следующие проблемы:

• Они не покажут содержание ни одной вкладки, если дать ссылку без идентификатора, т. е., если дать ссылку на mypage.html, а не на mypage.html#tab1.
• Не подсвечивают активную вкладку.

В нашем примере эти проблемы решены — посмотрите демонстрацию работы.

Что насчет браузера Internet Explorer версий 6, 7 и 8? 

Можно ли ожидать, что современные эффекты CSS3 будут работать в браузере, выпущенном в 2001 году? Браузеры Internet Explorer версий 7 и 8 отобразят только первую вкладку. Internet Explorer 6 покажет последнюю вкладку, хотя вместо этого можно легко задать показ первой вкладки.

Таким образом, у Вас есть два варианта:

1. Не предлагайте поддержу устаревших версий браузеров. Пользователи браузера Internet Explorer не узнают, что они что-то не видят, так что, если содержимое не критично для Вашей страницы, Вы можете просто проигнорировать эту проблему.
2. Так как предыдущее решение не очень привлекательно, то наиболее быстрым решением будет добавить selectivizr как запасной вариант. Или воспользуйтесь методом последовательного улучшения и забудьте о новых возможностях CSS3.

HTML 

Вот основной код HTML5. Содержимое вкладок находится в теге section. Сама вкладка — его первый потомок, и определяется как элемент h2, содержащий внутреннюю ссылку на внешний тег section:

<article class="tabs">

<section id="tab1">
<h2><a href="#tab1">Tab 1</a></h2>
<p>This content appears on tab 1.</p>
</section>
<section id="tab2">
<h2><a href="#tab2">Tab 2</a></h2>
<p>This content appears on tab 2.</p>
</section>
<section id="tab3">
<h2><a href="#tab3">Tab 3</a></h2>
<p>This content appears on tab 3.</p>
</section>
</article>

Этот код отличается от кода HTML для вкладок, который Вы видели раньше. Большая часть определяют вкладки как список тегов ul, после которого идет раздел содержимого. Хотя можно использовать и подобную разметку, с ней сложнее сделать подсветку вкладок, так как вкладке нельзя задать стили с помощью селектора :target. Лучшее решение, которое мы нашли, — добавить тег section, который окрашивается соответственно и располагается под текстом вкладки, что сделало код запутанным и неочевидным.

CSS 

Сначала мы зададим стили контейнеру article. Мы задаем ему размер и относительное расположение, чтобы можно было расположить разделы:

article.tabs
{
position: relative;
display: block;
width: 40em;
height: 15em;
margin: 2em auto;
}

Затем следуют разделы. Они спозиционированны абсолютно на расстояние 1.8em от верха, чтобы оставить место для вкладок. Тени у свойства box-shadow довольно прозрачные, так как каждый раздел расположен один над другим.

article.tabs section
{
position: absolute;
display: block;
top: 1.8em;
left: 0;
height: 12em;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}

Так как последняя вкладка будет показана сверху, мы поменяем ее с первой вкладкой, задав ей высокое значение свойства z-index:

article.tabs section:first-child
{
z-index: 1;
}

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

article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}

article.tabs section:nth-child(2) h2
{
left: 132px;
}

article.tabs section:nth-child(3) h2
{
left: 254px;
}
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}

Все вкладки и разделы теперь определены, и первая вкладка показывается по умолчанию, даже если в адресе страницы не задан раздел. Теперь мы можем изменить цвет, цвет фона и глубину расположения выбранного раздела, используя селектор :target:

article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}

Как дополнение давайте добавим эффект перехода, когда меняется выбранная вкладка.

article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}

Демонстрация работы

В отличие от многих решений с использованием Javascript наше решение на CSS3 поддерживает полную историю переходов между вкладками, так что кнопки вперед и назад в браузере работают правильно. Также возможно сослаться напрямую на вкладку из любого места страницы, что показано ссылкой «NEXT» (далее).

Это решение не идеально, когда Вы впервые приходите на страницу, первая вкладка активна, но показана в выключенном состоянии. И эту проблему сложно решить. Самым простым решением будет уменьшить разницу между включенным и выключенным состояниями.

Но можно пойти еще дальше. Так как мы используем CSS, мы можем превратить группу вкладок в другой элемент без изменения разметки HTML.

Автор урока Craig Buckler

Перевод — Дежурка

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

• Создаем круговые и эллиптические градиенты с использованием CSS3
• Обращения к файлу определенного типа при помощи селектора атрибутов CSS
• Создание отражения изображения с использованием CSS3