AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Fnac : 2 Funko Pop achetées : le 3ème offert (large sélection de ...
Voir le deal

    Profil en hover avec perspective

    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Dim 20 Sep 2015 - 16:01

    Rappel du premier message :

    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;
    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 !

    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



    Alumine
    Pastelryxx
    Pastelryxx
    FémininAge : 27Messages : 8

    Sam 9 Avr 2016 - 16:31

    Merci
    Mondo Gecko
    Mondo Gecko
    MasculinAge : 39Messages : 51

    Sam 9 Avr 2016 - 21:18

    Merci beaucoup <3





    Profil en hover avec perspective - Page 2 607046geek
    Mystborn
    Mystborn
    FémininAge : 24Messages : 89

    Dim 10 Avr 2016 - 20:53

    Merci, c'est vraiment beau !



    Profil en hover avec perspective - Page 2 Mystbo10
    Edward Speleers
    Edward Speleers
    MasculinAge : 35Messages : 460

    Sam 16 Avr 2016 - 18:58

    Trop cool, merci



    Profil en hover avec perspective - Page 2 Edkidd11
    Professeur
    Professeur
    FémininAge : 26Messages : 13

    Sam 16 Avr 2016 - 21:29

    C'est sympa ça, merci !
    Isaac Berntsson
    Isaac Berntsson
    MasculinAge : 30Messages : 29

    Dim 17 Avr 2016 - 17:48

    Merciii !
    Aidden
    Aidden
    MasculinAge : 29Messages : 45

    Jeu 21 Avr 2016 - 6:24

    Merci !
    Milkie
    Milkie
    MasculinAge : 35Messages : 8

    Ven 22 Avr 2016 - 11:43

    merci :)
    Isyndra
    Isyndra
    FémininAge : 41Messages : 41

    Sam 23 Avr 2016 - 19:04

    Merci! :)
    pixelman
    pixelman
    FémininAge : 43Messages : 241

    Dim 24 Avr 2016 - 14:31

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




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    marie-noelle
    marie-noelle
    FémininAge : 66Messages : 112

    Lun 25 Avr 2016 - 1:37

    merci
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Lun 25 Avr 2016 - 15:00

    C'est pratique et super jolie. Cela change des hover en dessous des avatars. Merci pour le partage. :)
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 31Messages : 153

    Mer 27 Avr 2016 - 12:35

    Superbe ! Merci beaucoup !!
    Xyyny
    Xyyny
    FémininAge : 32Messages : 59

    Mer 27 Avr 2016 - 17:47

    Trop zolie ! Merci !
    Valwen Dynn
    Valwen Dynn
    FémininAge : 33Messages : 8

    Mar 3 Mai 2016 - 16:53

    Merci beaucoup =)
    Elerinna
    Elerinna
    FémininAge : 36Messages : 13

    Lun 9 Mai 2016 - 15:39

    Merci beaucoup, ça collera super bien avec le thème de mon forum.
    Heryon
    Heryon
    FémininAge : 29Messages : 23

    Jeu 12 Mai 2016 - 14:14

    Merci pour le partage !
    Saphira
    Saphira
    FémininAge : 27Messages : 72

    Sam 14 Mai 2016 - 18:13

    Merci ^^
    Liia
    Liia
    FémininAge : 28Messages : 91

    Lun 16 Mai 2016 - 17:30

    Merci ♥
    Lilinne
    Lilinne
    FémininAge : 37Messages : 4

    Sam 21 Mai 2016 - 21:53

    Merci beaucoup !
    Lay
    Lay
    FémininAge : 23Messages : 10

    Mar 31 Mai 2016 - 3:23

    Merci! (:
    -Resis
    -Resis
    MasculinAge : 27Messages : 25

    Dim 5 Juin 2016 - 15:06

    Jolie travaille merci!
    AlexeB
    AlexeB
    FémininAge : 28Messages : 165

    Lun 6 Juin 2016 - 9:16

    Très original, merci du partage :heart:
    Pelezinho
    Pelezinho
    MasculinAge : 24Messages : 91

    Mer 22 Juin 2016 - 1:34

    Merci :p



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    Tatia38
    Tatia38
    FémininAge : 34Messages : 316

    Mer 22 Juin 2016 - 15:44

    sublime merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 2:20