Les Fiches de MonWebFacile





Chapitre

Fiche

 

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


Objet de la fiche

État de la fiche Terminée validée


Plan de la fiche

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

Propriétés Commentaires Syntaxes et valeurs
background-size spécifie la taille de l'image dans l'arrière plan.

background-size: x y
Test 1 (40px/40px)
Test 2 (200px/100px)
x détermine la dimension horizontale (pixels, em, auto, pourcentage %, etc.),
y détermine la dimension verticale (pixels, em, auto, pourcentage %, etc.)
background-size:cover
Test
force à couvrir toute la surface sans déformer l'image. Quitte à la rogner.
background-size:contain force l'image à ne pas dépasser de l'élément sans la déformer.
background-clip Défini les limites de l'arrière-plan à l'intérieur de la boîte représentée par l'élément.
background-clip:border-box L'arrière plan s'étend jusqu'a l'extrême limite de la bordure
background-clip:padding-box Aucun arrière-plan sera présent en-dessous de la bordure : l'extrême limite sera celle du padding.
background-clip:content-box L'arrière plan se limite au contenu.
background-origin Positionne le point d'origine de l'image d'arrière plan.
background-origin:border-box
Test
La position de l'arrière plan est relative au bord : l'image peut donc se positionner derrière les bords.
background-origin:padding-box
Test
La position de l'arrière plan est relative au padding (marge interne).
background-origin:content-box
Test
La position de l'arrière plan est relative au contenu.

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

Préambule
Considérant que la reconnaissance de la dignité inhérente à tous les membres de la famille humaine et de leurs droits égaux et inaliénables constitue le fondement de la liberté, de la justice et de la paix dans le monde. Considérant que la méconnaissance et le mépris des droits de l'homme ont conduit à des actes de barbarie qui révoltent la conscience de l'humanité et que l'avènement d'un monde où les êtres humains seront libres de parler et de croire, libérés de la terreur et de la misère, a été proclamé comme la plus haute aspiration de l'homme. Considérant qu'il est essentiel que les droits de l'homme soient protégés par un régime de droit pour que l'homme ne soit pas contraint, en suprême recours, à la révolte contre la tyrannie et l'oppression.

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 (Note1).
  • param2 et param2b (Note2) : couleur de départ (param2),et pourcentage (param2b optionnel) de l’étendue de la couleur définie par le paramètre2.
  • param3 et param3b (Note2) : 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.

Note1 : 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.

Note2 : 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 (Note1) 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).

Note1 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
ValADé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)
ValBDécalage verticalRequis
positive pour décaler l’ombre vers le bas de l’élément, négative pour décaler vers le haut.
ValCNiveau de dégradéFacultatif
0 pour une ombre sans dégradé, positif pour un niveau de dégradé plus ou moins important.
ValDTaille de l’ombreFacultatif
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.
ValECouleur de l'ombreFacultatif
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)
ValDOmbre interneFacultatif
inset

Note1 : 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

Contenus Commentaires Valeurs Tests
ValADécalage horizontalRequis
positive pour décaler l’ombre vers la droite de l’élément, négative pour décaler vers la gauche.
je suis le texte

text-shadow:10px 5px 10px 0px rgb(255,0,0)
ValBDécalage verticalRequis
positive pour décaler l’ombre vers le bas de l’élément, négative pour décaler vers le haut.
ValCNiveau de dégradé0 pour une ombre sans dégradé, positif pour un niveau de dégradé plus ou moins important.
ValECouleur de l'ombreValeurs 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) permet la transparence (4eme paramètre = 0 transparence totale, 1 pas de transparence)

Note1 : 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

Propriétés Syntaxes
transition-property Cette propriété permet de spécifier la ou les propriétés CSS (séparées par une virgule) qui seront animées lors de la transition. Voir note 1
le mot-clé none est utilisé pour indiquer qu'aucune propriété ne doit être animée,
le mot-clé all est utilisé pour indiquer que toutes les propriétés animables seront animées (valeur par défaut).
transition-duration Cette propriété permet de spécifier le temps d’exécution de l’animation (en secondes ou en millisecondes).
transition-duration: 2s;
transition-timing-function Cette propriété permet de préciser la méthode d’accélération ou décélération entre l’état initial et l'état final d’une transition. Elle peut prendre les valeurs suivantes
  • ease : action par défaut. Départ rapide, arrivée lente.
  • linear : transition linéaire.
  • ease-in : départ lent, arrivée normale.
  • ease-out : départ normal, arrivée lente.
  • ease-in-out : départ lent, arrivée lente, accélération entre départ et arrivée.
  • cubic-bezier( p1x, p1y, p2x, p2y) voir note2 : courbe d’accélération personnalisée (courbes de bézier).
  • steps( nombre, départ|arrivée), step-start, step-end voir note3 : Progression par palier ( image par image).
transition-timing-function:ease-in;
transition-delay Cette propriété permet de décaler dans le temps le départ d’une transition (en secondes ou en millisecondes).
transition-delay: 5s;
transition Propriété raccourcie des précédentes
transition:color .3s, text-shadow .4s linear .3s;

Notes

note1 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

note2 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

Effet rebond Code HTML Code CSS
Survolez pour voir le résultat

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
Partie HTML pour réaliser ces effets Partie CSS pour réaliser ces effets

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);
Comment le navigateur voit-il ces données?
javascript pour lire les données
Résultat

matrix(1.41585, -0.261201, -0.218578, 1.7014, 77.2741, 20.7055)

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

paramètre Descriptions
none Mot clé qui indique qu'aucune transformation de perspective ne doit être appliquée.
profondeur En pixels. Valeur positive et supérieure à 0 qui donne la distance entre l'utilisateur et le plan z=0.

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.

Transformations Syntaxes Commentaires
Translations translate3d(x,y,z) Spécifie une translation suivant les 3 axes.
translateZ(z) Translation suivant l’axe Z
Changements d’échelle scale3d(x,y,z) Spécifie un changement d’échelle en 3D.
scaleZ(z) Changement d’échelle sur l’axe Z.
Rotations rotate3d(x,y,z,angle) Spécifie une rotation 3D autour de l’axe défini par (x,y,z).
rotateX(angle) Rotation autour de l’axe X.
rotateY(angle) Rotation autour de l’axe Y.
rotateZ(angle) Rotation autour de l’axe Z.
Matrice matrix3d(une matrice 4x4) Spécifie une matrice de transformation.

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

Notes :

  • transform: rotateX(-20deg) rotateY(20deg); permet d'orienter le cube pour une visualisation en perspective. Si on faisait un rotate 0 deg la face 1 apparaîtrait à plat.
Puis on défini chaque coté
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

Propriétés Syntaxes
animation-name Nom de l'animation
animation-duration Durée totale de l’animation (secondes ou millisecondes).
animation-delay Délai avant que l’animation ne demarre (secondes ou millisecondes).
animation-timing-function Méthode d’interpolation entre chaque étape. Valeurs possibles identiques à la propriété transition-timing-function des transitions.
animation-iteration-count Nombre de fois où l’animation est répétée. Le mot-clé infinite permet d’effectuer l’animation en boucle.
animation-direction Sens de l'animation : sens direct ou inverse.
normal, (valeur par défaut) pour commencer la lecture au début (0% ou from). Si l'animation boucle, réinitialise les propriétés css.
alternate, pour commencer la lecture au début (0% ou from) mais si l'animation boucle, lecture de l'animation dans l'autre sens sans réinitialiser les propriétés CSS.
animation-fill-mode Etat des éléments avant et après l’exécution de l’animation
  • none, n'applique aucune propriété css, valeur par défaut.
  • backwards, applique les propriétés css de la première image clé (0% ou from), même si il y a un délai d'attente (animation-delay).
  • forwards, conserve les propriétés css de la dernière image clé (100% ou to). Si la propriété animation-direction:alternate et que animation-iteration-count est définie à une valeur paire alors on conserve les propriétés css de la première image clé(0% ou from).
  • both, prend en compte les règles des valeurs forwards et backwards.
animation-play-state Mettre l’animation en pause
  • paused, l'animation est en pause.
  • running, l'animation est jouée.
animation Propriété raccourcie des précédentes ou liste des animations à déclencher (séparée par une virgule)

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.

// Données spécifiques au style de l'élément
position: absolute;
background-color: red;
height: 20px;
width: 20px;
border-radius: 50%;

// données spécifiques à l'animation
animation-duration:7s; // durée
animation-timing-function:linear; // transitions
animation-delay:0s; // Déclenchement
animation-iteration-count:infinite; // nombre de boucles
animation-name: titi; // nom de la séquence keyframes
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"
{

0% ou from{ } Propriété css à modifier au départ de l'animation.
x%{ } Propriété css à modifier à x%s de la durée définie pour l'animation avec animation-duration.
y%{ } Propriété css à modifier à y%s de la durée de l'animation.
z%{ } Propriété css à modifier à z%s de la durée de l'animation.
........
100% ou to{ } Propriété css à modifier à la fin de l'animation.

}

Combinaison transformation et animation

@keyframes rotationPermanente
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Multiples animations

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

Partie html Partie CSS

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

  • Balles : l'animation démarre avec la balle en haut, à gauche. Aprés 40% de 7s (2,8s) la balle se trouve en bas décalée de 40% de 170px (68px), puis remonte de 50px durant 15% de temps (55% -40% soit 1,05s) en se décalant vers la gauche de 25px (15% de 170px) et ainsi de suite....
  • Image arrière plan : on utilise background: url('../../Images/View.jpg') no-repeat 5px 10px; pour style de l'élément et
    @keyframes {x% {background: url('../../Images/View.jpg') no-repeat xpx 10px;} pour la séquence.
  • rotation permanente : @keyframes est définie avec from {font-size:1em; transform: rotate(0deg);}
    to {transform: rotate(360deg);}
Remarques : Une image a était introduite sur la face 1 du cube.
background-image:url("../../Images/CSS_HTML5_Cube_face6_Dessin.jpg"); La directive background-size:cover; a été rajoutée pour que l'image occupe toute la surface du coté quelle que soit sa dimension.

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)

Types Valeurs Descriptions Exemples
grayscale décimal ou %. Défini les niveaux de gris. 100% ou 1 correspond à du gris total, 0% ou 0 pour l'image originale. filter:grayscale(13%)
sepia décimal ou %. Défini les niveaux de l'effet sépia (effet vieille photographie).100% ou 1 correspond à du sepia total, 0% ou 0 pour l'image originale. filter:sepia(68%)
saturate décimal ou % Défini le niveau de saturation des couleurs. De base le niveau de saturation par défaut est de 100% (ou 1). Pour augmenter la saturation il faudra appliquer une valeur supérieure à 100. filter:saturate(2.6)
hue-rotate angle en degré Défini la teinte (de 0 à 360°).Cette propriété permet de changer la nuance de couleurpar rotation (imaginez une roue des couleurs qui vous sert de filtre et que vous faites tourner). filter:hue-rotate(93deg)
invert décimal ou % Inversion des couleurs. 100% ou 1 pour une inversion totale, 0% ou 0 pour aucune inversion. filter:invert(68%)
opacity décimal ou % Réglage de l'opacité. 0% ou 0 pour aucune opacité, 100% ou 1 pour une opacité maximale. filter:opacity(50%)
brightness décimal ou % Luminosité 100% ou 1 pour la clarté originale, 0 pour une luminosité nulle. Pour augmenter la luminosité il faudra appliquer une valeur supérieure à 1 (ou 100%). filter:brightness(176%)
contrast décimal ou % Contraste 100% ou 1 pour le contraste original, 0 pour un contraste nul. Pour augmenter le contraste il faudra appliquer une valeur supérieure à 1 (ou 100%). filter:contrast(3.6)
blur px, em ou % Réglage du flou. filter:blur(5px)
drop-shadow px, em, couleur Ombre portée avec les paramètres suivants : Décalage horizontal, décalage vertical, épaisseur de l'ombre, couleur de l'ombre. filter:drop-shadow(14px 14px 5px black)
filter Combinaisons multiples filter:drop-shadow(0px 0px 5px black) blur(0);

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

Propriétés Valeurs
column-width auto (par défaut) indique que la largeur de la colonne doit être déterminée par d'autres propriétés CSS, comme column-count.
largeur (px em ...) qui donne une indication sur la largeur optimale d'une colonne. La valeur réelle de la colonne pourra être plus large (pour remplir l'espace disponible) ou moins large (seulement si l'espace disponible est inférieur à la largeur spécifiée). La longueur doit être strictement positive ou la déclaration est invalide.
column-count auto (par défaut) indique que le nombre de colonnes doit être déterminé par d'autres propriétés CSS, comme column-width.
Nombre entier supérieur à zéro. Correspond au nombre "optimal" de colonnes. Si column-width est fixé, alors column-count représente aussi le nombre maximal de colonnes.
column-fill Contrôle la manière dont le contenu est découpé entre les colonnes.
auto : (par défaut) le contenu prend l'espace dont il à besoin.
balance : le contenu est réparti également (toutes les colonnes ont la même hauteur),
column-gap Défini la taille de l'espace entre les colonnes.
normal : (par défaut). Le navigateur défini automatiquement l'espacement (usuellement 1em).
largeur (px em ...) : défini la taille de l'espace entre les colonnes.
column-rule-color Couleurs du séparateur.
Valeurs comparables à celles des couleurs CSS classiques (couleurs hexa, rgb, rgba, génériques).
column-rule-style Styles du séparateur.
Valeurs comparables à celles des bordures CSS classiques (solid, dotted, dashed, groove, ridge, etc.).
column-rule-width Largeur du séparateur.
valeurs comparables à celles des bordures CSS classiques (px, em, thin etc.).
column-span La propriété column-span offre à un élément la faculté de s'étaler sur une colonne (valeur none) ou toutes les colonnes à la fois (valeur all).
columns Propriété raccourcie permettant de définir les propriétés column-width et column-count en même temps.
Syntaxe : columns: count width
column-rule Propriété raccourcie pour les propriétés individuelles column-rule-width, column-rule-style et column-rule-color.
Syntaxe : column-rule: width style color

Exemple

Déclaration des Droits de l'Homme

Considérant que la méconnaissance et le mépris des droits de l'homme ont conduit à des actes de barbarie qui révoltent la conscience de l'humanité et que l'avènement d'un monde où les êtres humains seront libres de parler et de croire, libérés de la terreur et de la misère, a été proclamé comme la plus haute aspiration de l'homme.
Considérant qu'il est essentiel que les droits de l'homme soient protégés par un régime de droit pour que l'homme ne soit pas contraint, en suprême recours, à la révolte contre la tyrannie et l'oppression.
Considérant qu'il est essentiel d'encourager le développement de relations amicales entre nations.
Considérant que dans la Charte les peuples des Nations Unies ont proclamé à nouveau leur foi dans les droits fondamentaux de l'homme, dans la dignité et la valeur de la personne humaine, dans l'égalité des droits des hommes et des femmes, et qu'ils se sont déclarés résolus à favoriser le progrès social et à instaurer de meilleures conditions de vie dans une liberté plus grande.
Considérant que les Etats Membres se sont engagés à assurer, en coopération avec l'Organisation des Nations Unies, le respect universel et effectif des droits de l'homme et des libertés fondamentales.
Considérant qu'une conception commune de ces droits et libertés est de la plus haute importance pour remplir pleinement cet engagement.

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

resize:none; Valeur par défaut : l'élément ne sera pas redimensionnable.
resize:horizontal; L'élément sera redimensionnable horizontalement.
resize:vertical; L'élément sera redimensionnable verticalement.
resize:both; L'élément sera redimensionnable horizontalement et verticalement.

Exemple

Considérant que la méconnaissance et le mépris des droits de l'homme ont conduit à des actes de barbarie qui révoltent la conscience de l'humanité et que l'avènement d'un monde où les êtres humains seront libres de parler et de croire, libérés de la terreur et de la misère, a été proclamé comme la plus haute aspiration de l'homme.

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

Syntaxes Descriptions
box-sizing: content-box; Valeur par defaut (avant CSS3) : les propriétés width et height sont mesurées en incluant le contenu, mais pas la bordure, la marge extérieure ou intérieure.
box-sizing: padding-box; Les propriétés width et height incluent la marge intérieure, mais pas la bordure ou la marge extérieure.
box-sizing: border-box; Les propriétés width et height incluent la marge intérieure et la bordure, mais pas la marge extérieure.

Exemple

100px/150px
120px/170px
130px/180px
100px/150px
width:100px;
height:150px;
width:100px;
height:150px;
padding:10px
width:100px;
height:150px;
padding:10px;
border:solid 5px gray
width:100px;
height:150px;
padding:10px;
border:solid 5px gray;
box-sizing: border-box;

pseudo-class bouton radio et cases à cocher

Présentation

DéfinitionTestCode
La pseudo-classe :checked dans CSS inter-agit avec les éléments case à cocher checkbox et radio lorsqu'ils sont sélectionnés ou non.

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



Respectons la propriété intellectuelle