Информация

"4admins.ru" Рекомендует

Transition, или анимация перехода

Стили, ббкоды, смайлы и прочее для украшения форума
  • Автор 
    Сообщение
Аватара пользователя
Сообщения: 222
Зарегистрирован: 05 июл 2010, 23:05
Благодарил (а): 135
Поблагодарили: 41 раз в 35 сообщениях
Пол: Мужской
Адрес форума: .....
Баллы репутации: 16

Transition, или анимация перехода

Сообщение Добавлено: 11 май 2012, 09:45

В этой теме я хочу поделиться с вами, уважаемые пользователи 4admins, одним очень красивым
приёмом, название ему "transition" или по-русски "переход".
Переход создаёт эффект переливания при наводке на объекты, то есть через :hover.
Вот пример:
1. Создаём див с классом delay и помещаем внутрь него ссылку, также применяем к ссылке класс lik:
Код: Выделить всё
<div class="delay"><a class="lik" href="http://help.4admins.ru">4admins.ru</a></div>

2. Применим CSS к классу delay:
Код: Выделить всё
.delay {
    padding: 5px; /* Отступы */
    border: 2px solid black; /* Обводка */
    border-radius: 5px; /* Закругление */
    background: #69f; /* Цвет фона */
    -moz-transition: all 1s linear; /* Переход в браузере Mozilla */
   -o-transition: all 1s linear; /* Переход в Opera */
   -webkit-transition: all 1s linear; /* Переход в Chrome, Safari */
}
.delay:hover {
    background: #33f; /* Изменяем цвет фона */
    }

и применим CSS к классу lik
Код: Выделить всё
a.lik {
   -moz-transition: all 1s linear; /* Переход в браузере Mozilla */
   -o-transition: all 1s linear; /* Переход в Opera */
   -webkit-transition: all 1s linear; /* Переход в Chrome, Safari */
   color: dodgerblue !important; /* Цвет ссылки */
   }
a.lik:hover{
color: deepskyblue !important; /* Изменяем цвет ссылки */
   }

Вот и всё, до новых встреч :privet:

Аватара пользователя
Сообщения: 7044
Зарегистрирован: 11 авг 2009, 16:58
Благодарил (а): 659
Поблагодарили: 2348 раз в 1746 сообщениях
Город: Москва
Пол: Мужской
Адрес форума: http://help.4admins.ru
Баллы репутации: 167

Re: Transition, или анимация перехода

Сообщение Добавлено: 11 май 2012, 17:23

nar200
ну мог бы и на демо форуме показать как работает :)
На этом сервисе можно cоздать форум бесплатно

Аватара пользователя
Сообщения: 222
Зарегистрирован: 05 июл 2010, 23:05
Благодарил (а): 135
Поблагодарили: 41 раз в 35 сообщениях
Пол: Мужской
Адрес форума: .....
Баллы репутации: 16

Re: Transition, или анимация перехода

Сообщение Добавлено: 11 май 2012, 22:39

GoDFaTHeR
Можно посмотреть на форуме, наведя на Список форумов

Аватара пользователя
Сообщения: 7044
Зарегистрирован: 11 авг 2009, 16:58
Благодарил (а): 659
Поблагодарили: 2348 раз в 1746 сообщениях
Город: Москва
Пол: Мужской
Адрес форума: http://help.4admins.ru
Баллы репутации: 167

Re: Transition, или анимация перехода

Сообщение Добавлено: 11 май 2012, 23:06

nar200
Весьма сложно заметить
На этом сервисе можно cоздать форум бесплатно

Аватара пользователя
Сообщения: 222
Зарегистрирован: 05 июл 2010, 23:05
Благодарил (а): 135
Поблагодарили: 41 раз в 35 сообщениях
Пол: Мужской
Адрес форума: .....
Баллы репутации: 16

Re: Transition, или анимация перехода

Сообщение Добавлено: 11 май 2012, 23:09

GoDFaTHeR
Ладно, вот демо-форум http://styled.ekafe.ru/ :)

Сообщения: 3
Зарегистрирован: 04 июл 2012, 11:59
Благодарил (а): 1
Поблагодарили: 0 раз в 0 сообщении
Город: Владивосток
Пол: Женский
Адрес форума: http://zum.ekafe.ru/
Баллы репутации: -2

Re: Transition, или анимация перехода

Сообщение Добавлено: 15 июл 2012, 13:15

medved Фууу удалено trollface trollface trollface trollface =@ =@ =@ =@ =@ =@ =@

Аватара пользователя
Сообщения: 222
Зарегистрирован: 05 июл 2010, 23:05
Благодарил (а): 135
Поблагодарили: 41 раз в 35 сообщениях
Пол: Мужской
Адрес форума: .....
Баллы репутации: 16

Re: Transition, или анимация перехода

Сообщение Добавлено: 15 июл 2012, 14:03

kliffi
Что именно? Если форум, то я его особо не модернизировал,
однако я могу сказать так и про ваш форум, очередная копия зерга choza

Аватара пользователя
Сообщения: 843
Зарегистрирован: 12 янв 2012, 14:35
Благодарил (а): 69
Поблагодарили: 174 раз в 162 сообщениях
Город: Уварово
Пол: Мужской
Адрес форума: http://djedaysoft.ru/
Баллы репутации: 31

Re: Transition, или анимация перехода

Сообщение Добавлено: 15 июл 2012, 15:17

kliffi пред письменный за пошлость. Выражайтесь так у себя на форуме. Здесь же советую придерживаться литературной речи.
И устное предупреждение за оверсмайлинг.
Изображение


Вернуться в Оформление форумов

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1