Приведём несколько примеров селекторов CSS 3.0, которые нам понадобятся:

  • элемент:nth-of-type() – с помощью данного псевдо класса мы можем стилизовать элементы указанного типа по номеру (указанному в скобочках), так же в скобочках можно указать even – чётные элементы (2-4-6…),odd – нечётные (1-3-5), l – последний элемент указанного типа
  • элемент:last-of-type – с помощью данного псевдо класса мы можем стилизовать последний элемент указанного типа
  • элемент:first-of-type – с помощью данного псевдо класса мы можем стилизовать первый элемент указанного типа

Например, вот так мы можем назначить тёмно-серый фон для содержимого dd чётных вкладок:

CSS:

#tabs>dd:nth-of-type(even)>div{ background: #ccc;}

А вот так мы можем назначить светло-серый фон для содержимого dd нечётных вкладок:

CSS:

#tabs>dd:nth-of-type(odd)>div{ background: #E5E5E5;}

Или сделать «эффект смещения влево» третьей и второй вкладки dt при наведении мышкой:

CSS:

#tabs>dt:hover:nth-of-type(2){
        width: 26%;
       left: 23.5%;
}
#tabs>dt:hover:nth-of-type(3){
        width: 26%;
        left: 48%;
}

Назначим полупрозрачный фиолетовый фон для содержимого dd нечётных вкладок (красный фон, 10% прозрачности):

CSS:

#tabs>dd:nth-of-type(even)>div{
        background: rgba(255,0,0,0.1);
 }

Назначим полупрозрачный серый фон для содержимого dd чётных вкладок (чёрный фон, 10%)

CSS:

#tabs>dd:nth-of-type(odd)>div{
        background: rgba(122,0,0,0.1);
     }

Где: rgba – указываем фоновый цвет в rgb с процентом прозрачности четвёртой цифрой: 1 – полностью непрозрачный элемент, 0 – полностью прозрачный.

Различие между rgba и opacity (прозрачностью всего элемента) в том, что изменяется прозрачность фона элемента, при этом прозрачность текста и дочерних элементов контейнера остаётся прежней.

«Закругляем нижние края» для содержимого (dd>div) вкладок и добавляем нижнюю тень:

CSS:

#tabs>dd>div{
        -moz-border-bottom-left-radius: 6px;
        -webkit-border-bottom-left-radius: 6px;
        -o-border-bottom-left-radius: 6px;
        border-bottom-left-radius: 6px;
        -moz-border-bottom-right-radius: 6px;
        -webkit-border-bottom-right-radius: 6px;
        -o-border-bottom-right-radius: 6px;
        border-bottom-right-radius: 6px;
        box-shadow: 3px  3px 7px rgba(122,122,122,0.4),-3px  3px 7px rgba(122,122,122,0.4);
        -moz-box-shadow: 3px  3px 7px rgba(122,122,122,0.4),-3px  3px 7px rgba(122,122,122,0.4);
        -webkit-box-shadow: 3px  3px 7px rgba(122,122,122,0.4),-3px  3px 7px rgba(122,122,122,0.4);
        -o-border-box-shadow: 3px  3px 7px rgba(122,122,122,0.4),-3px  3px 7px rgba(122,122,122,0.4);
}

«Закругляем» верхние края вкладок dt:

CSS:

#tabs>dt{
        border-top-left-radius: 6px;
        -moz-border-top-left-radius: 6px;
        -webkit-border-top-left-radius: 6px;
        -o-border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        -moz-border-top-right-radius: 6px;
        -webkit-border-top-right-radius: 6px;
        -o-border-top-right-radius: 6px;
     }

Для большей совместимости с браузерами каждое значение свойства css 3.0 скругления углов (border-radius) и тени (box-shadow) дублируем с указанием фильтров:

  • -moz – Mozilla Firefox,
  • -o – Opera,
  • -webkit – Safari, Chrome.

box-shadow

box-shadow – тень вокруг элемента, указывается в формате:

  • сдвиг по x (положительный: вправо, отрицательный – влево) (обязательный параметр),
  • сдвиг по y (положительный: вниз, отрицательный – вверх) (обязательный параметр),
  • размытие (радиус размытия, чем больше значение, тем мягче, плавнее, прозрачнее тень),
  • растяжение (размер тени: по умолчанию равен размеру элемента, чем больше значение, тем больше масштаб тени),
  • цвет тени (допускается rgba, hex, именной формат).

Подробнее о box-shadow Вы можете Вы можете прочесть здесь.

border-radius

border-radius – скругление углов, задаём радиус скругления, можно указывать не только радиус круга (border-radius: 13px), но и эллипса (border-radius: 13px/3px)

Указано одно значение радиуса: скругление задаётся для всех четырёх углов

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

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

Указано четыре значения радиуса: поочередно для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.

Возможно так же назначение скруглений CSS 3.0 для каждого угла элемента:

  • border-top-right-radius – радиус скругления для верхнего правого угла;
  • border-bottom-right-radius – радиус скругления для нижнего правого угла;
  • border-top-left-radius – радиус скругления для верхнего левого угла;
  • border-bottom-left-radius – радиус скругления для нижнего левого угла.

Подробнее о border-radius Вы можете прочесть здесь

Сделаем более плавным скругление для первой вкладки dt и для последней, а так же зададим «тень» для левого угла первой вкладки и для правого последней вкладки dt:

CSS:

#tabs>dt:first-child{
        border-top-left-radius: 26px;
        -webkit-border-top-left-radius: 26px;
        -o-border-top-left-radius: 26px;
        -moz-border-top-left-radius: 26px;
        box-shadow: -3px  1px 2px rgba(122,122,122,0.4);
        -webkit-box-shadow: -3px  1px 2px rgba(122,122,122,0.4);
        -o-box-shadow: -3px  1px 2px rgba(122,122,122,0.4);
        -moz-box-shadow: -3px  1px 2px rgba(122,122,122,0.4);
     }
#tabs>dt:last-of-type{
        border-top-right-radius: 26px;
        -webkit-border-top-right-radius: 26px;
        -o-border-top-right-radius: 26px;
        -moz-border-top-right-radius: 26px;
        box-shadow: 3px  1px 2px rgba(122,122,122,0.4);
        -webkit-box-shadow: 3px  1px 2px rgba(122,122,122,0.4);
        -o-box-shadow: 3px  1px 2px rgba(122,122,122,0.4);
        -moz-box-shadow: 3px  1px 2px rgba(122,122,122,0.4);
     }

А теперь поработаем с динамическими эффектами, визуализируем эффект при наведении со «смещением влево» второй и третьей вкладки с помощью CSS 3.0 transition:

CSS:

#tabs>dt:hover:nth-of-type(2){
        width: 26%;
        transition-property: left;
        transition-duration: 1s;
        transition-timing-function: linear;
        -moz-transition-property: left;
        -moz-transition-duration: 1s;
        -moz-transition-timing-function: linear;
        -webkit-transition-property: left;
        -webkit-transition-duration: 1s;
        -webkit-transition-timing-function: linear;
        -o-transition-property: left;
        -o-transition-duration: 1s;
        -o-transition-timing-function: linear;
        left: 23.5%;
     }
     #tabs>dt:hover:nth-of-type(3){
        width: 26%;
        transition-property: left;
        transition-duration: 0.7s;
        transition-timing-function: linear;
        -moz-transition-property: left;
        -moz-transition-duration: 0.7s;
        -moz-transition-timing-function: linear;
        -webkit-transition-property: left;
        -webkit-transition-duration: 0.7s;
        -webkit-transition-timing-function: linear;
        -o-transition-property: left;
        -o-transition-duration: 0.7s;
        -o-transition-timing-function: linear;
        left: 48%;
     }

Посмотрите, что получилось в примере, наведите мышью на вторую/третью вкладки.

От автора: особенно красиво переходной эффект CSS 3.0 transition смотрится в Opera. В данном браузере реализован «обратный» эффект, стоит только «перевести» плавно мышку с одного таба на другой, как вкладка, ставшая неактивной, плавно возвращается на своё место (эффект применяется как в прямом, так и в обратном порядке).

Настраиваем CSS 3.0 transition:

  • transition-property - указываем css свойство, которое будет изменяться во время эффекта: в нашем случае это отступ слева left;
  • transition-duration - сколько будет длиться переходной эффект: в нашем случае 0.7 секунды (0.7 s);
  • transition-timing-function - эффект, который будет применён, в нашем случае плавное линейное изменение linear;
  • transition-delay – эффект с задержкой, время, на которое будет отложен переходной эффект, в нашем случае не требуется.

Подробнее о переходных эффектах CSS 3.0 transition Вы можете прочесть здесь

От автора: маленькая подсказка, используйте перечисление свойств transition-property, transition-duration, transition-timing-function, transition-delay, как указано выше, с указанием префиксов браузеров в подробном перечне свойств, а не «быстрым перечислением свойств» «short hand» transition: через запятую. Приведённая нами форма записи имеет более широкую поддержку в браузерах.

Давайте применим так же переходные эффекты с целью морфинга (плавного превращения фонового цвета вкладок из одного в другой) при наведении мышью:

CSS:

#tabs>dt:hover{
        background: #ff0000;
        transition-property: background-color;
        transition-duration: 1s;
        transition-timing-function: ease-out;
        -moz-transition-property: background-color;
        -moz-transition-duration: 1s;
        -moz-transition-timing-function: ease-out;
        -webkit-transition-property: background-color;
        -webkit-transition-duration: 1s;
        -webkit-transition-timing-function: ease-out;
        -o-transition-property: background-color;
        -o-transition-duration: 1s;
        -o-transition-timing-function: ease-out;
        color: #fff;
        font-weight: bold;
     }

Итак, что же у нас получилось?

Как видите, с помощью простой вёрстки и CSS 3.0, без единой фоновой картинки мы придали нашим вкладкам dt и их содержимому dd>div симпатичный вид, задали скругления уголков, определили тени для вкладок dt и их содержимого dd. А так же на практике рассмотрели селекторы из арсенала CSS 3.0, которые позволяют по своему вкусу с лёгкостью выбирать для стилизации любые элементы определённого типа или по положению их в родительском элементе (дереве документа) (например: первую, последнюю вкладки в нашем примере).

И коснулись темы создания переходных красивых визуальных эффектов transition CSS 3.0.

Но всё-таки у наших вкладок - табов есть ещё один существенный недостаток. Если курсор мыши не находится в области вкладки или её содержимого, то активная вкладка «теряется», вместо неё отображается первая вкладка. В следующей части мы решим эту проблему, а так же сделаем «запоминание» активной вкладки с возможностью добавления страницы в закладки с восстановлением конкретной вкладки после загрузки/обновления страницы средствами javascript.

Интересная информация: если Вы задумываетесь над монетизацией своего проекта, Вас заинтересует следующий пост: Мануал для заработка в GGL, Анкор блогера, вебмастера

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

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


Яндекс.Метрика