Profil en hover avec perspective

Rappel du premier message :


Hello all ! Bon bah voilà, encore un profil, avec une petite transition cool et les infos à l'intérieur sur des petites bandes... bref.

   


Et un autre aperçu, pour la transition...

Template

Ok, dans le panneau d'admin > affichage > templates > général > viewtopic-body, cherchez ceci (vers la ligne 139)

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </span><br />
 <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
 </td>

Supprimez, et remplacez par ça :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150" style="position:relative;display:block; min-height:320px;">
  <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
  <div class="profil">
        <div class="infos">
          {postrow.displayed.POSTER_AVATAR}
          <div>
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} <span class="infosrep">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
          </div>
        </div>
        <div class="avatarflip">
          <div style="backface-visibility:hidden;">{postrow.displayed.POSTER_AVATAR}</div>
          <div>{postrow.displayed.RANK_IMAGE}</div>
        </div>
  </div>
</td>

Là, sur la première ligne vous trouverez ça:

Code:

min-height:320px;

Vous pouvez adapter cette hauteur en fonction de la hauteur des avatars de votre forum; il s'agit de la hauteur minimum d'un message (si le message est plus petit que l'avatar, les avatars des différents messages vont se chevaucher, ce qui serait fâcheux...)

CSS

Ensuite validez, publiez le template, puis rendez vous dans affichage > couleurs > feuille de style CSS, et ajoutez ceci à votre code:

Code:


/*PROFIL par Alu pour NEVER-UTOPIA **********************************/
.profil{
  width:180px;/*largeur avatar*/
  height:288px;/*hauteur avatar*/
  -moz-perspective:800px;
  -webkit-perspective:800px;
  -moz-perspective-origin:50px 150px;
  -webkit-perspective-origin:50px 150px;
  perspective-origin:50px 150px;
  perspective:800px;
  position:absolute;
  top:30px;
  left:-100px;
  z-index:2;
  -moz-transform: rotate(-5deg);/*avatar penché*/
  -ms-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.profil img{width:100%;}
.avatarflip{
  width:100%;
  height:auto;
  -webkit-transform-origin:top left;
  transform-origin:top left;
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform:rotateY(0deg);
  -ms-transition:all 1s ease;
  transition:all 1s ease;
  -moz-transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  transform-style:preserve-3d;
}

.avatarflip div{position:absolute; width:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden;overflow:hidden;}
.avatarflip div:last-child{
  -ms-transform:rotateY(-180deg);
  -moz-transform:rotateY(-180deg);
  -webkit-transform:rotateY(-180deg);
  transform:rotateY(-180deg);
}
.profil:hover .avatarflip{
  -ms-transform:rotateY(-180deg);
  -moz-transform:rotateY(-180deg);
  -webkit-transform:rotateY(-180deg);
  transform:rotateY(-180deg);
  -ms-transform-origin:left top;
  -webkit-transform-origin:left top;
  transform-origin:left top;}

.infos{
  position:absolute;
  width:100%;
  text-align:center;
  font-size:0.8vw;
  box-shadow:2px 2px 5px rgba(0, 0, 0, 0.3); /*ombre sous le profil*/
}
.infos div{position:absolute;top:0;left:0;width:100%; height:100%;overflow:hidden;}
.infos .label{visibility:hidden;}
.infos .label span, .infosrep {
  visibility:visible;
  display:block;
  background-color:rgba(256, 256, 256, 0.4);/*couleur des bandes des infos, le 0.4 correspond à lopacité*/
  color:#303030 !important;/*couleur du texte dans les infos*/
  margin: -5px 0 0 0;
  padding:3px;
}
.infos .label span {text-decoration:underline; text-transform:uppercase;margin: 5px 0 -5px 0;}
.infosrep img{width:auto;}



A priori vous ne devriez pas avoir besoin de modifier autre chose que les lignes commentées... Enregistrez, et tout devrait fonctionner !


Merci de laisser un crédit à N-U quelque part sur votre forum !

Merci

Merci beaucoup <3

Merci, c'est vraiment beau !

Trop cool, merci

C'est sympa ça, merci !

Merciii !

Merci !

merci :)

Merci! :)

L'effet ouverture est super sympa merci pour le partage ^^

merci

C'est pratique et super jolie. Cela change des hover en dessous des avatars. Merci pour le partage. :)

Superbe ! Merci beaucoup !!

Trop zolie ! Merci !

Merci beaucoup =)

Merci pour le partage !

Merci ^^

Merci ♥

Merci beaucoup !

Merci! (:

Jolie travaille merci!

Très original, merci du partage

Merci :p

sublime merci