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

В большинстве своём HTML код будет состоять из ссылок:

Код
<nav class="cl-effect-13">
  <a href="#">Beleaguer</a>
  <a href="#">Lassitude</a>
  <a href="#">Murmurous</a>
  <a href="#">Palimpsest</a>
  <a href="#">Assemblage</a>
</nav>


Но в некоторых случаях, для достижения нужных эффектов, мы воспользуемся атрибутом data:

Код
<nav class="cl-effect-11">
  <a href="#" data-hover="Desultory">Desultory</a>
  <a href="#" data-hover="Sumptuous">Sumptuous</a>
  <a href="#" data-hover="Scintilla">Scintilla</a>
  <a href="#" data-hover="Propinquity">Propinquity</a>
  <a href="#" data-hover="Harbinger">Harbinger</a>
</nav>


Так же, в некоторых случаях мы можем воспользоваться элементом span:

Код
<nav class="cl-effect-10">
  <a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
  <a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
  <a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
  <a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
  <a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
</nav>


Вот пример определённого стиля. Мы располагаем псевдо-элемент поверх ссылки и при наведении мыши отображаем эффект:

Код
.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 не поддерживает 3d эффектов.

  • FalleN

  • 3709

  • 1

  • 229

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!