Навигация
Главная
Бесплатные шаблоны dle
Платные шаблоны dle
Бесплатные модули dle
Хаки dle
Скачать DataLife Engine
Заработок для Web мастеров
Контакты
Rss
Вход на сайт
  Логин
  Пароль
Популярные новости

Cpojer - красивый вид ссылок в коротких и полных новостях

Cpojer - красивый вид ссылок в коротких и полных новостях


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

Установка:

1. В css файл (мы возьмём engine.css) в любое понравившееся вам место(удобней в конец) вписываем:

/* Cpojer */
.cpojer 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 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 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);
}
/* Cpojer end */



2) В файле fullstory.tpl ищите тег {full-story} и заменяете его на:

<div class="cpojer">{full-story}</div>




3) В файле shortstory.tpl ищите тег {short-story} и заменяете его на:

<div class="cpojer">{short-story}</div>




Или говоря нормальным языком подключаем див класс "cpojer" к {full-story} и {short-story}.

На этом простейшая установка заканчивается.Смотрится данный хак очень интересно и стильно.Всем советую.

Если кого интересует, то демо можно посмотреть на этом сайте fin-newsland.ru. В любой полной новости, если зарегистрироваться и навести на ссылку,то буквы "пляшут".

2-05-2011, 23:38 добавил Arsen
     просмотров 4099   комментариев (1)

написал MuxauJI    26 мая 2013 16:00   



 Группа: Посетители
 Регистрация: 24.08.2008
 Публикаций: 0
 Комментариев: 5
На мозиле работает!