Lorsque je ne sais pas quoi faire, c’est à dire rarement, je fais mijoter ce que j’ai vu, lu ou entendu dans la journée afin de me préparer un bon petit plat. Une nuit, alors que j’allais me coucher, je me suis demandé comment utiliser de manière intelligente (et surtout autrement qu’attendue) la pseudo-classe target.

A quoi sert-elle ?

Je ne vais pas m’attarder sur cette pseudo-classe, voici une explication de son utilité première :
Découvrez la pseudo classe target

Et tu en as fait quoi ?

Déjà présenté dans un tutoriel pour le magazine Webdesign HS n°5, voici la page sur laquelle j’ai créer un Webdesign intégralement en CSS3 sur une base HTML5.
HTML5 et CSS3
N’essayez surtout pas d’ouvrir la page sous IE, cela ne fonctionnera pas. J’ai volontairement supprimé tous les fichiers supplémentaires afin d’alléger le dossier et surtout pour éviter de léser ceux qui auraient acheté le magazine.

Ce design comporte un petit slideshow sans javascript, géré uniquement grâce à la pseudo-classe target et aux changements apportés aux éléments enfants de l’élément targeté. Sans être devins vous aurez rapidement compris qu’il va y avoir de jolies imbrications.

Regardez le code par vous-même (vers la ligne 345 de la feuille de styles), je vous laisse le lien de la page :
Webdesign et slideshow en CSS3

Pour le HTML rien de bien compliqué, à chaque « étape » supplémentaire pour le slideshow on rajoute une imbrication de div et liens de contrôle. De quoi se taper une divite aigüe !
Certes, cela peut rapidement amener à un grand n’importe quoi d’éléments, mais pour les fans de PHP il y a des solutions. Et puis ce ne sont que des tests !

Un slideshow à défilement automatique

Comme j’ai entendu parlé des keyframes quelques jours après, je me suis décidé à voir comment apporter une modification à mon slideshow géré au clic. Je souhaitais combiner le contrôle au clic et le défilement automatique, cependant l’un ne va (pour le moment ?) pas avec l’autre, en tout cas dans mes essais.

J’ai donc élaboré cette seconde version qui n’aura d’intérêt pour le moment que sous Chrome et Safari, les seuls à gérer les Keyframes à ma connaissance.
L’utilisation de cette technique d’animation se rapproche fortement de l’interpolation de mouvement sous Flash. D’une image-clef à l’autre l’animation sera automatiquement gérée (déplacement, opacité, rotation, etc. tout ce qui a une unité a priori).

Ici je prévois simplement un déplacement d’un bloc positionné en absolu. Il me suffit donc de changer à chaque image-clef la valeur de left.
Vous verrez cela à la ligne 213 du fichier CSS lié à cette page :
Slideshow automatique en CSS3

J’essaye prochainement de vous pondre un tutoriel sur cette dernière utilisation des animations en CSS3.
Mais je ne vous promets rien 😉

Et sinon ?

Sinon ? Je vous ai pondu un petit truc il y a une heure pour regrouper mes tests, c’est ici :
TryToTry

A la prochaine !