Перейти к содержимому


Партнерская программа Expressrxsales

[Пример кода] Плавная смена цвета ссылки при наведении

#1 TimurR

TimurR
  • Пользователь PRO
  • 847 сообщений
  • Репутация: 186
4

Отправлено 08 Март 2015 - 22:41

a {
  font-size: 15px;
  	color: #ccc;
  	-moz-transition:  all 0.3s ease-in-out;
  	o-transition:  all 0.3s ease-in-out;
  	-webkit-transition:  all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}

a:hover {
	color:  #fff;
  	-moz-transition:  ease-out 0.5s;
  	o-transition:  ease-out 0.5s;
  	-webkit-transition:  ease-out 0.5s;
  	transition:  ease-out 0.5s;
} 

Пару раз меня спрашивали как это делается. Думаю на этом форуме тоже найдутся кому это может пригодится. Все просто, мы будем использовать свойство transition. При этом, если указать и другие параметры в :hover например, увеличение масштаба или отступы, то они так же будут плавно меняться. В общем экспериментируйте, а информацией для вас послужит эта статья: http://www.w3schools...transitions.asp


 

 

  • 2


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Ссылки адсенса меняют цвет при наведении
  2. При наведении на ссылку-рисунок выводится рaмка
  3. Плавное затухание и освещение ссылки
  4. 10 способов украсить сайт
  5. Html верстка на конкретном примере

#2 Ixman

Ixman
  • Пользователь PRO
  • 2 233 сообщений
  • Репутация: 484

Отправлено 08 Март 2015 - 22:49

Спасибо, полезно иногда бывает.


  • 0

Не раздумывай - иди к нам! Фарма ПП Skype: cristina.rx2, ICQ: 676017111, Jabber: cristina.rx@jabb3r.org



#3 Info-Mans

Info-Mans
  • Пользователь
  • 1 191 сообщений
  • Репутация: 120

Отправлено 08 Март 2015 - 23:12

Спасибо, думаю может понадобиться)


  • 0

»»» Начни изменять свою жизнь с внешнего вида «««
        Буду рад вашим комментариям на блоге!



#4 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 847 сообщений
  • Репутация: 186

Отправлено 08 Март 2015 - 23:40

Не за что :)


  • 0



Оформление форума – IPBSkins.ru