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

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

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


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

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

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

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

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

Код:

.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);
        }

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

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

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);
            }

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

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

Код:

border-radius: 20px;

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

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