Ленточное меню на CSS3

Используем переходы CSS3 и псевдо-классы CSS2 для создания анимированной навигационной ленты с минимальной разметкой.

Поддержка браузерами

IE8 и IE9 не поддерживают переходы CSS3, поэтому наведение курсора мыши на пункт меню не будет анимироваться в указанных браузерах. IE7 плохо поддерживает псевдо-элементы :before и :after, поэтому лента не будет иметь раздвоенных концов и загибов в активном состоянии. При необходимости псевдо-элементы можно заменить другой разметкой.

Во всех остальных браузерах меню отображается и работает отлично.

 

HTML

<div class='ribbon'>
    <a href='#'><span>Главная</span></a>
    <a href='#'><span>О нас</span></a>
    <a href='#'><span>Сервисы</span></a>
    <a href='#'><span>Кнотакт</span></a>
</div>

Раздвоенные концы и сгибы будут формироваться с помощью псевдо-элементов, поэтому разметка может остается чистой.

 

CSS

Раздвоенные концы

.ribbon:after, .ribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
    border:1.5em solid #fff;
}

.ribbon:after {
    border-right-color:transparent;
}

.ribbon:before {
    border-left-color:transparent;
}

Здесь псевдо-элементы :before и :after используются для создания пустого элемента с тонкой рамкой. Рамка имеет одну сторону прозрачной. Таким образом элемент выглядит с удаленной треугольной секцией, что, в конечном итоге, формирует раздвоенный конец.

Ссылки

.ribbon a:link, .ribbon a:visited { 
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}

Ссылки и раздвоенные концы смещаются влево, так что они выстраиваются в одну линию. Скрытие выступающих элементов прячет складки, которые располагаются ниже элементов span.

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

.ribbon span {
    background:#fff;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;

    -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
    background:#FFD204;
    margin-top:0;
}

.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

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

Верхнее поле дает пространство для анимации элемента span, оставаясь внутри ссылки. Элемент span имеет относительное позиционирование, поэтому может быть опорой для абсолютно позиционированных псевдо-элементов :before и :after.

Переходы CSS3 анимируют изменение состояния при наведении курсора мыши на элемент span. Переходы являются экспериментальными особенностям и не включены в спецификацию CSS3. Поэтому, каждый браузер использует свои префиксы для них.

Псевдо-элементы :before и :after создают завернутые грани при наведении курсора мыши на ссылку. Они позиционируются абсолютно под элементами  span и будут скрываться в обычном состоянии. Псевдо-элементы  содержат только нижнюю и левую или правую части рамки. Части рамки тонкие, длинные (0.5 x 0.5) и располагаются рядом, поэтому они формируют треугольники. Нижняя часть рамки будет иметь такой же цвет, как и лента, а левая часть - цвет подвернутой стороны.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Kg2pt1T8mIY/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Ленточное меню на CSS3 | | 2012-08-19 20:13:48 | | Статьи Web-мастеру | | Используем переходы CSS3 и псевдо-классы CSS2 для создания анимированной навигационной ленты с минимальной разметкой.Поддержка браузерамиIE8 и IE9 не поддерживают переходы CSS3, поэтому наведение | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: