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 en Hexagone

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 5018

    le Ven 9 Mai 2014 - 21:13

    Page d'accueil



    Ceci est un code de PA crée suite à la Demande de Narween, ici.

    CSS3 & HTML5 ▬ Ce que ça donne


    Le code


    Très IMPORTANT!!! Pour que ceci marche, notamment le défilement des partenaires sur la PA, il faut ABSOLUMENT que vous ayez coché NON à Optimiser votre CSS. Autrement, les keyframes ne sont pas prises en compte!
    Cependant, cela peut causer des problèmes avec le CSS de votre forum, parce que ce dernier aura été optimisé, et donc "fonctionnera" malgré les erreurs de code!


    Code HTML à placer dans Affichage -> Page d'accueil -> Généralités ->Message sur la page d'accueil :
    Code:
    <link href="http://fonts.googleapis.com/css?family=Diplomata" rel="stylesheet" type="text/css" />
    <div id="contour_pa">
     
    <div id="triangle_haut_pa">
     
    <div id="bienvenue_pa">
     Bienvenue {USERNAME} !
    </div>
     
    </div>
     
    <div id="contour_centre_pa">
     
    <div id="contexte_pa">
     
    <div class="titre_pa">
     Contexte
    </div>
     
    <div id="contenu_conexte_pa">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna est, accumsan nec placerat a, malesuada nec nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque a sapien non dui malesuada volutpat. Donec vel vehicula lorem. Donec pellentesque viverra risus at tempor. Nulla quis metus viverra, adipiscing ante sit amet, congue odio. Donec sit amet laoreet sem. Donec turpis enim, sollicitudin eu facilisis ac, aliquam quis odio. Integer suscipit luctus auctor. Nam sagittis velit suscipit odio egestas molestie. Donec quis nunc quis neque dictum bibendum non ut dui. Suspendisse convallis nulla id libero consectetur eleifend. Vestibulum tincidunt placerat diam ut viverra. Pellentesque velit dolor, tristique eu sapien commodo, dignissim malesuada sapien. Praesent egestas fermentum orci, eu malesuada nisl semper eget. Nam id massa mattis, rhoncus lorem ut, auctor lacus. Fusce luctus euismod rutrum. Vivamus sit amet justo et erat dapibus rhoncus non eget eros. Curabitur sapien velit, pretium a dolor a, molestie fermentum ipsum. Maecenas ac felis magna. Nunc ac libero non nisl pretium convallis nec eu ligula. Sed vitae velit non massa imperdiet pulvinar. Curabitur enim massa, tincidunt id imperdiet ornare, tincidunt lobortis mauris. Ut volutpat gravida aliquam. Fusce scelerisque justo non eros dignissim lacinia. Donec pretium commodo faucibus. Duis lectus lectus, tristique ac nibh ac, sagittis imperdiet mauris. Cras commodo vitae augue eget condimentum. Nulla aliquet sit amet felis in varius. Sed porta ipsum eget quam convallis, vitae fermentum magna lobortis. Quisque in lacinia felis, ac iaculis lacus. Sed sodales, justo in viverra placerat, massa erat aliquet massa, at sollicitudin dolor nibh sed magna. Donec sed metus a nunc rhoncus lobortis ut sit amet dolor. Etiam porttitor magna ut dolor lobortis hendrerit. Aenean porttitor, ligula et suscipit ultricies, ante sapien dictum lacus, nec faucibus libero est eu nibh. Praesent metus augue, luctus sit amet placerat eu, egestas vel metus. Pellentesque eleifend neque at augue luctus consectetur. Sed vitae arcu ut quam lobortis convallis at eu turpis. Integer commodo euismod tellus at gravida. Maecenas adipiscing, arcu ut dapibus bibendum, erat mi faucibus nibh, quis rhoncus neque erat id sapien.
    </div>
     
    </div>
     
    <div id="gauche_pa">
     
    <div id="staff_pa">
     
    <div class="titre_pa">
     Staff
    </div>
     
    <div class="contour_staff_pa">
     <img class="img_staff_pa" src="http://club-de-magie.com/files/avatars/smalls/37_Shrek3_effets_magie_mainmerlin_Lariffoulette.small.jpg" />
    <div class="infobulle_staff_pa">
     Nom Prénom<br /> Poste<br /> <a href="" target="_blank">MP</a><br />
    </div>
     
    </div><br />
     <div class="contour_staff_pa">
     <img class="img_staff_pa" src="http://club-de-magie.com/files/avatars/smalls/37_Shrek3_effets_magie_mainmerlin_Lariffoulette.small.jpg" />
    <div class="infobulle_staff_pa">
     Nom Prénom<br /> Poste<br /> <a href="" target="_blank">MP</a><br />
    </div>
     
    </div>
     <div class="contour_staff_pa">
     <img class="img_staff_pa" src="http://club-de-magie.com/files/avatars/smalls/37_Shrek3_effets_magie_mainmerlin_Lariffoulette.small.jpg" />
    <div class="infobulle_staff_pa">
     Nom Prénom<br /> Poste<br /> <a href="" target="_blank">MP</a><br />
    </div>
     
    </div>
     <div class="contour_staff_pa">
     <img class="img_staff_pa" src="http://club-de-magie.com/files/avatars/smalls/37_Shrek3_effets_magie_mainmerlin_Lariffoulette.small.jpg" />
    <div class="infobulle_staff_pa">
     Nom Prénom<br /> Poste<br /> <a href="" target="_blank">MP</a><br />
    </div>
     
    </div>
     <div class="contour_staff_pa">
     <img class="img_staff_pa" src="http://club-de-magie.com/files/avatars/smalls/37_Shrek3_effets_magie_mainmerlin_Lariffoulette.small.jpg" />
    <div class="infobulle_staff_pa">
     Nom Prénom<br /> Poste<br /> <a href="" target="_blank">MP</a><br />
    </div>
     
    </div>
     
    </div>
     
    <div id="news_pa">
     
    <div class="titre_pa">
     News
    </div>
     
    <div id="contenu_news_pa">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna est, accumsan nec placerat a, malesuada nec nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque a sapien non dui malesuada volutpat. Donec vel vehicula lorem. Donec pellentesque viverra risus at tempor. Nulla quis metus viverra, adipiscing ante sit amet, congue odio. Donec sit amet laoreet sem. Donec turpis enim, sollicitudin eu facilisis ac, aliquam quis odio. Integer suscipit luctus auctor. Nam sagittis velit suscipit odio egestas molestie. Donec quis nunc quis neque dictum bibendum non ut dui. Suspendisse convallis nulla id libero consectetur eleifend. Vestibulum tincidunt placerat diam ut viverra. Pellentesque velit dolor, tristique eu sapien commodo, dignissim malesuada sapien. Praesent egestas fermentum orci, eu malesuada nisl semper eget. Nam id massa mattis, rhoncus lorem ut, auctor lacus. Fusce luctus euismod rutrum. Vivamus sit amet justo et erat dapibus rhoncus non eget eros. Curabitur sapien velit, pretium a dolor a, molestie fermentum ipsum. Maecenas ac felis magna. Nunc ac libero non nisl pretium convallis nec eu ligula. Sed vitae velit non massa imperdiet pulvinar. Curabitur enim massa, tincidunt id imperdiet ornare, tincidunt lobortis mauris. Ut volutpat gravida aliquam. Fusce scelerisque justo non eros dignissim lacinia. Donec pretium commodo faucibus. Duis lectus lectus, tristique ac nibh ac, sagittis imperdiet mauris. Cras commodo vitae augue eget condimentum. Nulla aliquet sit amet felis in varius. Sed porta ipsum eget quam convallis, vitae fermentum magna lobortis. Quisque in lacinia felis, ac iaculis lacus. Sed sodales, justo in viverra placerat, massa erat aliquet massa, at sollicitudin dolor nibh sed magna. Donec sed metus a nunc rhoncus lobortis ut sit amet dolor. Etiam porttitor magna ut dolor lobortis hendrerit. Aenean porttitor, ligula et suscipit ultricies, ante sapien dictum lacus, nec faucibus libero est eu nibh. Praesent metus augue, luctus sit amet placerat eu, egestas vel metus. Pellentesque eleifend neque at augue luctus consectetur. Sed vitae arcu ut quam lobortis convallis at eu turpis. Integer commodo euismod tellus at gravida. Maecenas adipiscing, arcu ut dapibus bibendum, erat mi faucibus nibh, quis rhoncus neque erat id sapien.
    </div>
     
    </div>
     
    </div>
     
    </div>
     
    <div id="triangle_bas_pa">
     
    <div id="partenaires_pa">
     Partenaires
    </div>
     
    <div id="position_part_pa">
     
    <div id="partenaires_deroulement_pa">
     
    <div id="marquee_pa">
     <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" />
    </div>
     
    </div>
     
    </div>
     
    </div>
    </div>

    Le CSS:
    Code:
    /***** DÉBUT PA *******/
    #contour_pa {
      position: relative;
      width: 600px;
      height: 600px;
      margin: auto;
    }

    /* Mise en forme du triangle du haut. */
    #triangle_haut_pa {
      width: 0;
     height: 0;
     border-left: 300px solid transparent;
      border-right: 300px solid transparent;
    /* Ici détermine la couleur du triangle. */
      border-bottom: 150px solid #1C1C1C;
    }

    /* Mise en forme et placement du bienvenue. */
    #bienvenue_pa {
      position: absolute;
      top: 120px;
      left: 0;
    /* Empêche le retour à la ligne. */
      white-space: nowrap;
      width: 600px;
      text-align: center;
    /* Police du titre.*/
      font-family: Diplomata;
      font-size: 18pt;
    /* Couleur et ombre du titre. */
      color: white;
      text-shadow: 1px 1px black;
    }
      
    /* Permet e placer les blocs du centre. */
    #contour_centre_pa {
      width: 100%;
      height: 300px;
    }

    /* Div contenant le contexte. */
    #contexte_pa {
      width: 300px;
      height: 100%;
      float: left;
    /* Couelur de fond du contexte */
      background-color: white;
    }

    /* Permet d eplacer le staff & les news à droite. */
    #gauche_pa {
      width: 300px;
      height: 100%;
      float: left;
    }

    /* Div contenant le staff */
    #staff_pa {
      height: 50%;
      width: 100%;
    /* Couleur de fond du staff */
      background-color: #BFBFBF;
    }

    /* Mise en forme de l'image du staff. Les images carrés sont redimmensionnées automatiquement, mais il FAUT qu'elles soeint carrées. */
    .contour_staff_pa .img_staff_pa {
      width: 50px;
      border-radius: 50%;
      opacity: 1;
      transition: all 0.5s ease-in-out 0s;
    }

    /* Permet de réduire l'opacité de l'image du staff au passage de la souris. */
    .contour_staff_pa:hover .img_staff_pa {
      opacity: 0.5;
      transition: all 0.5s ease-in-out 0s;
    }

    /* Permet de placer correctement les images du staff */
    .contour_staff_pa {
      position: relative;
      display: inline-block;
      margin: auto;
      margin-left: 20px;
      width: 50px;
      height: 50px;
      overflow: visible;
      margin-top: 4px;
    }
     
    /* Mise en forme de l'Infobulle */
    .contour_staff_pa div {
    /* Placement de l'infobulle par rapport à l'image du staff. */
      position: absolute;
      top: 20px;
      left: 20px;
    /* Couleur de fond et d'écriture de l'infobulle. */
      background-color: white;
      color: black;
    /* Largeur et hauteur de l'infobulle. */
      width: 100px;
      height: 50px;
      overflow: auto;
      text-align: center;
    /* Bordure de l'infobulle. */
      border: 2px solid black;
      border-radius: 20px;
      padding: 8px;
    /* Permet de rendre l'infobulle invisible lorsque la souris n'est pas là. */
      opacity:0;
      transition: all 0.5s ease-in-out 0s;
      z-index: 999;
      visibility: hidden;
    }

     /* Fait apparaître l'infobulle du staff au passage de la souris ou au clic. */
    .contour_staff_pa:hover div, .contour_staff_pa:focus div {
      opacity:1;
      transition: all 0.5s ease-in-out 0s;
      visibility: visible;
    }

    /* Div contenant les news. */
    #news_pa {
      height: 50%;
      width: 100%;
    /* Couleur de fond des news. */
      background-color: #898989;
    }

    /* Permet de créer le triangle du bas. */
    #triangle_bas_pa {
      width: 0;
     height: 0;
     border-left: 300px solid transparent;
      border-right: 300px solid transparent;
    /* La couleur du triangle est déterminée ici. */
      border-top: 150px solid #1C1C1C;
    }

    /* Mise en forme et placement du titre des Partenaires */
    #partenaires_pa {
      position: absolute;
      bottom: 120px;
      left: 0;
      whitespace: no-wrap;
      width: 600px;
      text-align: center;
      font-family: Diplomata;
      font-size: 18pt;
      color: white;
      text-shadow: 1px 1px black;
    }

    /* Placement des partenaires. */
    #position_part_pa {
      position: absolute;
      bottom: 60px;
      left: 175px;
    }

    /* Permet de limiter la largeur et hauteur des partenaires. */
    #partenaires_deroulement_pa {
      position: relative;
      width: 250px;
      height: 50px;
      overflow: hidden;
      margin: auto;
    }

    /* Mise en forme des trois titres du centre. */
    .titre_pa {
      width: 100%;
      text-align: center;
    /* Police des titres. */
      font-family: Diplomata;
      font-size: 20pt;
    /* Couleur des titres */
      color: black;
    }

    /* Mise en forme du contexte */
    #contenu_conexte_pa {
      width: 97%;
      height: 85%;
      padding: 5px;
      text-align: justify;
      font-size: 10pt;
      overflow: auto;
    }

    /* Mise en forme des news. */
    #contenu_news_pa {
      width: 97%;
      height: 70%;
      padding: 5px;
      text-align: justify;
      font-size: 10pt;
      overflow: auto;
    }

    /* Bloc de défilement des partenaires */
    #marquee_pa {
      height: 100%;
      position: absolute;
      top: 10px;
      left: 0;
    /* Modifier ici le nombre de secondes (les deux fois) pour accélérer ou ralentir le défilement. Plus le chiffre est gros, plus l'animation est lente. */
      -webkit-animation: marqueelike 30s linear infinite;
      animation: marqueelike 30s linear infinite;
      white-space:nowrap;
    }

    /* Permet d'arrêter l'animation au passage de la souris */
    #marquee_pa:hover {
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
    }

    /* Permettent tous deux le déplacement des partenaires, donc l'animation. Modifiez si nécessaire la seconde valeur (à 100%) */
    @-webkit-keyframes marqueelike {
      0%    { -webkit-transform: translateX(280px); }
      100%  { -webkit-transform: translateX(-100%); }
    }

    @keyframes marqueelike {
      0%    { transform: translateX(280px); }
      100%  { transform: translateX(-100%); }
    }
    /***** FIN PA *******/

    Modifications supplémentaires


    Dans ce code, beaucoup de choses sont modulables. Si vous voulez des exemples, de choses à changer ou SAVOIR comment modifier certaines choses, n'hésitez pas à poster à la suite. Voici une liste d'idée qui pourraient être expliquées plus tard si besoin est:

    • Avoir d'autres effets sur l'infobulle pour son apparition, disparition (CSS à modifier: .contour_staff_pa div et .contour_staff_pa:hover div, .contour_staff_pa:gocus div
      [/i]
    • Avoir des effets sur les images de staff (CSS à modifier: .contour_staff_pa .img_staff_pa et .contour_staff_pa:hover .img_staff_pa)


    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.
    avatar
    Nearween
    FémininAge : 19Messages : 208

    le Ven 9 Mai 2014 - 22:49

    Merci pour l'aide cette PA et juste génial Very Happy





    Stand by Me
    avatar
    Neva
    FémininAge : 26Messages : 18564

    le Jeu 5 Juin 2014 - 17:34

    Merci pour la PA, Nyo ! Je déplace



     
    avatar
    Raven Sumire
    FémininAge : 24Messages : 43

    le Dim 8 Juin 2014 - 16:43

    Merci pour cette PA !
    avatar
    BlackNight
    MasculinAge : 30Messages : 90

    le Mar 1 Juil 2014 - 3:09

    Merci
    avatar
    narakye
    FémininAge : 24Messages : 450

    le Mar 1 Juil 2014 - 9:57

    Merciii
    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Mar 8 Juil 2014 - 14:41

    Merci ! Wink
    avatar
    stubbornEmpire
    FémininAge : 18Messages : 38

    le Dim 13 Juil 2014 - 19:28

    Merci pour cette PA :)
    avatar
    ryry0013
    FémininAge : 24Messages : 143

    le Dim 13 Juil 2014 - 20:20

    C'est super :)
    avatar
    Jeff`22
    MasculinAge : 17Messages : 34

    le Jeu 24 Juil 2014 - 13:30

    Merci beaucoup, j'adore !
    avatar
    Louchita
    FémininAge : 25Messages : 131

    le Sam 26 Juil 2014 - 21:47

    Thanks ^^



    avatar
    Natsu892
    MasculinAge : 17Messages : 63

    le Mer 27 Aoû 2014 - 22:21

    merci



    avatar
    TimeToSmile
    FémininAge : 20Messages : 49

    le Sam 30 Aoû 2014 - 14:26

    Craiment classe merci !
    avatar
    -Larme-
    FémininAge : 17Messages : 62

    le Dim 12 Oct 2014 - 14:30

    Merci du partage, c'est magnifique *-*



    avatar
    Nymeria.
    FémininAge : 23Messages : 306

    le Mer 15 Oct 2014 - 1:49

    Super, merci :)
    avatar
    Arisu
    FémininAge : 29Messages : 109

    le Mar 18 Nov 2014 - 0:39

    Je te tire mon chapeau, c'est très réussi !
    avatar
    Dreamyland
    FémininAge : 21Messages : 88

    le Jeu 8 Jan 2015 - 18:15

    Thank You
    avatar
    Luna_Rakuen
    FémininAge : 25Messages : 79

    le Dim 15 Fév 2015 - 16:55

    Merci pour ce code :)
    avatar
    Viou
    FémininAge : 29Messages : 178

    le Dim 8 Mar 2015 - 11:02

    Superbe, merci beaucoup du partage < e
    avatar
    Madras
    FémininAge : 33Messages : 279

    le Ven 5 Juin 2015 - 22:29

    Merci
    avatar
    Invité

    le Jeu 30 Juil 2015 - 9:10

    Très sympa !
    avatar
    layna
    FémininAge : 25Messages : 68

    le Mer 3 Fév 2016 - 23:34

    thanks
    avatar
    Kelalin
    FémininAge : 25Messages : 1886

    le Jeu 4 Fév 2016 - 17:59

    Merci pour le partage !
    avatar
    FREAKS*
    FémininAge : 23Messages : 30

    le Mar 1 Mar 2016 - 15:55

    Merci !
    avatar
    .pinkrocks
    FémininAge : 27Messages : 41

    le Lun 14 Mar 2016 - 1:49

    Super! Merci du partage! <3
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Juin 2018 - 0:48