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

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


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

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

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


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

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

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

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

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

Сообщение автор Comatose в Вс 5 Май - 11:37

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

Вот как это выглядит:


Всё, что нужно сделать, это поставить в 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
 

Мужчина

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

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

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

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

Сообщение автор Леший в Вс 5 Май - 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);
        }



Леший
 

Мужчина

Сообщения : 2125
Место обитания : Сибирь
Настроение : Мрачное
Регистрация : 2012-10-05
Благодарности : 345

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

http://black-kat.forum2x2.ru

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

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

Сообщение автор ksenia9 в Ср 15 Май - 0:22

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

ksenia9
Новичок

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

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

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

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

Сообщение автор InGleb в Ср 15 Май - 8:29

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

InGleb
 

Мужчина

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

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

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

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

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

Сообщение автор Ринкате в Сб 22 Июн - 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);
            }

Ринкате
 

Мужчина

Сообщения : 771
Возраст : 23
Место обитания : Rain
Настроение : Изменчивое
Регистрация : 2010-05-28
Благодарности : 161

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

http://soul-eater.sosbb.ru/

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

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

Сообщение автор Vadim в Сб 22 Июн - 16:19

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

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


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

Vadim
 

Мужчина

Сообщения : 539
Возраст : 28
Место обитания : Дом, семья, работа...
Регистрация : 2012-03-01
Благодарности : 55

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

http://anamnez.sosbb.ru/

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

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

Сообщение автор Cem1 в Пн 16 Дек - 4:16

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

Cem1
Новичок

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

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

http://totalwarcenter.sosbb.ru/

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

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

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

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