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 du moment :
Xiaomi Mi Smart Camera 2K Standard Edition (design ...
Voir le deal
11.39 €

    QEEL en 3 colonnes avec effet zoom (CSS)

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 24 Nov 2012 - 0:55

    Rappel du premier message :

    Bonjour, bonsoir !

    Voici donc un code qui vous permettra de réaliser un QEEL (Qui est en ligne) un peu plus léger (et avec un aspect plus ludique^^) que le QEEL de base, un peu figé. Celui-ci est sous la forme de trois colonnes en opacité réduite et au survol de la souris elles s'élargissent en devenant plus opaque et faciliter la lecture.
    Comme il est préférable d'avoir un exemple pour visualiser, le voici en image (le thème était Percy Jackson, il va de soit qu'il vous suffira de mettre vos propres images).

    > Aperçu du QEEL sans survol
    > Aperçu avec survol de la colonne centrale

    Je suppose que vous comprenez le principe. Passons à l'installation x).


    Installation HTML

    Allez dans le template "Page d'accueil" (="index_body"). Repérez le code du QEEL qui se trouve entre :

    Code:
    <!-- BEGIN disable_viewonline -->
    et
    Code:
    <!-- END disable_viewonline -->

    (ligne 175 à 223)

    Remplacez la totalité du code contenu entre ces deux repères par celui-ci :

    Code:
    <!-- BEGIN disable_viewonline -->

    <div class="qeel_titre"></div>

    <div class="qeel">
      <table class="qeel_table"><tr>
        <td><div class="colonne"><span class="qeel_contenu">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}<br /><br />
          {TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}
          </span></div></td>
        <td><div class="colonne"><span class="qeel_contenu"><table>{L_CONNECTED_MEMBERS}</table><br /><br />{LEGEND} :&nbsp;{GROUP_LEGEND}</span></div></td>
        <td><div class="colonne"><span class="qeel_contenu"><table>{L_WHOSBIRTHDAY_TODAY}
          {L_WHOSBIRTHDAY_WEEK}</table></span></div></td>
        </tr></table>
    </div>
    <center><a href="http://www.never-utopia.com/" style="font-size: 10px;">QEEL - (c) Never-Utopia</a></center>
    <!-- END disable_viewonline -->

    (J'ai laissé les marqueurs de début et de fin du QEEL)

    N'oubliez pas d'enregistrer et de valider votre template modifié !


    Installation CSS

    Allez ensuite dans votre css et mettez le code ci-dessous :

    Code:
    .qeel_titre
    {
      width: 890px;
      height: 100px;
      background: url(#);
    }
    .qeel
    {
      width: 890px;
      height: 400px;
      background: url(#);
    }
    .qeel_table
    {
      width: 612px;
      margin: auto;
    }
    .colonne
    {
      position: absolute;
      z-index: 1;
      width: 200px;
      height: 300px;
      overflow: auto;
      margin-top: 0px;
      margin-left: 0px;
      background: #36444c;
      border: 1px solid #3f4d55;
      box-shadow: 0px 0px 0px #0d1418;
      -moz-box-shadow: 0px 0px 0px #0d1418;
      -o-box-shadow: 0px 0px 0px #0d1418;
      -htm-box-shadow: 0px 0px 0px #0d1418;
      -webkit-box-shadow: 0px 0px 0px #0d1418;
      font-size: 9px;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(opacity=50);
      transition: 1s;
      -moz-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -o-transition: 1s;
    }
    .colonne:hover
    {
      position: absolute;
      z-index: 99;
      width: 300px;
      height: 400px;
      margin-top: -50px;
      margin-left: -50px;
      background: #36444c;
      border: 1px solid #3f4d55;
      box-shadow: 0px 0px 5px #0d1418;
      -moz-box-shadow: 0px 0px 5px #0d1418;
      -o-box-shadow: 0px 0px 5px #0d1418;
      -htm-box-shadow: 0px 0px 5px #0d1418;
      -webkit-box-shadow: 0px 0px 5px #0d1418;
      font-size: 11px;
      opacity: 0.8;
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      filter: alpha(opacity=80);
      transition: 1s;
      -moz-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -o-transition: 1s;
    }
    .qeel_contenu
    {
      display: block;
      text-align: justify;
      padding: 10px;
    }

    Information : afin que les images de fond apparaissent vous devez remplacer les # contenus dans le code css par les adresses de vos images, l'une pour le titre, l'autre pour le fond de l'ensemble. Les images présentes dans l'exemple étant utilisées dans un thème actuellement je ne les laisse pas dans le css.


    Personnalisation

    Pour personnaliser ce code c'est très simple : réalisez une image de fond, une image de titre et incluez-les toutes deux dans le css en temps que fonds (.qeel_titre & .qeel). Le reste n'est que couleurs à changer. Les largeurs ou hauteurs des colonnes peuvent être modifiées également et ne devraient pas poser trop de problème. Gardez les mêmes pour les trois pour une meilleure esthétique.

    En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça pour le partage de notre petit savoir x)
    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 Sparrow-style le Jeu 28 Mar 2013 - 16:09, édité 1 fois



    sign
    louha
    louha
    FémininAge : 36Messages : 219

    Lun 12 Jan 2015 - 4:04

    C'est bizarre, mes messages disparaissent...
    British Cookie
    British Cookie
    FémininAge : 33Messages : 34

    Lun 12 Jan 2015 - 20:41

    Merci beaucoup =)
    Je tente, et si utilisation alors je créditerai bien sûr Wink
    XxjeremixX
    XxjeremixX
    MasculinAge : 28Messages : 74

    Mar 13 Jan 2015 - 8:58

    merci :)
    Panddora
    Panddora
    FémininAge : 25Messages : 25

    Mar 13 Jan 2015 - 21:00

    merci :nanere:




    QEEL en 3 colonnes avec effet zoom (CSS) - Page 17 112194spaceship
    Shanyme Thibolt
    Shanyme Thibolt
    FémininAge : 30Messages : 156

    Mar 13 Jan 2015 - 23:24

    Merci par le partage
    Mel-Acidulé
    Mel-Acidulé
    FémininAge : 30Messages : 26

    Mer 14 Jan 2015 - 3:19

    merci
    avatar
    Sépia
    FémininAge : 27Messages : 70

    Mer 14 Jan 2015 - 14:13

    Très jolie x)
    Arisu
    Arisu
    FémininAge : 35Messages : 119

    Jeu 15 Jan 2015 - 8:47

    Merci !
    Dharma
    Dharma
    MasculinAge : 32Messages : 18

    Ven 16 Jan 2015 - 12:52

    Un grand merci ! C'est bien beau :love:
    Bloody Wolfia
    Bloody Wolfia
    FémininAge : 31Messages : 70

    Dim 18 Jan 2015 - 14:41

    ^^
    CiitronxMelon
    CiitronxMelon
    FémininAge : 29Messages : 36

    Mer 21 Jan 2015 - 1:53

    Merci beaucoup !
    Feeline
    Feeline
    FémininAge : 38Messages : 17

    Mer 11 Fév 2015 - 15:14

    Le rendu est très beau, simple mais efficace comme j'aime alors merci pour ce partage ! :love:
    Rogue Titan
    Rogue Titan
    FémininAge : 29Messages : 53

    Jeu 12 Fév 2015 - 22:03

    merci
    F.a.m.e
    F.a.m.e
    MasculinAge : 34Messages : 12

    Sam 14 Fév 2015 - 12:02

    Merci pour le partage Very Happy Very Happy
    Anonymous
    Invité

    Dim 15 Fév 2015 - 15:31

    Sympa le QEEL ! Merci Very Happy
    Lysséa
    Lysséa
    FémininAge : 23Messages : 18

    Dim 15 Fév 2015 - 18:10

    Merci pour le partage ! ♥
    Kortyx
    Kortyx
    MasculinAge : 33Messages : 81

    Sam 21 Fév 2015 - 13:22

    Oulah, c'est trop beau *.* Merci !
    Abby Reever
    Abby Reever
    FémininAge : 32Messages : 146

    Dim 22 Fév 2015 - 0:17

    Merci! :)
    Anonymous
    Invité

    Dim 22 Fév 2015 - 11:29

    Thanks !
    Knobul
    Knobul
    MasculinAge : 26Messages : 30

    Mer 25 Fév 2015 - 0:15

    C'est simple et jolie merci !
    angy
    angy
    FémininAge : 41Messages : 72

    Jeu 26 Fév 2015 - 16:47

    Superbe, merci :)
    Mwet
    Mwet
    MasculinAge : 28Messages : 125

    Dim 1 Mar 2015 - 18:19

    Merci, Cap' !
    Mecat
    Mecat
    FémininAge : 35Messages : 55

    Mar 3 Mar 2015 - 0:28

    Depuis le temps que je cherche *-* merci beaucoup !



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 17 Girl310
    Kinst.MP
    Kinst.MP
    FémininAge : 25Messages : 53

    Mar 3 Mar 2015 - 15:37

    Blblbl, merci :3
    Melik
    Melik
    MasculinAge : 31Messages : 74

    Mer 4 Mar 2015 - 10:44

    Super rendu, merci!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 18:31