Главная

Добавить
статью


Форум


Новости


RSS


Обратная
связь
друзья


реклама



Для вебмастера » DLE - DataLife EngineCpojer by BES Edition

Добавил madjesty | 22-01-2011, 16:09 | Мнений: 0 | Заглянули 1763

Представляю Вам хак трансформации ссылок для DataLife Engine. Работает на CSS2.0 поддерживает каждый браузер. Фишка в том, что при наведение на ссылку она анимируется и её фон вертится влево или вправо. Очень красиво будет смотреться в любом дизайне!

Установка:
1. В css файл (мы возьмём engine.css) вписываем:
/* ==================== Cpojer by BES Edition */
.cpojer-by-bes a {
display: inline-block;
padding: 4px;
outline: 0;
color: #587ed7; /* ====== Цвет обычного текста */
-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-by-bes a:hover {
background: #587ed7; /* ====== Цвет фона при линке */
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-by-bes 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. В файлах шаблона fullstory.tpl ({fullstory}) и shortstory.tpl ({shortstory}) объединяем теги которые в скобках в div:
 
<div class="cpojer-by-bes">{fullstory}</div>
и
<div class="cpojer-by-bes">{short-story}</div>


 

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Комментарии:

Оставить комментарий


популярное



календарь



опрос



счетчики



Реклама



Логин: (регистрация? Пароль (забыл?):