Profil en hover avec perspective
Hello all ! Bon bah voilà, encore un profil, avec une petite transition cool et les infos à l'intérieur sur des petites bandes... bref.
PHPBB2 - Template et CSS - taille de l'avatar adaptable - Aperçu - Aperçu à l'ouverture
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;
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 !
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
Dernière édition par Alumine le Lun 21 Sep 2015 - 21:18, édité 1 fois
