AccueilFAQRechercherMembresGroupesS'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.


    PA onglets à divers effets (au survol, rotation ...)

    Partagez
    avatar
    Halloween
    FémininAge : 23Messages : 9738

    le Dim 27 Avr 2014 - 15:06

    Rappel du premier message :

    Plop,

    Suite à une demande voici le LS qui en découle.

    Les aperçus n'ont pas été simples à prendre, pour le premier onglet j'ai essayé de prendre tous les effets qui découlent du passage de la souris sur l'élément. L'image disparait entièrement pour le contexte.

    Page d'accueil


    Version  phpBB2 ▬ CSS & HTML ▬ Rotations, changement de couleurs, défilement, opacité ...

    Aperçu ▬ Onglet 1 Onglet 2 Onglet 3


    PA
    Code:

    <div style="padding: 25px;">
     <script type="text/javascript">
                //<!--
                        function change_paonglet(name)
                        {
                                document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                                document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                                document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                                document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                                anc_paonglet = name;
                        }
                //-->
                </script>
    <div class="paonglets">
     <span class="paonglet_0 paonglet" id="paonglet_informations" onclick="javascript:change_paonglet('informations');">Informations</span> <span class="paonglet_0 paonglet" id="paonglet_contact" onclick="javascript:change_paonglet('contact');">Contact & Liens pratiques</span> <span class="paonglet_0 paonglet" id="paonglet_liens" onclick="javascript:change_paonglet('liens');">Liens externes</span>
    </div><br />
    <div class="contenu_paonglets">
     
    <div class="contenu_paonglet" id="contenu_paonglet_informations">
     
    <table>
     
    <tbody>
     
    <tr>
     
    <td>
     
    <center>
     
    <div class="titre_pa">
     Nouveautés
    </div>
     
    </center>
     
    <div class="bloc_pa" style="width: 250px; height: 380px;">
     
    <center>
     
    <div style="width: 240px; height: 220px; overflow: auto; text-align: justify;">
     <span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br />
    </div><br /><iframe style="width: 240px;" src="//www.youtube.com/embed/C-W40iW2MRs" allowfullscreen="" frameborder="0"></iframe>
    </center>
     
    </div>
     
    </td>
     
    <td style="width: 30px;">
     
    </td>
     
    <td>
     
    <center>
     
    <div class="titre_pa">
     Contexte
    </div>
     
    </center>
     
    <div class="contexte">
     
    <div class="contexte_img">
     <img src="http://i57.servimg.com/u/f57/18/47/68/10/2610.png" />
    </div>
     
    <div class="contexte_description">
     Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. Altera templo insulam et insignis viribus claram viribus Salamis supremos et ipso committat armamentis tamque claram crebra ad indigens externi instructam ut abundat omnibusque onerariam continenti templo rerum a tanta municipia autem discretam insignis portuosam municipia continenti duae inter ut Cyprus omnium omnium Salamis a indigens urbes portuosam et claram tanta nullius ad rerum discretam fundamento Veneris claram rerum mari itidem Cyprus Cyprus Salamis urbes Paphus Cyprus continenti et Cyprus templo altera et municipia altera externi carbasos claram altera aedificet templo eadem Cyprus tamque itidem delubris a tamque et Paphus procul Paphus Paphus nullius Veneris armamentis adminiculi continenti tanta carbasos. Altera templo insulam et insignis viribus claram viribus Salamis supremos et ipso committat armamentis tamque claram crebra ad indigens externi instructam ut abundat omnibusque onerariam continenti templo rerum a tanta municipia autem discretam insignis portuosam municipia continenti duae inter ut Cyprus omnium omnium Salamis a indigens urbes portuosam et claram tanta nullius ad rerum discretam fundamento Veneris claram rerum mari itidem Cyprus Cyprus Salamis urbes Paphus Cyprus continenti et Cyprus templo altera et municipia altera externi carbasos claram altera aedificet templo eadem Cyprus tamque itidem delubris a tamque et Paphus procul Paphus Paphus nullius Veneris armamentis adminiculi continenti tanta carbasos. <a href="#">La suite</a>
    </div>
     
    </div>
     
    <div style="clear: both;">
     
    </div><br />
    <center>
     
    <div class="titre_pa">
     Nos fidèles
    </div>
     
    <div class="bloc_pa" style="width: 350px; height: 100px;">
     
    <center>
     
    <table>
     
    <tbody>
     
    <tr>
     
    <td>
     <d class="info"><img src="http://i57.servimg.com/u/f57/18/47/68/10/8910.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br />Blabla description par ici, youpi ! <a href="#">Lien</a></span></d>
    </td>
     
    <td style="width: 40px;">
     
    </td>
     
    <td>
     <d class="info"><img src="http://i57.servimg.com/u/f57/18/47/68/10/8910.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br />Blabla description par ici, youpi ! <a href="#">Lien</a></span></d>
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     
    </center>
     
    </div>
     
    </center>
     
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     
    </div>
     
    <div class="contenu_paonglet" id="contenu_paonglet_contact">
     
    <table>
     
    <tbody>
     
    <tr>
     
    <td>
     
    <center>
     
    <div class="titre_pa">
     Prédéfinis
    </div>
     
    </center>
     
    <div class="bloc_pa" style="width: 350px; height: 200px;">
     
    <center>
     <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c><br /><c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c>
    </center>
     
    </div>
     
    </td>
     
    <td>
     
    <center>
     
    <div class="titre_pa">
     Liens pratiques
    </div>
     
    </center>
     
    <div class="bloc_pa" style="width: 300px; height: 200px;">
     <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a>
    </div>
     
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     
    <center>
     
    <div class="titre_pa">
     Staff
    </div>
     
    </center>
     
    <div class="bloc_pa" style="width: 600px; padding: 9px !important;">
     
    <center>
     <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c>
    </center>
     
    </div>
     
    </div>
     
    <div class="contenu_paonglet" id="contenu_paonglet_liens">
     
    <center>
     
    <div class="titre_pa">
     Partenaires
    </div>
     
    </center>
     
    <div class="bloc_pa" style="width: 500px; height: 150px;">
     
    <center>
     <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a>
    </center>
     
    </div><br />
    <center>
     
    <div class="titre_pa">
     Tops-sites
    </div>
     
    </center>
     
    <div class="bloc_pa" style="width: 500px; height: 80px;">
     
    <center>
     <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a>
    </center>
     
    </div>
     <a href="http://www.never-utopia.com" style="color: #FCE7AE !important; position: relative; float: right;">© Halloween</a>
    </div>
     
    </div>
     <script type="text/javascript">
                //<!--
                        var anc_paonglet = 'informations';
                        change_paonglet(anc_paonglet);
                //-->
                </script>
    </div><link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css" />



    CSS
    Code:
    /*********************************** PA ***********************************/

    /*** PARTENAIRES ET TOPS ***/
    .img_partenaires {
      opacity: 0.5;
    }

    .img_partenaires:hover {
      opacity: 1;
    }



    /*** IMAGES DU STAFF ***/

    .imgPA {
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }

    .info {
      position: relative;
      z-index: 24;
      text-decoration: none;
    }
     
    c.info:hover {
      z-index: 25;
    }
     
    c.info span {
      display: none;
    }
     
    c.info:hover span {
      display: block;
      position: absolute;
      top: -9.3em;
     left: -0.3em;
      border-radius: 50%;
      width: 105px;
      height: 105px;
      background-color: #0D0D0D;
      color: #F3F3F3;
      text-align: center;
      font-weight: none;
    }



    /*** IMAGES DES PREDEFINIS ***/
    .imgwidget {
      border-radius: 50%;
      width: 100px;
      height: 100px;
      -moz-transition-duration: 1s;
      -moz-transition-timing-function: linear;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: linear;
      transition-duration: 1s;
      transition-timing-function: linear;
    }

    .imgwidget:hover {
      border-radius: 50%;
      width: 100px;
      height: 100px;
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }

    .info {
      position: relative;
      z-index: 24;
      text-decoration: none;
    }

    d.info:hover {
      z-index: 25;
    }
     
    d.info span {
      display: none;
    }
     
    d.info:hover span {
      display: block;
      position: absolute;
      top: -2em;
     left: -2em;
      width: 140px;
      height: 50px;
      overflow: auto;
      background-color: #0D0D0D;
      color: #F3F3F3;
      text-align: center;
      font-weight: none;
    }



    /*** EFFET DU CONTEXTE ***/

    .contexte {
      width: 400px;
      height: 200px;
      overflow: hidden;
      background-color: #333333;
      border-radius: 25px;
      position: relative;
      top: -2.2em;
    }
        
    .contexte_img {
      position: relative;
      z-index: 2;
      width: 400px;
      height: 200px;
      margin-left: 0px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      -transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .contexte:hover .contexte_img {
      margin-top: -200px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
        
    .contexte_description {
      position: relative;
      z-index: 1;
      width: 350px;
      height: 140px;
      color: #F3F3F3;
      padding: 25px;
      text-align: justify !important;
      font-size: 11px;
      overflow: auto;
    }

    .contexte_description a {
      text-decoration: none !important;
    }



    /*** SYSTEME D'ONGLETS ***/

    .paonglet {
      display: inline-block;
      margin-left: 20px;
      margin-right: 20px;
      padding: 10px;
      cursor: pointer;
      background-color: #333333;
      color: #FCE7AE;
    }
                
    .paonglet_0 {
      border-radius: 25px;
    }

    .paonglet_1 {
      border-radius: 25px;
      color: #70A0BA;
    }

    .contenu_paonglet {
      padding: 25px;
      display: none;
      width: 780px;
      height: 450px;
      border-radius: 25px;
      background-color: #0D0D0D;
    }

    .contenu_paonglet a{
      text-decoration: none !important;
    }



    /*** BLOC DE TEXTE DE LA PA ***/

    .bloc_pa {
      background-color: #333333;
      border-radius: 25px;
      color: #F3F3F3;
      padding: 25px;
      text-align: justify !important;
      position: relative;
      top: -2.2em;
    }

    .bloc_pa a {
      text-decoration: none !important;
      color: #70A0BA !important;
    }

    /*** TITRES DES BLOCS ***/

    .titre_pa {
      font-family: 'Pacifico', 'cursive';
      font-size: 30px;
      position: relative;
      top: -0.3em;
      color: #F3F3F3;
      z-index: 1;
    }

    .titre_pa:hover {
      color: #70A0BA;
    }

    /*********************************** FIN PA ***********************************/






    Je mets les voiles, que le vent te soit favorable matelot !
    avatar
    rpgharrypotter2016
    FémininAge : 23Messages : 106

    le Dim 4 Sep 2016 - 1:06

    merci
    avatar
    Hadès.
    MasculinAge : 18Messages : 36

    le Mar 6 Sep 2016 - 16:18

    merciii
    avatar
    ~LP
    FémininAge : 21Messages : 11

    le Mar 6 Sep 2016 - 16:45

    Merci pour cette belle PA. Tu as beaucoup de talent, bravo. :)
    avatar
    Meeko
    MasculinAge : 23Messages : 28

    le Mar 13 Sep 2016 - 7:35

    merci
    avatar
    OMJ
    FémininAge : 26Messages : 86

    le Dim 25 Sep 2016 - 10:17

    j'adore :)
    avatar
    Philo
    FémininAge : 19Messages : 55

    le Dim 25 Sep 2016 - 15:29

    Merci :)
    avatar
    Star Rock Shooter
    MasculinAge : 20Messages : 11

    le Sam 8 Oct 2016 - 18:49

    Merci beaucoup ! :bisou:
    avatar
    Jin Kyung
    MasculinAge : 19Messages : 10

    le Dim 9 Oct 2016 - 15:50

    Wooh c'est dingue ! T'es un dieu/déesse en codage ! Merci et bravo dude ! \o/
    avatar
    Yukimura Esuki
    MasculinAge : 21Messages : 110

    le Dim 9 Oct 2016 - 15:58

    Merci pour le partage!
    avatar
    Inamio
    FémininAge : 24Messages : 215

    le Lun 10 Oct 2016 - 10:48

    J'aime beaucoup ! merci du partage



    avatar
    Melgreb
    MasculinAge : 37Messages : 8

    le Dim 30 Oct 2016 - 17:40

    Merci à toi, bavo
    avatar
    Ptite Louve
    FémininAge : 26Messages : 33

    le Lun 31 Oct 2016 - 14:27

    Merci pour ce partage Very Happy
    avatar
    Arkall
    MasculinAge : 25Messages : 14

    le Mer 2 Nov 2016 - 2:05

    dd
    avatar
    Soonares
    MasculinAge : 20Messages : 40

    le Mer 2 Nov 2016 - 3:33

    jolie codage
    avatar
    Invité

    le Mar 8 Nov 2016 - 12:06

    Merci beaucoup :)
    avatar
    hedtek
    MasculinAge : 18Messages : 4

    le Ven 11 Nov 2016 - 1:23

    merci
    avatar
    Tink ♥
    FémininAge : 24Messages : 46

    le Lun 14 Nov 2016 - 23:05

    Plein de jolis effets c'est génial merci :)
    avatar
    Lulus
    FémininAge : 26Messages : 143

    le Ven 18 Nov 2016 - 17:47

    Merci :)
    avatar
    remrem
    MasculinAge : 19Messages : 48

    le Ven 18 Nov 2016 - 18:59

    merci beaucoup !
    avatar
    PhaerylGG
    FémininAge : 21Messages : 13

    le Sam 26 Nov 2016 - 17:34

    Merci du partage
    avatar
    Lullaby Luna
    FémininAge : 21Messages : 18

    le Lun 28 Nov 2016 - 10:46

    Merci !
    avatar
    Dark6nika
    FémininAge : 23Messages : 118

    le Lun 28 Nov 2016 - 12:08

    Mince je ne vois pas l'aperçu ! ça viens de moi ou c'est un soucis d'hébergeur ?



    avatar
    Oenyxa
    FémininAge : 24Messages : 10

    le Mar 29 Nov 2016 - 0:48

    Hello,

    Pareil pour moi je ne vois aucun des aperçus d'Halloween Sad.
    Site inaccessible ... son site d'hébergement est comme bloqué alors que je peux aller sur le site en général, mais pas sur ce qu'il héberge lui.

    C'est dommage, à lire les commentaires ça donne vraiment envie de voir ce qu'il fait :)
    avatar
    Dark6nika
    FémininAge : 23Messages : 118

    le Mar 29 Nov 2016 - 9:35

    J'ai signalé le bug comme j'ai remarqué que plusieurs sujets étaient concernés (beaucoup en fait) et c'est bien un soucis d'hébergeur =/ du coup tout va être remplacé mais ça va prendre du temps !



    avatar
    SokoMinami
    FémininAge : 26Messages : 15

    le Ven 9 Déc 2016 - 22:11

    J'adore, merci du partage ^^
    Contenu sponsorisé


      La date/heure actuelle est Dim 30 Avr 2017 - 3:14