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. 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. Une division, des paragraphes pour le contenu, et un lien pour l'action, nous n'aurons besoin de rien de plus ici. Styles de base Les styles proposés ici ont été mis à jour récemment pour correspondre au support navigateur. Passons à notre code CSS. Et voilà !
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. D'ergonomie : le graphique généré en CSS ne sera, par exemple, pas copiable avec la même facilité qu'une image HTML. Il peut donc être nécessaire, selon le contexte, d'utiliser une image HTML de préférence à cette technique CSS. Le code HTML Pour ce faire, voici un exemple de structure HTML : Mise en forme CSS Réalisation de la barre
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
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. Les spécifications des CSS 3 sont découpées en modules. 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 Exemples concrets
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 !
Quelques idées d’animations simples en CSS3 avec la propriété transition Depuis l’arrivée des animations en CSS sur les différents navigateurs du marché, de nouvelles possibilités sont offertes aux webdesigners. En comptant certaines propriétés de mise en style déjà reconnues par la plupart d’entre eux depuis des mois, il est facile d’imaginer de petites animations pour agrémenter vos sites et offrir une meilleure expérience utilisateur à vos visiteurs. Vous trouverez sur cette page de démonstration d’animations en CSS3, quelques exemples d’animations que je vais vous décrire ici, mais il n’y a rien de bien sorcier, il suffit de trouver l’idée. Les animations en CSS3 La base Dans un premier temps, lorsque vous devez animer un élément, il faut préciser dans quelles conditions (les paramètres) grâce à la propriété raccourcie transition de CSS3. Avec cette déclaration vous prévoyez une animation sur all pour une durée d’animation de 0,7 secondes sur un effet ease-out. Voici la structure de base que j’utilise : L’effet zoom L’effet de décollage La base L’animation