Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами 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
Страница 1 из 1
Рамка для аватар и их наклон, при наведении курсором
• Всем добрый день! Это мой первый туториал. И так, представляю вашему вниманию код, который создает рамку возле аватарок юзеров, и наклоняет их при наведении на них курсором.
Вот как это выглядит:
Всё, что нужно сделать, это поставить в CSS код, который соответствует вашему движку форума.
• Код для PhpBB2:
• Код для PhpBB3::
• Код для PunBB:
• Код для Invision:
Если Вы не желаете, чтобы аватарка наклонялась, просто удалите последние столбцы в коде.
Например для BB2 удаляете вот эту строку:
Тоесть, сразу после тега }
Все. Проверяйте. Дерзайте.
Вот как это выглядит:
Всё, что нужно сделать, это поставить в 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
Возраст : 29
Регистрация : 2013-02-12
Благодарности : 12
Re: Рамка для аватар и их наклон, при наведении курсором
Вот не много поэксперементировал и собрал тоже самое , но с проявлением аватарки при наведении и подсвеченным изнутри контуром рамки . Этот вариант применим для ВВ3 . Может кому пригодится .
Comatose , отличный вариант
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);
}
Re: Рамка для аватар и их наклон, при наведении курсором
очень актульная информация,спасибо!
ksenia9- Новичок
- Сообщения : 1
Регистрация : 2013-05-15
Благодарности : 0
Re: Рамка для аватар и их наклон, при наведении курсором
У меня при наведении на какую либо картинку в сообщение в теме, картинка двигается, не только аватарка!!!
Re: Рамка для аватар и их наклон, при наведении курсором
Для второго бобика нужно будет покопаться в шаблоне.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);
}
Re: Рамка для аватар и их наклон, при наведении курсором
Comatose, тема отличная! Прекрасное улучшение для форума! Заслуженный респект в вашу копилку!
К слову сказать, для закругленных углов я еще добавил в код:
Может кому пригодится
К слову сказать, для закругленных углов я еще добавил в код:
- Код:
border-radius: 20px;
Может кому пригодится
Re: Рамка для аватар и их наклон, при наведении курсором
Можно ли таким образом взять в рамку все поля юзербокса?
Похожие темы
» Рамка для аватар и картинок
» Картинки за курсором
» Надпись летающая за курсором
» Название форума, плавающее за курсором мышки
» Цвет под курсором, при перемещении по разделам форума
» Картинки за курсором
» Надпись летающая за курсором
» Название форума, плавающее за курсором мышки
» Цвет под курсором, при перемещении по разделам форума
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения