Fiche CSS : CSS pour HTML5 Généralités.

Objet de la fiche

État de la fiche

Plan de la fiche

• | Avant-propos |
• | Attributs Background |
• | Gradients (background-image) |
• | Transparences de couleurs |
• | Ombrages |
• | Coins arrondis |
• | Transitions |
• | Transformations 2D|
• | Transformations 3D |
• | Animations |
• | Filtres |
• | Colonnes multiples |
• | Redimensionnement (resize) |
• | Dimensionnement des éléments (box-sizing) |
• | pseudo-class bouton radio et cases à cocher |
• | Application au projet de site web |

Avant propos

CSS3 est l'évolution du CSS (CSS 2) que nous avons étudié précédemment.

Attributs Background

CSS3 amène de nouvelles propriétés pour les arrière-plans de façon à répondre à des besoins plus évolués, notamment le redimensionnement, le positionnement et la superposition de plusieurs images.

Propriétés

Images d'arrière plan multiples

Généralités

CSS 3 rend possible l'affichage de plusieurs images en arrière-plan, dans un même élément en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat.
Le résultat est similaire à des calques des logiciels graphiques : l'image la plus proche de la propriété (la première énumérée) sera l'image de premier plan. Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan.

Exemple

L'ordre de déclaration est important : dans l'exemple ci-après, la position "0px 10px" s'applique uniquement à la première image et "90% 10px" s'applique uniquement à la deuxième image. Si une seule propriété est spécifiée, elle sera appliquée à l'ensemble des images. De même pour la propriété repeat.

Gradients : valeurs de la propriété background-image

Le principe général est de choisir le type de dégradé (linéaire ou radial) puis les couleurs de départ et d'arrivée et, éventuellement, leurs proportions de mélange.

linear-gradient ou dégradé linéaire

Généralité

La fonction linear-gradient permet de créer un dégradé linéaire.

Syntaxe

Cette fonction prend 3 valeurs principales, dont 2 sont obligatoires.

background-image:linear-gradient([param1], param2 [param2b], param3 [param3b], param4 [param4b], param5 [param5b],...);

• param1 : la direction du dégradé (optionnel),

  Ce qui donne avec les nouvelles syntaxes

  • to bottom ( vers le bas) : le dégradé part du haut vers le bas. C'est la valeur par défaut.
  • to left ( vers la gauche) : le dégradé part de la droite vers la gauche.
  • to right ( vers la droite) : le dégradé part de la gauche vers la droite.
  • to top ( vers le haut) : le dégradé part du bas vers le haut.
  • toutes les combinaisons to left,right,bottom,top. Exemple to right left,..
  • Une valeur angulaire pour un dégradé suivant un angle (Note¹).
• param2 et param2b (Note²) : couleur de départ (param2),et pourcentage (param2b optionnel) de l’étendue de la couleur définie par le paramètre2.
• param3 et param3b (Note²) : la couleur de fin (param3),et pourcentage (param3b optionnel) de l’étendue de la couleur définie par le paramètre3.
• param4 [param4b], param5 [param5b],... : paramétrage optionel des couleurs supplémentaires dans le cas de couleurs multiples.

Note¹ : Attention à la mesure des angles façon W3C.
On tourne en sens inverse de la notation trigonométrique et le 0° en haut de l'axe vertical.

Note² : Ne rien indiquer comme proportions revient à déclarer (0% pour la couleur de départ, 100% pour la couleur de fin), ce qui donne le mélange maximum entre les deux couleurs. Le fondu atteint ses limites on déclarant 50% aux deux couleurs (white 50%, black 50%) ou toute autre quantité où le % de la couleur initiale est supérieur à celui de la couleur finale.

Exemples

Actions	Syntaxes	Résultats
Dégradé du haut vers le bas (défaut)	background-image:linear-gradient(red, yellow) ou background-image:linear-gradient(to bottom, red, yellow)
Dégradé de la gauche vers la droite	background-image:linear-gradient(to right, red, yellow)
Dégradé de la droite vers la gauche	background-image:linear-gradient(to left, red, yellow)
Dégradé du bas vers le haut	background-image:linear-gradient(to top, red, yellow)
Combinaisons (toutes le combinaisons utilisables avec top, left, right, bottom) Dégradé du coin bas droit vers le coin haut gauche.	background-image:linear-gradient(to top left , red, yellow)
Dégradé avec pourcentage.	background-image:linear-gradient(black 0%,white 100%)
	background-image:linear-gradient(black 50%,white 50%)
	background-image:linear-gradient(black 0%,white 50%)
Dégradé angulaire.	background-image:linear-gradient(20deg,black 0%,white 100%)
Couleurs multiples.	background-image:linear-gradient(20deg,red, green, blue,olive,white,black)
	background-image:linear-gradient(red 20%, green 30%, blue 40%,olive 50%,white 60%,black 70%)

Répétition d'un gradient linéaire

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

Utiliser la transparence

CSS3 gradients supporte les effets de transparence en utilisant pour les couleurs la notation rgba(c1,c2,c3,t) ou t défini le niveau de transparence.

radial-gradient ou dégradé radial

Généralité

La fonction radial-gradient permet de créer un dégradé circulaire ou elliptique.

Syntaxe

background-image:radial-gradient(param1a param1b param1c, param2a param2b, param3 param3b);

• parama1a est optionnel et précise l'étendue du dégradé dans l'élément :
  • closest-side : la taille est définie par la distance depuis le point de départ (le centre) jusqu'au côté le plus proche de la boîte qui l'entoure. C'est la valeur par défaut en l'absence du paramètre
  • closest-corner : la taille est définie par la distance depuis le point de départ (le centre) jusqu'au coin le plus proche de la boîte qui l'entoure.
  • farthest-side : la taille est définie par la distance depuis le point de départ (le centre) jusqu'au côté le plus éloigné de la boîte qui l'entoure.
  • farthest-corner : la taille est définie par la distance depuis le point de départ (le centre) jusqu'au coin le plus éloigné de la boîte qui l'entoure.
• parama1b précise la forme du dégradé et peut prendre deux valeurs : circle ou ellipse. Optionnel : par défaut la valeur sera ellipse.
• param1c (Note¹) fixe la position en x et en y du centre du dégradé circulaire par rapport à son parent. Ces valeurs peuvent s'exprimer en px, %, em ou par les positionnements génériques (top, left, right, bottom, center et leurs combinaisons). Optionnel: si ce paramètre est absent le centre sera défini à x=50%, y=50% par rapport au parent.
• parama2a param2b pour la couleur de départ (parama2a) avec son pourcentage optionnel de dégradé (param2b).
• parama3a param3b pour la couleur d'arrivée (parama3a) avec son pourcentage optionnel de dégradé (param3b).

Note¹ Syntaxe : at positionX positionY

Exemples

Actions	Syntaxes	Résultats
Dégradé circulaire de base	background-image:radial-gradient( red, blue)
Dégradé circulaire avec centre du dégradé décalé.	background-image:radial-gradient( at top right, red, blue)
Dégradé circulaire au centre avec diverses étendues de dégradé.	background-image:radial-gradient( closest-corner ellipse at center, red, blue)
	background-image:radial-gradient( farthest-side ellipse at center, red, blue)
	background-image:radial-gradient( farthest-corner ellipse at center, red, blue)
Utilisation de pourcentage de dégradé.	background-image:radial-gradient( farthest-corner ellipse at center, red 20%, blue 80%)

Répétition d'un gradient radial

background-image: repeating-radial-gradient(red, yellow 10%, green 20%);

Utiliser la transparence

CSS3 gradients supporte les effets de transparence en utilisant pour les couleurs la notation rgba(c1,c2,c3,t) ou t défini le niveau de transparence.

Transparences de couleurs

Généralités

En plus de la propriété opacity que nous avons déjà rencontrée CSS3 nous propose une autre façon de jouer avec la transparence : la notation rgba(c1,c2,c3,t). Il s'agit de la notation rgb(c1,c2,c3) (déjà vue aussi) mais avec un quatrième paramètre : le niveau de transparence appelé « canal alpha ». Ce paramètre peut prendre toutes valeurs entre 1 (complètement opaque) et 0(totalement transparent).

rgba() n’est pas une propriété CSS, mais une fonction. Elle s’utilise sur toutes les propriétés qui spécifient une couleur.
Contrairement à opacity qui rend transparent un élément et tous ses enfants, rgba() applique cette transparence uniquement à la couleur appliquée.

Exemple

background-color:rgba(0,0,0,1)

Ombrages

Box-shadow

Généralités

Cette propriété permet de réaliser des ombrages et des effets de volume ou de creux.

Syntaxe

box-shadow:ValA ValB ValC ValD ValE ValF

Les valeurs ValA ValB ValC ValD sont des valeurs exprimées en pixels ou em, ValE(couleur) et ValF sont des chaines de caractères

Bien que toutes les valeurs ne soient pas obligatoires, il est fortement souhaitable par souci de facilité de lecture et de compatibilité entre navigateurs de toutes les initiées dans l'ordre. ValF (ombrage interne) est omis s'il n'est pas souhaité.

Combinaisons

Contenus	Commentaires	Valeurs	Tests
ValA	Décalage horizontal	Requis Valeur positive pour décaler l’ombre vers la droite de l’élément, négative pour décaler vers la gauche.	box-shadow:10px 5px 10px 0px rgb(255,0,0)
ValB	Décalage vertical	Requis positive pour décaler l’ombre vers le bas de l’élément, négative pour décaler vers le haut.
ValC	Niveau de dégradé	Facultatif 0 pour une ombre sans dégradé, positif pour un niveau de dégradé plus ou moins important.
ValD	Taille de l’ombre	Facultatif pour augmenter la taille de l’ombre, négatif pour diminuer la taille de l’ombre, 0px pour l'ombrage classique défini par les 3 valeurs précédentes.
ValE	Couleur de l'ombre	Facultatif classiques en hexadécimal (exemple #ff0000 pour du rouge), rgb simple (exemple rgb(255,0,0) ou encore par le nom de la couleur(black pour noir, red pour rouge ...). Le mode rgba Note1 (variante rgb avec un paramètre supplémentaire pour gérer la transparence) convient bien à ce type de style car le 4eme paramètre permet de régler le niveau de transparence (0 transparence totale) ou d'opacité (1 opacité totale)
ValD	Ombre interne	Facultatif inset

Note¹ : Cette fonction permet de spécifier une couleur avec un alpha, afin de gérer la transparence.

Remarques : La propriété de feuille de style box-shadow css accepte aussi la valeur seule : none pour aucune ombre ou inherit pour héritage de son parent.

Générateur d'ombrage

Afin d'illustrer les diverses combinaisons possibles de la propriété box-shadow, voici un petit générateur d'ombres qui donne les effets et les informations de box-shadows relatives aux effets

Ombres multiples

Il est possible d’appliquer plusieurs ombres sur un même élément. Pour cela il suffit de les séparer par des virgules.
Le fait de pouvoir combiner différentes ombres permet de produire d’excellentes illusions de volume.

Exemple de style de l'élément ci-contre :
box-shadow: 10px 5px 10px 0px rgb(255,0,0) ,
10px 10px 5px 3px rgb(192, 192, 192) inset

Text-shadow

Généralités

Cette propriété permet de réaliser des ombrages sur des textes.

Syntaxe

text-shadow:ValA ValB ValC ValE

Les valeurs ValA ValB ValC sont des valeurs exprimées en pixels ou em, ValE (couleur) est une chaine de caractères

Bien que toutes les valeurs ne soient pas obligatoires, il est fortement souhaitable par souci de facilité de lecture et de compatibilité entre navigateurs de toutes les initiées dans l'ordre.

Combinaisons

Note¹ : Cette fonction permet de spécifier une couleur avec un alpha, afin de gérer la transparence.
rgba() n’est pas une propriété CSS, mais une fonction. Elle s’utilise sur toutes les propriétés qui spécifient une couleur.
Contrairement à opacity qui rend transparent un élément et tous ses enfants, rgba() applique cette transparence uniquement à la couleur appliquée.

Remarques : La propriété de feuille de style text-shadow css accepte la valeur seule : none pour aucune ombre ou inherit pour héritage de son parent.

Coins arrondis (border-radius)

Généralités

La propriété border-radius (de radius => rayon) offre la possibilité d'arrondir les angles des éléments de type block.

Syntaxe

la propriété border-radius est suivie d'une seule valeur	cette valeur est appliquée à tous les coins de l'élément. border-radius:10px
la propriété border-radius est suivie de 2 valeurs	la première valeur est appliquée aux coins haut gauche et bas droit, et la seconde aux coins haut droit et bas gauche (sens des aiguilles d'une montre, avec départ haut gauche et alternativement). border-radius:10px 0px
la propriété border-radius est suivie de 3 valeurs	la première valeur est appliquée au coin haut gauche, la seconde au coin haut droit, la troisième au coin bas droit et enfin la 2eme valeur par défaut pour le coin bas gauche (sens des aiguilles d'une montre, avec départ haut gauche et alternativement). border-radius:10px 0px 25px
la propriété border-radius est suivie de 4 valeurs	chaque valeur définie un coin (sens horaire). border-radius:10px 0px 25px 5px
Il existe des "sous propriétés" qui permettent d'appliquer l'arrondi directement sur un coin précis : border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius	border-bottom-left-radius:15px

Des coins asymétriques

Le principe reste le même que d'habitude dans l'ordre de déclaration des valeurs, nous partons de l'angle haut gauche pour finir à l'angle bas gauche en faisant le tour de la boîte. Tout ce qui se trouve à gauche du séparateur de valeurs (le slash) traite les dimensions horizontales (H) des arrondis, ce qui se trouve à droite traite les dimensions verticales (V).
Voici un exemple border-radius: 40px 100px / 30px 50px;

Transitions

Généralités

Une transition consiste à animer un changement de valeur d’une propriété d’une valeur A à une valeur B, comme par exemple le changement de couleur d’un élément de la couleur rouge à la couleur verte.

Déclenchement

La transition débute lorsqu'un évènement est déclenché. Il peut s'agir de pseudo-classes comme ":hover" (déclencheur le plus fréquent) ou ":active" ou bien d'un déclenchement par javascript.

Propriétés

Notes

note¹ Les propriétés suivantes sont animables : background, transform, left, top, right, bottom, border, height, width, margin, padding, opacity, color, font-size, text-indent, vertical-align, visibility, word-spacing, z-index .

• background-color, background-position
• border-bottom-color, border-left-color, border-right-color, border-top-color, border-bottom-width, border-left-width, border-right-width, border-top-width, border-spacing
• margin-bottom, margin-left, margin-right, margin-top
• max-height, max-width, min-height, min-width
• outline-color, outline-width
• padding-bottom, padding-left, padding-right, padding-top

note² Courbes de Bézier

Généralités :

Dans un repère orthonormé les quatre points P0, P1, P2, P3 et P4 définissent une courbe de Bézier. La courbe se trace en partant du point P0 (coordonnées 0,0), en se dirigeant vers P1 et en arrivant au point P3 (coordonnées 1,1) selon la direction P2-P3. En général, la courbe ne passe ni par P1 ni par P2 : ces points sont simplement là pour donner une information de direction. La distance entre P0 et P1 détermine la « longueur » du déplacement dans la direction de P1 avant de tourner vers P3.

Source Wikipédia

La fonction CSS cubic-bezier()

Une courbe de cubic-bezier sera définie par quatre points (p0, p1, p2, p3) disposés sur un graphique où les axes X et Y auront pour valeur une échelle entre 0 et 1. Les points p0 et p3 auront toujours pour valeur de positionnement respective (0,0) et (1,1). En soit, le p0 représente le début de la transition et le p3 représente la fin. Ces deux points sont fixes et ne peuvent pas être modifiés. p1 et p2 en revanche pourront être positionnés selon nos besoins sur le graphique à l'aide de la fonction cubic-bezier. Ainsi, la fonction cubic-bezier sert à définir la position en X et en Y des points p1 et p2. La fonction prendra en paramètre 4 nombres flottants.

Remarques :

• Dans la fonction cubic-bezier( p1x, p1y, p2x, p2y) p1x, p1y, p2x, p2y sont les abcisses et ordonnés des points de Bézier P1 et P2 dans un repère orthonormé 0->x (avec x=1 max) et 0->y
• Les valeurs de position doivent être définis en nombre flottant (exp : pas 1 tout court mais 1.0).
• Les valeurs de position sur l'axe X (p2x et p3x représentant le temps) des deux points doit avoir une valeur située entre 0 et 1.
• Les valeur de position sur l'axe Y bien que souvent comprises entre 0 et 1 peuvent toutefois prendre n'importe quelle valeur. Cette possibilité de pouvoir affecter des valeurs supérieure à 1 et permettre de réaliser très facilement des effets de rebond.

Exemple d'effet rebond

note3 steps( nombre, départ|arrivée) Exemples de configurations avec step : transition-timing-function: step-start : sur l'action ce style sera appliqué immédiatement (barre bleu). transition-timing-function: step-end : sur l'action le style sera appliqué aprés le temps défini par transition-duration (barre jaune). transition-timing-function: steps(10, start) : sur l'action le style final démarrera en premier et sera appliqué en 10 étapes et durera le temps défini par transition-duration soit 5s (barre rouge).

Survolez pour voir le résultat

Autres Exemples

Transformations 2D

Généralités

Il existe plusieurs types de transformation CSS 2D. La syntaxe générale est la suivante : transform:fonction()

Par défaut, une transformation s’applique par rapport au centre de l’élément parent. Pour modifier cette valeur, on doit utiliser transform-origin: x y. Les valeurs de x et y peuvent s'exprimer en px, %, em ou par les positionnements génériques (top, left, right, bottom, center et leurs combinaisons). Les valeurs par défaut sont 50% pour x et y.

Fonctions de translation

translate(x,y), translateX(x) et translateY(y) permettent d’appliquer une translation.

Actions	Syntaxes	Résultats
transform : translateX(A); transform : translateY(A);	Translation(déplacement) horizontal (translateX) ou vertical (translateY). A est une valeur définie en px, em, %. Exp : transform: translate(60px);
transform : translate(x,y);	Translations multidirectionnelles. Exp : transform: translate(60px,40px);

Fonction de changement d'échelle

scale(x,y), scaleX(x) et scaleY(y) permettent de mettre à l’échelle (agrandissement ou une réduction de l'élément HTML).

Actions	Syntaxes	Résultats
transform : scale(A);	Dilatation symétrique : A (nombre entier ou décimal) représente le même coefficient de dilatation pour la largeur (width) et la hauteur (height). A=1 correspond à la taille initiale. Exp : transform: scale(0.6);
transform : scale(x y);	Dilatation asymétrique (si x différent de y) : X ( entier ou décimal) représente le coefficient de dilatation de la largeur (width) et Y ( entier ou décimal) le coefficient de dilatation de la hauteur (height). x=1, y=1 correspond à la taille initiale. Exp : transform:scale(1.8,0.8);

Fonction de rotation

rotate(angle) permet d’appliquer une rotation.

Syntaxes	Valeurs	Résultats
transform: rotate(xdeg);	La rotation s'exprime en degrés (unité deg). Elle peut être négative ou supérieure à 360. Exp : transform: rotate(10deg);

Fonction d'inclinaison

skewX(angle) et skewY(angle) permettent d’incliner un élément.

Actions	Syntaxes	Résultats
transform:skewX(xdeg) skewY(ydeg)	L'inclinaison s'exprime en degrés (unité deg). Elle peut être négative ou supérieure à 360. Exp : transform:skewX(13deg) skewY(14deg);

Fonction matrix

matrix(a, c, b, d, x, y) spécifie une matrice de transformation. Cette fonction réuni en une seule déclaration toutes les fonctions précédentes sous la forme d'une matrice.matrix de six valeurs qui dans l'ordre correspondent a : scaleX, skewY, skewX, scaleY, translateX, translateY.
La représentation de cette fonction est facilement compréhensible par des calculateurs, mais particulièrement abscon pour le commun des mortels. En effet il est bon d'avoir une bonne connaissance mathématique des matrice et particulièrement la multiplication. C'est pourquoi je me bornerai à un seul exemple.

Imaginons le style suivant :
transform-origin: 0 0;
transform: rotate(15deg) translateX(230px) scale(1.3, 2) skew(45deg, -70deg);

Base	transform: rotate(15deg)	translateX(80px)
scale(1.3, 2)	skew(45deg, -70deg);

On voit bien dans cet exemple que matrix n'est pas franchement un attribut utilisateur mais une représentation du DOM 

Remarque importante

Les transformations se font dans l'ordre où elles sont déclarées, ainsi une translation de 20px est équivalente à 40px si un scale de 2 la précède.

Exemples

Générateur pour illustrer les diverses combinaisons possibles de la propriété transform.

Transformations 3D

Référentiel classique XYZ en dessin 3D

Généralités

Les propriétés suivantes sont en cours de développement, ne fonctionnent pas sur tous les navigateurs, et nécessite l'utilisation de webkit.

Il s'agit en fait d'une vrai fausse 3D car l'image est rendue sur un écran 2D. Pour donner l'impression que c'est en 3D, on a besoin de définir une perspective. La perspective correspond à la distance entre l'oeil et la scène. Plus la perspective est faible, plus on est près. Plus la perspective est élevée, plus on est loin. Sans perspective, l’impression de 3D n’existe pas

Un autre élément est à prendre en compte pour une représentation 3D, il s'agit de définir l'origine du point de fuite, en fait dans quel sens on regarde l'objet (haut vers bas, droite vers gauche etc). On utilisera la propriété perspective-origin pour définir ce point.

La propriété perspective

La propriété perspective définit en pixels la distance entre un plan z et l'utilisateur. Cette propriété permet de changer la perspective dont des éléments 3D sont vus.

Attention : En définissant la propriété perspective pour un élément, ce sont les éléments ENFANT qui obtiennent la vue perspective, PAS l'élément lui-même.

Note : La propriété perspective affecte seulement la 3D des éléments transformés!

Syntaxe

• perspective: paramètre; lorsque qu'elle est utilisée dans l'élément Parent.
• transform:perspective(paramètre); lorsque qu'elle est utilisée dans des éléments Enfant.

Propriétés

La propriété perspective-origin (point de fuite)

La propriété transform-style

Les valeurs flat (par défaut) ou preserve-3d définissent si les éléments enfants subissent les transformations en 3D (preserve-3d) ou pas (flat).

Cette propriété n'est pas héritée et doit donc être définie sur tous les descendants de l'éléments qui sont concernés.

La propriété backface-visibility

Les valeurs visible ou hidden ou initial définissent si les faces arrières des éléments sont visibles(visible) ou non(hidden). Cette propriété permet d'indiquer si la face arrière d'un élément doit être visible(visible) ou non (hidden) lorsqu'elle est orientée vers l'utilisateur.

Modes d'application des transformations

Les transformations 3D s’utilisent de la même manière que les transformations 2D grâce aux propriété et fonctions de CSS de transform. Un paramètre supplémentaire (z) va permettre de spécifier la profondeur ou le relief de l'objet.

Seule la fonction d'inclinaisons kew() n'a pas son équivalent en version 3D.

Exemple et code

Comment est construit le cube

Tout d'abord il faut définir le contener

Ensuite l'espace du cube lui-même

On défini l'espace et on va y rajouter les propriétés nécessaires pour avoir une représentation 3D

Puis on défini chaque coté

<style type="text/css"> .ContenerGeneral3D { position:relative; width: 100%;margin:auto; color:black; } .cube { font-size: 4em; width: 2em; margin: 0.5em auto; transform-origin: 50% 50%; transform-style:preserve-3d; perspective:350px; perspective-origin: -50px 0px; transform: rotateX(-20deg) rotateY(20deg); } .cotes{ position: absolute; width: 2em; height: 2em; text-align: center; line-height: 2em; backface-visibility:hidden; } .c1 { background-color:rgba(128,0,0,0.5); transform: rotateX( 0deg) translateZ(1em); } .c2 { background-color:rgba(154,250,128,0.5); transform: rotateX(-90deg) translateZ(1em); } .c3 { background-color:rgba(154,205,133,0.5); transform: rotateY(-90deg) translateZ(1em); } .c4 { background-color:rgba(154,205,50,0.5); transform: rotateY( 90deg) translateZ(1em); } .c5 { background-color:rgba(128,128,0,0.5); transform: rotateX( 90deg) translateZ(1em); } .c6 { background-color:rgba(255,255,0,0.5); transform: rotateY(-180deg) translateZ(1em); } </style>

<div class="ContenerGeneral3D"> <div class="cube"> <div class="cotes c1">1</div> <div class="cotes c2">2</div> <div class="cotes c3">3</div> <div class="cotes c4">4</div> <div class="cotes c5">5</div> <div class="cotes c6">6</div> </div> </div> 1 2 3 4 5 6

Notes : complément sur les utilisations de rotate et transformZ pour les côtés.

Animations

Généralités

Les animations permettent de modifier dans le temps les valeurs de propriétés CSS. Il s'agit en fait plusieurs transitions à la suite les unes des autres : chaque transition est définie sous forme d’étape (en pourcentage de l’animation globale) via la règle @keyframes. Ce qu'il était nécessaire de faire en javascript est maintenant possible rien qu'avec une feuille de style.

Une animation peut être lancée lors d'un changement de pseudo-classe (:hover, :focus, :active, :target, :checked, etc), ou via Javascript, ou lors du chargement de la page.

Propriétés

Construction d'une animation

Généralités

Une animation se déclare en deux étapes dont l'ordre n'a pas d'importance.

• Pour l'élément considéré, indiquer, au minimum, le nom que l'on donne à l'animation (animation-name), sa durée (animation-duration) et le nombre de boucles (animation-iteration-count) ;
• Déclarer à l'aide d'une règle intitulée de @keyframes à laquelle on accole le nom de l'animation, et on notifie les effets voulus aux moments voulus, ces derniers étant indiqués en pourcentage du temps total déclaré.

La déclaration minimum

#toto { // identification ou classe (.toto) de l'élément sur lequel on veut appliquer l'animation.

Les keyframes

Pour déclencher l'animation il faut utiliser @keyframes, lui donner un nom (celui défini dans la déclaration de l'élément), puis gérer les "étapes" en pourcentage à l’intérieur de cette déclaration. Les mots-clés from et to correspondent respectivement à 0 et 100%.

@keyframes "titi"
{

}

Combinaison transformation et animation

Multiples animations

On peut déclecher plusieurs animations en même temps pour un même élément

Remarques et limitations

• Par défaut, la durée est de 0 seconde, le nombre de répétitions est 1 et la méthode d’interpolation est ease.
• Les propriétés suivantes ne sont pas animables : transition/animation de display: none; à display: block;.

Exemples

Evènements

Cette partie sera complétée dans la section javascript HTML5 Balises et API. Toutefois voici quelques informations sur ce que l'on pourra faire.

Les évènements liés aux animations sont gérés par l'API AnimationEvent. Ils peuvent être utilisés pour détecter le démarrage d'une animation, sa fin ou le début d'un nouveau cycle.

• addEventListener("animationstart", maFonction, false);
• addEventListener("animationend", maFonction, false);
• addEventListener("animationiteration", maFonction, false);

Les méthodes suivantes sont disponibles pours les évènements

• animationName indique le nom de l'animation qui a décleché l'évènement. Lecture seule.
• elapsedTime nombre à virgule flottante qui indique le temps écoulé en secondes depuis le démarrage de l'animation, en excluant tous les temps de pause de l'animation. Lecture seule.
• pseudoElement est une chaine de caractères démarrant avec '::' et contenant le nom du pseudo-élément où l'animation se déroule.
  Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide.

Les filtres

On peut classer les filtres en 3 gatégories

• les filtres raccourcis
• les filtres SVG
• les shaders

Les filtres raccourcis

Cette catégorie de filtre peut s'appliquer sur n'importe quel élément HTML, mais le plus grand intérêt est de l'appliquer sur des images.

Syntaxe

filter:type(valeur)

Exemple

Colonnes multiples

Généralités

Le positionnement multicolonnes s'applique aux éléments de type block, table-cell et inline-block. Le but est de répartir le contenu en plusieurs colonnes.

Propriétés

Exemple

Redimensionnement (resize)

Généralités

La propriété resize permet de définir si un élément peut être redimensionner ou non.
Attention : Cette propriété s'applique aux éléments avec la propriété overflow définie autrement que visible.

Syntaxe

Exemple

Dimensionnement des éléments (box-sizing)

Généralités

Avant CSS3 lorsque l'on précise les dimensions d'un élement, le navigateur ajoute à ces dimensions les marges, les bordures et les padding. Cela signifie que si l'on défini un élément de 100px (largeur) par 150px (hauteur) sans bordure, ni marge, ni padding on obtiendra à l'affichage un élémént de 100px par 150 px, mais si on ajoute une marge intérieure (padding) de 10px, plus une bordure de 2px, plus une marge extérieure de 15px le résultat à l'affichage sera alors un élément de largeur (width) = (2 x 15) + (2 x 2) + (2 x 10) + 100 = 154px et de hauteur suivant le même principe de 204px. Un peu embêtant de refaire des calculs aprés chaque modification de style sur l'élément, de plus par exemple il est impossible de créer un champs texte qui prenne une largeur de 100% car les padding et bordures vont fatalement s'ajouter et le faire dépasser de son élément parent.

Avec CSS3 et la propriété box-sizing on ne se pose plus la question car cette propriété permet de changer le comportement du navigateur, les padding et bordures seront alors ajoutés à l'intérieur et non plus à l'extérieur.

Syntaxe

Exemple

pseudo-class bouton radio et cases à cocher

Présentation

Exemple

Dans l’absolu, l’élément input:checkbox n’est pas stylable. Nous allons donc jouer sur les styles du label.

Application au projet de site web