Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Atelier] Créez votre galerie

Atelier CSS

    1 mai 2015 à 17:40:13

    Bonjour à tous,

    Il s'en ai passé du temps depuis le dernier atelier html/css(2 ans). Aujourd'hui je vous en présente un tout chaud accessible aussi bien aux débutants qu'aux experts ;)

    EDIT du 30 : L'atelier est terminé !

    Objectif

    Il s'agit de styliser une galerie d'images avec un HTML donné qu'il vous est interdit de modifier.

    N'hésitez pas à rendre votre galerie responsive, à utiliser des animations CSS, à rendre vos images zoomables,etc ;)

    Voici le code HTML

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Galerie d'images</title>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
            <h1>ZGalerie</h1>
            <div class="gallery">    
                <ul>
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_100.jpg" alt="image"/></li>   
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_103.jpg" alt="image"/></li>
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_104.jpg" alt="image"/></li>
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_13.jpg" alt="image"/></li>
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_14.jpg" alt="image"/></li>
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_15.jpg" alt="image"/></li>
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_16.jpg" alt="image"/></li>
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_17.jpg" alt="image"/></li>
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_18.jpg" alt="image"/></li>
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_36.jpg" alt="image"/></li>
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_34.jpg" alt="image"/></li> 
                    <li class="image-container"><img src="http://www.photo-libre.fr/nature/Med/Rz_35.jpg" alt="image"/></li> 
                </ul>
            </div>   
            <footer>
              <a href="http://www.photo-libre.fr">Photos Libres</a>
            </footer>
        </body>
    </html>

    Déroulement

    Le concours se déroule en deux étapes, la première, finie, consistait à envoyer vos participations que j'ai listées.

    Les participations ont été closes 22 mai à minuit pile. S'est ensuite déroulé une semaine de votes où n'importe qui, participant ou pas, pourra voter pour ses deux participation préférées, et qui s'est terminé donc le 29 à minuit. 

    Le but de ce concours est de s'amuser et pourquoi pas de découvrir de nouvelles méthodes/techniques et aucune récompense n'est promise aux gagnants :) .

    Règlement

    • Les créations doivent être les votres à 100%.
    • Le HTML ne peut être modifié
    • Le Javascript est interdit.
    • Les créations envoyées après le 22 mai à minuit pile ne seront acceptées.

    • Il n'est possible de voter que pour deux participations. Dans le cas ou plus sont énoncés, seuls les deux premiers seront comptabilisés.

     Participations

    PseudoLienVotes
    PifyZ Lien 0
    Neabfi Lien 0

    Louistiti_

    Lien 3

    kazanova953

    Lien 0
    krisken Lien 0
    Cocopop Lien 1
    Tchoalien Lien 0
    Lud00 Lien 1
    Sample X Lien 3
    nightmat Lien 6
    philiga Lien 0
    Crazy_turtle Lien 0
    m@rcus62 Lien 1
    Akryum Lien 10
    sonizef Lien 3
    Alex40 Lien 0
    EverPlays Lien 1

    Le vainqueur est donc incontestablement Akryum, félicitation à celui-ci !

    La deuxième place revient à nightmat, tandis ce que sonizef, Sample X et Louistiti_ se partagent la 3è place.

    L'atelier est officiellement terminé, merci à tous !

    -
    Edité par Etoile Filante 30 mai 2015 à 7:41:15

    • Partager sur Facebook
    • Partager sur Twitter
    "Working on my five-year plan. Just need to choose a font"- Chuck Bartowski
      1 mai 2015 à 17:50:15

      Super initiative :)

      Si je trouve le temps, j'essayerai de coder quelque chose :magicien:
      • Partager sur Facebook
      • Partager sur Twitter
        2 mai 2015 à 9:13:57

        Cool :)

        N'hésitez pas à mettre le lien dans votre signature pour faire un peu de pub.

        -
        Edité par Etoile Filante 2 mai 2015 à 9:14:10

        • Partager sur Facebook
        • Partager sur Twitter
        "Working on my five-year plan. Just need to choose a font"- Chuck Bartowski
          3 mai 2015 à 20:04:19

          Voici ma participation : http://codepen.io/PifyZ/pen/bddZJN.

          C'est pas extraordinnaire mais je voulais quelque chose d'assez simple. Il manque un tabindex sur les <li> pour pouvoir faire un effet au clic.

          • Partager sur Facebook
          • Partager sur Twitter
            3 mai 2015 à 21:36:37

            Bien ajouté ;)
            • Partager sur Facebook
            • Partager sur Twitter
            "Working on my five-year plan. Just need to choose a font"- Chuck Bartowski
              4 mai 2015 à 19:19:11

              Hey, ;)

              voilà ma petite participation ! Elle est assez simple et épurée.

              Il y a des petites bordures blanches sur les images qui ne font pas très jolies quand on clique dessus, mais vu que nous n'avons pas le droit de modifier le HTML, j'ai voulu laisser les images d'origines. 

               PS: Il faut rester appuyé sur les images pour les agrandir.

              -
              Edité par Neabfi 4 mai 2015 à 19:21:06

              • Partager sur Facebook
              • Partager sur Twitter
                4 mai 2015 à 20:07:52

                Hello,

                J'aime bien ces idées d'ateliers, pour le coup, je me suis apprêté au jeu.

                Voici donc pour ma part : ZGalerie.

                Bon, je n'étais pas bien inspiré pour le nom des photos. ^^

                -
                Edité par Louistiti_ 4 mai 2015 à 20:09:37

                • Partager sur Facebook
                • Partager sur Twitter
                Follow me on Twitter : @louistiti_fr
                  4 mai 2015 à 21:56:01

                  C'est bon, vous êtes bien ajoutés ;)
                  • Partager sur Facebook
                  • Partager sur Twitter
                  "Working on my five-year plan. Just need to choose a font"- Chuck Bartowski
                    5 mai 2015 à 17:14:17

                    J'aime bien participer à ces genres de concours , j’espère qu'il en aura plus dans l'avenir.

                    voici ma participation : http://codepen.io/anon/pen/jPbyzO .

                    -
                    Edité par Alias kazanova 5 mai 2015 à 17:21:23

                    • Partager sur Facebook
                    • Partager sur Twitter
                    AK
                      5 mai 2015 à 17:14:44

                      Bonjour à tous,

                      Voici ma participation.

                      Bonne réception !
                      • Partager sur Facebook
                      • Partager sur Twitter
                        5 mai 2015 à 17:26:21

                        Content de voir que ça intéresse.

                        Vous avez bien été ajouté à la liste, n'hésitez pas à partager l'atelier ;) .

                        • Partager sur Facebook
                        • Partager sur Twitter
                        "Working on my five-year plan. Just need to choose a font"- Chuck Bartowski
                          5 mai 2015 à 18:48:17

                          Mon humble participation durant une petite pause :)

                          => Codepen !

                          En tout cas (je le redis ^^) j'aime beaucoup ce genre d'initiative :magicien:

                          • Partager sur Facebook
                          • Partager sur Twitter
                            5 mai 2015 à 18:57:29

                            C'est extra comme idée je vais essayer de faire quelque chose !
                            ça motive et en plus ça aides c'est vraiment génial je trouve.

                            un grand merci !

                            • Partager sur Facebook
                            • Partager sur Twitter
                            N'y a t il que dans les crematorium que l'on peut trouver de la chaleur humaine ?
                              5 mai 2015 à 19:32:05

                              Super bonne idée ce petit jeu concours.

                              J'ai hâte de voir les propositions... :-)

                              • Partager sur Facebook
                              • Partager sur Twitter

                              "Ce n'est pas parce que les choses sont difficiles que nous n'osons pas, c'est parce que nous n'osons pas qu'elles sont difficiles."

                                5 mai 2015 à 21:07:50

                                Super idée ! C'est génial de voir les créations des autres membres.

                                Voici la mienne =)

                                http://codepen.io/anon/pen/mJemNq

                                EDIT : J'ai oublié les -webkit- du coup il est optimisé pour Firefox :/

                                -
                                Edité par Tchoalien 11 mai 2015 à 21:54:11

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  6 mai 2015 à 12:30:15

                                  Bien ajoutées ;)

                                  On en est donc à 7 participations.

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  "Working on my five-year plan. Just need to choose a font"- Chuck Bartowski
                                    6 mai 2015 à 15:56:44

                                    Salut, salut !

                                    Une bonne idée, ça fait un peu d'entrainement, voici ma modeste participation.

                                    A+

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                    Anonyme
                                      6 mai 2015 à 16:38:29

                                      Y0p.!

                                      Bonjour c'est ici mon ingrédient a la sauce

                                      http://codepen.io/Eken/pen/pJjVEN/

                                      bonne journée à tous..

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        6 mai 2015 à 17:20:59

                                        Allëy http://codepen.io/MatTheCat/pen/zGvjrE

                                        Dommage que certaines images ont un bord blanc.

                                        EDIT: en fait j'en ai profité pour renforcer l'effet "mosaïque".

                                        -
                                        Edité par nightmat 6 mai 2015 à 18:24:11

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                        Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
                                          6 mai 2015 à 17:37:12

                                          nightmat a écrit:

                                          Allëy http://codepen.io/MatTheCat/pen/zGvjrE

                                          Dommage que certaines images ont un bord blanc.

                                          -
                                          Edité par nightmat il y a moins de 30s


                                          Sympathique :) ! Tu aurais pu faire en sorte que l'effet de hover sur les images de droites viennent vers la gauche, ça aurait donné un meilleur rendu peut-être. Et merci pour le tuto sur comment centrer en CSS, le coup de centrer plusieurs lignes avec la propriété line-height surtout.

                                          -
                                          Edité par Lud0v1c 6 mai 2015 à 17:38:15

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            6 mai 2015 à 18:43:51

                                            Vraiment sympa vos créations, je les ai ajoutées. On en est donc à 10 !

                                            Continuer à faire tourner ;)

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                            "Working on my five-year plan. Just need to choose a font"- Chuck Bartowski
                                              6 mai 2015 à 20:49:47

                                              @lud00 merci ^^

                                              Par contre comme le nombre d'images sur une ligne peut varier en fonction de la largeur de l'écran je ne peux pas savoir lesquelles sont "celles de droite".

                                              -
                                              Edité par nightmat 7 mai 2015 à 11:30:56

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                              Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
                                                6 mai 2015 à 22:46:40

                                                Bonsoir à tous,

                                                Toujours amusant ce genre de concours ; voici ma participation:

                                                http://jsbin.com/putele/1/edit?css,output

                                                @nightmat: J'ai honteusement repompé ta belle police Tangerine ; tu ne m'en voudras pas !

                                                (Et je trouve comme toi dommage ce filet blanc en bas des photos).

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
                                                  7 mai 2015 à 0:41:07

                                                  Pour la peine j'ai mis de l'Oxygen :p
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                  Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
                                                    7 mai 2015 à 9:50:09

                                                    Ah merci, du coup, je respire mieux ! :p
                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                    "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
                                                      7 mai 2015 à 15:28:49

                                                      Pour les votes, tu comptes faire un Pixule ? :magicien:

                                                      PS : Peut-on modifier sa création où une fois soumise on ne peut plus y toucher ?
                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        7 mai 2015 à 18:40:36

                                                        Hey :)

                                                        Pour Pixule je sais pas, d'habitude on vote sur le sujet pour pas avoir à retaper toute les candidatures et ça donne une meilleure visibilité, mais on peut y réfléchir.

                                                        Oui, on peut modifier sa création une fois soumise mais il ne faut pas oublier de me passer le nouveau lien avant la date limite ;)

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                        "Working on my five-year plan. Just need to choose a font"- Chuck Bartowski
                                                          7 mai 2015 à 22:03:31

                                                          Salut, défi relevé et que j'ai trouvé très sympa à faire, merci.

                                                          Malheureusement je n'ai pas un grand niveau en CSS, donc j'ai fais ce que j'ai pu.

                                                          Voila mon lien http://codepen.io/anon/pen/BNoOLa

                                                          -
                                                          Edité par Crazy_turtle 7 mai 2015 à 22:03:53

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            7 mai 2015 à 23:58:43

                                                            Salut à tous,

                                                            J'ai relevé le défi en essayant de réalisé un truc sympa, à vous de juger... ;)

                                                            http://codepen.io/anon/pen/OVMLEj

                                                            Bon concours à tous et merci :)

                                                            • Partager sur Facebook
                                                            • Partager sur Twitter
                                                              8 mai 2015 à 9:54:20

                                                              Hop, ajoutées !

                                                              Merci de vos participations et continuez à faire tourner :)

                                                              • Partager sur Facebook
                                                              • Partager sur Twitter
                                                              "Working on my five-year plan. Just need to choose a font"- Chuck Bartowski

                                                              [Atelier] Créez votre galerie

                                                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                              • Editeur
                                                              • Markdown