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. В любой полной новости, если зарегистрироваться и навести на ссылку,то буквы "пляшут".
Комментарии к статьеЕсли Вам понравилась эта статья или не понравилась напишите об этом в комментариях
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации. |
