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

Демонстрация работы – Скачать исходный код

XHTML 

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

demo.html

<ul id="navigationMenu">
    <li>
        <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>

    <li>
    	<a class="about" href="#">
            <span>About</span>
        </a>
    </li>

    <li>
         <a class="services" href="#">
            <span>Services</span>
         </a>
    </li>

    <li>
    	<a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>
    <li>
    	<a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>

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

Анимированное меню с использованием CSS3 

CSS 

После того, как мы создали основную структуру, мы создадим интересные эффекты и стили CSS3. Они будут работать даже в браузерах, не поддерживающих анимации перехода CSS3, но не столь эффектно. Меню сохраняет полную функциональность даже в таком старом браузере, как Internet Explorer 6.

styles.css – Part 1

*{
    /* A universal CSS reset */
    margin:0;
    padding:0;
}

body{
    font-size:14px;
    color:#666;
    background:#111 no-repeat;

    /* CSS3 Radial Gradients */
    background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
    background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

    font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

Для того, чтобы стилизовать фон тега body, мы сначала задаем цвет фона, который работает как обходной путь для старых браузеров, и после этого задаем два круговых градиента CSS3 в качестве фоновых изображений для браузеров Firefox и Chrome/Safari соответственно. Если браузер пользователя не поддерживает градиенты, эти стили будут просто проигнорированы и будет показан однотонный цвет фона.

Вы можете заметить, что в таблице стилей перед большей частью свойств расположен идентификатор ненумерованного списка -  #navigationMenu. Это сделано, чтобы не допустить конфликтов с остальными стилями на странице, когда Вы встроите меню в свой сайт.

styles.css – Part 2

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    /* The background sprite: */
    background:url('img/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;
    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

Свойство перехода CSS3 предоставляет много возможностей. Оно позволяет анимировать изменения, происходящие в элементе, когда применяются псевдоклассы. В частности в нашем примере, когда пользователь наводит указатель мыши на ссылку меню, псевдокласс :hover начинает действовать, показывая тег span, который спрятан в других ситуациях.

Если не задать свойство перехода, это изменение будет мгновенным. А с помощью свойства перехода мы можем анимировать этот процесс. Здесь мы сообщаем браузеру, что продолжительность анимации должна составлять 250 миллисекунд. Можно дополнительно определить список свойств, которые нужно анимировать, вместо того, чтобы анимировать все.

Переходы CSS3

styles.css – Part 3 

/* Green Button */

#navigationMenu .home {	background-position:0 0;}
#navigationMenu .home:hover {	background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

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

Файл PSD находится в архиве, доступном для скачивания, так что можно изменить изображение по вашему вкусу.

И вот наше минималистическое меню с использованием CSS3 готово!

Заключение 

Со временем мы сможем создавать все больше, используя только свойства CSS, но уже сейчас есть очень много областей, в которых проще и удобней использовать CSS3.

Автор урока Martin Angelov

Перевод — Дежурка

Смотрите также:

• Создание градиентных кнопок с использованием CSS3
• Создание переключателя с использованием CSS3
• Создание выезжающего меню с использованием CSS3