Необыкновенное выделение ссылок с помощью CSS3

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

Такое выделение смотрится довольно красиво и подвижно, и реализовывается при помощи CSS.

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

[css] a {
display:inline-block;
color:#555;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
[/css]

Вы заметили похожие свойства? Да, они похожи, но приставка перед ними (-o-, -moz-, -webkit-, -ms-) указывает на браузер, для которого будет использовано это свойство. Дело в том, что некоторые браузеры не поддерживают новые свойства css3 (я говорю о старых браузерах), поэтому с помощью этих приставок работу этих свойств можно проверить в экспериментальном режиме. Так мы сможем добиться максимальной кроссбразерности.

transition-duration: 0.25s; Эта строка задаёт задёржку преобразования равной 0.25 секунды.
transition-property: transform; Задаём тип преобразования — трансформация.
transform: scale(1) rotate(0); Указываем параметры трансформации. Scale(1) — относительное растяжение, 1 указывает на то, что растяжения не будет. Rotate(0) — поворот. 0 указывает на то, что поворот осуществляется на 0 градусов (т.е. не осуществляется).
Теперь рассмотрим стили при наведении на ссылку, за которые отвечает псевдоселектор :hover
[css] a:hover {
color:#333;
text-shadow:0 1px 0 #0f9fff;
display:inline-block;
background:#006fdd;
padding:2px 5px 2px 5px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
-ms-border-radius:4px;
border-radius: 4px;
-webkit-transform: scale(1.05) rotate(-1deg);
-moz-transform: scale(1.05) rotate(-1deg);
-o-transform: scale(1.05) rotate(-1deg);
-ms-transform:scale(1.05) rotate(-1deg);
transform: scale(1.05) rotate(-1deg);
}
[/css]

Свойство border-radius также воспринимается лишь новыми браузерами, поэтому и к нему припишем приставок. Оно отвечает за радиус скругления.
Свойство background задает цвет фона.
Свойство display указывает тип отображения.
Свойство padding отвечает за отступы (сверху, справа, снизу, слева).
Теперь свойство transform принимает значения: scale(1.05) — растянуться в 1.05 раза и rotate(-1deg) — повернуться на -1 градус.

А теперь то, что придаст необыкновенности, псевдоселектор :nth-child(2n), который используется для добавления стиля к элементам на основе нумерации в дереве элементов.

[css] a:nth-child(2n):hover {
background:#ffb111;
text-shadow:0 1px 0 #FFDF7D;
-webkit-transform: scale(1.05) rotate(1deg);
-moz-transform: scale(1.05) rotate(1deg);
-o-transform: scale(1.05) rotate(1deg);
-ms-transform:scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
}
[/css]

Значения

odd — Все нечетные номера элементов.
even — Все четные номера элементов.
число — Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
выражение — Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

htmlbook.ru

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

Посмотреть пример вы можете здесь.

Stas Kuryan

Web developer. Перфекционист в написании кода.

13 комментариев

  1. Роман     

    Доброе время суток, Stafox! Я в style.css добавил эти три блока кода, но у меня получилось никак в примере. У меня каждая ссылка поворачивается на 1 градус против часовой и окрашивается в синий цвет. В чём ошибка, почему не поворачивается в противоположную сторону и не окрашивается в оранжевый? Я так понимаю дело в псевдоселекторе :nth-child(2n) ???

    • Stafox        Автор

      Всё просто. Вы наверняка попросту поместили ссылки на странице.
      Да, с одной стороны дело в псевдоселекторе. Он не способен на подсчёт номера ссылки на странице в общем.

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

      Вот код:
      [html]
      <div class="box">
      <ul>
      <li>
      <a href="stafox.ru/moya-samaya-samaya/" title="Моя самая самая">Моя самая самая</a>
      <a href="stafox.ru/dvadcat-tysyach-rublej-na-novyj-god/" title="двадцать тысяч рублей на новый год">Двадцать тысяч рублей на Новый год</a>
      <a href="stafox.ru/neobyknovennoe-vydelenie-ssylok-s-pomoshhyu-css3/" title="Необыкновенное выделение ссылок c помощью CSS3">Необыкновенное выделение ссылок c помощью CSS3</a>
      </li>
      </ul>
      </div>[/html]

      И соответсвенно css:
      [css]a {
      text-decoration:none;
      color:#03f;
      }
      a:hover {
      color:#c33;
      }
      .box {
      font-size:18px;
      text-align:center;
      margin:0 auto;
      width:600px;
      }
      .box ul li {
      list-style:none;
      }
      .box a {
      display:inline-block;
      color:#555;
      -webkit-transition-duration: 0.25s;
      -moz-transition-duration: 0.25s;
      -o-transition-duration: 0.25s;
      -ms-transition-duration: 0.25s;
      transition-duration: 0.25s;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      -o-transition-property: -o-transform;
      -ms-transition-property: -ms-transform;
      transition-property: transform;
      -webkit-transform: scale(1) rotate(0);
      -moz-transform: scale(1) rotate(0);
      -o-transform: scale(1) rotate(0);
      -ms-transform: scale(1) rotate(0);
      transform: scale(1) rotate(0);
      }
      .box a:hover {
      color:#333;
      text-shadow:0 1px 0 #0f9fff;
      display:inline-block;
      background:#006fdd;
      padding:2px 5px 2px 5px;
      -webkit-border-radius:4px;
      -moz-border-radius:4px;
      -o-border-radius:4px;
      -ms-border-radius:4px;
      border-radius: 4px;
      -webkit-transform: scale(1.05) rotate(-1deg);
      -moz-transform: scale(1.05) rotate(-1deg);
      -o-transform: scale(1.05) rotate(-1deg);
      -ms-transform:scale(1.05) rotate(-1deg);
      transform: scale(1.05) rotate(-1deg);
      }
      .box a:nth-child(2n):hover {
      background:#ffb111;
      text-shadow:0 1px 0 #FFDF7D;
      -webkit-transform: scale(1.05) rotate(1deg);
      -moz-transform: scale(1.05) rotate(1deg);
      -o-transform: scale(1.05) rotate(1deg);
      -ms-transform:scale(1.05) rotate(1deg);
      transform: scale(1.05) rotate(1deg);
      }[/css]

  2. Роман     

    У меня в файлике menu.html вот такой ненумерованный список
    [html]&lt;p&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href = &quot;index.php&quot;&gt;Главная&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;ifelse.php&quot;&gt;If — Else&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;for.php&quot;&gt;Цикл for&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;while.php&quot;&gt;Цикл while&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;case_switch.php&quot;&gt;Case switch&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;array.php&quot;&gt;Массивы&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;obmen.php&quot;&gt; Обмен элементов &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;math.php&quot;&gt; String Math Array &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;date.php&quot;&gt; Дата / время &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;timer.php&quot;&gt; Таймер &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;form.php&quot;&gt; Обработка форм &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;obj.php&quot;&gt; объект Object &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href = &quot;watch.php&quot;&gt; Наблюдаем за объектом &lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/p&gt;[/html]
    Потом это меню я вот такой строкой подключаю к каждой странице
    [php]&lt;td width=’22%’&gt; &lt;?php require_once &quot;menu.html&quot;?&gt; &lt;/td&gt;[/php]

    И что-то всё ровно не работает… Может я чего-то недопонимаю. В style.css у меня во так:

    [css]a {
    display:inline-block;
    color:#555;
    -webkit-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    -ms-transition-duration: 0.25s;
    transition-duration: 0.25s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
    }

    a:hover {
    color:#333;
    text-shadow:0 1px 0 #0f9fff;
    display:inline-block;
    background:#006fdd;
    padding:2px 5px 2px 5px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
    -ms-border-radius:4px;
    border-radius: 4px;
    -webkit-transform: scale(1.05) rotate(-2deg);
    -moz-transform: scale(1.05) rotate(-2deg);
    -o-transform: scale(1.05) rotate(-2deg);
    -ms-transform:scale(1.05) rotate(-2deg);
    transform: scale(1.05) rotate(-2deg);
    }

    a:nth-child(2n):hover {
    background:#ffb111;
    text-shadow:0 1px 0 #FFDF7D;
    -webkit-transform: scale(1.05) rotate(2deg);
    -moz-transform: scale(1.05) rotate(2deg);
    -o-transform: scale(1.05) rotate(2deg);
    -ms-transform:scale(1.05) rotate(2deg);
    transform: scale(1.05) rotate(2deg);
    }[/css]

    • Stafox        Автор

      Вот уже готовый рабочий код. Дело в том, что в моём примере все ссылки хранились в одном элементе списка.
      В вашем случае, псевдоселектор нужно применять к тегу li.
      [html]
      <!DOCTYPE html>
      <html>
      <head>
      <title>A</title>
      <link rel="stylesheet" href="style.css" />
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
      <style>
      li a {
      display:inline-block;
      color:#555;
      -webkit-transition-duration: 0.25s;
      -moz-transition-duration: 0.25s;
      -o-transition-duration: 0.25s;
      -ms-transition-duration: 0.25s;
      transition-duration: 0.25s;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      -o-transition-property: -o-transform;
      -ms-transition-property: -ms-transform;
      transition-property: transform;
      -webkit-transform: scale(1) rotate(0);
      -moz-transform: scale(1) rotate(0);
      -o-transform: scale(1) rotate(0);
      -ms-transform: scale(1) rotate(0);
      transform: scale(1) rotate(0);
      }

      li a:hover {
      color:#333;
      text-shadow:0 1px 0 #0f9fff;
      display:inline-block;
      background:#006fdd;
      padding:2px 5px 2px 5px;
      -webkit-border-radius:4px;
      -moz-border-radius:4px;
      -o-border-radius:4px;
      -ms-border-radius:4px;
      border-radius: 4px;
      -webkit-transform: scale(1.05) rotate(-2deg);
      -moz-transform: scale(1.05) rotate(-2deg);
      -o-transform: scale(1.05) rotate(-2deg);
      -ms-transform:scale(1.05) rotate(-2deg);
      transform: scale(1.05) rotate(-2deg);
      }

      li:nth-child(2n):hover a {
      background:#ffb111;
      text-shadow:0 1px 0 #FFDF7D;
      -webkit-transform: scale(1.05) rotate(2deg);
      -moz-transform: scale(1.05) rotate(2deg);
      -o-transform: scale(1.05) rotate(2deg);
      -ms-transform:scale(1.05) rotate(2deg);
      transform: scale(1.05) rotate(2deg);
      }
      </style>
      </head>
      <body>
      <p>
      <ul>
      <li><a href = "index.php">Главная</a></li>
      <li><a href = "ifelse.php">If — Else</a></li>
      <li><a href = "for.php">Цикл for</a></li>
      <li><a href = "while.php">Цикл while</a></li>
      <li><a href = "case_switch.php">Case switch</a></li>
      <li><a href = "array.php">Массивы</a></li>
      <li><a href = "obmen.php"> Обмен элементов </a></li>
      <li><a href = "math.php"> String Math Array </a></li>
      <li><a href = "date.php"> Дата / время </a></li>
      <li><a href = "timer.php"> Таймер </a></li>
      <li><a href = "form.php"> Обработка форм </a></li>
      <li><a href = "obj.php"> объект Object </a></li>
      <li><a href = "watch.php"> Наблюдаем за объектом </a></li>
      </ul>
      </p>
      </body>
      </html>
      [/html]

      • Роман     

        Спасибо, Стас! Более-менее разобрался. Получилось наконец-таки! А этот эфект ты сам придумал и реализовал или где то подсмотрел?

        • Stafox        Автор

          Пожалуйста. Про поворот, читал на забугровском сайте. Ну, а про псевдоселектор nth-child статей много.

  3. Роман     

    Ооо… Я разобрался. Убрал все кроме одной пары и всё получилось! Т.е. у меня стало вот так в menu.html

    [html]
    &lt;p&gt;
    &lt;ul&gt;
    &lt;li&gt;
    &lt;a href = &quot;index.php&quot;&gt;Главная&lt;/a&gt;
    &lt;a href = &quot;ifelse.php&quot;&gt;If — Else&lt;/a&gt;
    &lt;a href = &quot;for.php&quot;&gt;Цикл for&lt;/a&gt;&lt;/li&gt;
    &lt;a href = &quot;while.php&quot;&gt;Цикл while&lt;/a&gt;&lt;/li&gt;
    &lt;a href = &quot;case_switch.php&quot;&gt;Case switch&lt;/a&gt;
    &lt;a href = &quot;array.php&quot;&gt;Массивы&lt;/a&gt;
    &lt;a href = &quot;obmen.php&quot;&gt; Обмен элементов &lt;/a&gt;
    &lt;a href = &quot;math.php&quot;&gt; String Math Array &lt;/a&gt;
    &lt;a href = &quot;date.php&quot;&gt; Дата / время &lt;/a&gt;
    &lt;a href = &quot;timer.php&quot;&gt; Таймер &lt;/a&gt;
    &lt;a href = &quot;form.php&quot;&gt; Обработка форм &lt;/a&gt;
    &lt;a href = &quot;obj.php&quot;&gt; объект Object &lt;/a&gt;
    &lt;a href = &quot;watch.php&quot;&gt; Наблюдаем за объектом &lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/p&gt;[/html]

    • Stafox        Автор

      Можно и так, но по мне, так вариант, где ссылка в отдельном элементе списка — лучше.

      • Роман     

        Я кстати в конце концов так и оставил. Каждая ссылка в отдельном элементе списка. А в .css псевдоселектор применил к тегу . Просто в этом случае нет косяка с элементами списка (некоторые элементы не переходили на новую строку, и получалось так, что на одной строке умещалось по две ссылки). Но сейчас все работает и это меня радует.
        А вот если сделать три цвета, это нужно еще 1 цвет прописать и угол поворота и в псевдоселекторе 3n поставить?

        • Stafox        Автор

          Да, 3n. Ну и я бы добавил ещё для 3n+1 и 3n-1.

  4. Котан     

    Спасибо большое, как раз то что нужно! Stafox, твой сайт супер. Респект 😀
    Правда у меня не работает фоновой цвет, но я этого особо не хотел. Возможно из-за того что я вывожу данный код в виджете, и стили не совпадают, да не важно. Благодарю еще раз!

    • Stafox        Автор

      Пожалуйста. Рад, что пригодилось.

  5. Кирилл     

    Классный эффект выделения ссылок, спасибо.

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

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