—»     —»   Анимированные вкладки на CSS3
  Раздел: Руководства, CSS/Style Sheets   Нет комментариев  

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



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

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

Вкладки контента представляют собой очень распространенный элемент веб-дизайна, и зачастую они очень удобны. Итак, сегодня мы собираемся заняться разработкой простеньких 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;
}

В данном руководстве мы представили вам простой пример отображения и скрывания контента. В демо-файлах вы обнаружите больше стилей и эффектов.

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 10055   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2019    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031