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 !
    Catblack
    FémininAge : 21Messages : 85

    le Mer 28 Mai 2014 - 14:41

    merci beaucoup très jolie =)
    avatar
    Myfanwi
    FémininAge : 19Messages : 82

    le Jeu 29 Mai 2014 - 14:18

    Elle est très belle cette PA Very Happy
    avatar
    Clémentine
    FémininAge : 24Messages : 201

    le Ven 30 Mai 2014 - 14:34

    Merciiii ^^



    avatar
    EverLiam
    FémininAge : 28Messages : 894

    le Ven 30 Mai 2014 - 15:08

    J'adore ^^





    avatar
    laura31500
    FémininAge : 15Messages : 49

    le Ven 30 Mai 2014 - 21:28

    Je l'adore tout simplement magnifique ! Very Happy
    avatar
    Rubis-Hope
    FémininAge : 24Messages : 46

    le Ven 30 Mai 2014 - 22:02

    Elle est extra cette PA
    Sophistiqué et élégante, j'adore.
    avatar
    Dooh-Nem
    FémininAge : 23Messages : 139

    le Sam 31 Mai 2014 - 0:36

    Merci !
    avatar
    Honey
    FémininAge : 25Messages : 57

    le Sam 31 Mai 2014 - 8:44

    Encore merci pour la PA, elle est vraiment jolie ♥
    avatar
    Nearween
    FémininAge : 18Messages : 206

    le Sam 31 Mai 2014 - 11:42

    Merci pour le code :)





    Stand by Me
    avatar
    Méandre.
    FémininAge : 19Messages : 94

    le Sam 31 Mai 2014 - 17:06

    Merci !
    avatar
    Likilou
    MasculinAge : 23Messages : 292

    le Sam 31 Mai 2014 - 22:40

    Merci ! :)



    avatar
    Jawilsia
    FémininAge : 25Messages : 143

    le Dim 1 Juin 2014 - 14:27

    Wow, c'est super beau
    Eroik04
    MasculinAge : 19Messages : 22

    le Dim 1 Juin 2014 - 15:13

    Merci elle est magnifique
    Tommy'
    MasculinAge : 21Messages : 8

    le Dim 1 Juin 2014 - 15:55

    Intéressant
    avatar
    SNMitsuki
    FémininAge : 19Messages : 63

    le Dim 1 Juin 2014 - 17:12

    THANK YOU



    avatar
    x_Titia
    FémininAge : 26Messages : 92

    le Dim 1 Juin 2014 - 18:23

    J'aime beaucoup l'idée merci du partage!
    avatar
    Invité

    le Dim 1 Juin 2014 - 18:35

    Très belle page d'acceuil =)
    avatar
    Atra D. Angelus
    MasculinAge : 23Messages : 22

    le Dim 1 Juin 2014 - 21:26

    Merci beaucoup ! o7
    avatar
    CookiesAuxChoco
    FémininAge : 21Messages : 22

    le Lun 2 Juin 2014 - 17:34

    Merci beaucoup, elle est juste sublime c'est de l'excellent travail ! :0
    avatar
    chabus
    FémininAge : 24Messages : 21

    le Mar 3 Juin 2014 - 14:33

    Merci
    avatar
    Elenna
    FémininAge : 22Messages : 31

    le Mar 3 Juin 2014 - 15:54

    Merci du partage :)
    avatar
    Lilice
    FémininAge : 24Messages : 91

    le Mar 3 Juin 2014 - 16:28

    Merci :)
    avatar
    Kinjiro
    MasculinAge : 18Messages : 80

    le Mer 4 Juin 2014 - 11:42

    Thanks.



    avatar
    tamanegeek
    MasculinAge : 17Messages : 167

    le Mer 4 Juin 2014 - 14:31

    Merci infiniment !
    avatar
    AwenWolf
    FémininAge : 29Messages : 76

    le Mer 4 Juin 2014 - 16:28

    Merci <3 Je l'a trouve très belle *_*
    Contenu sponsorisé


      La date/heure actuelle est Lun 24 Avr 2017 - 11:21