Регистрация

Трансформация ссылок с помощью CSS

TipTop 1-08-2010, 16:32 2673 Вебмастер

Трансформация ссылок с помощью CSS


Принаведении курсора мыши на ссылку, она анимируется и немного смещается влево или вправо. Для усиления эффекта изменяется фоновый цвет. Эффект создаётся только средствами CSS!


Установка:
1. Открывает Ваш Шаблон/style/style.css
В конец файла добавляем:

.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. Открываем любой .tpl файл и заключем ссылки или теги в
<div class="cpojer-links"></div>



Например в shortstory.tpl
<div class="cpojer-links"> [full-link]{title}[/full-link]</div>



Т.е. для того что бы увидеть эффект для ссылки, просто включаем его в дивы
ссылки

вот и все...Очень эфектно смотрится...
Демо:
_http://mobile.4m.net.ua/demo.html

Другие публикации по категории:

Посвящается тем кто ждет апа поисковиков

ZEOS ANTIVIRUS

Вебмастеру RSS Submitter v.2.36 + (crack)


Видеокурс «Золотой вебмастер» + Бонусы (2010)


Комментарии (2)

avatar
#1 DEN 007
смотрится класс, но цука ие не поддерживает

спс
avatar
#2 Пользователь offline TipTop
Изменена инфа по установке хака.Раньше был просто сам код хака. Теперь с поэтапной установкой хака.Кому нужно то берем winked Должно все работать.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Powered by Dleshka.org. Сайт предназначен для выбора шаблонов и дополнений с использованием CMS DataLife Engine.
Закрыть