Как сделать красивые эффекты для ссылок на CSS3, а именно плавное изменение цвета при наведении и плавный сдвиг вправо.

Разместил / Просмотров: 34 119 / комментариев 19

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

Почему этот способ простой? Потому что он делается только с помощью CSS. Никаких скриптов только стили.

В общем, дорогие друзья, давайте приступать.

Посмотреть пример

Плавное изменение цвета при наведении

Для всех ссылок

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

a {

-moz-transition: color 0.2s 0.02s ease;
 -o-transition: color 0.2s 0.02s ease;
 -webkit-transition: color 0.2s 0.02s ease;
 color:#222;
 }

a:hover {
 color: #1FA2E1;
 }

По умолчанию здесь стоит 0,2 секунды при наведении курсора и 0.02 секунды после убирания. Другими словами здесь выставляется скорость анимации. Это значение Вы можете изменять как угодно, они стоят в примере.

В классе a:hover выставляется цвет ссылки, который будет плавно появляться при наведении на неё. По умолчанию стоит этот цвет #1FA2E1.

Для одной ссылки на странице (или разные цвета)

Чтобы этот CSS эффект сделать для одной ссылки на сайте, нужно задать отдельный класс к какому либо тегу, например, h1 или li. В данном случае мы будем пресваевать класс к тегу li. Выглядит это следующим образом:

HTML

<ul>

<li class="s1"><a href="http://beloweb.ru/category/wp">WordPress</a></li>

</ul>

Здесь мы придумали класс s1

CSS

.s1 a {
 -moz-transition: color 0.2s 0.02s ease;
 -o-transition: color 0.2s 0.02s ease;
 -webkit-transition: color 0.2s 0.02s ease;
 color:#222;

 }

.s1 a:hover {
 color: #ff6f5b;
 }

Всё. Теперь у нас плавность будет работать только на той ссылке где присвоен этот класс s1

Разные цвета ссылок

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

HTML

<ul>

<li class="s1"><a href="http://beloweb.ru/category/wp">WordPress</a></li>

<li class="s2"><a href="http://beloweb.ru/category/wp">Беловеб</a></li>

</ul>

Как видите, что второй тег li  уже имеет класс s2.

CSS

.s1 a {
 -moz-transition: color 0.2s 0.02s ease;
 -o-transition: color 0.2s 0.02s ease;
 -webkit-transition: color 0.2s 0.02s ease;
 color:#222;
 }

.s1 a:hover {
 color: #ff6f5b;
 }

.s2 a {
 -moz-transition: color 0.2s 0.02s ease;
 -o-transition: color 0.2s 0.02s ease;
 -webkit-transition: color 0.2s 0.02s ease;
 color:#222;
 }

.s2 a:hover {
 color: #55b857;
 }

Одним словом здесь мы задаём каждой ссылке отдельный цвет при наведении, а потом каждый класс задаём тегу (li) на странице.

Плавное смещение ссылки вправо на странице

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

Делается этот плавный сдвиг довольно просто. Всего лишь нужно присвоить к списку на странице тег div с соответствующим классом.

Для начала нам нужен сам html код списка, делать мы его будем с помощью тегов ul и li:

HTML

<div class="sdvig">

<ul>

<li><a href="http://beloweb.ru/category/wp">WordPress</a></li>

<li><a href="http://beloweb.ru/category/wp/plaginyi">Плагины</a></li>

<li><a href="http://beloweb.ru/category/wp/shablonyi-wp">Шаблоны</a></li>

</ul>

</div>

Как Вы уже заметили, что мы к списку добавили тег <div> с классом sdvig.

Теперь, чтобы всё заработало в стили нужно добавить следующее:

CSS

.sdvig a {
 -moz-transition: all 0.1s ease-in-out;
 -o-transition: all 0.1s ease-in-out;
 -webkit-transition: all 0.1s ease-in-out;
 color:#222;
 display:block;
 }

.sdvig a:hover {
 -webkit-transform: translate(8px,0);
 -moz-transform: translate(8px,0);
 -o-transform: translate(8px,0);
 color: #1FA2E1;
 }

По умолчанию (как в примере) скорость анимации стоит 0.1 секунд, а расстояние сдвига в 8px. Естественно эти значения Вы можете изменять, поэкспериментировать, так сказать. :-)

Посмотреть пример

Вот и всё, друзья. Если возникнут вопросы, жду Ваших комментарием. Пока.

  • Кирилл

    FireFox14 — та же самая беда — не cдвигаются ссылки. после display:block; все заработало

  • Спасибо за урок! Уже давно голову ломал, как так сделать. И знал же, что только на css3 это можно реализовать!

  • Кирилл, всё исправил. Спасибо :-)

  • Юрий, рад что Вам пригодилось :-)

  • Олег

    Привет, земляк! Отличный урок! Метод крайне прост и эффективен. Раньше для этого лепил jquery.

  • Олег, рад, что этот урок Вам понравился и пригодился :-)

  • Иван

    То, что надо! Хотел сначала сдвиг на jquery забабахать, но наткнулся на Ваш способ, буду пробовать! Спасибо!

  • Иван, рад, что Вам понравилось. Пользуйтесь :-)

  • Нурай

    а как делаются вот такие кнопки??? ТАм сверху написано «Блог», «Контакты» http://www.alexilin.ru/blog/

  • Нурай, данное меню делается через CSS. в одном комментарии не рассказать.

  • Елена

    Спасибо за отличную статью) Пригодилось)

  • У меня почему то идет сдвиг всего что есть на сайте….Но этот эфект работает…..

  • Вы наверное задали этот эффект для всех ссылок на сайте.

  • сергей

    А как сделать сдвиг не влево а вниз?

  • Измените вот эти параметры:
    -webkit-transform: translate(8px,0);
    -moz-transform: translate(8px,0);
    -o-transform: translate(8px,0);

  • Егор

    Как сделать не плавную смену цвета текста, а плавный переход на эффект текста text-shadow ( у меня вот эффект свечения ) и что т он то как раз плавным не делается …
    Вот прмер моего …
    .postcontent a, .postcontent a:link
    {
    font-family: Arial, ‘Arial Unicode MS’, Helvetica, Sans-Serif;
    text-decoration: none;
    color: #FFFFFF;
    }

    .postcontent a:visited, .postcontent a.visited
    {
    font-family: Arial, ‘Arial Unicode MS’, Helvetica, Sans-Serif;
    text-decoration: none;
    color: #FFFFFF;
    }

    .postcontent a:hover, .postcontent a.hover
    {
    font-family: Arial, ‘Arial Unicode MS’, Helvetica, Sans-Serif;
    text-decoration: none;
    -moz-transition: shadow 0.2s 0.02s ease;
    -o-transition: shadow 0.2s 0.02s ease;
    -webkit-transition: shadow 0.2s 0.02s ease;
    color: #EAEFCD;
    text-shadow:0px 0px 20px #00c6ff;
    }

  • Вот это

    -moz-transition: shadow 0.2s 0.02s ease;
    -o-transition: shadow 0.2s 0.02s ease;
    -webkit-transition: shadow 0.2s 0.02s ease;

    Нужно добавлять сюда:

    .postcontent a

    А не сюда:

    postcontent a:hover

  • И вместо shadow поставьте all

  • Егор

    Всё, сам разобрался … в анимации (transition) надо было вставлять атрибут не shadow, а text shadow
    Вот так
    -moz-transition: text-shadow 0.2s 0.02s ease;
    -o-transition: text-shadow 0.2s 0.02s ease;
    -webkit-transition: text-shadow 0.2s 0.02s ease;