В нашем сегодняшнем руководстве мы расскажем вам о том, как создать простенькие CSS3-анимированные вкладки посредством радио-кнопок, псевдо-класса :checked и смежных комбинаторов.
Вкладки контента представляют собой очень распространенный элемент веб-дизайна, и зачастую они очень удобны. Итак, сегодня мы собираемся заняться разработкой простеньких CSS3-вкладок при помощи смежных комбинаторов, псевдо-класса :checked и радио-кнопок.
Учтите, что параметры CSS3 будут работать только в тех браузерах, которые поддерживают эту новую технологию.
Верстка
Мы воспользуемся элементами ввода для того, чтобы подключить разделения к классу content. Разделение контента включает в себя все страницы в вкладках. Для каждого элемента ввода у нас будет ярлык. Все ярлыки будут стилизованы под вкладки.
<section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">About us</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2">How we work</label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3">References</label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4">Contact us</label> <div class="clear-shadow"></div> <div class="content"> <div class="content-1"> <p>Some content</p> </div> <div class="content-2"> <p>Some content</p> </div> <div class="content-3"> <p>Some content</p> </div> <div class="content-4"> <p>Some content</p> </div> </div> </section>Каждый элемент ввода имеет индивидуальное значение, и мы всегда можем сделать их выделенными по умолчанию за счет атрибута checked.
CSS-код
С самого начала нам нужно определить некоторые размеры и спрятать элементы ввода, задав им параметр opacity: 0.
tabs { position: relative; margin: 40px auto; width: 750px; } .tabs input { position: absolute; z-index: 1000; width: 120px; height: 40px; left: 0px; top: 0px; opacity: 0; cursor: pointer; } .tabs input#tab-2{ left: 120px; } .tabs input#tab-3{ left: 240px; } .tabs input#tab-4{ left: 360px; }Элементы ввода будут покрывать ярлыки. Будет казаться, что мы кликаем по ярлыку, но на самом деле клик производится по элементу ввода. Такой трюк будет успешно работать даже на мобильных устройствах (правда, в некоторых мобильных телефонах, клик по определенному ярлыку может произвести клик по совсем иному элементу ввода).
Далее мы сделаем так, чтобы ярлыки выглядели как вкладки, задав им соответствующую стилизацию. Учтите, что каждый ярлык имеет разный параметр z-index. Параметр box-shadow прибавит вкладкам глубины и ощущения реалистичности.
.tabs label { background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%); font-size: 15px; line-height: 40px; height: 40px; position: relative; padding: 0 20px; float: left; display: block; width: 80px; color: #385c5b; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px rgba(255,255,255,0.3); border-radius: 3px 3px 0 0; box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); } .tabs input:hover + label { background: #5ba4a4; } .tabs label:first-of-type { z-index: 4; box-shadow: 2px 0 2px rgba(0,0,0,0.1); } .tab-label-2 { z-index: 3; } .tab-label-3 { z-index: 2; } .tab-label-4 { z-index: 1; }Так как нам не нужно, чтобы нижняя часть box-shadow была отображена, мы просто накроем ее при помощи псевдо-элемента :after без содержимого:
.tabs label:after { content: ''; background: #fff; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; display: block; }Когда мы производим клик по вкладке (ярлыку), она будет отличаться стилем и цветом от остальных вкладок. Здесь важно сделать так, чтобы «выделенный» ярлык был поверх остальных слоев вкладок. Итак, мы задаем этому ярлыку самый высший параметр z-index:
.tabs input:checked + label { background: #fff; z-index: 6; }Как уже было упомянуто выше, раздел с контентом будет содержать все страницы во вкладках, и мы устанавливаем ему параметр z-index равный 5 для того, чтобы он отображался ниже выделенного ярлыка. Таким образом, box-shadow области с контентом накроет все другие вкладки.
Внутри области с контентом у нас будет 4 разделения, каждое из которых будет наполнено отдельным контентом. По умолчанию (когда их соответствующий ярлык будет выделен/кликнут), нам нужно чтобы они скрывались. Итак, мы устанавливаем уровень плотности отображения на 0, а параметр z-index на 1. Мы не можем использовать параметр display: none, так как он не поддерживается в переходах CSS3.
.content { background: #fff; position: relative; width: 100%; height: 370px; z-index: 5; box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1); border-radius: 0 3px 3px 3px; } .content div { position: absolute; top: 0; left: 0; padding: 10px 40px; z-index: 1; opacity: 0; transition: all linear 0.1s; } .content div h2, .content div h3{ color: #398080; } .content div p { font-size: 14px; line-height: 22px; font-style: italic; text-align: left; margin: 0; color: #777; padding-left: 15px; font-family: Cambria, Georgia, serif; border-left: 8px solid rgba(63,148,148, 0.1); }Кода нам нужно, чтобы контент появился (при клике ярлыка), мы устанавливаем уровень плотности отображения на 1 и повышаем параметр z-index, так как нам нужно, чтобы этот раздел контент находился поверх остальных:
.tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; opacity: 1; transition: all ease-out 0.2s 0.1s; }В данном руководстве мы представили вам простой пример отображения и скрывания контента. В демо-файлах вы обнаружите больше стилей и эффектов.
