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

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

Рамка для аватар и их наклон, при наведении курсором Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

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

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

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

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

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

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

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

Последние темы
» Не корректное отображение картинок
автор Luz Вчера в 12:40

» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Вчера в 12:13

» Проблема с метатегом Description
автор VeraLV Март 18th 2024, 15:31

» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43

» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37

» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26

» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28

» Помощь в нескольких вопросах по форуму
автор лексей2222 Февраль 22nd 2024, 13:21

» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор Dana Domirani Февраль 14th 2024, 00:54

» Загрузка форума
автор лисенок Февраль 13th 2024, 01:09

Рамка для аватар и их наклон, при наведении курсором

+3
ksenia9
Леший
Comatose
Участников: 7

Перейти вниз

Рамка для аватар и их наклон, при наведении курсором Empty Рамка для аватар и их наклон, при наведении курсором

Сообщение автор Comatose Май 5th 2013, 11:37

• Всем добрый день! Это мой первый туториал. И так, представляю вашему вниманию код, который создает рамку возле аватарок юзеров, и наклоняет их при наведении на них курсором.

Вот как это выглядит:
Рамка для аватар и их наклон, при наведении курсором Vista10

Всё, что нужно сделать, это поставить в CSS код, который соответствует вашему движку форума.

• Код для PhpBB2:
Код:
.poster-profile img{
              margin-left: 3px;
            border: 5px solid #eee;
            -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            -webkit-transition: all 0.5s ease-out;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
        }
       
        .poster-profile img:hover {
            -webkit-transform: rotate(-7deg);
            -moz-transform: rotate(-7deg);
            -o-transform: rotate(-7deg);
        }

• Код для PhpBB3::
Код:
div.postprofile dl dt img{
              margin-left: 3px;
            border: 5px solid #eee;
            -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            -webkit-transition: all 0.5s ease-out;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
        }
       
        div.postprofile dl dt img:hover {
            -webkit-transform: rotate(-7deg);
            -moz-transform: rotate(-7deg);
            -o-transform: rotate(-7deg);
        }

• Код для PunBB:
Код:
div.user-basic-info img{
            margin: 3px;
            border: 5px solid #eee;
            -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            -webkit-transition: all 0.5s ease-out;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
        }
       
        div.user-basic-info img:hover {
            -webkit-transform: rotate(-7deg);
            -moz-transform: rotate(-7deg);
            -o-transform: rotate(-7deg);
        }

• Код для Invision:
Код:
dl.postdetails dt img{
              margin-bottom: 10px;
            border: 5px solid #eee;
            -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            -webkit-transition: all 0.5s ease-out;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
        }
       
        dl.postdetails dt img:hover {
            -webkit-transform: rotate(-7deg);
            -moz-transform: rotate(-7deg);
            -o-transform: rotate(-7deg);
        }

Если Вы не желаете, чтобы аватарка наклонялась, просто удалите последние столбцы в коде.

Например для BB2 удаляете вот эту строку:
Код:
.poster-profile img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

Тоесть, сразу после тега }

Все. Проверяйте. Дерзайте.
Comatose
Comatose
 

Мужчина

Сообщения : 121
Возраст : 29
Регистрация : 2013-02-12
Благодарности : 12

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

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

Рамка для аватар и их наклон, при наведении курсором Empty Re: Рамка для аватар и их наклон, при наведении курсором

Сообщение автор Леший Май 5th 2013, 17:54

Вот не много поэксперементировал и собрал тоже самое , но с проявлением аватарки при наведении и подсвеченным изнутри контуром рамки . Этот вариант применим для ВВ3 . Может кому пригодится .

Comatose , отличный вариант 22

Код:
.postprofile dl dt a img {
opacity:0.7;
-webkit-transition-duration:.95s;
-moz-transition-duration:.95s;
-o-transition-duration:.95s;
transition-duration:.95s;
margin:2px 0 2px;
border:1px solid #9EFFFE;
-moz-border-radius:12px;
-webkit-border-radius:12px;
-khtml-border-radius:12px;
border-radius:12px;
box-shadow:0 0 14px 4px #9EFFFE;
-webkit-box-shadow:0 0 14px 4px #9EFFFE;
-moz-box-shadow:0 0 14px 4px #9EFFFE;
}

.postprofile dl dt a img:hover {
opacity:1.0;
}
       
        div.postprofile dl dt img:hover {
            -webkit-transform: rotate(-7deg);
            -moz-transform: rotate(-7deg);
            -o-transform: rotate(-7deg);
        }


avatar
Леший
 

Мужчина

Сообщения : 2143
Регистрация : 2012-10-05
Благодарности : 349

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

http://black-kat.forum2x2.ru

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

Рамка для аватар и их наклон, при наведении курсором Empty Re: Рамка для аватар и их наклон, при наведении курсором

Сообщение автор ksenia9 Май 15th 2013, 00:22

очень актульная информация,спасибо!
avatar
ksenia9
Новичок

Сообщения : 1
Регистрация : 2013-05-15
Благодарности : 0

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

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

Рамка для аватар и их наклон, при наведении курсором Empty Re: Рамка для аватар и их наклон, при наведении курсором

Сообщение автор InGleb Май 15th 2013, 08:29

У меня при наведении на какую либо картинку в сообщение в теме, картинка двигается, не только аватарка!!!
InGleb
InGleb
 

Мужчина

Сообщения : 41
Возраст : 21
Регистрация : 2013-03-16
Благодарности : 6

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

http://photoshop-ru.2x2forum.ru/

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

Рамка для аватар и их наклон, при наведении курсором Empty Re: Рамка для аватар и их наклон, при наведении курсором

Сообщение автор Ринкате Июнь 22nd 2013, 12:22

InGleb пишет:У меня при наведении на какую либо картинку в сообщение в теме, картинка двигается, не только аватарка!!!
Для второго бобика нужно будет покопаться в шаблоне.
Заходите в viewtopic_body (Показ темы), находите там:
Код:
{postrow.displayed.POSTER_AVATAR}<br />
Заменяете ее на:
Код:
<span class="avatarss">{postrow.displayed.POSTER_AVATAR}</span>

Далее в CSS вставляете:
Код:
   .avatarss img{
                  margin-left: 3px;
                border: 5px solid #eee;
                -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
                -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
                box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
                -webkit-transition: all 0.5s ease-out;
                -moz-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
            }
            
           .poster-profile img:hover {
                -webkit-transform: rotate(-7deg);
                -moz-transform: rotate(-7deg);
                -o-transform: rotate(-7deg);
            }
Рамка для аватар и их наклон, при наведении курсором Ddudnd10
Ринкате
Ринкате
 

Мужчина

Сообщения : 762
Возраст : 31
Регистрация : 2010-05-28
Благодарности : 166

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

http://souleater.2x2forum.ru/

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

Рамка для аватар и их наклон, при наведении курсором Empty Re: Рамка для аватар и их наклон, при наведении курсором

Сообщение автор Vadim Июнь 22nd 2013, 16:19

Comatose, тема отличная! Прекрасное улучшение для форума! Заслуженный респект в вашу копилку!

К слову сказать, для закругленных углов я еще добавил в код:
Код:
border-radius: 20px;


Может кому пригодится yes
Vadim
Vadim
 

Мужчина

Сообщения : 537
Возраст : 35
Регистрация : 2012-03-01
Благодарности : 56

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

http://anamnez.sosbb.ru/

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

Рамка для аватар и их наклон, при наведении курсором Empty Re: Рамка для аватар и их наклон, при наведении курсором

Сообщение автор Cem1 Декабрь 16th 2013, 04:16

Можно ли таким образом взять в рамку все поля юзербокса?
avatar
Cem1
Новичок

Сообщения : 20
Возраст : 35
Регистрация : 2013-12-15
Благодарности : 0

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

http://totalwarcenter.sosbb.ru/

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

Вернуться к началу

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

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