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

    Rappel du premier message :

    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
    Thessia
    FémininAge : 28Messages : 74

    le Lun 28 Mar 2016 - 2:49

    J'aime beaucoup merci ^^



    Ce n'est pas parce que tu ne le vois pas que ce n'est pas réel,
    Ce n'est pas par ce que tu n'y arrive pas que ce n'est pas possible.
    avatar
    NanoiHime
    FémininAge : 19Messages : 562

    le Dim 14 Aoû 2016 - 22:16

    mercii



    avatar
    Lireloth
    MasculinAge : 21Messages : 4

    le Ven 30 Sep 2016 - 10:10

    Merci beaucoup, trop classe Very Happy
    avatar
    Louaque
    MasculinAge : 53Messages : 60

    le Jeu 20 Oct 2016 - 21:17

    Bonjour et merci pour le partage
    avatar
    Zachary Wolf
    FémininAge : 25Messages : 57

    le Mer 9 Nov 2016 - 13:43

    Merci pour le partage :hug:
    avatar
    Alec Sing Toa
    FémininAge : 26Messages : 74

    le Mar 14 Fév 2017 - 17:16

    Meric, c'est une PA vraiment original !
    avatar
    Melanchlovia
    FémininAge : 21Messages : 19

    le Dim 12 Mar 2017 - 18:40

    thx
    avatar
    Amarok
    MasculinAge : 20Messages : 6

    le Lun 13 Mar 2017 - 23:17

    Merci du partage c'est original
    Hane
    FémininAge : 19Messages : 59

    le Mer 31 Mai 2017 - 22:19

    très originale, merci!
    avatar
    Max Rénix
    MasculinAge : 23Messages : 56

    le Ven 4 Aoû 2017 - 1:16

    merciiii !
    avatar
    Doriand
    MasculinAge : 27Messages : 90

    le Mer 9 Mai 2018 - 18:24

    gracias
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 7:10