друзья
реклама
|
Для вебмастера » DLE - DataLife Engine → Cpojer by BES Edition
Представляю Вам хак трансформации ссылок для 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> Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Комментарии:Оставить комментарий |
популярное
календарь
опрос
счетчики
Реклама
|