Créer un slider en pure CSS3 / HTML5 pour WordPress

HTML5 et CSS3 ne sont pas encore tout à fait valides et restent encore en cours de transition.

Néanmoins, je vous propose aujourd’hui un tutoriel, dont le concept nous vient de Geoffrey Crofte sur CreativeJuiz – Html5 & Css3 : Slideshow, permettant de créer un slider (diaporama) en HTML5 / CSS3 et ce, sans JavaScript. Au risque de me répéter, le slider présenté ici, n’est proposé qu’a titre expérimental afin de vous montrer les possibilités du CSS3 /HTML5. Il n’est pas conseillé de l’utiliser dans un cadre de développement cross-browser.

Démonstration en ligne / sources

Slider HTML5 / CSS3

Fichiers de démonstrations sans utilisation de jQuery.

Taille : 3,0 Ko • Hits : 8 853

Slider HTML5 / CSS3 (démo)

Démonstration en ligne du diaporama en HTML5 présenté dans ce tutoriel.

Taille : 1 024 o • Hits : 10 785

#1 – Le pattern HTML5

Ce que j’appelle le pattern, c’est tout simplement ce dont nous aurons besoin pour que notre slider fonctionne. C’est un peu la maquette HTML5 de notre slider, sans y intégrer de boucle PHP ou de query_post…

En HTML5, la plupart de vos <div> vont pouvoir être remplacé par la balise <section> – les <div> étant réservées à des blocs indéfinissables du point de vue sémantique. Ensuite, nous mettrons nos slides dans une balise <figure> qui permet de mettre en exergue l’utilisation d’une image et de sa légende (ici, le contenu abrégé) ; toujours d’un point de vue référencement.

<section id="slideshow">
	<div class="container">
		<div class="c_slider"></div>
		<div class="slider">
			<a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 1</figcaption>
			</figure></a>
			<a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 2</figcaption>
			</figure></a>
			<a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 3</figcaption>
			</figure></a>
			<a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 4</figcaption>
			</figure></a>
		</div>
	</div>
</section>

Voici la base de notre slider. J’utilise le site Fakeimg pour générer de fausses images, mais libre à vous de mettre vos images pour autant qu’elle respecte le format. Vous remarquerez que pour une question d’optimisation, je n’utilise pas de liste. Tout simplement, parce que ça ne me sert à rien… A ce code, nous ajouterons une timeline.

<section id="slideshow">
	<div class="container">
		<div class="c_slider"></div>
		<div class="slider">
			<a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 1</figcaption>
			</figure></a><!--
			--><a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 2</figcaption>
			</figure></a><!--
			--><a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 3</figcaption>
			</figure></a><!--
			--><a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 4</figcaption>
			</figure></a>
		</div>
	</div>
	<span id="timeline"></span>
</section>

Astuce : afin d’éviter tout espace non désirable entre les images, je vous conseille de commenter vos indentations.

#2 – Le CSS3

Premièrement, concentrons-nous sur la mise en forme de ce slider :

#slideshow {
	position: relative;
	width: 640px;
	height: 310px;
	padding: 15px;
	border: 1px solid #ddd;
	margin: 0 auto 2em;
	background: #FFF;
	background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	/*-- CSS3 --*/
	-webkit-border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;

	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
/*-- Ombrage CSS3 --*/
#slideshow:before,	
#slideshow:after {	
	position: absolute;	 
	bottom:16px;  
	z-index: -10;  
	width: 50%;	 
	height: 20px;  
	content: " ";  
	background: rgba(0,0,0,0.1);

	-webkit-border-radius: 50%;	 
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	-moz-border-radius: 50%;  
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);  
	border-radius: 50%;	 
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);	 
}  
#slideshow:before {	 
	left:0;	 
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg); 
	transform: rotate(-4deg); 
}  
#slideshow:after {	
	right:0;  
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg); 
	transform: rotate(4deg);  
}

Grâce à ce bout de code CSS, vous pouvez d’ores et déjà voir le container du slider prendre forme. Évidement, nous n’en resterons pas là. Nous allons gérer les débordement, les bordures, la taille totale du slider (taille = taille des slides x nombre de slides = 400%) :

#slideshow .container {	 
	position:relative;	
	width: 640px;  
	height: 310px;	
	overflow: hidden;  
}  
#slideshow .container:after {  
	position:absolute;	
	bottom: 0; left:0;	
	content: " ";  
	width: 100%;  
	height: 1px;  
	background: #999;  
}  
#slideshow .slider {  
	position: absolute;	 
	left:0; top:0;	
	width: 400%;  
	height: 310px;	
}  
#slideshow figure {	 
	position:relative;	
	display:inline-block;  
	padding:0; margin:0;  
}
#slideshow figure:after {  
	position: absolute;	 
	display:block;	
	content: " ";  
	top:0; left:0;	
	width: 100%; height: 100%;	
	-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	-moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}

Vous pouvez voir que notre container à meilleur allure et que nos images sont masquées. Ensuite, nous allons nous occuper de nos légendes <figcaption> qui sont pour l’instant masquées également :

#slideshow figcaption {  
    position:absolute;  
    left:0; right:0; bottom: 5px;  
    padding: 20px;  
    margin:0;  
    border-top: 1px solid rgb(225,225,225);  
    text-align:center;  
    letter-spacing: 0.05em;  
    word-spacing: 0.05em;  
    font-family: Georgia, Times, serif;  
    background: #fff;  
    background: rgba(255,255,255,0.7);  
    color: #555;  
    text-shadow: -1px -1px 0 rgba(255,255,255,0.3);  
}

Vous devriez avoir quelque chose dans ce goût là :

#3 – L’animation

Pour la phase animation, il est nécessaire de se poser quelques question :

Combien de temps nécessaire à la lecture du slide ?
Combien de temps va durer la transition ?
Combien ai-je de slides ?

C’est questions sont nécessaire car elles vont nous permettre de calculer notre temps total, notre temps d’animation, et notre temps de lecture.

En ayant ces valeurs, nous allons fixer les keyframes pour animer nos slides :

@-webkit-keyframes slider {  
    0%, 20%, 100%   { left: 0 }  
    25%, 45%        { left: -100% }  
    50%, 70%        { left: -200% }  
    75%, 95%        { left: -300% }  
}

@-moz-keyframes slider {  
    0%, 20%, 100%   { left: 0 }  
    25%, 45%        { left: -100% }  
    50%, 70%        { left: -200% }  
    75%, 95%        { left: -300% }  
}

@keyframes slider {  
    0%, 20%, 100%   { left: 0 }  
    25%, 45%        { left: -100% }  
    50%, 70%        { left: -200% }  
    75%, 95%        { left: -300% }  
}

En créant ces keyframes, je boucle comme suit :

A 0% du déroulement de l’animation, le slider, qui je vous le rappelle est égale à 400% de la taille d’un slide, n’est pas décalé ;
Entre 20 et 25%, mon animation s’exécute ;
A 25%, c’est-à-dire à 1/4 du déroulement de notre animation, je décale “slider” de -100% ;
Entre 45 et 50%, mon animation s’exécute ;
A 50%, je décale de 200% ;
Entre 70 et 75%, mon animation s’exécute ;
A 75%, je décale de 300% ;
Entre 95 et 100%, mon animation s’exécute ;
A 100%, je revient à 0 de décalage ;

Maintenant que nos keyframes sont fixées, nous allons déclarer ce que constitue l’animation slider. Retournez plus haut dans votre code, cherchez #slideshow .slider et ajoutez ceci :

#slideshow .slider {  
    /* ... avec la propriété animation */  
    -webkit-animation: slider 32s infinite; 
    -moz-animation: slider 32s infinite; 
    animation: slider 32s infinite;  
}

En déclarant ceci, je donne à l’animation slider, un timer de 32 secondes… 32/4 => 8 secondes pour la lecture et l’animation. l’animation se déroule sur 5% du temps total, c’est-à-dire 1,6 secondes… Donc nos slides sont affichées en 6,4 secondes. Un peu de mathématiques, ça fait jamais de tort ! 🙂

Allez-y retester votre slider…. Et oui ça marche, vous en doutiez ?

Nous allons maintenant faire de même avec notre fameuse timeline…

Notre animation

#slideshow .slider {  
    /* ... avec la propriété animation */  
    -webkit-animation: slider 32s infinite; 
    -moz-animation: slider 32s infinite; 
    animation: slider 32s infinite;  
}

Nos Keyframes

@-webkit-keyframes timeliner {  
    0%, 25%, 50%, 75%, 100% { width: 0;     }  
    20%, 45%, 70%, 90%      { width: 640px; }  
}
@-moz-keyframes timeliner {  
    0%, 25%, 50%, 75%, 100% { width: 0;     }  
    20%, 45%, 70%, 90%      { width: 640px; }  
}
@keyframes timeliner {  
    0%, 25%, 50%, 75%, 100% { width: 0;     }  
    20%, 45%, 70%, 90%      { width: 640px; }  
}

De la même façon que les slides, les keyframes décrivent les étapes de l’animation. Nous savons que la timeline doit être à sont maximum 4* par animation et respectivement à 20, 40, 70 et 90%; et nous définissons à 0%, le début, la fin, et fin des animations de “slide” (0, 100, 25, 50, 75%).

Avec le même procédé, nous allons définir l’animation de la légende pour chaque slide :

Nos keyframes

@-webkit-keyframes timeliner {  
    0%, 25%, 50%, 75%, 100% { width: 0;     }  
    20%, 45%, 70%, 90%      { width: 640px; }  
}
@-moz-keyframes timeliner {  
    0%, 25%, 50%, 75%, 100% { width: 0;     }  
    20%, 45%, 70%, 90%      { width: 640px; }  
}
@keyframes timeliner {  
    0%, 25%, 50%, 75%, 100% { width: 0;     }  
    20%, 45%, 70%, 90%      { width: 640px; }  
}

L’animation

#slideshow figcaption {  
    /* ... la propriété animation */  
    -webkit-animation: figcaptionner 32s infinite;
    -moz-animation: figcaptionner 32s infinite;  
    animation: figcaptionner 32s infinite;  
}

Une fois votre slider effectué, voici la méthode pour l’intégrer à votre thème wordpress. Il va falloir configurer une nouvelle boucle qui nous retournera les 4 premiers articles possédant une image. Ce pourrait bien être autre chose, si vous êtes familier avec les “query_post”, vous pourrez trouver moult utilités à ce slider.

Voici notre boucle :

<section id="slideshow">
    <div>
        <div></div>
        <div>
            <?php
            query_posts('posts_per_page=4&meta_key=_thumbnail_id&meta_compare=!=&meta_value= ');
                while ( have_posts() ) : the_post(); ?><a href="<?php echo the_permalink(); ?>" title="Lire l\'article"><figure><?php the_post_thumbnail( array(640,310) ); ?><figcaption><?php the_title(); ?></figcaption></figure></a>
                <?php endwhile;
            wp_reset_query(); ?>
        </div>
    </div>
    <span id="timeline"></span>
</section>

Et voila… C’est tout. Insérer votre code CSS dans le fichier style.css et le tour est joué.

N.B : le fait de mettre notre boucle sur une seule ligne est volontaire. Voici la boucle avec indentation :

<?php
    query_posts('posts_per_page=4&meta_key=_thumbnail_id&meta_compare=!=&meta_value= ');
    while ( have_posts() ) : the_post(); ?>
        <a href="<?php echo the_permalink(); ?>" title="Lire l\'article">
            <figure>
                <?php the_post_thumbnail( array(640,310) ); ?>
               <figcaption><?php the_title(); ?></figcaption>
            </figure>
        </a>
    <?php endwhile;
    wp_reset_query();
?>

Vos images seront décalées si vous copiez ce code.

Si vous m’avez suivi jusqu’ici vous savez désormais coder un diaporama en HTML5 / CSS3 pour WordPress !

Christopher Hennuyez

21 mai 20136 décembre 2022Mis à jour il y a 2 jours 34 commentaires

Par Christopher Hennuyez

Christopher, 29 ans. Je suis développeur et intégrateur Web ayant pour spécialisation les CMS (Content Management System) dont WordPress. J'ai commencé à utiliser WordPress, il y a plus de 9 ans, pour un projet personnel. Le système m'a tellement séduit que j'en ai fait mon passe-temps.

34 commentaires

Malika - Il y a 7 ans
Bonjour
Je trouve le tutoriel super bien, je ‘en sert tout en gardant la licence, juste je veux ajouter dans chaque image slide un lien hypertexte mais j’arrive pas a le faire ce n’est pas par ce que je ne sais pas non, mais je perd de la qualité du slide s’il vous plait comment arriver a ça? Merci beaucoup/

Répondre
Lena - Il y a 7 ans
C’est super, seulement sur mon site j’ai besoin de mettre plus que 4 photos, quelle partie du code dois-je modifier pour pouvoir insérer au moins 10 photos dans ce slide?

Répondre
bricfal1g - Il y a 8 ans
bonjour ou bonsoir

apparemment il n’y à personne sur se forum, pas un seul conseil, aucune aide, merci beaucoup

j’ai compris le principe et trouver la solution, je ne connaissais pas cet technique étant autodidacte, la persévérance paye toujours, les forums ne servent à rien si il n’y a pas d’entraide

Répondre
1. Aurélien Denis - Il y a 8 ans
  Bonjour,
  
  je tiens à rappeler que les contributeurs du projet WordPress Channel sont tous des bénévoles et les tutoriels fournis ici doivent servir de base de travail pour apprendre.
  
  Nous répondons dans la mesure du possible et de nos disponibilités.
  
  Si vous attendez un support rapide, passez par le formulaire de contact et nous vous proposons une intervention dans le cadre d’une prestation.
  
  Répondre
bricfal1g - Il y a 8 ans
re salut

j’ai oublier de préciser que que j’ai mit la valeur a 100% pour que la première image s’intègre parfaitement mais les autres images sont décaler et donc je ne l ai vois pas.

Répondre
bricfal1g - Il y a 8 ans
bonjours a tous,

vraiment terrible le tuto exactement se que je cherchais, tout fonctionne parfaitement en taille 640px, seulement voila je l’ai placer dans la sidebar,la div du slider est de 294×185.

je n’arrive pas a contrôler les @keyframes slider, j’ai beau regarder différents tuto traitant du sujet et rien n’y fait
je ne comprend pas a quoi correspond ces valeurs, disons que j’ai a peu près comprit que il y a un temps pour afficher l image un temps pour la laisser afficher et un autre temps pour afficher la suivante mais quand je change ces valeurs l’effet désiré ne fonctionne pas;
j’ai modifier le % et left mais rien ne s’affiche

@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -0% }
50%, 70% { left: -160% }
75%, 95% { left: -300% }

pouvez vous m’aider a comprendre comment on calcule tous ca, par ailleur dans le tuto il est question de :
je vous le rappelle est égale à 400% de la taille d’un slide, n’est pas décalé ;

comment a t’il calculer les 400% par rapport au slide de 640px

Répondre
1. Christopher HENNUYEZ - Il y a 8 ans
  4 slides * 100% => 400 %.
  
  Ne pas oubliez de commenter les espaces blancs du au retour de ligne et à l’indentation. Les espaces blancs génère du décalage.
  Les keyframes ne doivent pas être changer si tu as 4 slides. tu dois juste adapter les taille fixe dans le CSS.
  
  Répondre
ValerieJ - Il y a 8 ans
Bonjour,

Merci pour cet article, super intéressant!! Toutefois, comme une personne ayant commentée avant moi, j’ai également un problème avec les images. Seule la première apparaît correctement. Savez-vous ce qui pourrait expliquer cela?

Merci!

Répondre
Webbie Nat - Il y a 8 ans
Bonjour,

je suis super bluffée car j’ai presque réussi en suivant votre tuto; mais pourquoi avoir choisi un query_post au lieu d’une image pour l’exemple? ça m’aurait permis d’aller au bout 😉

merci

Répondre
crcgtpc - Il y a 8 ans
Bonjour !

J’essaye d’utiliser ce tutoriel pour réaliser le slider que vous proposez en l’intégrant dans un article de mon site. La largeur étant un peu trop importante (maximum 520 de large), j’ai procédé à des ajustements de largeur qui fonctionne mais un problème persiste : je n’ai qu’une seule image qui apparaît dans le slider (même si je renseigne plusieurs adresse pour 4 images). il s’agit de la première image.

Pourriez-vous m’indiquer la démarche à suivre ? Cela peut-il venir du CSS ou plutôt du HTML ?

Merci beacoup par avance,

Très cordialement,

E.

Répondre
Geoffrey - Il y a 8 ans
Hello,
Merci pour la mention et cette adaptation à WordPress.
Bonne continuation.

Répondre
Usul - Il y a 9 ans
Bonjour,
très beau slider, merci pour ce travail.
Je me casse le tête pour insérer plusieurs images (11 en tout) mais je n’y arrive pas.
S’il vous plaît, voulez-vous m’aider ?
Merci.

Répondre
houda - Il y a 9 ans
Aurélien Denis merci bcp pour l article , je me demande est ce que j’ai le droit d’utiliser ton slider dans un projet qu je peux commercialiser merci de me répondre .
bon courage pour la suite

Répondre
1. Aurélien Denis - Il y a 9 ans
  Je laisse le soin à Christopher de te répondre, c’est lui l’auteur du tutoriel. 😉
  
  Répondre
  1. houda - Il y a 9 ans
    Merci 😉
    
    Répondre
2. Christopher Hennuyez auteur de l’article - Il y a 9 ans
  Bonjour,
  
  Vous pouvez disposer de ce tuto comme bon vous semble.
  Seul condition, citer tout de même la source dans votre code.
  
  Je ne suis par contre pas responsable des dégâts encourus dans la mise en page du site de votre client si votre intégration se passe mal.
  
  Répondre
  1. houda - Il y a 9 ans
    Merci bcp Christopher 🙂
    
    Répondre
Amine - Il y a 9 ans
d’abord je te remercie pour ce bout de code interessant , par contre j’aimerais savoir ce que je devrais ajouter ou modifier pour le slider repart a zero , c-a-d apres le slider 4 il passe directement au slider 1 et non pas cet effet de marche-arriere affiche’ actuellement
. Merci d’avance 🙂

Répondre
lenou71 - Il y a 9 ans
Merci pour ce code vraiment sympa. J’ai essayé et tout fonctionne à merveille.
Est-il possible d’ajouter le passage manuel d’une slide à l’autre ? Et peut-on ajouter des vignettes pour savoir où on en est dans le diaporama ?

Répondre
zoubir - Il y a 9 ans
Avant tout je veux vous remercier pour ce tres bon travail, en occurrence j’ai essayé d’adapter le script pour une résolution de 900 x 420 mais sans sucés , merci de m’aider à trouver une solution !

Répondre
David - Il y a 9 ans
pourquoi toujours vouloir se passer de javascript? il ne m’a jamais posé problème et il est indispensable à tout site internet donc autant s’en servir, c’est comme les animations, tout le monde veut les réaliser en css3 alors qu’en javascript on est sur que tout les navigateurs le prendrons bien en compte 😉

Répondre
1. Aurélien Denis - Il y a 9 ans
  Ce tutoriel a bien évidemment un côté expérimental. Mais le recours au CSS3 au lieu de JavaScript est de plus en plus fréquent vu les navigateurs le gèrent de mieux en mieux et que les gens finissent par mettre à jour eux aussi. Autant avoir recours à des technologies gérées nativement plutôt qu’à des bout de JS (mais je n’ai rien contre jQuery et cie). 😉
  
  Répondre
  1. Nanto - Il y a 3 ans
    Mais avec JavaScript, on peut adapter ça selon le nombre d’images du slider, donc en particulier lorsqu’on utilise des CMS, où le client sera amené à faire des changements, c’est dommage de le restreindre “bêtement” à avoir un nombre d’images fixes, non ?
    
    Répondre
    1. Aurélien Denis - Il y a 3 ans
      Un système de diaporama moderne dispose bien évidemment d’une gestion en back-office via un champ de type galerie. L’utilisateur glisse / dépose les images et le développeur peut les récupérer en PHP. Le CSS et le JavaScript sont là pour gérer les styles et les animations si besoin.
      
      Répondre
Michel Jarrige - Il y a 9 ans
Bonjour,

Étant en train de tester Twenty Thirtteen, votre article m’a vivement intéressé.
Je ne suis pas un spécialiste mais je suis arrivé à ce résultat : http://www.test.blog-csnd.fr/slider-css3-html5/
Par contre impossible d’afficher correctement les effets 3D de décoration du cadre, donc j’ai simplifié.
Merci de votre aide précieuse.
Cordialement.

Répondre
1. Christopher Hennuyez auteur de l’article - Il y a 9 ans
  Ahh, c’est pas mal. Parcontre, je ne comprend pas avec les styles d’ombrages… Si l’animation fonctionne. A priori, les effet d’ombres également.
  
  Répondre
  1. Michel Jarrige - Il y a 9 ans
    Bonjour Christopher,
    Moi non plus mais je cherche… Pour l’instant, j’ai supprimé tous les effets d’ombrage. Les boutons Play/Pause fonctionnent mais j’ai de la peine avec les boutons de commande sous le slider. Bon on avance…
    Cordialement
    
    Répondre
Willy - Il y a 10 ans
Pareil, j’aurais bien aimé voir un demo pour illustrer ton article 🙂

Tu pourrais aussi pousser le système (sans problème de compatibilité) en utilisant des labels et des input:checkbox pour faire un système de pager qui désactives l’animation en boucle et permet de faire le focus sur une des image.

Répondre
1. Christopher Hennuyez auteur de l’article - Il y a 10 ans
  C’est au menu (si je puis dire). Je ferais un article bonux… Mais pour l’instant j’ai quelques soucis de compatibilité avec les pseudo-classes before et after. J’ai bien intégrer les boutons play/pause. les pastilles de sélections et les flèches gauche/droite me pose quelques problèmes… Bien retord.
  
  Répondre
Christopher Hennuyez auteur de l’article - Il y a 10 ans
@julio : Si c’est bien préfixé comme je l’ai fait. Mozilla dernières versions, Chrome dernières versions, IE à partir de la version 10. Je te fais fis des OS, je n’ai pas testé…
Évidement, ce n’ai pas cross-browser, c’est surtout les propriétés CSS3 d’animations qui doivent être gérées.
Je vais joindre une démo HTML5/CSS3 après… Normalement, l’article n’était pas supposé apparaitre avant fin de semaine. Aurélien travaille plus vite que moi ^^

@tweetpressfr : On peut faire une rétro-compatibilité, mais ça reviendrait à utiliser du js… Donc au final, aucun intérêt. Sinon, effectivement, j’ai 2 ans… J’ai voulu certainement corriger mon age, mais je dû mal le taper… Ça fait plus d’un an que j’écris pour wpchannel quand même.

Par ce tuto, je voulais montrer ce qu’il était possible de faire en CSS3/HTML5. C’est un exemple parmi tant d’autre. Dés que les utilisateurs auront compris comment tout ça fonctionne, on risque de voir émerger pas mal de truc bien sympa…. Et franchement; j’ai hâte de voir ça 🙂

Répondre
1. Aurélien Denis - Il y a 10 ans
  Oui j’étais chaud bouillant hier ! 🙂
  
  Répondre
@tweetpressfr - Il y a 10 ans
@Julio a priori les versions les plus récentes des navigateurs principaux, après pour la rétro-compatibilité c’est une autre chose.

“Christopher, 2 ans.” > précoce, bravo ! Doit y avoir une coquille dans la bio ^^

Mais, sympa, ça peut en dépanner plus d’un.

Répondre
Julio Potier - Il y a 10 ans
Hello, sympa tout ça, quel est la compatibilité avec les navigateurs ? J’aurais bien aimé voir une démo :p

Répondre
1. Geoffrey - Il y a 8 ans
  Salut Julio,
  
  La structure étant très très proche de celle de mon slideshow, je pense que cette démo est plutôt parlante pour ce qui est de la compatibilité :
  http://creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/
  
  Bonne journée 🙂
  
  Répondre

Laisser un commentaire