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 !
    Invité

    le Jeu 12 Juin 2014 - 0:41

    Super!
    Eleania Madena
    FémininAge : 19Messages : 85

    le Jeu 12 Juin 2014 - 9:49

    Merci !



    Nazack
    FémininAge : 20Messages : 16

    le Jeu 12 Juin 2014 - 23:01

    OMG, depuis le temps que je la cherche, merci merci!  Embarassed 
    Liquid Dreams
    FémininAge : 27Messages : 38

    le Ven 13 Juin 2014 - 19:49

    Merci beaucoup !
    Shalyma
    FémininAge : 27Messages : 486

    le Ven 13 Juin 2014 - 22:01

    T'es code sont splendide !




    Merci Marie Chérie pour le kit!
    Asaliah
    FémininAge : 31Messages : 120

    le Sam 14 Juin 2014 - 8:42

    Magnifique j'adore !!!



    Dra-Gibus
    FémininAge : 20Messages : 17

    le Sam 14 Juin 2014 - 15:01

    Vraiment magnifique, merci!
    neverforever
    FémininAge : 16Messages : 12

    le Sam 14 Juin 2014 - 16:02

    ouah quel travail c'est vraiment magnifique !!
    Eykillyn
    FémininAge : 19Messages : 18

    le Dim 15 Juin 2014 - 14:44

    T'es vraiment douée Halloween.
    Merci pour le partage de tes codes, 'sont magnifiques :3





    ~ Nuvat & Venzel ~ Rebel & King  ♥ ~
    Invité

    le Dim 15 Juin 2014 - 17:27

    Ce travail de malade ! Cette PA est splendide ! Merci !
    HEAVEN.SPIRIT
    MasculinAge : 22Messages : 36

    le Mar 17 Juin 2014 - 16:20

    c'est vraiment très beau
    bon travail =)
    Momochii
    FémininAge : 24Messages : 7

    le Mer 18 Juin 2014 - 1:01

    merci bien ♥
    Neko Mimi
    FémininAge : 26Messages : 158

    le Jeu 19 Juin 2014 - 13:25

    celle là elle en jette !!



    SamyChou
    FémininAge : 19Messages : 31

    le Jeu 19 Juin 2014 - 15:44

      Encore un énorme merci du partage !
    Hashirama
    MasculinAge : 19Messages : 59

    le Jeu 19 Juin 2014 - 23:06

    thx
    Dydy
    FémininAge : 26Messages : 487

    le Ven 20 Juin 2014 - 16:48

    merci du partage!



    Kau
    FémininAge : 15Messages : 148

    le Ven 20 Juin 2014 - 18:38

    merciii!
    lΔω
    FémininAge : 19Messages : 101

    le Ven 20 Juin 2014 - 21:34

    Merci beaucoup pour le partage :)
    Delort.
    MasculinAge : 21Messages : 19

    le Sam 21 Juin 2014 - 13:27

    Magnifique merci
    Priss.
    FémininAge : 24Messages : 18

    le Sam 21 Juin 2014 - 15:39

    Je crois que je suis fan (a)



    Invité

    le Sam 21 Juin 2014 - 17:21

    Très jolie :)
    Crépuscule
    FémininAge : 18Messages : 9

    le Sam 21 Juin 2014 - 18:09

    Merci :3
    Nivan
    FémininAge : 19Messages : 13

    le Sam 21 Juin 2014 - 18:18

    Vraiment très jolie code, comme tous ceux que tu fais :3 Merci du partage.
    Noizy.
    MasculinAge : 18Messages : 43

    le Sam 21 Juin 2014 - 20:29

    merci
    Deadpoolio
    MasculinAge : 27Messages : 277

    le Dim 22 Juin 2014 - 14:27

    Merci, je vais tester ce super boulot :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 20 Fév 2017 - 16:27