Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Форум медленно открывается. Что делать?автор literrary Вчера в 19:11
» сделать иконку ЛС-ссылку в профиле( Invision) в темах
автор literrary Вчера в 14:00
» адаптировать туториал пользователи в статистике по времени на invision
автор literrary Январь 30th 2023, 21:36
» заменить ЧаВо в навигации
автор literrary Январь 30th 2023, 18:58
» невозможно загрузить смайлик ни один
автор literrary Январь 30th 2023, 18:56
» добавить пользователя в недруги
автор literrary Январь 27th 2023, 22:54
» Перевод форума на другой язык.
автор Ilya Январь 27th 2023, 19:25
» сделать снижение к navstrip (к тексту) окна браузера
автор literrary Январь 25th 2023, 13:03
» Новое управление смайликами в Панели Администратора
автор Luz Январь 24th 2023, 13:50
» Техническое обслуживание, запланированное на 31 января 2023 г.
автор Luz Январь 23rd 2023, 13:01
Аватара с подсветкой и вращением при наведении курсора
Аватара с подсветкой и вращением при наведении курсора
Решил я украсить свой сайт и форум к нему сделанном на 2х2 одинаковым эффектом на аватару. долго думал как же это сделать и придумал.
Я решил сделать:
1) Подсветку аватары
2) Закругленные углы аватары
3) Увеличение размера аватара при наведении курсора
4) Вращение аватара на 360 градусов при наведении курсора
5) Смена цвета подсветки при наведении на аватару
6) Сохранить радиусы на аватаре.
Итак сразу говорю, что пробовал я на bb2 так как второй бобик мне нравиться больше.
Первое, что мы делаем это идем в CSS (ПА -> Оформление -> Цвета -> Каскадная таблица стилей) и добавляем вот этот код:
Тут:
border-radius:7px;[/color] - радиус аватарки
width: 98%; height: 98% - размер аватарки после увеличения
box-shadow: 0 0 5px 2px #2187e7; - цвет подсветки
border-radius: 9px; - радиус подсветки
width: 95%; height: 95%; - размер аватары до увелечения
Все зеленое меняем под себя, все красное не трогаем.
Сохраняем.
Теперь идем в шаблон "viewtopic_body"
Там нам надо найти строку (примерно 144 строчка):
И применяем к ней стили. Должно получиться вот так:
Сохраняем и опубликовываем.
Пример можно посмотреть ТУТ
Я решил сделать:
1) Подсветку аватары
2) Закругленные углы аватары
3) Увеличение размера аватара при наведении курсора
4) Вращение аватара на 360 градусов при наведении курсора
5) Смена цвета подсветки при наведении на аватару
6) Сохранить радиусы на аватаре.
Итак сразу говорю, что пробовал я на bb2 так как второй бобик мне нравиться больше.
Первое, что мы делаем это идем в CSS (ПА -> Оформление -> Цвета -> Каскадная таблица стилей) и добавляем вот этот код:
- Код:
.round a img:hover{
width: 98%;
height: 98%;
margin: -1% 0% 0% -1%;
border-radius:7px;
CURSOR:pointer;
box-shadow: 0 0 5px 2px #2187e7;
border-radius: 9px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.round1 a img{
width: 95%;
height: 95%;
box-shadow: 0 0 5px 2px #2187e7;
border-radius: 9px;
transition:all .25s ease-in-out;
-webkit-transition:all .25s ease-in-out;
-moz-transition:all .25s ease-in-out;
-o-transition:all .25s ease-in-out;
-ms-transition:all .25s ease-in-out;
}
Тут:
border-radius:7px;[/color] - радиус аватарки
width: 98%; height: 98% - размер аватарки после увеличения
box-shadow: 0 0 5px 2px #2187e7; - цвет подсветки
border-radius: 9px; - радиус подсветки
width: 95%; height: 95%; - размер аватары до увелечения
Все зеленое меняем под себя, все красное не трогаем.
Сохраняем.
Теперь идем в шаблон "viewtopic_body"
Там нам надо найти строку (примерно 144 строчка):
- Код:
{postrow.displayed.POSTER_AVATAR}
И применяем к ней стили. Должно получиться вот так:
- Код:
<div class="round"><div class="round1">{postrow.displayed.POSTER_AVATAR}</div></div>
Сохраняем и опубликовываем.
Пример можно посмотреть ТУТ
Zlaya Suka (aka Belka) поставил(а) лайк

» надпись при наведении курсора
» Всплывающая подсказка при наведении курсора
» Всплывающая подсказка при наведении курсора.
» Увеличивающиеся меню, при наведении курсора.
» Изменение кнопок при наведении курсора
» Всплывающая подсказка при наведении курсора
» Всплывающая подсказка при наведении курсора.
» Увеличивающиеся меню, при наведении курсора.
» Изменение кнопок при наведении курсора
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения