Лого www.SiteHere.ru

Как красиво оформить ссылки

Креативный эффект для ссылок

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

21 способ красиво оформить ссылки:

Посмотреть примерСкачать

Как и в предыдущем уроке мы рассмотрим на примере одного вида эффекта. В структуре ссылок ничего нового:

HTML КОД
1
2
3
4
5
6
7
<nav class="cl-effect-13">
    <a href="#">Ссылка 1</a>
    <a href="#">Ссылка 2</a>
    <a href="#">Ссылка 3</a>
    <a href="#">Ссылка 4</a>
    <a href="#">Ссылка 5</a>
</nav>

Но у некоторых ссылок присутствует атрибут data-hover:

HTML КОД
1
2
3
4
5
6
7
<nav class="cl-effect-11">
    <a href="#" data-hover="Ссылка 1">Ссылка 1</a>
    <a href="#" data-hover="Ссылка 2">Ссылка 2</a>
    <a href="#" data-hover="Ссылка 3">Ссылка 3</a>
    <a href="#" data-hover="Ссылка 4">Ссылка 4</a>
    <a href="#" data-hover="Ссылка 5">Ссылка 5</a>
</nav>

Он используется для дублирования текста самой ссылки.

А для создания эффекта перспективы используется дополнительный элемент <span>:

HTML КОД
1
2
3
4
5
6
7
<nav class="cl-effect-10">
    <a href="#" data-hover="Ссылка 1"><span>Ссылка 1</span></a>
    <a href="#" data-hover="Ссылка 2"><span>Ссылка 2</span></a>
    <a href="#" data-hover="Ссылка 3"><span>Ссылка 3</span></a>
    <a href="#" data-hover="Ссылка 4"><span>Ссылка 4</span></a>
    <a href="#" data-hover="Ссылка 5"><span>Ссылка 5</span></a>
</nav>

Вот так выглядит CSS стиль для ссылок, которые используют 15-й эффект (при котором ссылка немного уменьшается в размере и изменяет свой цвет):

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Эффект 15: уменьшение и изменение цвета */
.cl-effect-15 a {
    color: rgba(0,0,0,0.2);
    font-weight: 700;
    text-shadow: none;
}
 
.cl-effect-15 a::before {
    color: #fff;
    content: attr(data-hover);
    position: absolute;
    transition: transform 0.3s, opacity 0.3s;
}
 
.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
    transform: scale(0.9);
    opacity: 0;
}

Вывод

К сожалению IE10 не поддерживают CSS свойство transform-style: preserve-3d. Надеюсь эта коллекция ссылок поможет в создании необычных эффектов на своём сайте! Забирайте их себе и смело применяйте 🙂 .

Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2013/08/06/creative-link-effects/

Как красиво оформить ссылки 4.00/5 (80.00%) 8 голос(ов)

Понравилась статья - расскажи друзьям! :)

6 комментариев к записи
  • Егор

    Здравствуй, Юрий. У тебя много полезных сниппетов на сайте. Вот добавил себе в меню 1-вый эффект. Тем более, что подключать скрипт даже не пришлось. Наверное у меня взаимодействует с библиотекой jQuery. Спасибо большое!

     
    • Юрий

      Привет, Егор! Приятно видеть что материалы приносят пользу 🙂 .

       
  • Олег

    Добрый день, Юрий! Хочу модернизировать свой сайт. Попытался применить одну из твоих ссылок (вариант 20), но так, чтобы при наведении курсора на неё после перекидывания всплывала нужная мне картинка под этой ссылкой.  Оформить появление картинки смог, а вот внедрить туда механизм твоей ссылки пока не получается. Сразу отмечу, что опыта маловато, поэтому учусь по ходу работы.

     

     
    • Юрий Немец

      Здравствуйте, Олег!

      У вас это не получается, потому что с помощью CSS нельзя вывести тег изображения из атрибута data-hover. Чтобы это сделать, необходимо изменить структуру:

      1. Расположить изображение внутри тега <span>

      2. Затем скрыть этот <span> и показывать его только при наведении.

      То есть сделать по аналогии с псевдоклассом :before.

      Результат можно посмотреть здесь: ПРИМЕР ДЛЯ ОЛЕГА.

      Скачать архив с примером можно здесь: СКАЧАТЬ АРХИВ.

      Если не хотите скачивать, то вот HTML структура, которую необходимо вставить на ваш сайт:

      <nav class="cl-effect-20">
          <a href="#"><span><img src="img/twitter.png" alt="Twitter"></span>Twitter</a>
          <a href="#"><span><img src="img/insta.png" alt="Instagram"></span>Instagram</a>
          <a href="#"><span><img src="img/skype.png" alt="Skype"></span>Skype</a>
          <a href="#"><span><img src="img/vk.png" alt="Vk"></span>Vk</a>
          <a href="#"><span><img src="img/youtube.png" alt="YouTube"></span>YouTube</a>
      </nav>

      А вот CSS код для этой структуры (чтобы появлялось изображение сверху):

      .cl-effect-20 a {
          line-height: 2em;
          -webkit-perspective: 800px;
          -moz-perspective: 800px;
          perspective: 800px;
          font-weight: 600;
      }
      
      .cl-effect-20 a{
          position: relative;
          display: inline-block;
          width: 110px;
          padding: 3px 15px 0;
          background: #587285;
          box-shadow: inset 0 3px #2f4351;
          -webkit-transition: background 0.6s;
          -moz-transition: background 0.6s;
          transition: background 0.6s;
          -webkit-transform-origin: 50% 0;
          -moz-transform-origin: 50% 0;
          transform-origin: 50% 0;
          -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
          -webkit-transform-origin: 0% 50%;
          -moz-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
          text-align: center;
      }
      
      .cl-effect-20 a span {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #fff;
          color: #2f4351;
          -webkit-transform: rotateX(270deg);
          -moz-transform: rotateX(270deg);
          transform: rotateX(270deg);
          -webkit-transition: -webkit-transform 0.6s;
          -moz-transition: -moz-transform 0.6s;
          transition: transform 0.6s;
          -webkit-transform-origin: 0 0;
          -moz-transform-origin: 0 0;
          transform-origin: 0 0;
          pointer-events: none;
      }
      
      .cl-effect-20 a:hover span,
      .cl-effect-20 a:focus span {
          background: transparent;
      }
      
      .cl-effect-20 a:hover span,
      .cl-effect-20 a:focus span {
          -webkit-transform: rotateX(10deg);	
          -moz-transform: rotateX(10deg);
          transform: rotateX(10deg);
      }

      Если возникнут вопросы — задавайте их прямо в комментариях. 🙂

       
  • даркнет

    благодарю!

     
  • Нео

    спасибо за прекрасные стили, взял 1й

     

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

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