Эффект при наведении на ссылку. v.1 (Фон под углом)

ФОРУМ Игромания и киномания – сообщество пользователей игрового портала Igromen.Do.Am.
Форум - это место, где можно обсудить игровые новости и обновления, задать вопросы, разместить объявления и сообщения, дать объявления о предоставляемых вами услугах, поделиться полезной информацией и способами, вступить в команду портала (на должности модератора, журналиста), а также найти себе друзей и товарищей для общения и совместного времяпровождения в играх.
Все действия (общение и размещение информации) регламентируются правилами форума.

ТОП-5 по сообщениям

Димон

754

ТОП-5 по репутации

754

Страница 1 из 1
1

Форум » Система UcoZ » Подборка самых интересных и полезных скриптов » Эффект при наведении на ссылку. v.1 (Фон под углом)

Эффект при наведении на ссылку. v.1 (Фон под углом)

30.10.2012 в 18:24

Димон

Администраторы

/.s/a/38/496767602.png

Менеджер проекта

Статус:

Online

Регистрация:

07.10.2012

Сообщения:

754

С помощью этого эффекта, вы сможете наложить на ссылки при наведении красивый слегка под углом голубой фон.

Установка

1. Скопировать код стилей таблицы CSS ниже, зайти в панель управления сайтом в Управление дизайном. Найти таблицу стилей CSS, куда добавить этот код, можно в низ (без разницы куда)

Code

.cpojer-links a {
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: #3a599d;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
  }
  .cpojer-links a:hover {
  background: #3a599d;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-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);
  transform: scale(1.05) rotate(-1deg);
  }
  .cpojer-links a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
  }

2. Скопируйте код ниже и ставьте его там, где хотите видеть эффект при наведении на ссылку. При этом ставя этот код в старницы сайта, нужно сами ссылки ставить внутырь этого кода (пример: <div class="cpojer-links"><a href="http://igromen.do.am">Игромания и киномания</a></div>)

Code

<div class="cpojer-links">Тут ссылка</div>

Страница 1 из 1
1

О портале Igromen.Do.Am

Контакты

В помощь пользователям