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 Verte ~> Très simple + gifs animés.

    Partagez
    avatar
    Henrykiki
    MasculinAge : 25Messages : 576

    le Ven 30 Jan 2015 - 12:11

    Bonjour tout le monde,

    LS ~ PA verte très simple + staff en gifs animés :


    Voici mon premier LS de PA suite à la demande de 1charlotte, faite ici.

    Découvrez un aperçu de cette PA en ligne:
    www - et en image


    La PA contient en elle-même :

    • Une zone titre de bienvenue
    • Une zone staff avec gifs animés & affichage complet au survol.
    • Une zone "contexte" scrollable.
    • Une zone "texte" pour mettre ce que vous voulez.
    • Un lecteur de musique


    Un simple merci envers le demandeur et le codeur est le bienvenu ^^


    Code:
    <!doctype html>
    <html lang="fr">
    <head>
       <meta charset="UTF-8">
       <title>Pa 1Charlotte</title>
       <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
       <style>
          .infos-membre a
          {-webkit-transition: all .3s ease;
          transition: all .3s ease;}

          #pa-charlotte {
             position: relative;
             width: 800px;
             min-height: 500px;
             background: #c9d669;
             margin: 0 auto;
             font-family: sans-serif;
             line-height: 1.3;
          }

          #pa-charlotte table td {
             vertical-align: top;
          }

          #pa-charlotte h2 {
             margin: 0; padding: 0;
             font-family: 'Playfair Display', serif;
             font-size: 20px; text-align: center;
             color: green;
             font-weight: no;
          }

          #pa-charlotte h1 {
             font-size: 30px;
             font-style: italic;
             margin: 0; padding: 0;
             font-family: "times new roman", serif;
          }

          #pa-charlotte a {
             text-decoration: none;
             color: green;
             border-radius: 10px;
          }

          #pa-charlotte a:hover {
             color: #27421e;
          }

          ul#staff  {
             width: 290px;
             min-height: 30px;
             padding: 0; margin: 0;
             list-style-type: none;
             position: relative;
          }

          ul#staff li {
             width: 290px;
             min-height: 40px;
             padding: 0; margin: 0;
             list-style-type: none;
             z-index: 2;
             position: relative;
          }

          .crop {
             width: 290px;
             height: 40px;
             overflow: hidden;
             padding: 0; margin: 0;
          }

          .over-staff .crop img {
             display: block;
             width: 290px;
             margin: 0 auto;
             padding: 0; margin: 0;
             position: relative;
             z-index: 50;

               -webkit-filter: grayscale(100%);
               -moz-filter: grayscale(100%);
               -ms-filter: grayscale(100%);
               -o-filter: grayscale(100%);
               filter: grayscale(100%);
               /*filter: url(grayscale.svg); /* Firefox 4+ */*/
               filter: gray; /* IE 6-9 */
          }

          .over-staff img:hover {
               -webkit-filter: grayscale(0%);
               -moz-filter: grayscale(0%);
               -ms-filter: grayscale(0%);
               -o-filter: grayscale(0%);
               filter: grayscale(0%);
          }

          ul#staff li.over-staff span.infobulle {
             width: 180px;
             min-height: 50px;
             background: #A8B358;
             padding: 10px;
             position: absolute;
             top: 0; left: -200px;
             z-index: 100;
             display: none;
          }

          ul#staff li:hover span.infobulle {
             display: block;
          }

          .infobulle img {
             max-width: 100%;
             height: auto;
          }

          .infobulle p {
             padding: 1.5px 0; margin: 0;
             text-align: center;
          }

          .pseudo {
             text-transform: uppercase;
             font-size: 14px;
          }

          .content-contexte {
             max-height: 380px;
             overflow-y: auto;
             background: #A8B358;
             padding: 10px 15px 10px 10px;
             border-radius: 15px;
             font-size: 14px;
          }

          .content-textes {
             max-height: 380px;
             overflow-y: auto;
             background: #A8B358;
             padding: 10px 15px 10px 10px;
             border-radius: 15px;
             font-size: 14px;
          }

          #credits {
             position: absolute;
             bottom: -15px; right: 0;
             font-size: 9px;
             text-transform: uppercase;
          }
       </style>
    </head>
    <body>

       <div id="pa-charlotte">
          <table width="100%" cellspacing="20">
             <tr>
                <td colspan="3" style="text-align: center;">
                   <h1>Bienvenue {USERNAME}</h1><br>
                   <embed src="http://www.archive-host.com/mediaplayer.swf" width="230" height="20" allowscriptaccess="always" allowfullscreen="true" flashvars="height=20&width=230&file=http://www.aht.li/2547163/Ito_Kashitaro_-_One_Step_Ahead.mp3&volume=50&searchbar=false&autostart=false&repeat=false" />
                </td>
             </tr>
             <tr>
                <td style="width: 290px;">

                   <!-- -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_

                   Z O N E    S T A F F
                   _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ -->

                   <h2>Staff</h2>
                   <ul id="staff">

                   <!-- ATTENTION, BCP DE BLOC A MANIER AVEC PRUDENCE -->
                   
                   <!-- MEMBRE 1 & INFOBULLE 1  -->

                      <li class="over-staff">
                         <span class="infobulle">
                            <!-- l'image gif dans l'infobulle -->
                            <img src="https://31.media.tumblr.com/ce73e07c4d6dd88f397d4d3be9b0cad7/tumblr_n57iupKb5l1souoceo4_400.gif" />
                            <!-- espace infos du membre -->
                            <div class="infos-membre">
                               <p class="pseudo">1charlotte</p>
                               <p>Administratrice</p>
                               <p><a href="">mp</a> -
                               <a href="">profil</a></p>
                            </div>
                         </span><!-- fin infobulle -->
                         <div class="crop">
                            <!-- image gif "aperçu staff" -->
                            <img src="https://31.media.tumblr.com/ce73e07c4d6dd88f397d4d3be9b0cad7/tumblr_n57iupKb5l1souoceo4_400.gif" style="top: -45px;"/> <!-- le top, permet de choisir la partie de l'image -->
                         </div>
                      </li>

                   <!-- MEMBRE 2 & INFOBULLE 2  -->

                      <li class="over-staff">
                         <span class="infobulle">
                            <!-- l'image gif de l'infobulle -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
                            <div class="infos-membre">
                               <p class="pseudo">Pseudo</p>
                               <p>Administratrice</p>
                               <p><a href="">mp</a> - <a href="">profil</a></p>
                            </div>
                         </span><!-- fin infobulle -->
                         <div class="crop">
                            <!-- image gif "aperçu staff" -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
                         </div>
                      </li>
                   
                   <!-- MEMBRE 3 & INFOBULLE 3  -->

                      <li class="over-staff">
                         <span class="infobulle">
                            <!-- l'image gif de l'infobulle -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
                            <div class="infos-membre">
                               <p class="pseudo">Pseudo</p>
                               <p>Administratrice</p>
                               <p><a href="">mp</a> - <a href="">profil</a></p>
                            </div>
                         </span><!-- fin infobulle -->
                         <div class="crop">
                            <!-- image gif "aperçu staff" -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
                         </div>
                      </li>
                   
                   <!-- MEMBRE 4 & INFOBULLE 4  -->

                      <li class="over-staff">
                         <span class="infobulle">
                            <!-- l'image gif de l'infobulle -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
                            <div class="infos-membre">
                               <p class="pseudo">Pseudo</p>
                               <p>Administratrice</p>
                               <p><a href="">mp</a> - <a href="">profil</a></p>
                            </div>
                         </span><!-- fin infobulle -->
                         <div class="crop">
                            <!-- image gif "aperçu staff" -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
                         </div>
                      </li>
                   
                   <!-- MEMBRE 5 & INFOBULLE 5  -->

                      <li class="over-staff">
                         <span class="infobulle">
                            <!-- l'image gif de l'infobulle -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
                            <div class="infos-membre">
                               <p class="pseudo">Pseudo</p>
                               <p>Administratrice</p>
                               <p><a href="">mp</a> - <a href="">profil</a></p>
                            </div>
                         </span><!-- fin infobulle -->
                         <div class="crop">
                            <!-- image gif "aperçu staff" -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
                         </div>
                      </li>
                   
                   <!-- MEMBRE 6 & INFOBULLE 6  -->

                      <li class="over-staff">
                         <span class="infobulle">
                            <!-- l'image gif de l'infobulle -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
                            <div class="infos-membre">
                               <p class="pseudo">Pseudo</p>
                               <p>Administratrice</p>
                               <p><a href="">mp</a> - <a href="">profil</a></p>
                            </div>
                         </span><!-- fin infobulle -->
                         <div class="crop">
                            <!-- image gif "aperçu staff" -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
                         </div>
                      </li>
                   
                   <!-- MEMBRE 7 & INFOBULLE 7  -->

                      <li class="over-staff">
                         <span class="infobulle">
                            <!-- l'image gif de l'infobulle -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
                            <div class="infos-membre">
                               <p class="pseudo">Pseudo</p>
                               <p>Administratrice</p>
                               <p><a href="">mp</a> - <a href="">profil</a></p>
                            </div>
                         </span><!-- fin infobulle -->
                         <div class="crop">
                            <!-- image gif "aperçu staff" -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
                         </div>
                      </li>
                   
                   <!-- MEMBRE 8 & INFOBULLE 8  -->

                      <li class="over-staff">
                         <span class="infobulle">
                            <!-- l'image gif de l'infobulle -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
                            <div class="infos-membre">
                               <p class="pseudo">Pseudo</p>
                               <p>Administratrice</p>
                               <p><a href="">mp</a> - <a href="">profil</a></p>
                            </div>
                         </span><!-- fin infobulle -->
                         <div class="crop">
                            <!-- image gif "aperçu staff" -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
                         </div>
                      </li>
                   
                   <!-- MEMBRE 9 & INFOBULLE 9  -->

                      <li class="over-staff">
                         <span class="infobulle">
                            <!-- l'image gif de l'infobulle -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
                            <div class="infos-membre">
                               <p class="pseudo">Pseudo</p>
                               <p>Administratrice</p>
                               <p><a href="">mp</a> - <a href="">profil</a></p>
                            </div>
                         </span><!-- fin infobulle -->
                         <div class="crop">
                            <!-- image gif "aperçu staff" -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
                         </div>
                      </li>
                   
                   <!-- MEMBRE 10 & INFOBULLE 10 -->

                      <li class="over-staff">
                         <span class="infobulle">
                            <!-- l'image gif de l'infobulle -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
                            <div class="infos-membre">
                               <p class="pseudo">Pseudo</p>
                               <p>Administratrice</p>
                               <p><a href="">mp</a> - <a href="">profil</a></p>
                            </div>
                         </span><!-- fin infobulle -->
                         <div class="crop">
                            <!-- image gif "aperçu staff" -->
                            <img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
                         </div>
                      </li>
                   </ul>
                   <!-- ====== FIN DES STAFF  ====== -->
                </td>
                <td style="width: 240px;">
                   <!-- CONTEXTE  -->
                   <h2>Contexte</h2>
                   <div class="content-contexte">
                      <p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Commodi, eaque, ipsa, aut minima ipsum vitae provident dolorum pariatur repellat molestias numquam omnis nesciunt <a href="">impedit facilis</a> fugiat ea eos magnam saepe!</p>

                      <p>Ipsa, similique distinctio amet tempore veniam. Eaque, iusto, saepe, deleniti ea assumenda nulla tempora quas ab distinctio illo sint veniam nostrum in ipsam et consequatur expedita voluptatem facilis odio asperiores.</p>

                      <p>Deserunt, laboriosam, ipsa, quo adipisci natus aut enim iusto cupiditate asperiores doloremque voluptas reprehenderit vero iste temporibus aliquam. Doloribus, itaque, assumenda ut atque fugit officiis perspiciatis voluptatum qui at pariatur.</p>

                      <p>Recusandae, ducimus consequatur accusamus tenetur officiis rerum porro itaque soluta vitae libero minima nam modi sunt tempora aut beatae repudiandae exercitationem fugit assumenda quos nihil at dolor optio et suscipit?</p>

                      <p>Eos, inventore, voluptate, dicta odio commodi pariatur unde laboriosam molestias ullam ipsa ad consectetur amet temporibus quisquam ipsum esse soluta veniam molestiae veritatis possimus. Deserunt error atque sed dicta assumenda?</p>
                   </div>
                </td>
                <td>
                   <!-- TEXTES  -->
                   <h2>Et textes</h2>
                   <div class="content-textes">
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, eaque, ipsa, aut minima ipsum vitae <a href="">provident</a> dolorum pariatur repellat molestias numquam omnis nesciunt impedit facilis fugiat ea eos magnam saepe!</p>

                      <p>Ipsa, similique distinctio amet tempore veniam. Eaque, iusto, saepe, deleniti ea assumenda nulla tempora quas ab <a href="">distinctio</a> illo sint veniam nostrum in ipsam et consequatur expedita voluptatem facilis odio asperiores.</p>

                      <p>Deserunt, laboriosam, ipsa, quo adipisci natus aut enim iusto cupiditate asperiores doloremque voluptas reprehenderit vero iste temporibus aliquam. Doloribus, itaque, assumenda ut atque fugit officiis perspiciatis voluptatum qui at pariatur.</p>

                      <p>Recusandae, ducimus consequatur accusamus tenetur officiis rerum porro itaque soluta vitae libero minima nam modi sunt tempora aut beatae repudiandae exercitationem fugit assumenda quos nihil at dolor optio et suscipit?</p>

                      <p>Eos, inventore, voluptate, dicta odio commodi pariatur unde laboriosam molestias ullam ipsa ad consectetur amet temporibus quisquam ipsum esse soluta veniam molestiae veritatis possimus. Deserunt error atque sed dicta assumenda?</p>
                   </div>
                </td>
             </tr>
          </table>
          <div id="credits">
             PA réalisée sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>
          </div>
       </div>

    </body>
    </html>

    Afin de "rogner" les gifs pour l'aperçu, changer le "margin-top" qui se trouve sur la balise image!


    Merci de ne pas toucher aux crédits envers Never-Utopia.


    Une question ?


    Je serai ravi de vous y répondre là-bas : problème avec votre code.



    Des bisous !
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le Mer 4 Fév 2015 - 21:35

    Même remarque pour le crédit ~ 

    avatar
    1charlotte
    FémininAge : 17Messages : 196

    le Ven 6 Fév 2015 - 21:00

    Merci encore pour ton temps et ta patience ^^"
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le Mar 3 Mar 2015 - 17:51

    Modifications faites.

    avatar
    Kasshad
    MasculinAge : 28Messages : 311

    le Mer 4 Mar 2015 - 14:52

    Pas mal du tout ça Very Happy



    avatar
    Kortyx
    MasculinAge : 28Messages : 81

    le Mer 4 Mar 2015 - 16:15

    Je cherchais justement un code pour ouvrir une boîte lors du passage de la souris sur une image ! Merci beaucoup Very Happy
    avatar
    Sweetdead
    FémininAge : 22Messages : 38

    le Sam 7 Mar 2015 - 19:42

    J'aime beaucoup ! Merci beaucoup ! :$
    avatar
    Mecat
    FémininAge : 29Messages : 55

    le Sam 21 Mar 2015 - 14:40

    Merci Very Happy



    avatar
    remrem
    MasculinAge : 20Messages : 48

    le Mer 8 Avr 2015 - 21:46

    Merci !
    avatar
    Le Panda.
    FémininAge : 21Messages : 34

    le Mar 19 Mai 2015 - 22:02

    Ohw. J'aime bien. Merci beaucoup !
    avatar
    Raymanou
    MasculinAge : 25Messages : 49

    le Dim 18 Oct 2015 - 17:17

    Merci
    avatar
    Kelalin
    FémininAge : 25Messages : 1886

    le Dim 18 Oct 2015 - 23:20

    Merci pour le partage ! (’-’*)
    avatar
    Rudcash
    MasculinAge : 17Messages : 17

    le Jeu 28 Avr 2016 - 14:43

    Merci
    avatar
    Noho
    FémininAge : 21Messages : 26

    le Mer 21 Juin 2017 - 9:16

    Merci !
    avatar
    phenixia74
    FémininAge : 39Messages : 48

    le Lun 5 Fév 2018 - 7:51

    merci pour les codes :love:
    avatar
    Fleuve Éternel
    FémininAge : 15Messages : 13

    le Dim 25 Mar 2018 - 10:05

    Moh :rum:
    avatar
    LizzieWeir
    FémininAge : 27Messages : 13

    le Sam 14 Avr 2018 - 14:21

    Merci pour le taff! C'est super complet!
    Contenu sponsorisé


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