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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

Последние темы
» Dana Domirani, help !
автор Максим Максимович Вчера в 17:25

» Стиль "Дзен-минимализма" (phpBB2)
автор Hahaus Октябрь 21st 2020, 21:46

» Скрыть Виджиты
автор Karina Greenberg Октябрь 18th 2020, 11:48

» скрипты работают тольк одной строкой
автор literrary Октябрь 17th 2020, 17:13

» Странный редирект, не могу попасть на проекты. Взлом
автор Dana Domirani Октябрь 16th 2020, 21:00

» Яндекс-браузер криво отображает форум
автор House Октябрь 16th 2020, 18:41

» скриптеры на поддержке
автор literrary Октябрь 16th 2020, 16:53

» нет регистрации на форуме
автор Максим Максимович Октябрь 15th 2020, 10:22

» Еще один форум с проститутками
автор Dana Domirani Октябрь 15th 2020, 01:50

» Как вставить код AdSense в HTML-код сайта?
автор tarotspace Октябрь 13th 2020, 13:03

RSS-каналы


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


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

Перейти вниз

Рамка для аватар и их наклон, при наведении курсором 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
Возраст : 26
Регистрация : 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);
        }


Леший
Леший
 

Мужчина

Сообщения : 2141
Регистрация : 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
Возраст : 18
Регистрация : 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
Возраст : 27
Регистрация : 2010-05-28
Благодарности : 166

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

http://souleater.2x2forum.ru/

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

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

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

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

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


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

Мужчина

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

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

http://anamnez.sosbb.ru/

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

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

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

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

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

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

http://totalwarcenter.sosbb.ru/

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

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


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