Créez votre slideshow en CSS

Atelier CSS

a marqué ce sujet comme résolu.

Bienvenue a tous,

Après m’être aperçus que l'atelier ne fut pas un succès, bien qu'il soit dans la Une. J'ai décidé de changer le thème par un slideshow.

Le vacance d’été s'approche a grand pas. Et pour vous occupez ,vous zestiens et zestiennes, j'ai décidé de lancer cet atelier.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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/19.jpg" alt="image"/>
             <figcaption>Une goutte d'eau</figcaption>
          </figure>
            <figure class="slider_item">
                <img src="http://www.photo-libre.fr/nature/14.jpg" alt="image"/>
             <figcaption>C'est froid ici !</figcaption>
          </figure>
            <figure class="slider_item">
                <img src="http://www.photo-libre.fr/nature/15.jpg" alt="image"/>
             <figcaption>Wow une mouche ...</figcaption>
          </figure>
            <figure class="slider_item">
                <img src="http://www.photo-libre.fr/nature/42.jpg" alt="image"/>
             <figcaption>Des tigres herbivores !?</figcaption>
          </figure>
            <figure class="slider_item">
                <img src="http://www.photo-libre.fr/nature/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 sont close). Et dans une seconde étape s'est déroulée 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 :p ). 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. Avec les proprietes de CSS3, votre slideshow ne manquerez pas d’originalité !
  • Et un dernier point important consistant le systeme de vote, il vous est seulement autorisee de voter pour deux participations.

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

Participants

  • A-312 (Unique participant… Donc vainqueur xD ! )

L'atelier est désormais fermer et donc n'est plus animé par son auteur ! Passez une bonne journée/soirée !

+4 -1

Pour une question de restriction aux participants, mais je t'avoue que j'ai pas pensé aux débutants sur ce point la. Vous aimeriez qu'on met le même HTML que celui sur l'atelier OC … Edit : Ah j'ai failli oublier ! Vous pouvez m'aider a la gestion de cet atelier SVP ?

+0 -1

Pas forcément le HTML exact de l'atelier sur OpenClassrooms, mais à mon avis c'est une bonne chose que de fournir le squelette HTML.

Quant à la seconde partie de ta question, l'équipe de communication est prête à faire le nécessaire pour communiquer sur cet atelier, mais cela demande un minimum de présence et d'investissement de ta part. Proposer un atelier, c'est plus que de faire un post de présentation, c'est aussi l'animer jusqu'à la fin.

+0 -0

Proposer un atelier, c'est plus que de faire un post de présentation, c'est aussi l'animer jusqu'à la fin.

elyppire

Bien sur. Je serais régulière présent, chaque jour, pour animer l'atelier. Mais il se pourrait que , des fois, j'ai des contraintes et que le temps me le permet. De ce fait, j'aurais aimer une aide de la part d'un staff pour mettre a jour le premier post et m'aider au fil du temps (puisque les membres n'ont pas le droit nécessaires pour faire cela).

Sans oublier qu'il règne une grande instabilité du réseau dans ma région (je ne suis pas de france). Sans aucune aide staffienne xD, je serais malheureusement obliger de ne pas lancer cet atelier ! Mais une autre personne ,plus présente, pourrait toujours le faire :). Edit : C'est bon j'ai changer d'avis. J'ouvre l'atelier !

+0 -2

On envoi son code ou ? Pour participer?

Malnux Starck

Idéalement sur un service en ligne (dabblet.com, jsfiddle.net, etc.) qui permet d'avoir une prévisualisation directe.

elyppire

Comme elyppire, viens de te le dire. Utilise un éditeur HTML/CSS en ligne (comme CodePen ). Puis poste le lien de ta galerie ici :) .

+1 -0

Bien sûr qu'on pourrait changer les consignes ! L'atelier est ouvert à tous vos suggestions. Pour ma part, j'ai voulu qu'on stylise un menu de navigation plutôt qu'une galerie (mais ça revenait un peu à la même chose). Après j'ai eu l'idée de "faire son caroussel 100% CSS3" (mais là j'ai pensé que c'était trop restreint sans js). Bref, vous proposez quoi ? :)

+0 -0

Bien que l'atelier figure dans la Une du site, il n'a pas connu le même succès que sur OC. Vu que vous êtes pour la majorité dans anciens zéros, vous avez surement vu, voir même participer, l'atelier Galerie de OC. Et une reprise de cet atelier fut une grande erreur de ma part.

Et puis le thème de la galerie ça fais un peu vu et revu… On pourrait changer cette année, non ?

jerkoco

Merci a toi jerkoco :) ! Bein voila j'ai change le thème en un slidershow. J'ai mis a jour le premier post. Par contre, on peut pas modifier le titre ?!

+0 -0

Dans quels blocs ? Ouais je voulais mettre des liens mais … C'est facultatif :) . Plutôt de me dire de mettre ca dans tels parties du code, autant me dire pourquoi je mettrais ça.

+0 -0

Dans quels blocs ? Ouais je voulais mettre des liens mais … C'est facultatif :) . Plutôt de me dire de mettre ca dans tels parties du code, autant me dire pourquoi je mettrais ça.

Mohack

Le but d'un slideshow, c'est qu'il soit cliquable et qu'il redirige vers un autre élément. Ici, tu as enlevé la moitié de l'exercice. Et comment sait-on si le slideshow est fonctionnel ?

Il ne fonctionne pas seulement si il est animé, mais aussi si il redirige sur la page quand on clique dessus.

Les images que tu as mis ont des bordures sur la droite et le bas, peux-tu choisir d'autres images ? https://unsplash.com/

Merci :)

EDIT : Tu n'as pas pris le bon lien de l'image : http://www.photo-libre.fr/nature/17.jpg

+0 -0

Le but d'un slideshow, c'est qu'il soit cliquable et qu'il redirige vers un autre élément. Ici, tu as enlevé la moitié de l'exercice. Et comment sait-on si le slideshow est fonctionnel ?

A-312

Oui t'as raison mais je pense comme même que c'est facultatif :) ! On peut comme utiliser cursor pour simuler un lien. Je ne nie pas le fait qu'un slideshow soit cliquable mais ici c'est pas si important que ça.

Les images que tu as mis ont des bordures sur la droite et le bas, peux-tu choisir d'autres images ? https://unsplash.com/

A-312

Oui j'ai vu ça. Les images et les figcations sont complètement personnalisables. 'Fin du moment qu'ils n'ont pas un impact sur le code.

EDIT : Tu n'as pas pris le bon lien de l'image : http://www.photo-libre.fr/nature/17.jpg

A-312

Merci je rectifie ça tout de suite !

+0 -0

J'ai ajoutée ta participation (premier post mis a jour). J'ai pas su quelle version prendre donc j'ai mis la version ou t'as customisé les images et les figcaptions :) .

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte