| Шаблоны для uCoz [18] |
| Виды материалов [10] |
| Мини профили [7] |
| Мини чаты [8] |
| Виды комментариев [14] |
| Формы входа [3] |
| Информеры [33] |
| Украшения [16] |
| Меню сайта [5] |
| Кнопки [27] |
| Шапки сайта [3] |
| Медиа [19] |
| Переключатели [8] |
| Разное [65] |
| Формы поиска [9] |
| Скрипты [46] |
| Игры на сайт [6] |
| Аякс (Ajax) окна [1] |
| PHP скрипты [3] |
21:58 Трансформация ссылок с помощью 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> |
| Всего комментариев: 0 | |