Transitions CSS3 Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript. Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) La spécification est le document qui définit de manière claire, précise et univoque le langage. La spécification relative au module est disponible à l'adresse suivante : Remarque : Les moteurs récents implémentent la spécification. Principe de base Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché : soit via une pseudo-classe telles que :hover, :focus ou :active soit via JavaScript La ou les propriété(s) à animer La durée de l'animation Exemples concrets
Slideshow en CSS3 Beaucoup de Webdesigners en rêvent : utiliser les CSS plutôt que le JavaScript ou le Flash pour animer leur page web. Ce rêve devient petit à petit concret avec les nouvelles implémentations des modules CSS en cours de travail (Working Draft), notamment CSS3 Animations. Celui-ci équipé des keyframes devient fort intéressant pour un contrôle avancé des animations. Nous verrons donc comment utiliser cette nouveauté, mais aussi comment combiner intelligemment la pseudo-classe target pour réaliser un slideshow. Présentation et compatibilité Cette partie du tutoriel va légèrement reprendre le contenu d'une publication d'Antoine Cailliau, Tutoriel sur les Transitions CSS3, que je vous conseille de lire au préalable. Ce tutoriel repose sur les spécifications du W3C concernant la pseudo-classe target du module "Selectors Level 3 (:target)" passée il y a peu en W3C Recommandation et sur le module "CSS Animations Module Level 3" actuellement en Working Draft. La pseudo-classe target Voir l'exemple
Créer un volet coulissant en CSS3 avec :target et transition Alors que CSS3 continue son chemin dans les validations, les réécritures et la prise en charge par les navigateurs, il y a des choses qui commencent à être plutôt bien implémentées par la plupart de ces derniers. La pseudo classe :target et la propriété transition - que nous avons déjà mis à l'épreuve dans ce long tutoriel sur la création d'un slideshow en CSS3 - vont être nos armes pour ce tutoriel. Qu'allons-nous produire ? Le but de ce tutoriel est de créer un volet caché dans un coin de la page que nous allons pouvoir révéler en cliquant sur un lien. Dans un premier temps nous allons juste nous charger de révéler le volet, nous verrons comment faire pour replacer notre volet à son état initial dans un second temps. la démonstration Structure de base Il va nous falloir une structure HTML (vous vous en doutiez, j'imagine). <div id="volet"><p>Lorem Elsass ipsum réchime amet sed bissame so libero. Styles de base Passons à notre code CSS. la démonstration Un peu plus de HTML Un peu plus de CSS
Des statistiques graphiques grâce aux CSS Fans des statistiques en tout genre, mais plutôt fainéants en ce qui concerne leur réalisation picturale, voici une solution basée sur les feuilles de style CSS pour mettre en valeur de façon élégante et simple diverses données à présenter. Avertissement Cette technique exploitant CSS est à la frontière entre présentation et génération d'un pseudo-contenu, elle rencontre cependant des limites : D'accessibilité : elle peut, selon le contexte où se trouvent les données chiffrées, invalider le critère d'accessibilité WCAG1.0 de niveau AAA 14.2 qui préconise l'utilisation d'images de contenu en complément du contenu textuel afin d'en faciliter la compréhension. Il peut donc être nécessaire, selon le contexte, d'utiliser une image HTML de préférence à cette technique CSS. Cette technique est proposée surtout lorsque vous n'avez pas de moyen technique de réaliser un complément graphique illustrant vos données brutes. Le code HTML Pour ce faire, voici un exemple de structure HTML :
Un design fluide avec trois «colonnes», grâce au positionnement flottant Beaucoup de sites web présentent une mise en page sur trois colonnes, avec une colonne centrale de contenu et des colonnes latérales. Ce tutoriel très complet montre comment on peut utiliser les flottants pour réaliser ce type de mise en page, en largeur fixe ou fluide. Navigation Que cherchons-nous à réaliser ? La plupart des sites web actuels utilisent une mise en page en « colonnes », c'est à dire avec des blocs horizontalement côte-à-côte. Dans ce tutoriel, nous nous pencherons sur le cas d'une mise en page en trois colonnes. Un des moyens pour obtenir ce résultat est d'utiliser un tableau (élément HTML table), avec trois cellules. L'utilisation d'un tableau de mise en page est par contre un moyen qui offre peu de souplesse pour la mise en page, et qui pousse souvent à abuser des tableaux pour réaliser une mise en page complète, avec des conséquences souvent néfastes sur l'accessibilité des contenus d'un site. Mise en place des trois « colonnes » Trois blocs de contenu en HTML
Adapter une légende à la largeur de l'image Comment réaliser un bloc d'illustration avec une image et une légende qui respecterait les deux critères suivants: premièrement, le bloc doit s'adapter à la largeur de l'image; deuxièmement, le texte donné en légende ne doit jamais dépasser l'image en largeur, et passera sur plusieurs lignes si nécessaire. La solution de facilité serait de figer la largeur du bloc et de travailler toujours avec des images de mêmes dimensions. Mais les CSS nous permettent de faire preuve d'un peu plus de subtilité. Je rappelle notre énigme: nous souhaitons créer un bloc d'illustration composé d'une image de largeur variable et d'un texte de légende le longueur variable. La réponse réside dans l'utilisation d'un rendu de type «tableau». — Hein? — Allons, pas d'affolement! L'astuce est la suivante: le comportement que nous souhaitons obtenir correspond à une propriété des tableaux. Pour utiliser un rendu de tableau, donc, deux solutions: Un bloc d'illustration simple Lapsana apogonoides, © Junichiro Aoyama
La transparence de couleur avec RGBa en CSS3 Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa. Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML. Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement. De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc. Voici une illustration du principe de transparence de la couche Alpha (RGBa) (Voir le résultat (RGBa) sur votre navigateur) : Principe de la notation RGBa <div><h1>Joli titre</h1></div>
Les ombrages en CSS3 Grâce à des propriétés telles que box-shadow, text-shadow et border-colors, les feuilles de style offrent la possibilité de créer des ombrages sur les différents éléments de votre page sans nécessiter d'image décorative et de découpes intempestives. Tout n'est pas rose puisque certains navigateurs à la traîne ne reconnaissent pas encore ces différentes propriétés et nécessitent des adaptations personnalisées. Faisons le tour du propriétaire... Box-shadow La propriété CSS box-shadow a été incluse dans le module "borders" de CSS3 et permet de générer une ombre portée sur n'importe quel élément HTML. Parmi les différentes valeurs utilisables, il est possible d'indiquer le décalage vertical et horizontal ainsi que la force du dégradé. En voici une illustration (Voir le résultat sur votre navigateur) : Syntaxe Compatibilité et utilisation concrète Seuls les navigateurs modernes, reconnaissent la propriété box-shadow. Adaptation pour Internet Explorer <9 Le filtre Shadow Le filtre Glow La syntaxe :
Créer des coins arrondis en CSS et sans images Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même. Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables afin de dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible. C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles. Simple et approprié : border-radius Exemple : Et c'est tout !
CSS3 Shadows CSS3 nous apporte des brides du côté obscur de la force en proposant de gérer des ombres diverses et variées directement depuis votre feuille de styles : blocs et textes sont concernés avec également la combinaison de plusieurs ombrages pour obtenir des effets avancés. Les ombres portées prennent aujourd’hui une place importante dans le web design et permettent la mise en exergue d’éléments importants, ou l’ajout d’une touche de profondeur dans vos graphismes. Il est possible de dire adieu aux images superflues uniquement destinées à la réalisation d’ombres portées ; adieu à la soupe de <div>, <span>, et autres structures en tableau pour réaliser des effets graphiques riches. Deux types d’ombres existent en CSS : les box-shadow, les ombres ajoutées aux éléments de type bloc, les text-shadow, les ombres ajoutées au contenu textuel. Il est évident, comme tout effet graphique, que l’utilisation des ombres doit être faite avec parcimonie et ne pas gêner l'utilisateur. Syntaxe de box-shadow
Arrière-plans avec CSS3 Backgrounds La propriété CSS background-size spécifie la taille de l'image dans l'arrière plan. Syntaxe background-size: x y; x détermine la dimension horizontale (pixels, em, auto, pourcentage %, etc.), y détermine la dimension verticale (pixels, em, auto, pourcentage %, etc.) Valeurs possibles Dimensions : par exemple "px" ou "%" : précise la hauteur ou la largeur de l'image. Fond qui occupe tout l'espace de l'élément Code source : Fond qui occupe 30% de la largeur du bloc avec une répétition. Démonstrations "Full-Background" sans déformation Avec la valeur background-size: cover, l'arrière-plan "couvre" au mieux tout le fond. Un tutoriel expliquant plus en détails cette technique (entre autres) : Créer un arrière-plan extensible intelligent Démonstrations Prise en charge Le préfixe -moz-, -webkit-, -ms- ou -o- pourra être requis pour les navigateurs utilisant des pré-versions de cette propriété.
Timing des animations et des transitions en CSS3 L'arrivée de CSS3 il y a quelques années a pour plusieurs d'entre nous grandement révolutionné la manière dont nous intégrions un site Web. D'abord, ce furent les propriétés purement graphiques (coins arrondis, ombres portées) qui frayèrent leur chemin jusqu'en mode production. Ces propriétés étaient les mieux supportées des différents navigateurs, et elles étaient facilement imitables sur les plus anciens grâce aux outils à notre disposition (Par exemple: Css3Pie, Selectivizr, Modernizr, etc). Même la tâche redondante consistant à préfixer nos propriétés CSS3 est aujourd'hui facilitée avec Prefixr et PrefixFree. Aujourd'hui, l'étendue des possibilités auxquelles a accès un intégrateur est assez impressionnante. Le sujet des transitions et des animations a déjà été traité par maints auteurs. Avant de commencer, veuillez noter que le terme de transition s'appliquera aussi bien au module transition CSS3 qu'aux effets de timing des animations. Quelques Références Transitions: Animations:
Alternative CSS3 pour IE Alternative CSS3 pour IE Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 3 230 fois. CSS3 est un tel changement pour la construction de page Web et de designs ergonomiques que son apport sur les navigateurs modernes ne cessent d’être retranscrit en JavaScript sur les (le ?) Performant est peut-être un gros mot ici, en effet il s’agit pour cette méthode de passer par un fichier .htc qui est exécuté à chaque fois que l’on fait un appel au fichier, à savoir donc, à chaque élément stylé grâce à CSS3 et que l’on souhaite voir apparaitre sous IE. Les plus Les moins La nature même de cette solution (.htc) qui est, à ma connaissance, un programme JavaScript exécuté à chaque occurrence de l’appel du fichier.Certains bogues rencontrés lors de l’utilisation de la bibliothèque jQuery en production (sous IE), des affichages qui partent en cacahuètes, des éléments qui disparaissent. Une solution à tester donc. Bonux Bonne application !