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
    Halloween
    FémininAge : 22Messages : 9733

    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 !
    Pandora Blue
    FémininAge : 28Messages : 28

    le Lun 19 Mai 2014 - 1:24

    OMG la PA de mes rêves les plus fous *________*
    Tes codes sont vraiment géniaux, merci de nous en faire profiter !




    When the men, the scavengers, come for you do not give yourself to them. Wear your strengh like armour, fight like a beast, rip them apart and burn their bones. You are a lady, a warrior a tsunami, and when you are done, tell the world that you belong to no man… you belong only to yourself.
    Xperience
    FémininAge : 20Messages : 156

    le Lun 19 Mai 2014 - 21:48

    Merci :)



    Kovu
    FémininAge : 15Messages : 250

    le Lun 19 Mai 2014 - 22:58

    C'est super ! Merci !



    Yser
    FémininAge : 18Messages : 46

    le Mar 20 Mai 2014 - 0:02

    Magnifique !
    Merci du partage *ç*
    thib56
    MasculinAge : 22Messages : 32

    le Mar 20 Mai 2014 - 13:38

    Merci.
    Makura-san
    FémininAge : 22Messages : 33

    le Mer 21 Mai 2014 - 12:59

    Merci pour cette PA très jolie :3
    Hayate747
    MasculinAge : 27Messages : 194

    le Mer 21 Mai 2014 - 18:07

    Merci encore !
    LickingBoot
    FémininAge : 17Messages : 481

    le Mer 21 Mai 2014 - 18:20

    Merci !!!!



    Kame-Chan
    FémininAge : 25Messages : 48

    le Jeu 22 Mai 2014 - 14:53

    Elle est juste parfaite cette PA merci beaucoup ♥
    damon w salvatore
    FémininAge : 29Messages : 108

    le Jeu 22 Mai 2014 - 17:57

    merci
    Luxuria
    FémininAge : 19Messages : 72

    le Ven 23 Mai 2014 - 16:20

    Merciii ^^
    MOON LEE
    FémininAge : 22Messages : 137

    le Sam 24 Mai 2014 - 11:37

    OMG! AMAZING!
    Merci! <3
    Leoguillem
    MasculinAge : 17Messages : 137

    le Sam 24 Mai 2014 - 12:07

    J('aime, il y a tout !
    Merci !



    - Je signe Marabout -
    flavinout45
    FémininAge : 14Messages : 5

    le Sam 24 Mai 2014 - 13:20

    C'est vraiment superbe  :bave: 
    Féhéla
    FémininAge : 43Messages : 232

    le Sam 24 Mai 2014 - 14:47

    merci
    Célestine
    FémininAge : 18Messages : 51

    le Sam 24 Mai 2014 - 21:44

    Merci ! Very Happy
    Hyou
    FémininAge : 19Messages : 21

    le Dim 25 Mai 2014 - 11:00

    C'est magnifique!!! C'est l'une de mes préférées d'ailleurs! Merci



    -Light-:
    Doan Lavita
    FémininAge : 18Messages : 72

    le Dim 25 Mai 2014 - 16:50

    Merci! Very Happy



    Nal Souclade
    MasculinAge : 17Messages : 163

    le Lun 26 Mai 2014 - 13:48

    Super PA !! Merci beaucoup !
    stefansalvatore
    MasculinAge : 21Messages : 17

    le Lun 26 Mai 2014 - 13:58

    :bisou: 
    Crystal Shadow
    FémininAge : 33Messages : 29

    le Lun 26 Mai 2014 - 15:15

    Merci  Very Happy 
    Sasuke49
    MasculinAge : 18Messages : 11

    le Lun 26 Mai 2014 - 22:11

    Merci, simplement magnifique !
    Phoenicia Collart
    FémininAge : 19Messages : 15

    le Mar 27 Mai 2014 - 2:54

    magnifique merci ♥
    Tweety
    FémininAge : 23Messages : 48

    le Mar 27 Mai 2014 - 18:45

    merci :)
    Sumaki
    FémininAge : 19Messages : 28

    le Mer 28 Mai 2014 - 2:30

    Merci pour cette merveilleuse Page d'accueil.
    Contenu sponsorisé

    Aujourd'hui à 19:49


      La date/heure actuelle est Lun 23 Jan 2017 - 19:49