Лого www.SiteHere.ru

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

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

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

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

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

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

HTML часть

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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">Главная</label>
 
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Сервисы</label>
 
    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">Работы</label>
 
    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
     <label for="tab-4" class="tab-label-4">Контакты</label>
 
    <div class="clear-shadow"></div>
 
    <div class="content">
        <div class="content-1">
            <h2>Об авторе</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <h3>А также...</h3>
            <p>Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi.....</p>
        </div>
        <div class="content-2">
            <h2>Сервисы</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <h3>А также...</h3>
            <p>Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi.....</p>
        </div>
        <div class="content-3">
            <h2>Портфолио</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <h3>А также...</h3>
            <p>Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi.....</p>
        </div>
        <div class="content-4">
            <h2>Контакты</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <h3>А также...</h3>
            <p>Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi.....</p>
        </div>
    </div>
</section>

CSS часть

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    cursor: pointer;
}
.tabs input#tab-2{
    left: 120px;
}
.tabs input#tab-3{
    left: 240px;
}
.tabs input#tab-4{
    left: 360px;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.tabs label {
    background: #5ba4a4;
    background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
    background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
    background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
    background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
    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;
}

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

1
2
3
4
5
6
7
8
9
10
.tabs label:after {
    content: '';
    background: #fff;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
}

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

1
2
3
4
.tabs input:checked + label {
    background: #fff;
    z-index: 6;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.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;
 
    -webkit-transition: opacity linear 0.1s;
    -moz-transition: opacity linear 0.1s;
    -o-transition: opacity linear 0.1s;
    -ms-transition: opacity linear 0.1s;
    transition: opacity 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);
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 
    -webkit-transition: opacity ease-out 0.2s 0.1s;
    -moz-transition: opacity ease-out 0.2s 0.1s;
    -o-transition: opacity ease-out 0.2s 0.1s;
    -ms-transition: opacity ease-out 0.2s 0.1s;
    transition: opacity ease-out 0.2s 0.1s;
}

Вывод

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

Успехов!

Источник: tympanus.net

Анимированные вкладки на CSS3 и HTML5 5.00/5 (100.00%) 2 голос(ов)

Понравилась статья - расскажи друзьям! :)

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, чтобы они не пересекались с основными названиями классов.

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

      1) Подборка красивых вкладок

      2) Адаптивные вкладки на всю ширину

      3) Красивые анимированные вкладки на CSS

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *