Стилизованный тип ссылок CSS - Скрипты Разное - web мастеру ucoz
Приветствую Вас Прохожий | RSS Среда, 29.03.2017, 14:06
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


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



Статистика
Онлайн всего: 6
Гостей: 6
Пользователей: 0



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

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

Стилизованный тип ссылок CSS Стилизованный, тип, ссылок, 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 миллисекунд, и масштабирование/вращение установлено по умолчанию. Даже ссылки вращаются в различных сторонах, чтобы добавить немного больше стиля!

Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 1843 | Комментарии: 4 | Рейтинг: 5.0/2 | |Категория: Скрипты Разное | Добавил: mdbaner | Дата: 02.05.2011 | Скачали: 0 | Теги: ссылок, Стилизованный
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 4
3 beta-tank   Дата: 03.05.2011  Время: 12:15   [№ 8117]
[b]skat42[/b], я попробовал, все работает, а именно все ссылки при наведении поворачиваются, увеличиваются и у них появляется фон в виде кнопки со скруглёнными углами. Но если это css просто так оставить, то на сайте ужасы начнутся, всё поедет. Можно класно сделать, если назначить нужным ссылкам класс, и css только для этого класса добавить. Кстати на картинках со ссылками тоже работает, прикольно получается. И вообще мне кажется, что эти стили можно к чему угодно прикрутить (поправьте, если я не прав).

4 мир   Дата: 03.05.2011  Время: 14:39   1 [№ 8130]
все правильно, согласен с вами.

2 skat42   Дата: 03.05.2011  Время: 09:45   [№ 8110]
Я поставил, но не пойму в чём фишка, где результат?

+1   Спам
1 Un1x   Дата: 03.05.2011  Время: 03:22   [№ 8109]
интерестная штучка мне нравится


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Комплексный прогон сайт...

51

2 Нужны дизайнеры

1

3 Вакансия копирайтера/пе...

1

4 Верстка

13

5 Файловик. Уникальные те...

1

6 Продажа ручного рерайта...

0

7 Куплю сайты с трафиком

0

8 Баннер 88х31

11

9 Оцените макет на тему W...

7

10 Оценка картинки

6


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2017


Кнопка 88х31 сайта ucozon.ru