Приветствую Вас Прохожий | RSS

Воскресенье, 24.11.2024, 08:05

Меню сайта

Гостевая сайта

РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА

Категории раздела

Скрипты блоки и шапки [337]

Скрипты Вид новостей [366]

Скрипты php для ucoz [47]

Скрипты для форума [186]

Скрипты информеры [118]

Скрипты Разное [1105]

Мини-чат

Все вопросы задаем в форуме,
здесь они игнорируются!

Блок спам рекламы

Сайт села Екатерининско* .

Фильмы, сериалы торрент .

НОВИНКИ 2019 В FULLHD 4* .

Лучшее Хип-Хоп радио St* .

ФИЛЬМЫ ОНЛАЙН В HD! .

Облачный майнинг HF18BD* .

Сайт за 6000 wmr .

http://ucozon.ru/forum/* .

Lineagw 2: Revolution .

Фильмы на планшет торре* .

Добавлять могут только пользователи зарегистрированные 15 суток.

Статистика

Онлайн всего: 25

Гостей: 25

Пользователей: 0

Кто нас сегодня посетил
Статистика посетителей
Подписка на новости
День рождения

Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Стилизованный тип ссылок CSS

Стилизованный тип ссылок
Красивый эффект плавно поворачивающий ссылки налево или направо.
Чтоб улучшить эффект фоновый цвет ссылки изменяется. И на удивление это чудо основано только на свойствах CSS!
Установка:
вставляем в таблицу стилей сайта CSS

Code

a {
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: #3a599d;
  -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);
}
a:hover {
  background: #3a599d;
  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);
}
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);
}

Была использована функциональность каждого браузера (так как у каждого есть свой собственный префикс.) Продолжительность перехода установлена в 250 миллисекунд, и масштабирование/вращение установлено по умолчанию. Даже ссылки вращаются в различных сторонах, чтобы добавить немного больше стиля!

Автор\Источник: не указан или не известен!
Для того что бы скачать архив необходимо зайти на сайт как пользователь.

Похожие новости на нашем сайте

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

Всего комментариев: 4

Порядок вывода комментариев:

3 beta-tank Дата: 03.05.2011 Время: 12:15 [№ 8117] [Материал]

[b]skat42[/b], я попробовал, все работает, а именно все ссылки при наведении поворачиваются, увеличиваются и у них появляется фон в виде кнопки со скруглёнными углами. Но если это css просто так оставить, то на сайте ужасы начнутся, всё поедет. Можно класно сделать, если назначить нужным ссылкам класс, и css только для этого класса добавить. Кстати на картинках со ссылками тоже работает, прикольно получается. И вообще мне кажется, что эти стили можно к чему угодно прикрутить (поправьте, если я не прав).