Partage

[Atelier] Creer votre slideshow en CSS

Atelier CSS

1 2 3 4 >>

9 juin 2016 à 8:37:56

Bienvenue a tous,

Le vacance d’été s'approche a grand pas. Et pour vous occupez , j'ai décidé de lancer cet atelier. Pour infos, j'avais lancé cet atelier, initialement sur ZdS, et ça n'a pas super cartonné.

Objectif

Il vous est demander de créer un slideshow en pur CSS. Donc vous n'aurez pas recours au JS. Si par hazard, vous savez pas ce qu'est un slidershow. C'est ça (voir figure suivante) :

N'est pas beau !

Ou bien voir mon ZdSliderSnap (bon le nom n'est pas si ...).

Squelette HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>ZdSlider</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>ZdSlider</h1>
        <section id="contenair">
          <div class="slider">
           <figure class="slider_item">
                <img src="http://www.photo-libre.fr/nature/Med/Rz_19.jpg" alt="image"/>
             <figcaption>Une goutte d'eau</figcaption>
          </figure>
            <figure class="slider_item">
                <img src="http://www.photo-libre.fr/nature/Med/Rz_14.jpg" alt="image"/>
             <figcaption>C'est froid ici !</figcaption>
          </figure>
            <figure class="slider_item">
                <img src="http://www.photo-libre.fr/nature/Med/Rz_15.jpg" alt="image"/>
             <figcaption>Wow une mouche ...</figcaption>
          </figure>
            <figure class="slider_item">
                <img src="http://www.photo-libre.fr/nature/Med/Rz_42.jpg" alt="image"/>
             <figcaption>Des tigres herbivores !?</figcaption>
          </figure>
            <figure class="slider_item">
                <img src="http://www.photo-libre.fr/nature/Med/Rz_17.jpg" alt="image"/>
             <figcaption>Ne l'embrasse surtout pas !</figcaption>
          </figure>
        </div>  
</section>
<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 consisterai à poster le lien de votre merveilleux slideshow ici. Et je vais listées votre participation dans une liste dans le premier post ( les participations seront close le 1 juillet a minuit pile ). Et dans une seconde étape se déroulera une semaine de votes, après la fermeture des participations, où n'importe qui, participant ou pas, pourra voter pour ses deux participation préférées.

Le but de ce concours est de s'amuser. Et, bien sur, aucune récompense n'est promise aux gagnants (a part un bon frimage dans les forums et des billets de concert pour Beyonce ). Alors nullement besoin d'avoir recours a des méthodes barbares (comme par exemple: tuer un participant pour l’éliminer de la compétition etc...).

Règlements

Le travail est individuel. C'est sera pour vous un moyen de progresser, alors les sources doivent être 100% de vous.
Javascript est strictement interdit ! (oui jquery aussi c'est du JS).
100% CSS pur (donc pas de framework css, ex: Bootstrap ...). Avec les proprietes de CSS3, votre slideshow ne manquera pas d’originalité !
Et un dernier point important consistant le systeme de vote, likez le slider que vous aimez. C'est aussi simple que ca .

Participants

Classé par vote :

CiprianMalaes (vote: 10)
YoshiiSenpai (vote: 9)
Dipeeh (vote: 7)
Brynamum (vote: 5)
Frogweb et Chikuma (vote: 4)

QUE LE FEU DE LA COMPÉTITION BRULE EN VOUS !

Attention : L'atelier est terminé ! Merci a vous ! Et bonne journée !

-
Edité par Mohack 10 juillet 2016 à 13:48:28

Je suis juste un débutant expérimenté. RTFM | RTFD

Benjamin Devot

9 juin 2016 à 9:27:24

Mohack a écrit:

Javascript est strictement interdit ! (oui jquery aussi c'est du JS)

Pas drôle xD

Benjamin à votre secours :p

Mohack

9 juin 2016 à 10:14:36

Benjamin Devot a écrit:

Pas drôle xD

Et oui, c'est un atelier CSS (non JS) . Tu peux facilement le faire avec la propriété animation et les @keyframes . Crois-moi c'est pas si difficile que tu le crois !

Je suis juste un débutant expérimenté. RTFM | RTFD

Benjamin Devot

9 juin 2016 à 10:15:14

C'est quoi la date de fin ?

Benjamin à votre secours :p

Mohack

9 juin 2016 à 10:22:12

Je l'ai bien mentionné dans le premier post. Mais ça se voyait pas bien alors maintenant je l'ai en gras. C'est le 20 juin que l'atelier sera close.

Je suis juste un débutant expérimenté. RTFM | RTFD

Benjamin Devot

9 juin 2016 à 10:43:18

En 11 jours c'est rapide !!!!

Benjamin à votre secours :p

Oxygen05

9 juin 2016 à 10:50:12

On peut utiliser bootstrap ? (et modifier l'html)

-
Edité par Oxygen05 9 juin 2016 à 10:50:53

Ne postez pas des codes de 200 lignes ! Personne ne se donnera la peine d'essayer d'y répondre.

Mohack

9 juin 2016 à 10:53:51

Ouais c'est vrai... Et jusqu'au 1 juillet, c'est suffisant non ? Allez je fixe la date au 1 juillet.

Je suis juste un débutant expérimenté. RTFM | RTFD

Benjamin Devot

9 juin 2016 à 10:54:56

Ouai c'est bien comme sa plus de gens participerons

moi je participe

Benjamin à votre secours :p

Mohack

9 juin 2016 à 10:59:18

Dipeeh a écrit:

On peut utiliser bootstrap ? (et modifier l'html)

Non le squelette HTML ne peut-être modifier. Mais si cet squelette ne vous convient pas, vous pouvez suggéré des modifs. Et pour bootstrap, non ! Je devrais remettre a jour le règlement x)

Je suis juste un débutant expérimenté. RTFM | RTFD

Oxygen05

9 juin 2016 à 11:04:10

Ok, dernière question (promis), on fait ce qu'on veut avec la page ? genre si on veut mettre un background, etc...

+ Ce serait pas mal de mettre la liste des participants

Ne postez pas des codes de 200 lignes ! Personne ne se donnera la peine d'essayer d'y répondre.

Mohack

9 juin 2016 à 11:09:26

Dipeeh a écrit:

on fait ce qu'on veut avec la page ?

Oui tout ce que CSS te permet ! Tu peux styliser la page comme bon te semble .

Je mettrai bien sur la liste de partitipant.

Je suis juste un débutant expérimenté. RTFM | RTFD

Frogweb

9 juin 2016 à 11:30:48

Salut,

on peux prendre le code que tu as mis en exemple ?

Question plus sérieuse, obligation que ce soit navigable avec des boutons ou autre (on en voit sur une image) ?

-
Edité par Frogweb 9 juin 2016 à 11:31:03

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Oxygen05

9 juin 2016 à 11:33:54

ah et encore une question, on est obligé de prendre tes images ou peu importe ?

PS: J'ai rajouté une div dans le code, pénalisé ?

Ne postez pas des codes de 200 lignes ! Personne ne se donnera la peine d'essayer d'y répondre.

Benjamin Devot

9 juin 2016 à 11:36:14

Ben oui t'es obliger de prendre ces images sinon tu pourras pas nous montrer les images s'afficheront pas.

Benjamin à votre secours :p

Oxygen05

9 juin 2016 à 11:38:18

Benjamin Devot a écrit:

Ben oui t'es obliger de prendre ces images sinon tu pourras pas nous montrer les images s'afficheront pas.

Je pensais en mettre d'autres mais je vais faire avec

Ne postez pas des codes de 200 lignes ! Personne ne se donnera la peine d'essayer d'y répondre.

Mohack

9 juin 2016 à 11:43:36

Frogweb a écrit:

on peux prendre le code que tu as mis en exemple ?

Oui mais modifier le car le plagiat n'est pas toléré.

Frogweb a écrit:

Question plus sérieuse, obligation que ce soit navigable avec des boutons ou autre (on en voit sur une image) ?

Non puisque le squelette que je vous ai donné ne le permet tout simplement pas.

@Dipeeh je répète encore une fois. On ne peut modifier le squelette donné !

-
Edité par Mohack 9 juin 2016 à 13:32:02

Je suis juste un débutant expérimenté. RTFM | RTFD

Frogweb

9 juin 2016 à 11:43:46

On peut changer le texte des figcation ?

Parce que "ne l'embrasse surtout pas" sur la grenouille ça me plait pas beaucoup ! :pirate: :lol:

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Benjamin Devot

9 juin 2016 à 11:45:16

Frogweb a écrit:

Parce que "ne l'embrasse surtout pas" sur la grenouille ça me plait pas beaucoup ! :pirate: :lol:

Mdr tu ma tué xD

Benjamin à votre secours :p

Mohack

9 juin 2016 à 12:12:19

Frogweb a écrit:

On peut changer le texte des figcation ? Parce que "ne l'embrasse surtout pas" sur la grenouille ça me plait pas beaucoup !

Oui puisque ça n'a trop d'impact sur le code donné . Vous savez l'atelier est ouvert a tous vos suggestions. Si vous avez des suggestions concernant le code, ne vous retenez pas ! (oui parce qu'on dirait que le squelette ne vous plait absolument pas)

Je suis juste un débutant expérimenté. RTFM | RTFD

Oxygen05

9 juin 2016 à 12:24:43

Non ça va au final, par contre ton code a pris cher :lol:

(le h1 en position absolute qui prend toute la page, ce genre de choses)

Ne postez pas des codes de 200 lignes ! Personne ne se donnera la peine d'essayer d'y répondre.

Frogweb

9 juin 2016 à 12:25:35

Mohack a écrit:

Frogweb a écrit:

On peut changer le texte des figcation ? Parce que "ne l'embrasse surtout pas" sur la grenouille ça me plait pas beaucoup !

Oui puisque ça n'a trop d'impact sur le code donné . Vous savez l'atelier est ouvert a tous vos suggestions. Si vous avez des suggestions concernant le code, ne vous retenez pas ! (oui parce qu'on dirait que le squelette ne vous plait absolument pas)

Pour moi il n'y a pas de soucis pour la structure. Il y a deux container pour les <figure>, c'est suffisant.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Frogweb

9 juin 2016 à 12:53:37

C'est embêtant les deux bordures blanches sur les images...

Et il y en a une qui n'as pas la même taille.

-
Edité par Frogweb 9 juin 2016 à 12:59:54

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Mohack

9 juin 2016 à 13:09:03

Frogweb a écrit:

C'est embêtant les deux bordures blanches sur les images... Et il y en a une qui n'as pas la même taille.

Comme je te l'ai dis, tu peux modifier les images et les figcaptions .

Je suis juste un débutant expérimenté. RTFM | RTFD

Oxygen05

9 juin 2016 à 13:14:54

perso je les ai mises à 102% de leur taille, ça résout le problème sur toutes les images

Ne postez pas des codes de 200 lignes ! Personne ne se donnera la peine d'essayer d'y répondre.

Frogweb

9 juin 2016 à 13:18:19

Dipeeh a écrit:

perso je les ai mises à 102% de leur taille, ça résout le problème sur toutes les images

Oui c'était l'astuce

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Oxygen05

9 juin 2016 à 14:21:35

Proposition : Le gagnant propose l'édition suivante sur un nouvel atelier et on tourne comme ça

Ne postez pas des codes de 200 lignes ! Personne ne se donnera la peine d'essayer d'y répondre.

Mohack

9 juin 2016 à 14:27:08

Dipeeh a écrit:

Proposition : Le gagnant propose l'édition suivante sur un nouvel atelier et on tourne comme ça

Ça a l'air bien mais pour l'instant on en est pas la. Chaque chose en son temps ! Et puis la liste des participants est vide puisque personne ne m'a donner un slideshow. J'attend toujours vos participations !

Je suis juste un débutant expérimenté. RTFM | RTFD

Frogweb

9 juin 2016 à 15:40:31

Et bien voilà, prems :

http://www.frogweb.fr/demos/slider-zero/ZdSlider.html

C'est "responsive" en plus (enfin, fluide...)

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Oxygen05

9 juin 2016 à 15:51:15

C'est responsive sauf le footer qui reste au milieu de l'écran

Nah je déconne, vraiment pas mal

Ne postez pas des codes de 200 lignes ! Personne ne se donnera la peine d'essayer d'y répondre.

1 2 3 4 >>