Меню

Популярное

Автор: HACKER

Скрипт кнопки на верх для вашего сайта

Автор: startsmart

Новая форма входа для юкоз

Автор: Prosvetekvator

Анимация аватара прямо на сайте

Автор: Prosvetekvator

Новый вид репутации для ucoz

Автор: Prosvetekvator

Случайный анекдот

14 Богатая еврейская пара решила провести отпуск в Австралии и полетели туда на собственном самолете. По дороге у самолёта отказал один из моторов в связи с чем им пришлось приземлить самолёт на необитаемом острове посреди океана. Отойдя немного от шока, Абрам спрашивает у Сары: - Сара, а скажи-ка мне, там перед отлетом звонили из Еврейского Агентства, просили деньги для Тель-Авивского университета. Ты им послала чек? - Нет, Абрам, все собиралась, но, увы, забыла. - А помнишь письмо приходило из местной синагоги - они просили помочь с ремонтом. Ты им какие-то средства отправляла? - Извини, дорогой, замоталась и как-то совсем вылетело из головы. - А там лежало на тумбочке обращение сионистского комитета с просьбой пожертвовать деньги на репатриацию в Израиль - ты им ответила? - Тоже нет, думала после приезда. Извини, Абрам! Абрам бросается к жене с горячими поцелуями. Она: - Что?... Что случилось? Ты меня раньше так никогда не целовал! - Сара, они нас найдут!!!

Статистика

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

Гостей: 5

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

» Сегодня нас посетили:

» Зарег. на сайте
Всего: 3495
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 177
Авторизованных: 3314

Трансформация ссылок с помощью CSS

Сегодня научимся создавать эффект трансформации ссылок при наведении на них, при помощи css. Идеально подойдет для меню категорий и прочих ссылок.
Установка:
Устанавливаем в css

Код

.cpojer-links 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);
  }
  .cpojer-links 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);
  }
  .cpojer-links 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-links, как показано на примере ниже

Код

<div class="cpojer-links">
<a href="http://in.ucoz.org/">in.uСoz.org</a><br>
<a href="http://in.ucoz.org/news/">Скрипты - in.uСoz.org</a>
</div>