Текущее время: 29 мар 2024, 00:21


Форум временно переведен в режим "Только для чтения". По вопросам технической поддержки, обращайтесь, пожалуйста на admin@getbb.ru

 

Часовой пояс: UTC + 3 часа [ Летнее время ]




Начать новую тему Ответить на тему  [ Сообщений: 3 ] 
Автор Сообщение
 Заголовок сообщения: Оформление аватара NEW
СообщениеДобавлено: 28 сен 2014, 10:17 
Продвинутый
Аватара пользователя

Зарегистрирован: 27 апр 2013, 05:19
Сообщений: 67
Откуда: Благовещенск
Очков репутации: 9

Добавить очки репутацииУменьшить очки репутации
Пол: Мужской
Пример.
КЛАЦ
В файле шаблона viewtopic_body.html
Найти {postrow.POSTER_AVATAR}
И заключить его в
Текст:
Код:
<div align="center" class="imgholder">
      <div class="outer1 circle"></div>
      <div class="outer2 circle"></div>
      <figure>Сюда ваш {postrow.POSTER_AVATAR}
      </figure>
   </div>

В файл стиля добавить
Текст:
Код:
.imgholder{
   position:relative;
   width:150px;
   height:150px;
   border-radius:120px;
   margin:40px 25px;
}
/* thumbnails style */
.imgholder img{
   position:absolute;
   left:0;
   top:0;
   width:150px;
   height:150px;
   z-index:5;
   border-radius:120px;
   -moz-border-radius:120px;
   -webkit-border-radius:120px;
   opacity:0.3;
   filter: alpha(opacity = 30);
   box-shadow:0 0 5px #000;
   -moz-box-shadow:0 0 5px #000;
   -webkit-box-shadow:0 0 5px #000;
   
   transform: scale(0.7,0.7);
   -ms-transform: scale(0.7,0.7);
   -moz-transform: scale(0.7,0.7);
   -webkit-transform: scale(0.7,0.7);
   
   transition:
      opacity 1s,
      transform 1s ease-in-out 0.3s;
   -moz-transition:
      opacity 1s,
      -moz-transform 1s ease-in-out 0.3s;
   -webkit-transition:
      opacity 1s,
      -webkit-transform 1s ease-in-out 0.3s;
}
.imgholder:hover img{
   opacity:1;
   filter: alpha(opacity = 100);
   transform: scale(1,1);
   -ms-transform: scale(1,1);
   -moz-transform: scale(1,1);
   -webkit-transform: scale(1,1);
}

.imgholder figcaption{
   position:absolute;
   left:-5px;
   top:40%;
   width:160px;
   color:#004E87;
   font-weight:bold;
   text-shadow:-1px -1px 0 #fff;
   z-index:4;
   
   transition:
      top 0.5s ease-out;
   -moz-transition:
      top 0.5s ease-out;
   -webkit-transition:
      top 0.5s ease-out;
}
.imgholder:hover figcaption{
   top:120%;
}
/* decorations style */
.imgholder .circle{
   position:absolute;
   border-radius:120px;
   -moz-border-radius:120px;
   -webkit-border-radius:120px;
}
.imgholder .outer1{
   top:-8px;
   left:-8px;
   width:150px;
   height:150px;
   z-index:2;
   
   border:8px solid;
   border-color:#DEEBFC;
   box-shadow:0 0 3px #AFD3FF;
   -moz-ox-shadow:0 0 3px #AFD3FF;
   -webkit-box-shadow:0 0 3px #AFD3FF;
   
   background: #ffffff;
   background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
   background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
   
   transform:rotate(90deg);
   -ms-transform:rotate(90deg);
   -moz-transform:rotate(90deg);
   -webkit-transform:rotate(90deg);
   
   transition:
      transform 1.8s ease-in-out,
      box-shadow 1s ease-out,
      border-color 1.5s;
   -moz-transition:
      -moz-transform 1.8s ease-in-out,
      -moz-box-shadow 1s ease-out,
      border-color 1.5s;
   -webkit-transition:
      -webkit-transform 1.8s ease-in-out,
      -webkit-box-shadow 1s ease-out,
      border-color 1.5s;
}
.imgholder:hover .outer1{
   border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
   box-shadow:0 0 10px #0285E2;
   -moz-box-shadow:0 0 10px #0285E2;
   -webkit-box-shadow:0 0 10px #0285E2;
   transform:rotate(-10deg);
   -ms-transform:rotate(-10deg);
   -moz-transform:rotate(-10deg);
   -webkit-transform:rotate(-10deg);
}
.imgholder .outer2{
   top:-18px;
   left:-18px;
   width:166px;
   height:166px;
   z-index:1;
   
   border:10px solid;
   border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
   box-shadow:0 0 20px #8EB9FF;
   -moz-box-shadow:0 0 20px #8EB9FF;
   -webkit-box-shadow:0 0 20px #8EB9FF;
   opacity:0;
   filter: alpha(opacity = 0);
   
   transform: scale(1.3,1.3) rotate(180deg);
   -ms-transform: scale(1.3,1.3) rotate(180deg);
   -moz-transform: scale(1.3,1.3) rotate(180deg);
   -webkit-transform: scale(1.3,1.3) rotate(180deg);
      
   transition:
      opacity 0.5s,
      transform 0.7s ease-out;
   -moz-transition:
      opacity 0.5s,
      -moz-transform 0.7s ease-out;
   -webkit-transition:
      opacity 0.5s,
      -webkit-transform 0.7s ease-out;
}
.imgholder:hover .outer2{
   opacity:0.9;
   filter: alpha(opacity = 90);
   transform: scale(1,1) rotate(-10deg);
   -ms-transform: scale(1,1) rotate(-10deg);
   -moz-transform: scale(1,1) rotate(-10deg);
   -webkit-transform: scale(1,1) rotate(-10deg);
}

_________________
Вопрос должен быть задан чётко и ясно, чтобы на него нельзя было задать встречный вопрос All-Stateiki.Ru


Не в сети
 Профиль WWW Cпасибо сказано  
 
За это сообщение пользователю Lider036 "Спасибо" сказали:
Aleksandr31029, eska
 Заголовок сообщения: Re: Оформление аватара NEW
СообщениеДобавлено: 28 сен 2014, 10:47 
Разбирающийся
Аватара пользователя

Зарегистрирован: 31 дек 2011, 20:30
Сообщений: 117
Откуда: Красноярск
Очков репутации: 4

Добавить очки репутацииУменьшить очки репутации
Пол: Мужской
ни че так)) лойс

_________________
Изображение


Не в сети
 Профиль WWW Cпасибо сказано  
 
 Заголовок сообщения: Re: Оформление аватара NEW
СообщениеДобавлено: 06 окт 2014, 11:41 
Продвинутый
Аватара пользователя

Зарегистрирован: 27 апр 2013, 05:19
Сообщений: 67
Откуда: Благовещенск
Очков репутации: 9

Добавить очки репутацииУменьшить очки репутации
Пол: Мужской
Демо теперь можно посмотреть тут КЛАЦ

_________________
Вопрос должен быть задан чётко и ясно, чтобы на него нельзя было задать встречный вопрос All-Stateiki.Ru


Не в сети
 Профиль WWW Cпасибо сказано  
 
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 3 ] 

 

Часовой пояс: UTC + 3 часа [ Летнее время ]



 Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  

 
cron