Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Последние темы
» Генератор подарков
автор irina27 Сегодня в 13:21

» Убрать значок
автор Леший Вчера в 12:15

» Свечение для группы а не для юзера
автор Kuzbas63 Вчера в 9:01

» Оформить имя
автор Kuzbas63 Вчера в 8:59

» Красивый путь по сайту
автор Kuzbas63 Вчера в 7:05

» Как убрать надписи в низу форума
автор Kuzbas63 Ср 16 Авг - 13:51

» Как сократить расстояние
автор Lory Ср 16 Авг - 10:12

» Искрящийся ник у групп
автор Kuzbas63 Ср 16 Авг - 8:23

» Как отредактировать цвет на кнопках
автор Lory Вт 15 Авг - 23:58

» Как настроить конфиденциальность
автор катарсис Вт 15 Авг - 21:29

Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Аватара с подсветкой и вращением при наведении курсора

Предыдущая тема Следующая тема Перейти вниз

Аватара с подсветкой и вращением при наведении курсора

Сообщение автор Сергей Александрович в Сб 22 Ноя - 18:48

Решил я украсить свой сайт и форум к нему сделанном на 2х2 одинаковым эффектом на аватару. долго думал как же это сделать и придумал.
Я решил сделать:
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>

Сохраняем и опубликовываем.
Пример можно посмотреть ТУТ
avatar
Сергей Александрович
 

Мужчина

Сообщения : 598
Возраст : 51
Регистрация : 2014-11-03
Благодарности : 202

Без предупреждений

http://help.forum2x2.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения