Навигация
Главная
Бесплатные шаблоны 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 мая 2011 добавил Arsen
     просмотров 4210   комментариев (1)

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



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


        

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.














Rambler's Top100

Яндекс цитирования