Limites du HTML.....................................................................................................................................

5
Avant le CSS............................................................................................................................................5
CSS c'est quoi?........................................................................................................................................5
Objectif du cours et prérequis................................................................................................................6
Page 2: Comment intègre-t-on du code CSS?.........................................................................................6
La syntaxe CSS à quoi ressemble-t-elle?.................................................................................................6
Comment déclarer un style CSS?............................................................................................................7
Attribut de style local.........................................................................................................................7
Style global à la page..........................................................................................................................7
La feuille de style en cascade.............................................................................................................8
Exemple de CSS....................................................................................................................................10
Page 3: Couleurs de textes et propriétés agissant sur le fond..............................................................11
Couleur de texte...................................................................................................................................11
Gestion des couleurs en CSS.............................................................................................................11
Propriétés d'arrière plan......................................................................................................................11
Propriété background-color.............................................................................................................12
Propriété background-image............................................................................................................12
Propriété background-repeat...........................................................................................................12
Propriété background-position.........................................................................................................13
Propriété background-attachment...................................................................................................13
Contenu débordant qui entraine l'affichage de la barre de défilement...............................................13
Propriété background-size...............................................................................................................13
La sous propriété linear-gradient.....................................................................................................14
Page 4: Les polices................................................................................................................................15
Propriétés de la famille font.................................................................................................................15
Propriété font-size............................................................................................................................15
Propriété font-style..........................................................................................................................16
Propriété font-variant......................................................................................................................16
TITRE H1 CONVERTI EN PETITES MAJUSCULES..................................................................................................16
Propriété font-weight.......................................................................................................................16
Titre h1 sans graisse.............................................................................................................................16
Propriété font-family........................................................................................................................16
Les polices génériques......................................................................................................................17
Les polices embarquées...................................................................................................................18
Police embarquée................................................................................................................................18
Page 5: Styles de textes, marges, dimensions et listes.........................................................................19
La famille text.......................................................................................................................................19
Propriété text-align..........................................................................................................................19
Propriété text-indent........................................................................................................................19
Propriété text-decoration.................................................................................................................19
 Propriété text-transform..................................................................................................................19
Propriété letter-spacing....................................................................................................................20
Exemple............................................................................................................................................20
C o u r s d e C S S ..........................................................................................................................20
RÉSUMÉ.........................................................................................................................................20
Marge externe: famille margin.............................................................................................................21
Marge interne: famille padding............................................................................................................21
Largeur et hauteur...............................................................................................................................21
Exemple............................................................................................................................................22
Les listes...............................................................................................................................................22
Propriété list-style-type....................................................................................................................22
Propriété list-style-image.................................................................................................................23
Propriété list-style-position..............................................................................................................23
Page 6: Les bordures............................................................................................................................23
Propriété border-color.....................................................................................................................23
Propriété border-width....................................................................................................................23
Propriété border-style......................................................................................................................24
Propriété border-radius....................................................................................................................24
Exemple............................................................................................................................................25
Page 7: Gestion des positions et transformation des éléments...........................................................25
Les positions.........................................................................................................................................25
Le système de coordonnées.............................................................................................................26
Propriété z-index..............................................................................................................................27
Transformation des éléments..............................................................................................................28
Balise H1...............................................................................................................................................29
Propriété display..............................................................................................................................29
Propriété float..................................................................................................................................30
CSS c'est quoi?......................................................................................................................................31
CSS c'est quoi?......................................................................................................................................31
Propriété clear..................................................................................................................................31
Propriété vertical-align.....................................................................................................................32
Bas du formulaire.................................................................................................................................33
Page 8: Masquage, opacité et débordement.......................................................................................33
Masquage des éléments.......................................................................................................................33
Propriété visibility.............................................................................................................................33
Gestion de l'opacité..............................................................................................................................34
Propriétés opacity, -moz-opacity, filter:alpha(opacity)....................................................................34
Gestion du débordement.....................................................................................................................35
Propriété overflow...........................................................................................................................35
Page 9: Sélecteurs spéciaux..................................................................................................................36
Groupement et identification d'éléments............................................................................................36
L'attribut class: Groupement d'éléments.........................................................................................37
Attribut id: identifiant d'élément......................................................................................................38
Cibler tous les éléments...................................................................................................................38
Cibler tous les éléments ayant un attribut particulier......................................................................38
Cibler tous les éléments ayant un attribut avec une valeur particulière..........................................39
Cibler un élément contenu dans un autre........................................................................................39
Cibler un élément enfant direct d'un parent....................................................................................39
Cibler plusieurs éléments à la fois....................................................................................................39
Cibler un élément précédé immédiatement par un autre................................................................39
Ordre d'application des styles..........................................................................................................40
Page 10: Pseudo-classes et pseudo-élements......................................................................................40
Pseudo-classes.....................................................................................................................................40
Pseudo-classe :link...........................................................................................................................40
Pseudo-classe :visited.......................................................................................................................40
Pseudo-classe :active........................................................................................................................40
Pseudo-classe :hover........................................................................................................................40
Pseudo-classe :focus.........................................................................................................................41
Pseudo-classe :first-child..................................................................................................................42
Pseudo-classe :nth-child(n)..............................................................................................................42
Pseudo-éléments..................................................................................................................................42
Pseudo-élement ::first-letter............................................................................................................43
Pseudo-élement ::first-line...............................................................................................................43
Pseudo-élements ::before et ::after.................................................................................................44
Page 11: Exercice - Styler un formulaire...............................................................................................44
Exercice................................................................................................................................................44
Solution................................................................................................................................................45
Page 12: Les transformations CSS.........................................................................................................47
Transformation de l'origine..................................................................................................................47
Propriété transform-origin...............................................................................................................47
Fonctions de transformation qui s'appliquent à la propriété transform..............................................48
Fonction translate()..........................................................................................................................48
Fonction scale()................................................................................................................................49
Fonctions skewX() et skewY()...........................................................................................................50
Fonction rotate()..............................................................................................................................50
Fonction perspective()......................................................................................................................51
Page 13: Les transitions en CSS............................................................................................................52
Les transitions CSS................................................................................................................................52
Propriété transition-property...........................................................................................................53
Propriété transition-duration...........................................................................................................53
 Propriété transition-timing-function................................................................................................54
Propriété transition-delay................................................................................................................55
Exemple: menu accordéon...................................................................................................................56
Page 14: Les Media Queries (Responsive Design)................................................................................57
Les Média Queries pour un "Responsive Design".................................................................................57
A quoi ressemble du code CSS où les Media Queries sont pris en compte?........................................58
Attribut media..................................................................................................................................58
Règle @media..................................................................................................................................58
Opérateur logiques et critères.............................................................................................................59
Opérateurs logiques.........................................................................................................................59
Critère des Media Queries................................................................................................................59
Le viewport...........................................................................................................................................60
Balise META viewport.......................................................................................................................61
Règle-at viewport.............................................................................................................................61
Page 15: Flexbox - les boites flexibles...................................................................................................63
Les boites flexibles en CSS (Flexbox).....................................................................................................63
Qu'est ce qu'une flexbox?................................................................................................................64
Rendre un conteneur flexible...........................................................................................................64
Aller plus loin avec flexbox...................................................................................................................66
Définition de l'axe principal: propriété flex-direction.......................................................................66
Alignement sur l'axe principal: propriété justify-content.................................................................66
Alignement sur l'axe secondaire: propriété align-items...................................................................68
Changement de l'ordre par défaut: propriété order........................................................................69
Elasticité (ou flexibilité): propriété flex.............................................................................................69
Conclusion............................................................................................................................................70
Page 16: Les animations en CSS............................................................................................................70
Appliquer du mouvement aux éléments HTML....................................................................................70
Animer les objets avec les transitions..............................................................................................70
Les animations proprement dites.....................................................................................................71
Personnaliser son animation................................................................................................................71
Appliquer une animation à un objet: animation-name....................................................................71
Définir la séquence d'animations à associer à un objet: @keyframes..............................................71
Définir les propriétés de l'animation................................................................................................72
Exemple............................................................................................................................................74
Page 17: Les filtres CSS.........................................................................................................................75
Les filtres CSS........................................................................................................................................75
Appliquer un filtre à un objet...........................................................................................................75
L'effet grayscale................................................................................................................................76
L'effet saturate.................................................................................................................................76
L'effet blur........................................................................................................................................76
 L'effet brightness..............................................................................................................................76
L'effet contrast.................................................................................................................................77
L'effet sepia......................................................................................................................................77
L'effet invert.....................................................................................................................................77
L'effet hue-rotate.............................................................................................................................77
L'effet opacity...................................................................................................................................77
L'effet drop-shadow.........................................................................................................................78

Limites du HTML
Dans le cours de HTML nous avons vu que ce langage sert à présenter le contenu de telle
façon à ce qu'il soit adapté pour le Web sans pour autant pouvoir le gratifier d'un bon design.
Bien qu'il existe des balises, associées à certains de leurs attributs, qui peuvent appliquer des
retouches modestes et mettre ainsi fin au rendu par défaut appliqué par HTML.

L'arrivée de HTML5 annonce un passage vers un Web sémantique et offre plus de

fonctionnalités qui enrichissent davantage le contenu intégré. Cependant, comme son
prédécesseur, il n'est pas concerné par le design.

Cela nous mène à croire que HTML a des limites puisqu'il ne peut pas appliquer un visuel
attrayant au contenu qu'il est capable d'intégrer. Or, W3C a toujours été clair sur ce point:
"HTML est un langage de description et de présentation de contenu Web", c'est tout. Il faut
donc une alternative si on veut avoir une page Web réussie et qui plait aux internautes. C'est
là où intervient le CSS.

Avant le CSS
Le langage HTML est né avec l'apparition du Web vers 1989. A l'époque, CSS n'existait pas
et donc les créateurs de pages Web étaient contraints de tout faire avec seulement du HTML,
à savoir la création du contenu et la présentation du design. Après un moment, un problème
commence à surgir, le code des pages Web devient de plus en plus complexe, car il fallait
mettre beaucoup de balises pour l'intégration d'une part et de mise en forme d'une autre part.
Le CSS est alors apparu.

CSS c'est quoi?

CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un
langage de style dont la syntaxe est extrêmement simple mais son rendement est remarquable.
En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.
On peut créer une page Web entière avec HTML seulement, même si le design ne serait pas
au niveau de nos attentes. Par contre on ne peut absolument pas réussir une page Web avec
CSS seulement. CSS ne fait que mettre en forme le contenu décrit par HTML.
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou
l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour
vous servir.

Comme pour HTML, CSS a commencé petit et grandit au fil des versions. La première
version a vu le jour vers 1996. Il s'agissait de CSS1, suivie de CSS2 qui était le plus
populaires jusqu'à l’apparition de HTML5 qui a intégré de nouvelles fonctionnalités qui ont
emmené à développer la version 3 de CSS (dite CSS3) qui est le standard le plus utilisé
actuellement. On utilise même le terme HTML5/CSS3 pour désigner les deux technologies
qui vont alors ensemble.

CSS est un langage coté client, c'est à dire que sa syntaxe est comprise par le navigateur qui
l’exécute avec le HTML. Ceci peut conduire à des problème de compatibilité, puisque par
fois, les navigateurs ne comprennent pas toujours certains codes CSS de la même manière.
Heureusement, ce sont des cas rares qui disparaissent petit à petit.

Objectif du cours et prérequis

L'objectif de ce cours est de vous aider à maîtriser le langage CSS et en faire bon usage. Vous
n'êtes pas obligé d'apprendre sa syntaxe par cœur, car avec la pratique je suis sûr que vous la
retiendrez sans que vous vous en rendiez compte.

Nous allons voir la syntaxe de CSS3 (qui renferme bien entendu certaines anciennes
fonctionnalités de CSS2). Vous aurez besoin d'un éditeur (le même dont vous vous êtes servi
pour écrire du HTML) et un navigateur de votre choix pour les tests. Cependant je vous
recommande de tester vos codes sur plusieurs navigateurs pour voir le résultat sur les
différents moteurs de rendu célèbres. A titre d'exemple Google Ghrome ou Safari (pour le
moteur Webkit), Mozilla Firefox (pour le moteur Gecko) et le bon vieux Internet Explorer
(pour le moteur Trident). Je vous demanderai par la suite (dans la partie Media Queries)
d'utiliser aussi un navigateur mobile (ou un émulateur pour développeurs) pour tester le
responsive design.

Pour tirer profit de ce cours, il faut être initié en HTML (4 et 5). Si vous n'avez pas un
minimum requis dans ce langage, je vous recommande vivement de commencer par là. Voici
les liens:

 Cours de HTML (HyperText Markup Language)

 Apprendre HTML5 - Pour mieux présenter vos pages Web

Page 2: Comment intègre-t-on du code CSS?

La syntaxe CSS à quoi ressemble-t-elle?
La syntaxe CSS est tellement simple et intuitive que le simple fait de lire le code nous donne une idée
sur ce qu'il peut faire même si nous étions des novices. Il faut savoir qu'il y a plusieurs façons
d'intégrer un style CSS. Dans l'exemple qui suit je vais vous montrer à quoi ressemble du code CSS en
génaral:

form{
   margin:0;
   padding:0;
}
input{
   outline:none;
}
input[name="trecherche"]{
   border:none;
   font-family:eras, "Century Gothic", verdana, sans-serif;
   font-size:14pt;
   margin-bottom:3px;
   margin-left:3px;
}
#tdrecherche{
   background-image:url("../images/recherche_02.png");
   width:161px;
   background-repeat:no-repeat;
}

Il s'agit d'un extrait de code CSS utilisé dans ce site. Il est encore tôt pour expliquer ce qu'il donne,
mais sachez que c'est vraiment simple et facile en même temps.

Comment déclarer un style CSS?

Attribut de style local
Pour faire simple, prenons le code suivant:

<font color="red" face="verdana" size="3">

   Bonjour à tous!
</font>

Rien de sorcier là dedans. C'est sensé donner celà:

Bonjour à tous!

Pourtant, il existe une autre syntaxe qui permet de réussir exactement le même affichage. La voilà:

<font style="color:red; font-family:verdana; font-size:12pt">

   Bonjour à tous!
</font>

Pour en avoir le cœur net, voilà ce que cela donne:

Bonjour à tous!

Bon. Vous avez certainement remarqué la différence entre les deux codes. Tout d'abord, les attributs
HTML color, face et size ont disparu et ils ont été remplacés par un seul et unique attribut; il s'agit de
style. Comme valeur, il reçoit une séquence d'instructions qui sont respectivement: color:red qui
désigne la couleur rouge, font-family:verdana qui signifie la police verdana et en fin, font-size:12pt
qui spécifie la taille de police 12pt (équivalente en HTML à size="3"). La séquence d'instructions qui
représente la valeur de l'attribut style est en fait, du CSS.

L'attribut HTML style qu'on a appliqué à la balise <font> s'appelle attribut de style local. En effet, le
style CSS faisant office de sa valeur s'applique exclusivement à la balise locale sur laquelle il est
déclaré qui est la balise <font>.

Remarquez aussi que nous avons défini trois propriétés CSS: color, font-family et font-size suivie
chacune par le caractère deux points (:) suivi des valeurs associées (respectivement red, verdana et
12pt).

En règle générale, une instruction CSS est déclarée sous la forme: propriété:valeur. Il y a aussi le
point virgule (;) qui sert à séparer deux instructions CSS.

Style global à la page

Un style déclaré par le biais d'un attribut de style local présente un inconvénient majeur. En effet, il
ne s'applique qu'à la balise sur laquelle il est déclaré. Or, sur une page Web, il existe plusieurs
éléments qui se ressemblent (décrits par la même balise en général). Il est donc judicieux que ces
éléments aient le même style, et par conséquent on serait obligé de redéclarer le même style local
autant de fois qu'il y a d'éléments similaires. Fastidieux non?
Heureusement, il existe une deuxième méthode pour déclarer du CSS, il s'agit d'un style global à la
page Web. Voilà comment cela fonctionne:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <style>
         font{
            color:red;
            font-family:verdana;
            font-size:12pt;
         }
      </style>
   </head>
   <body>
      <font>
         Bonjour à tous!
      </font>
   </body>
</html>

Le résultat escompté ne change pas:

Bonjour à tous!

Je crois que c'est claire, au lieu de déclarer les styles sur la balise <font>, on les a regroupé à l'entête
du document (balise <head>), mais pas n'importe où dans l'entête. Vous avez certainement
remarqué la nouvelle venue: balise <style>. Cette balise se déclare toujours dans la balise <head> et
contient donc exclusivement de la syntaxe CSS. Vous avez donc compris qu'un document HTML peut
contenir du code HTML et du code CSS. Il suffit d'indiquer au navigateur où commence le CSS et où
finit-il. C'est le rôle de la balise <style>.

Je crois que les propriétés sont claires maintenant, donc nous allons plutôt faire le point sur le mot
font et les accolades ({ et }).

Puisque les styles sont exportés loin de la balise, alors comment le navigateur saurait-il si on
souhaitait l'appliquer sur telle ou telle balise? C'est le rôle du sélecteur de balise représenté cette
fois par le mot font. Attentions, il ne s'agit pas d'une balise car il ne contient pas les chevrons ouvrant
et fermant, il s'agit juste d'un sélecteur qui a le même nom que la balise ciblée.

Les accolades sont là pour englober l'ensemble des styles à appliquer sur les balises présentes dans le
document et qui portent le même nom que le sélecteur déclaré (balises <font> dans ce cas).

Dans ces exemples j'ai utilisé la balise <font> car elle vous est familière. Mais sachez qu'elle est
devenue obsolète en HTML5. Alors vaut mieux ne pas vous en servir dans vos projets.

La feuille de style en cascade

Si la première méthode sert à définir un style en local sur la balise concernée, et la deuxième permet
d'englober les styles pour qu'ils s’appliquent sur tous les éléments semblables dans le document, il
existe une troisième méthode qui est la plus pratique et la plus utilisée. D'ailleurs le nom du langage
fait allusion à cette méthode, il s'agit de la feuille de style en cascade.

La feuille de style en cascade permet de définir des styles qui s'appliqueront, non pas sur le contenu
d'un seul document, mais sur le contenu de tous les documents qui constituent votre projet Web
(site ou application Web). Cette technique permet d'uniformiser le design sur toutes les pages en
gratifiant les éléments similaires du même style. Ainsi, si le grand titre d'une page était bleu, il le
serait aussi sur les autres pages.

La feuille de style est un fichier texte qui contient uniquement du code CSS. Par conséquent il a
l'extension ".css".

Pour mieux comprendre comment cela fonctionne, supposons que nous disposons d'une feuille de
style du nom de style.css, et qui contient le code suivant:

font{
   color:red;
   font-family:verdana;
   font-size:12pt;
}
h1{
   color:blue;
}

Vous avez compris que nous avons déclaré deux sélecteurs de balises font et h1, chacun avec un
style qui s'appliquera sur les balises correspondantes. Maintenant on veut appliquer ces styles à une
page Web. On va donc faire appel à la feuille de style au sein de la page Web souhaitée dont le code
ressemblerait à ceci:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
      <h1>Exemple de CSS</h1>
      <font>
         Voici à quoi ressemble l'effet de la feuille de style sur ce document.
      </font>
   </body>
</html>

Avez-vous remarqué la nouvelle balise? Oui, il s'agit bien de la balise <link>. C'est une balise
orpheline et c'est elle qui se charge d'associer la feuille de style au document HTML. Examinons ses
attributs:

 Attribut rel: permet de définir le type de ressource à intégrer au document. Dans ce cas nous
avons spécifié stylesheet, c'est à dire feuille de style. Vous avez probablement compris que
si nous avons spécifié cette valeur pour indiquer une feuille de style, c'est que la balise <link>
peut aussi intégrer d'autres types de ressources, notamment les icone (connus sous le nom
favicon).
 Attribut type: c'est un attribut facultatif qui permet de spécifier le type et le MIME de la
ressource à intégrer. Dans ce cas il s'agit de text/css qui désigne: document texte écrit en
CSS.
 Attribut href: cet attribut permet de spécifier le chemin (relatif ou absolu) de la feuille de
style à appliquer. Dans l'exemple, nous avons supposé que le document HTML et la feuille de
style sont dans le même emplacement.
L’exécution des codes précédents donne:

Exemple de CSS
Voici à quoi ressemble l'effet de la feuille de style sur ce document.

Voilà, vous savez maintenant comment appliquer des styles CSS à votre code HTML. Personnellement
je vous recommande la troisième méthode qui centralise tous les styles en un seul endroit, ce qui
garanti l'uniformité du design sur tout le projet et aussi, facilite les modifications éventuelles du code
CSS.

Dans la suite de ce cours nous allons découvrir les différentes propriétés CSS à appliquer à nos objets
HTML. Quelque soit la méthode que vous avez choisi parmi les trois qu'on a vu, la syntaxe que nous
allons voir sera pratiquement la même.

Quiz (Pour tester vos connaissances)

1. Peut-on déclarer deux balises <link> pour appeler deux feuilles de styles CSS
différentes sur le même document?

Oui

Non
On peut appeler autant de feuilles de styles CSS que l'on veut au sein de la même page à l'aide
des balises <link>

1. Peut-on appeler une feuille de style CSS et en même temps se servir de la balise
<style> dans la page?

Oui

Non
Bien que c'est peu recommandé de procéder ainsi, on peut toujours multiplier les méthodes
d’application des styles CSS au sein de la même page.

1. Au cas où un même style a été décrit en tant que style local et dans une feuille de style
CSS. Lequel des deux sera appliqué à la balise concernée?

Celui de la feuille de style CSS

Celui de l'attribut de style local

Au cas où un style a été défini à plusieurs endroits, le plus significatif est celui qui est le plus
proche de l'objet ou celui qui décrit le plus précisément l'objet.

1. Cette balise
<link href="style.css" />
ne fonctionnera pas à cause du:

Manque de l'attribut type="text/css"

Manque de l'attribut rel="stylesheet"

L'attribut type="text/css" est facultatif dans la balise <link>. Par contre, l'attribut
rel="stylesheet" est obligatoire pour indiquer au navigateur que ce que l'on veut inclure est
une feuille de style CSS.

Page 3: Couleurs de textes et propriétés agissant sur le fond

Couleur de texte
La propriété color permet de spécifier la couleur à appliquer à un texte. Le texte peut être placé dans
n'importe quelle balise (<div>, <span>, <header>...).

Gestion des couleurs en CSS

Pour décrire une couleur en CSS, il existe plusieurs méthodes:

 Nom de la couleur en anglais: A l'instar de HTML, on peut décrire une couleur par son nom.
Or, ce n'est pas très pratique comme méthode car peu de couleurs ont réellement de noms,
alors qu'ils en existent plus de 16 millions en tout.
 Code hexadécimal: Comme pour le HTML, on peut définir une couleur par le code
hexadécimal .
 Code décimal (ou RGB): En CSS, une autre méthode pour définir les couleurs existe. Il s'agit
d'indiquer le code décimal de la couleur. Le principe reste le même que pour le codage
hexadécimal, mais les codes sont exprimés à la base décimale dont les nombres seront, cette
fois, compris entre 0 et 255. A titre d'exemple, le code du rouge est : rgb(255,0,0). Les
valeurs dans les parenthèses représentent respectivement les couleurs primaires rouge, vert
et bleu.
 Code RGBA: Depuis la version 3 de CSS, une nouvelle méthode pour décrire les couleurs est
apparue. Il s'agit de RGBA. Cette notation permet de prendre en compte le degré de
transparence (le A pour Alpha). Les trois premiers paramètres de RBGA désignent les
couleurs primaires et le quatrième indique le degré de transparence de la couleur appliquée.
Il est compris entre 0 (pour totalement transparent) et 1 (pour totalement opaque), et peut
avoir deux chiffres après la virgule. Par exemple, rgba(255,0,0,0.5) désigne un rouge
translucide.
 Le mot clé inherit: Le mot clé inherit permet à une balise d'hériter le style de la balise dans
laquelle elle est inclue. Dans ce cas c'est la couleur qui sera héritée.

Exemple de code CSS:

h1{
   color:orange;
}
div{
   color:#888888;
}
span{
   color:rgb(0,0,255);
}
footer{
   color:rgba(0,0,0,0.5);
}

Ce code applique la couleur orange sur les textes contenus dans les balises <h1>, gris pour les <div>,
bleu pour les <span> et noir translucide pour les <footer>.

Si vous voulez insérer un commentaire au milieu du code CSS utilisez la notation suivante: /* votre
commentaire */.
Propriétés d'arrière plan
CSS agit sur les arrière plan en leur appliquant différents style dont voici les plus utilisés:

Propriété background-color
La propriété background-color permet d'appliquer une couleur d'arrière plan à l'objet HTML
souhaité. Pratiquement, tous les objets HTML peuvent avoir un arrière plan. La valeur de cette
propriété correspond à la couleur que l'on peut décrire par l'une des 4 méthodes expliquées dans le
paragraphe précédent.

Si on souhaite colorer le fond de la page Web en entier alors on utilise le sélecteur de balise body:

body{
   background-color:#CCCCCC;
}

Ce code applique un gris clair à l'arrière-plan du document.

Notez que le point virgule à la fin du style est facultatif car il sert principalement à séparer deux styles
qui se suivent.

Propriété background-image
La propriété background-image sert à insérer une image en arrière plan de l'objet souhaité. en
utilisant la syntaxe suivante: background-image:url("chemin_de_l_image"). Le chemin de l'image
peut être absolu ou relatif à partir de l'emplacement où est déclaré le style.

Il faut noter que l'image est appliquée en arrière plan avec sa taille réelle. Si elle est plus grande que
l'objet qui l'accueille alors elle sera tronquée et si elle est plus petite alors elle sera répétée jusqu'à ce
que tout le fond de l'objet soit couvert.

Exemple:

body{
   background-image:url("images/footerlogo.png");
}

Ce qui donne:

Propriété background-repeat
La propriété background-repeat permet de contrôler la répétition de l'image au cas où celle ci est
plus petite que l'objet qui l'accueille. On peut lui donner les valeurs suivantes:

 repeat: C'est la valeur par défaut. Elle permet de répéter l'image sur la largeur et la hauteur
de l'objet.
 repeat-x: Sert à répéter l'image seulement sur la largeur de l'objet.
 repeat-y: Sert à répéter l'image seulement sur la hauteur de l'objet.
 no-repeat: Avec cette valeur, l'image est appliquée une seule fois sans répétition. Par défaut
elle sera placée sur le coin haut à gauche de l'objet.

Exemple:
body{
   background-image:url("images/footerlogo.png");
   background-repeat:repeat-x;
}

Ce qui donne:

Propriété background-position
La propriété background-position permet de placer l'image de l'arrière plan à l'endroit souhaité de
l'objet. Par défaut, la première image qui s'applique en arrière-plan est placée en haut à gauche, puis
les autres images la suivent pour combler tout l’espace disponible.

La valeur que l'on peut donner à cette propriété peut être exprimé en pourcentage (%) ou par les
mots clé: top, center,bottom,left et right. Par exemple si on souhaitait placer l'image d'arrière plan
au juste milieu de l'objet, la propriété CSS ressemblerait à ceci: background-position:center center
ou background-position:50% 50%. Nous avons exprimé deux valeurs séparées par un espace, une
pour la largeur et l'autre pour la hauteur.

Exemple:

body{
   background-image:url("images/footerlogo.png");
   background-repeat:no-repeat;
   background-position:50% 50%;
}

Ce qui donne:

Propriété background-attachment
La propriété background-attachment permet de fixer l'arrière-plan de l'objet si celui là contient une
barre de défilement. Elle peut avoir deux valeurs: scroll qui est la valeur par défaut et qui laisse
défiler l'arrière plan avec l'avant plan si le client entraîne la barre de défilement qui apparaît sur
l'objet et fixed qui permet de figer l'arrière plan pendant que l'avant plan glisse en dessus.

Pour mieux comprendre à quoi cela ressemble on va exécuter le code suivant:

body{
   background-image:url("images/footerlogo.png");
   background-repeat:no-repeat;
   background-position:50% 50%;
   background-attachment:fixed;
}

Après exécution on aura:

Contenu débordant qui entraine l'affichage de la barre de défilement

Propriété background-size
La propriété background-size permet de modifier la taille de l'image appliquée en arrière plan d'un
container (ou de la page entière). Par défaut, l'image est appliquée avec sa taille réelle. Ce qui pose
parfois un problème d'affichage, car soit elle est trop grande ou trop petite par rapport au container
qui l'accueille.

La propriété background-size peut accepter deux valeurs; la largeur et la hauteur. Ces valeurs
peuvent être exprimées en pixel ou en pourcentage. Cependant, la valeur "cover" semble être trop
pratique car elle permet d'adapter l'image au container de telle sorte à en exploiter l'espace
maximal.
Appliquons la valeur cover à background-size sur l'image de l'exemple:

body{
   background-image:url("images/footerlogo.png");
   background-size:cover;
}

Après exécution on aura:

La sous propriété linear-gradient

La sous propriété linear-gradient s'applique à la propriété background pour générer un arrière plan
en dégradé de couleur. Elle possède trois paramètres:

 Direction du dégradé: qui peut avoir les valeurs comme to bottom (vers le bas), to left (vers
la gauche), to left bottom (incliné vers la gauche et vers le bas) etc... Par défaut elle vaut la
valeur to bottom.
 Couleur de début: Précise à partir de quelle couleur le dégradé sera engendré. La couleur est
spécifiée grâce à l'une des 4 méthodes déjà vues.
 Couleur de fin: Précise la deuxième couleur du dégradé.

Entre la couleur de début et la couleur de fin le navigateur générera des nuances assurant un passage
progressif entre les deux couleurs.

Exemple:
body{
   background:linear-gradient(to bottom,#DDDDDD,#FFFFFF);
}

Ce qui donne:

La syntaxe de la sous propriété linear-gradient est légèrement modifiée pour les anciennes versions
de certains navigateur afin de la rendre compatible. En effet, on la précède par un préfixe connu sous
le nom de préfixe vendeur. Ce préfixe fait référence aux différents moteurs de rendu existants.

Voici la liste des préfixes vendeur connus:

 -moz-: signifie Mozilla et fait référence à son moteur de rendu Gecko.

 -webkit-: signifie le moteur de rendu Webkit (utilisé par Google Chrome et Safari).
 -o-: signifie Opera et son moteur de rendu Presto.
 -ms-: signifie Microsoft et fait référence à son moteur de rendu Trident.

La déclaration précédente peut donc s'écrire comme ceci:

body{
   -moz-background:linear-gradient(to bottom,#DDDDDD,#FFFFFF);
   -webkit-background:linear-gradient(to bottom,#DDDDDD,#FFFFFF);
   -o-background:linear-gradient(to bottom,#DDDDDD,#FFFFFF);
   -ms-background:linear-gradient(to bottom,#DDDDDD,#FFFFFF);
   background:linear-gradient(to bottom,#DDDDDD,#FFFFFF);
}

La dernière ligne est destinée aux navigateurs modernes, pour lesquels les préfixes sont devenus
inutiles. En fait, le navigateur lit les lignes une à une jusqu'à ce que le code soit exécuté
correctement.
Il est possible de spécifier plusieurs couleurs pour le dégradé. Le navigateur fera en sorte de répartir
les espaces d'une manière équitable.

Exemple:

body{
   background:linear-gradient(to bottom,#FF0,#F00,#F0F);
}

Ce qui donne:

Si on veut que le navigateur ne répartisse pas les dégradés équitablement alors on peut spécifier la
longueur sur laquelle ceux ci s'étalent. Il est préférable de spécifier cette longueur en pourcentage.

Exemple:

body{
   background:linear-gradient(to bottom,#FF0 0%,#F00 30%,#F0F 100%);
}

Ce qui donne:

Dans ce cas on a précisé que le jaune s'applique au début. A 30% de la zone on applique le rouge. Le
dégradé entre le jaune et le rouge s'étale donc sur 30% de la hauteur de la zone colorée. Ensuite le
magenta s'applique à la fin et le dégradé entre le rouge et le magenta s'applique donc sur 70% de la
zone colorée.

Il est possible de regrouper les différentes propriétés d'arrière-plan en une seule qui est background
qui aura les valeurs vues précédemment espacées par un espace blanc. Exemple: background:
#FFFF00 url("images/footerlogo.png") no-repeat;.

Page 4: Les polices

Propriétés de la famille font
Les propriétés CSS qui agissent sur la police commencent par font. Ils servent à mettre en forme le
contenu texte d'un document.

Propriété font-size
La propriété font-size permet de spécifier la taille de la police. Si cette propriété n'est pas spécifiée
alors la taille de la police vaut par défaut 12 points (qui correspond à l'indexe 3 en HTML).

La taille de la police peut être absolue ou relative est peut s'exprimer de plusieurs manières:

 L'unité px: Il s'agit d'une taille absolue. px désigne pixel. La taille de la police désigne la
hauteur des caractères en pixel.
 L'unité pt: Là encore c'est une taille absolue. pt désigne point. C'est une unité connue en
typographie. 1 point mesure 1/72 pouces.
 Les unité conventionnelles: Là encore ce sont des tailles absolues très connues, je parles de
cm, mm, in (pour inch ou pouce)...
 L'unité em: em est une unité relative. 1em désigne la taille normale. Si vous voulez agrandir
la taille alors il faut déclarer une valeur supérieure à 1 (par exemple 1.2em) et inversement.
 L'unité %: Le pourcentage est également une taille relative. 100% désigne la taille normale et
80% une taille plus petite.
Exemple:
h1{
   font-size:36pt;
}

Ce style appliquera la taille 36pt aux titres <h1>. Par conséquent il auront l'air plus grand car ils
mesurent 24pt normalement.

Propriété font-style
La propriété font-style permet d'écrire un texte en italique. Par défaut elle vaut la valeur normal qui
n'a aucun effet sur le texte. La valeur italic incline le texte.
Exemple:

span{
   font-style:italic;
}

Propriété font-variant
La propriété font-variant permet de convertir le texte en petites majuscules. Par défaut elle vaut la
valeur normal. Si la valeur small-caps est déclarée alors la police sera transformé.
Exemple:

h1{
   font-variant:small-caps;
}

Ce qui donne:

TITRE H1 CONVERTI EN PETITES

MAJUSCULES.
Les petites majuscules ont la forme des lettres majuscules et la taille des minuscules.

Propriété font-weight
La propriété font-weight désigne la graisse de la police. Elle peut prendre plusieurs valeurs (vue que
la graisse a des niveaux) mais en pratique y'en a que deux qui sont souvent utilisée à savoir bold qui
met le texte en gras (comme le fait la balise <b>) et normal qui désactive le gras si le texte l'était déjà
(cas des balises <h1>, <h2>... par exemple).

Exemple:

h1{
   font-weight:normal;
}

Ce qui donne:

Titre h1 sans graisse.

Propriété font-family
La propriété font-family désigne la police d'écriture du texte. Elle accepte comme valeur le nom de la
police.
Exemple:

body{
   font-family:verdana;
}

Ce qui signifie que tous les textes inclus dans la balise <body> seront écrits en police verdana. Si le
nom de la police contient des espaces alors il faut la déclarer entre des guillemets.

Exemple:

body{
   font-family:"Century Gothic";
}

Bien entendu, la condition pour que la police s’exécute correctement est qu'elle soit disponible sur le
système du client. Mais imaginons un instant que la police choisie n'est pas disponible. Dans ce cas,
le navigateur chargera la police par défaut qui est "Times New Roman" et qui n'est pas du tout
adaptée aux sites Web. La solution consiste donc à déclarer une liste de polices et laisser le
navigateur la parcourir jusqu'à ce qu'il rencontre une police disponible.

Exemple:

body{
   font-family:"Century Gothic", verdana, sans-serif;
}

Dans ce cas, le navigateur cherchera la police "Century Gothic", si elle est disponible il la chargera
sinon il passera à "Verdana" etc...

N'oubliez pas de séparer les noms de la police par une virgule (,).

Vous avez sans doute aperçu "sans-serif". En effet, il ne s'agit pas d'une police normale mais une
famille générique qui regroupe plusieurs polices. Donc, au lieux de lister beaucoup de polices, on
déclare la première, la deuxième, et pourquoi pas la troisième, mais après on déclare la famille
générique et laisser le navigateur sélectionner la première police disponible et appartenant à cette
famille si les trois premières ne sont pas trouvables.

Les polices génériques

Comme nous avons vu dans le dernier exemple, sans-serif représente une police générique (ou
famille générique) regroupant plusieurs polices qui ont des caractéristiques communes.

Il existe plusieurs familles génériques mais sur le Web nous n'avons recours qu'à trois d'entre elles:

 Famille de police avec empattement (Sérif): Ce sont des polices qui affichent les caractères
avec des terminaisons qui dépassent du caractères. C'est comme des pattes sur lesquels le
caractère repose. C'est le cas de "Times New Roman" par exemple. Le nom CSS de cette
famille est serif (sans accent).
 Famille de police sans empattement (Sans Sérif): Ce sont des polices qui n'affichent pas les
terminaisons comme les Sérif. On les appelle aussi des polices à bâtons. Il sont les plus
adaptés aux pages Web. Exemple: "verdana" ou "arial". Le nom CSS de cette famille est sans-
serif.
 Famille de police à chasse fixe (Monospace): Ce sont des polices qui s'étendent sur la même
largeur quelque soit le caractère. C'est une police adaptée pour afficher du code source sur
une page Web par exemple. Les polices "Courier" et "Courier New" sont les plus connues de
cette famille. Le nom CSS correspondant est monospace.
Exemple:
<h1 style="font-weight:normal; font-family:serif">MIME</h1>
<h1 style="font-weight:normal; font-family:sans-serif">MIME</h1>
<h1 style="font-weight:normal; font-family:monospace">MIME</h1>

Ce qui donne:

Les polices embarquées

On les appelles polices embarquées ou polices en ligne. Il s'agit d'une police qui est envoyée au
client par le serveur pour s'en servir durant l’exécution d'une page Web. En effet, le navigateur
repose sur les polices installées sur le système, mais cette pratique limite l'utilisation des polices
spéciales qui, souvent, ne sont pas disponibles chez la plupart des clients. La solution est donc
d'envoyer la police désirée au client pour s'en servir. C'est possible en CSS grâce à la règle @font-
face.

Il existe de nombreuses règles en CSS nommées règles-at (pour règle @). Ils commencent par le
caractère arobas @. L'une de ces règles-at est @font-face qui permet de spécifier une police spéciale
à envoyer au navigateur pour qu'il affiche le texte tel que l'on souhaite.

La syntaxe ressemble à ceci:

@font-face{
   font-family:Nom_de_la_police;
   src:url("Chemin_de_la_police_sur_le_serveur");
}

 Nom_de_la_police: désigne le nom que l'on veut attribuer à la police. Ce nom sera utilisé
plus tard dans les propriétés font-family.
 Chemin_de_la_police_sur_le_serveur: désigne, comme son nom l'indique, le chemin (absolu
ou relatif) de la police (qui est disponible sur le serveur).

Exemple:
@font-face{
   font-family:htower;
   src:url("fonts/htower.ttf");
}
h1{
   font-weight:normal;
   font-family:htower;
}

Ce qui donne:

Police embarquée
Vous avez remarqué l’extension de la police? Il s'agit de TTF c'est le format le plus populaire, mais
elle n'est pas supporté par tous les navigateur. La solution consiste donc à convertir la police en
plusieurs formats pris en charge par les navigateurs et qui sont: TTF, WOFF et SVG, sans oublier le
format EOT connu par Internet Explorer.

Si on considérait que la police "htower" de l'exemple précédent a été convertie à toutes ces formats,
la règle @font-face ressemblerait à ceci:
@font-face{
   font-family:"htower";
   src:url("htower.eot");
   src:url('htower.woff") format("woff"),
       url("htower.svg") format("svg"),
       url("htower.ttf") format("truetype");
}

Comme Internet Explorer fait toujours l'exception, on a séparé sa déclaration src avec le format EOT.
Les trois autres déclarations sont séparées par la virgule. De cette manière le navigateur parcourra la
liste jusqu'à ce qu'il trouve le format convenable.

La déclaration format est facultative. Elle indique au navigateur le format de la police. Cependant,
l'extension suffit pour en informer.

Page 5: Styles de textes, marges, dimensions et listes

La famille text

Propriété text-align
Comme son nom l'indique, la propriété text-align permet d'aligner le texte au sein de son conteneur.
Les différentes valeurs que l'on peut lui attribuer ne vous sont pas étrangères:

 left: C'est la valeur par défaut, elle permet d'aligner le texte (ou d'autres objets comme les
images) à gauche du conteneur.
 right: Pour placer le contenu à droite.
 center: Sert à center le contenu.
 justify: Permet de justifier le contenu en l'étalant sur toute la longueur de la ligne. Nous
aurons donc les lignes (d'un paragraphe par exemple) qui finissent toutes à la même
position.

Propriété text-indent
La propriété text-indent permet d'appliquer une indentation (alinéa) aux balises de type block
(comme <section>, <aside>, <p>, <div>...). La première ligne de la balise qui reçoit le style marquera
un retrait par rapport aux autres lignes. C'est ce que l'on appelle l'indentation. La valeur de text-
indent s'exprime en pixel.

Propriété text-decoration
La propriété texte-decoration permet de souligner, surligner ou barrer un texte. Voici les différentes
valeurs possibles:

 underline: Le texte est souligné (comme le ferait la balise HTML <u>).

 overline: Le texte est surligné. La ligne se trouvera donc en dessus du texte, mais c'est
rarement utilisé.
 line-through: Le texte est barré. La ligne passe à travers le texte comme le ferait la balise
HTML <s>).
 none: Aucune décoration ne sera appliquée au texte (toutes les lignes seront retirées).

Propriété text-transform
La propriété text-transform permet de convertir le texte en minuscule, majuscule ou capitalisé. Les
différentes valeurs sont:

 lowercase: Permet de convertir tous les caractères en minuscule.

  uppercase: Permet de convertir tous les caractères en majuscule.
 capitalize: Permet de convertir le premier caractère de chaque mot en majuscule et laisser
les autres sans transformation.

Il ne faut pas confondre text-transform:uppercase avec font-variant:small-caps. La première

converti le texte en majuscule et la deuxième le convertit en petites majuscules.

Propriété letter-spacing
Bien que cette propriété ne commence pas par le préfixe text, mais elle fait parti de la famille texte.
La propriété letter-spacing permet d'appliquer un espacement entre les caractères d'un texte. Cet
espacement peut être exprimé en pixel.

Exemple
Code HTML:

<h1>Cours de CSS</h1>
<h2>Résumé</h2>
<div>
CSS (Cascading Style Sheets) ou <span>feuilles de style en cascade</span> est un langage de style
simple et puissant. Il permet de donner du look à votre page Web et la rendre ainsi
présentable.<br />
Si HTML sert à intégrer du contenu, le CSS quant à lui, applique du design à ce contenu. Il couvre tous
les aspects visuelles d'une page Web, commençant de la simple coloration des objets et allant
jusqu'aux et transformations complexes de ceux ci et le responsive design.
</div>

Code CSS:

body{
   font-family:verdana, arial, sans-serif;
}
h1{
   text-align:center;
   letter-spacing:4px;
   color:#FFFFFF;
   background-color:#000000;
}
h2{
   text-transform:uppercase;
}
div{
   text-indent:20px;
   text-align:justify;
   font-size:10pt;
}
span{
   text-decoration:underline;
}

Ce qui donne le résultat suivant:

Cours de CSS
RÉSUMÉ
CSS (Cascading Style Sheets) ou feuilles de style en cascade est un langage de style simple et puissant. Il
permet de donner du look à votre page Web et la rendre ainsi présentable.
Si HTML sert à intégrer du contenu, le CSS quant à lui, applique du design à ce contenu. Il couvre tous les
aspects visuelles d'une page Web, commençant de la simple coloration des objets et allant jusqu'aux et
transformations complexes de ceux ci et le responsive design.

Marge externe: famille margin

Pour exprimer les marges en CSS on fait appelle à la propriété margin. Sa valeur est exprimée en
pixel. Si par exemple on déclare le style margin:10px, cela signifie que l'objet auquel on l'a appliqué
aura une marge qui mesure 10px tout au tour (en haut, en bas, à droite et à gauche).

Pour spécifier une marge différente de chaque coté on fait donc appel aux propriétés suivantes:

 margin-left: Signifie la marge gauche.

 margin-top: Signifie la marge supérieure.
 margin-right: Signifie la marge droite.
 margin-bottom: Signifie la marge inférieure.

Supposons que nous avons le style suivant:

img{
   margin:10px;
   margin-bottom:20px;
}

La première propriété signifie que l'image aura une marge de 10px tout autour et la deuxième
appliquera une marge inférieure de 20px. Si la propriété margin-bottom n'a pas été déclarée, alors la
marge inférieure aura aussi la valeur 10px, mais le fait de la définir donne à celle ci la valeur 20px.
L'image aura donc une marge inférieure de 20px car la propriété qui l'applique est plus explicite.

Marge interne: famille padding

Si margin applique une marge autour de l'objet, padding l'applique à l'intérieur de celui ci. La
propriété padding applique une marge interne aux balises de types conteneur comme <header>,
<footer>, <div>...

Comme pour la propriété margin, padding applique une marge interne exprimée en pixel de tous les
cotés de l'objet. Pour spécifier des valeurs différentes aux marges internes on fait appel aux
propriétés suivantes:

 padding-left: Signifie la marge interne gauche.

 padding-top: Signifie la marge interne supérieure.
 padding-right: Signifie la marge interne droite.
 padding-bottom: Signifie la marge interne inférieure.

Largeur et hauteur
Seules les balises de type block peuvent être redimensionnés. Les balises inline ne le permettent pas
à l'exception des images et champs de formulaires.

Pour exprimer la larguer et la hauteur on fait appel aux propriétés width et height. Elle sont
exprimées en pixels, pourcentage ou en unités conventionnelles (cm, mm, in...). On peut aussi
spécifier la larguer ou la hauteur minimales avec les propriétés min-width et min-height ou
maximales grâce à max-width et max-height.

La largeur minimale permet à l'objet d'avoir une largeur supérieure ou égale à celle spécifiée. Si le
contenu est plus grand que l'objet, alors la largeur de celui ci gagne en taille et si il est plus petit,
alors l'objet ne passe pas en dessous de la largeur minimale spécifiée. De même pour la hauteur
minimale.

Le même principe s'applique sur la largeur et la hauteur maximales.

Exemple
Code HTML

<div>
   <p>
      Le paragraphe inclus dans la DIV a une marge externe de 20px et une marge interne de 30px;
   </p>
</div>

Code CSS:

div{
   background-color:orange;
   padding:20px;
}
p{
   margin:20px;
   padding:30px;
   background-color:yellow;
   width:50%;
   height:200px;
}

Ce qui donne ceci:

Le paragraphe inclus dans la DIV a une marge externe de 20px et une marge interne de
30px;

Vous avez probablement remarqué que la marge externe de la balise <p> constitue la marge interne
de la balise <div>, car la première est inclue dans la deuxième.

Une autre remarque saute aux yeux; la largeur de la balise <p> est supérieure à 50% décrite en CSS.
C'est normal car elle mesurerait exactement 50% si elle n'avait pas de padding, sinon la valeurs de
padding sera ajoutée à la largeur appliquées (dans ce cas 60px on été ajoutés à la largeur: 30px du
padding de gauche et 30px du padding de droite).

Les listes
Les listes créées à l'aides des balises <ul> ou <ol> peuvent être modifiées en CSS. En plus des polices,
marges et autres propriétés qui peuvent leur donner un look différent, il existe trois propriétés qui
sont spécialement conçues pour elles.
Propriété list-style-type
La propriété list-style-type permet de définir le type de puce des éléments de la liste. Elle peut
accepter les valeurs vues en HTML (disc, circle et square).
Cependant, même si on a défini la liste non ordonnée (à l'aide de la balise <ul>) on peut quand même
lui donner l'apparence d'une liste ordonnée comme si elle était définie avec la balise <ol>) grâce aux
valeurs suivantes:

 decimal: pour les nombres décimaux commençant de 1.

 decimal-leading-zero: pour les nombres décimaux avec zéro initial commençant de 01.
 upper-roman: pour les nombres romains majuscules commençant de I.
 lower-roman: pour les nombres romains minuscules commençant de i.
 lower-greek: pour la numération grecque.
 lower-alpha: pour les lettres de l'alphabet minuscules.
 upper-alpha: pour les lettres de l'alphabet majuscules.

Propriété list-style-image
Si on veut définir nos propres puces, autant le faire avec des images. La propriété list-style-image
list-style-image:url("chemin_de_l_image")

Propriété list-style-position
La propriété list-style-position permet de définir la position de la puce par rapport à la boite
contenant les éléments de al liste. Elle peut avoir deux valeurs: inside et outside.

Exemple:

Code HTML:

<ul>
   <li>Premier élément</li>
   <li>Deuxième élément</li>
   <li>Troisième élément</li>
</ul>

Code CSS:

ul{
   list-style-type:lower-greek;
}

Ce qui donne:

 Premier élément
 Deuxième élément
 Troisième élément

Page 6: Les bordures

Une bordure et un cadre qui entoure des objets comme les images, cellules d'un tableau,
conteneurs... CSS offre des styles qui cassent le rendu par défaut appliqué aux bordures à l'aide du
HTML par le biais de propriétés que l'on peut personnaliser à notre guise, ce qui offre des possibilités
illimitées pour avoir un design optimal.

Propriété border-color
La propriété border-color permet de définir la couleur de la bordure. Elle peut être définie par son
nom (anglais), le code hexadécimal, le code décimal (rgb) ou le code décimal avec prise en charge de
la transparence (rgba).

Exemple:

border-color:#0000FF; /* applique la couleur bleue à la bordure */

Propriété border-width
La propriété border-width permet de définir l'épaisseur de la bordure. Elle est exprimée en pixel
(l'unité la plus appropriée). Cependant on peut recourir à d'autres unités comme cm, mm, in...

Exemple:

border-width:1px; /* applique une bordure qui fait 1 pixel d'épaisseur */

Propriété border-style
La propriété border-style permet de définir le style de la bordure. Le style de la bordure définit
plusieurs formes grâce aux valeurs que l'on peut résumer ci-après:

 solid: pour une bordure solide, c'est à dire, tracée sous forme de trait continu.
 dotted: pour une bordure pointillée.
 dashed: pour une bordure constituée de tirets.
 double: la bordure est doublée (deux traits parallèles).
 ridge: donne une bordure en relief.
 groove: pour une bordure rainurée.
 inset: pour une bordure en relief vers l’intérieur.
 outset: pour une bordure en relief vers l’extérieur.
 none: aucune bordure n'est appliquée.
 inherit: hérite le même style de bordure que l'élément parent (conteneur).

Exemple:
border-style:solid;

Si on veut avoir des styles différents pour chacune des quatre bordures appliquées autour de l'objet,
alors on remplace le préfixe border par:

 border-top: qui désigne la bordure supérieure

 border-right: qui désigne la bordure droite
 border-bottom: qui désigne la bordure inférieure
 border-left: qui désigne la bordure gauche

Exemple:
border-top-style:solid;
border-right-style:dotted;
border-bottom-style:dashed;
border-left-style:ridge;

Cela fait trop de code n'est ce pas? Heureusement on peut remplacer ces quatre lignes par ceci;

border-style:solid dotted dashed ridge;

En effet, si vous spécifiez plusieurs valeurs séparées par espace le navigateur applique les style dans
le sens suivant: bordure supérieure -> bordure droite -> bordure inférieure -> bordure gauche.
On peut même regrouper tous les styles vues pour les bordures dans une seule propriété qui est
border comme ceci:

border:solid 1px #0000FF;

Propriété border-radius
La version 3 de CSS a introduit une nouvelle propreté qui s'applique au bordures. Il s'agit de border-
radius qui applique un arrondi sur les coins de l'objet qui accueille la bordure.

En effet, avant CSS3 les objets susceptibles d’accueillir des bordures comme les cellules d'un tableau,
les conteneurs, les champs de formulaires... était de forme rectangulaire avec des coins en angle
droit. Désormais, et grâce à CSS3, cela a changé. On peut donc avoir des arrondis qui modifient
l'apparence classique. La syntaxe ressemble à ceci:

div{
   width:300px;
   height:300px;
   background-color:orange;
   border-radius:10px;
}

Ce qui donne:

Essayons maintenant le code suivant:

div{
   width:300px;
   height:300px;
   background-color:orange;
   border-radius:150px;
}

Le résultat est:

Et oui, nous avons obtenu un cercle. En fait, radius signifie rayon. La propriété border-radius arrondi
le coin de l'objet de telle sorte à ce qu'il représente le un quart de cercle dont le rayon mesure la
valeur attribuée à la propriété. Dans l'exemple précédent, nous avons déclaré un rayon égal à la
moitié de la largeur et la hauteur de la balise <div>. On a donc appliqué 4 quarts de cercle sur tous
les coins. Réunis, ils forment un cercle parfait. Super non?

Si on veut appliquer des arrondis différents à chaque angle d'un objet on procède ainsi:

border-radius:Apx Bpx Cpx Dpx;

A, B, C et D représentent respectivement les valeurs des arrondis appliquées aux angles: supérieur
gauche, supérieur droit, inférieur droit et inférieure gauche.
Dans le sens horaire.

Exemple
Code HTML:

<div><h1>DIV stylée</h1></div>

Code CSS:

div{
   height:100px;
   background-color:#EEEEEE;
   text-align:center;
   padding:20px;
   border:solid 5px #BBBBBB;
   border-radius:10px;
   font-family:verdana;
}

Page 7: Gestion des positions et transformation des éléments

Les positions
En CSS, il est possible de placer un élément n'importe où dans le document peut importe l'endroit où
il est déclaré en HTML. Par exemple, si dans le code HTML nous avons déclaré deux balises <div>
qu'on retiendra pas les noms div1 et div2 de telle sorte à ce que la div1 soit déclarée avant la div2,
alors il est logique que quand on affichera le résultat sur le navigateur, la div1 sera placée avant la
div2.

Avec les propriétés CSS qui gèrent les positions, et sans toucher au code HTML, on peut mettre la
balise div1 après la balise div2, voir on peut les superposer de telle sorte que l'une survole l'autre
etc...

La propriété position permet de rendre l'ordre d'affichage des objets indépendant de l'ordre de leur
déclaration en HTML. Elle peut avoir plusieurs valeurs:

 static: Il s'agit de al valeur par défaut qui n'applique aucun positionnement particulier à
l'objet et celui-ci est intégré normalement à l'emplacement décrit par le flux.
 absolute: Cette valeur permet de rendre la position de l'objet absolue. On peut donc
l'afficher n'importe où, mais ce n'est pas tout. Le faire de déclarer le style position:absolute
sur un objet, procure à celui ci la possibilité de survoler les autres objets. Il peut donc cacher
un texte ou une image totalement ou partiellement selon l'endroit exacte où on l'a placé.
 relative: Cette valeur permet de décaler l'affichage d'un objet par rapport à son
emplacement naturel (celui décrit par HTML).
 fixed: Cette valeur permet de fixer un élément sur la page même si celle ci est défilée à l'aide
des barres de défilement.
 sticky: Il s'agit d'une position qui alterne entre static et fixed. Si on spécifie la propriété top à
l'objet positionné en sticky, alors tant que sa position verticale est supérieure à la valeur
spécifiée il est statique, et s'il passe en dessous de cette valeur alors il devient fixed.

Pour pouvoir placer les objet là on l'on souhaite, il faut en plus de la propriété position utiliser
d'autre propriétés CSS qui permettent de spécifier les coordonnées. De cette manière on peut
déclarer avec précision l'emplacement de chaque objet auquel on a appliqué la propriété position.
Le système de coordonnées
Quand on parle de coordonnées, on pense à un repère. Le repère n'est en fait rien d'autre que
l’écran de l'utilisateur (ou la fenêtre du navigateur pour être plus précis). L'origine du repère n'est
pas (tel qu'on la appris en Mathématiques) le coin bas à gauche, mais le coin haut à gauche du
navigateur. Le sens positif horizontalement est vers la droite et verticalement vers le bas. Pour
spécifier le x et le y on fait appel aux propriétés CSS left, top, right et bottom.

 left: exprime le nombre de pixels qui séparent l’extrémité gauche de l'objet du coté gauche
du navigateur.
 top: exprime le nombre de pixels qui séparent l’extrémité supérieure de l'objet du haut du
navigateur.
 right: exprime le nombre de pixels qui séparent l’extrémité droite de l'objet du coté droit du
navigateur.
 bottom: exprime le nombre de pixels qui séparent l’extrémité inférieure de l'objet du bas du
navigateur.
Simple non?
Voilà une figure qui résume cela:

Exemple:

div{
   width:300px;
   height:200px;
   background-color:orange;
   position:absolute;
   left:40px;
   top:30px;
}

Avec ce code, si du texte (ou autre contenu) était déjà à l'emplacement indiqué par les coordonnées,
alors il serait caché par la balise <div>.

Notez que les positions les les systèmes de coordonnées s'appliquent uniquement aux conteneurs
(div, header, footer...). Si vous voulez les appliquer à une image par exemple, il faut donc la mettre
dans un conteneur et appliquer à celui-ci le style souhaité.

Imaginez maintenant que nous disposons de deux balises <div>. Toutes les deux ont une position
absolue, et les coordonnées spécifiées en CSS les mèneront à se croiser (l'une survolera l'autre
totalement ou partiellement). Laquelle sera en dessus de l'autre? (ou plutôt, laquelle cacherait
l'autre?)

Par défaut, la dernière qui a été déclarée en HTML sera placée en dessus. C'est logique après tout.
Mais CSS renferme une propriété qui permet de changer cela sans toucher au HTML. C'est l'axe des Z,
ou l'axe virtuel qui sort de l'écran.

Propriété z-index
La propriété z-index permet de spécifier la valeur Z sur l'axe (virtuel) sortant de l'écran. Il a comme
valeur un nombre entier. Plus la valeur de z-index est grande plus l'objet est placé au premier plan.

Exemple:
nav{
   width:20px;
   height:30px;
   position:fixed;
   left:0;
   top:0;
   z-index:2;
}
section{
   width:500px;
   height:400px;
   position:absolute;
   left:0;
   top:0;
   z-index:1;
}

Dans ce cas, quelque soit l'ordre de déclaration des objet dans le code HTML, la balise <nav> sera en
dessus de la balise <section>.

Les coordonnées left, top, right, bottom et z-index s'appliquent uniquement sur les balises
positionnées à l'aide la propriété position.

Transformation des éléments

Vous vous souvenez probablement des éléments inline et block. En guise de rappel, les éléments de
type inline occupent juste assez d'espace pour qu'ils s'affichent correctement. Par exemple la balise
<span> est de type inline. Elle n'engendre pas de retour à la ligne automatique car elle se contente
de l'espace nécessaire pour que ce qu'elle contient (texte ou autre objet) s'affiche convenablement.
C'est le cas pour les balises <b>, <i>, <img>...

Les balises de type block constituent un "bloc". Comme la balise <div> elle occupe toute la largeur de
la page même si son contenu n'est pas aussi large. C'est ce qui explique le retour à la ligne
automatique qui survient avant et après ce type de balises. Les balises <header>, <footer>, <p> et
bien d'autres font aussi partie de cette famille.

Pour mieux voir la différence entre les deux familles, appliquons leurs des arrière plan et voyons ce
que cela donne.

Code HTML:

<div>Balise DIV</div>
<span>Balise SPAN</span>
<h1>Balise H1</h1>
<font>Balise FONT</font>

Code CSS:

div{
   background-color:#6666FF;
}
span{
   background-color:#FFFF00;
}
h1{
   background-color:#FF8800;
}
font{
   background-color:#AAAAAA;
}

Le résultat est:

Balise DIV

Balise SPAN

Balise H1
Balise FONT

Vous voyez maintenant que les balises inline ont un arrière plan qui s'étale juste sur la larguer du
contenu alors que pour les block l'arrière plan s'allonge jusqu'à la fin de la ligne.

Choisissons maintenant une balise de chaque famille et essayons de modifier leur largeur et leur
hauteur.

Code HTML:

<div>Balise DIV</div>
<span>Balise SPAN</span>

Code CSS:

div{
   background-color:#6666FF;
   width:50%;
   height:100px;
}
span{
   background-color:#FFFF00;
   width:50%;
   height:100px;
}

Voilà ce que ça donne:

Balise DIV

Balise SPAN

Ce n'est pas à quoi vous attendez? En effet, c'est tout à fait normal. Seules les balises de type block
sont redimensionnables. Les balises inline ignorent les style de redimensionnement à l'exception des
images et les champs de formulaire.

Propriété display
Heureusement, CSS a plus d'un tour dans son sac. Il a prévu des styles qui transforment les balises,
c'est à dire qu'on peut rendre la balise <span> de type block et la balise <div> de type inline et cela
s'applique sur toutes les balises HTML. La propriété magique qui rend cet exploit possible s'appelle
display.

La propriété display peut accueillir les valeurs suivantes:

  inline: permet de transformer une balise HTML en type inline.
 block: permet de transformer une balise HTML en type block.
 none: permet de faire disparaître l’élément HTML. L’élément aura l'air comme s'il n'a pas été
déclaré dans le code HTML.
 inline-block: cette valeur a été introduite en CSS3. Elle permet de réunir les principales
caractéristiques de chacune des types inline et block. Si on applique la propriété
display:inline-block à un élément, il n'engendre pas de retour automatique à la ligne
(comme les inline), et peut être redimensionné (comme les block).

On va modifier le dernier code pour mettre en pratique la transformation des éléments.

Code HTML:
<div>Balise DIV</div>
<span>Balise SPAN</span>

Code CSS:

div{
   background-color:#6666FF;
   width:50%;
   height:100px;
   display:inline;
}
span{
   background-color:#FFFF00;
   width:50%;
   height:100px;
   display:block;
}

Voilà ce que ça donne:

Balise DIV

Balise SPAN

Propriété float
Nous avons vu dans la dernière partie qu'on peut rendre les balises block des inline et inversement,
mais leur ordre de déclaration sera respecté lors de l'affichage (à moins d'utiliser la propriété
position). Cependant, il existe une autre méthode qui permet de ne pas toujours respecter l'ordre de
déclaration des éléments lors de l'affichage (dans le jargon de HTML/CSS on parle de faire sortir
l'élément du flux normal). Il s'agit de la propriété float.

Pour comprendre le principe, mieux vaut un exemple.

Supposons que nous voulons afficher un grand titre, suivi d'un long texte suivi par une image. Le code
HTML serait des plus simples:

<h1>CSS c'est quoi?</h1>

CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style
dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS
s’intéresse à la mise en forme du contenu intégré avec du HTML.<br />
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement
et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.<br />
<img src="images/footerlogo.png" />
Le résultat après exécution ressemblera à cela:

CSS c'est quoi?

CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style
dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS
s’intéresse à la mise en forme du contenu intégré avec du HTML.
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement
et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.

Appliquons maintenant la propriété float à l'image (sans toucher le code HTML). Le code CSS
ressemblerai à ceci:

img{
   float:left;
}

Si on exécute le dernier code on aura ce résultat:

CSS c'est quoi?

CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style
dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS
s’intéresse à la mise en forme du contenu intégré avec du HTML.
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement
et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.

C'est ça ce que l'on appelle retirer l'élément du flux normal. En effet, dans le flux normal, l'image est
censée s'afficher en bas comme pour le premier exemple. Mais avec le style float:left l'image est
placée au début à gauche, et tout les autres éléments (grand titre et texte) sont répartis autour.

La propriété float peut accueillir les valeurs suivantes:

 left: l'objet flotte à gauche et les autres éléments se répartiront autour.

 right: l'objet flotte à droite et les autres éléments se répartiront autour.
 none: aucun flottement n'est appliqué.

Il faut savoir que le propriété float est la coqueluche des intégrateurs. Elle facilite tellement la mise
en page d'un document HTML. Dans ce site d'ailleurs je l'ai utilisé à plusieurs reprises. Cependant,
des fois elle donne des résultats imprévisibles car tout le contenu restant sera influencé par l'élément
flottant et poursuivra son écoulement à droite ou à gauche du flottant au long de sa hauteur. Pour
palier ce problème on fait appel à une autre propriété. J'ai nommé clear.
Propriété clear
La propriété clear sert à annuler l'effet d'un élément flottant sur l'élément sur laquelle elle est
appliquée. Elle peut avoir comme valeur:
  left: cesse l'effet d'un flottant à gauche (float:left) sur l'élément courant.
 right: cesse l'effet d'un flottant à droite(float:right) sur l'élément courant.
 both: cesse l'effet d'un flottant à gauche ou à droite (float:left ou float:right) sur l'élément
courant. C'est d'ailleurs la valeur la plus utilisée.

Propriété vertical-align
La propriété vertical-align définit l'alignement vertical d'un élément de type inline ou d'une cellule
d'un tableau. Elle peut accepter plusieurs valeurs dont voici les plus utiles:

 baseline: C'est la valeur par défaut, elle aligne la base de l'élément avec la base du texte
contenu dans son parent.
 top: Aligne le haut de l'élément avec le haut du texte contenu dans son parent. Dans le cas
d'un tableau, il aligne l’élément en haut de la cellule.
 bottom: Aligne le bas de l'élément avec le bas du texte contenu dans son parent. Dans le cas
d'un tableau, il aligne l'élément en bas de la cellule.
 middle: Aligne le milieu de l'élément avec le milieu du texte (considéré en minuscules)
contenu dans son parent. Dans le cas d'un tableau, il centre verticalement l'élément dans la
cellule.

Exemple:

Code HTML:
<img src="images/footerlogo.png" />Texte de référence.

Code CSS:

img{
   vertical-align:middle;
}

Ce qui donne le résultat:

Texte de référence.

Quiz (Pour tester vos connaissances)

1. La valeur inline-block de la propriété display

permet à l'élément transformé d'être redimensionné sans engendrer de retour à la

ligne
permet à l'élément transformé d'ignorer le redimensionnement sans engendrer de
retour à la ligne
permet à l'élément transformé d'appliquer un retour à la ligne automatiquement

1. La propriété clear:both

cesse l'effet d'un flottant à gauche seulement

 cesse l'effet d'un flottant à droite seulement

cesse l'effet d'un flottant à gauche ou à droite

1. Combien d'éléments peut on positionner à l'aide de position:absolute au sein de la

même page?

1 seul élément

16 éléments au maximum

n'importe quel nombre d'éléments

1. Si on veut placer un menu de navigation devant tous les objets de la page de telle sorte
qu'il soit toujours visible même si on fait défiler la page, on doit

lui appliquer un positionnement absolute avec le plus grand z-index déclaré pour
le document.
lui appliquer un positionnement relative avec le plus grand z-index déclaré pour
le document.
lui appliquer un positionnement fixed avec le plus grand z-index déclaré pour le
document.

1. On peut centrer un élément flottant

Oui

Non

Bas du formulaire

Page 8: Masquage, opacité et débordement

Masquage des éléments
Le fait de masquer un élément rend celui-ci invisible. Pourtant l’espace qui lui est destiné reste
toujours visible.

Dans la page précédente, nous avons vu la propriété display. En lui attribuant la valeur none, elle fait
disparaître l'élément sur lequel elle est appliquée. Même l'espace qui lui ai destinée disparaît aussi.
On aura l'impression qu'il n'a pas été déclaré dans le code HTML.

Propriété visibility
La propriété visibility permet de masquer ou d'afficher un élément. Elle a comme valeurs:

 visible: C'est le comportement normal, l'élément est donc visible normalement.

 hidden: Dans ce cas, l'élément est masquée mais son espace reste toujours visible.

Exemple:
Code HTML:
<div>Avant l'image</div>
<img src="images/footerlogo.png" />
<div>Après l'image</div>

Code CSS:

img{
   visibility:hidden;
}

Le résultat escompté est:

Avant l'image

Après l'image

Gestion de l'opacité

Propriétés opacity, -moz-opacity, filter:alpha(opacity)

Pour rendre un élément transparent, opaque ou translucide, on fait appel à la propriété opacity. Sa
valeur est comprise entre 0 et 1 avec un pas de 0.01. 0 signifie complètement transparente, 1 veut
dire complètement opaque et entre 0 et 1 ce sont les 99 niveaux de transparence possibles.

La propriété opacity est reconnue sur pratiquement tous les navigateurs connus sauf pour Internet
Explorer dont la version est inférieure à 9 qui, lui, reconnait une autre syntaxe, c'est
filter:alpha(opacity=x) où x est la valeur de l'opacité comprise entre 0 et 100 (0 pour transparent et
100 pour opaque).

Il existe une autre syntaxe mais qui est devenue obsolète, il s'agit de -moz-opacity. Elle était destinée
aux moteurs de rendu Gecko comme celui embarqué sur Firefox. Elle acceptait les mêmes valeurs
que la propriété opacity.

Mais, la question qui se pose est: "Comment saurons nous quel navigateur utilise le client pour
décider quelle propriété envoyer?". La réponse est aussi simple que la solution; il suffit de déclarer
toutes les propriétés ensemble (ou au moins les deux qui sont encore en service) et laisser le
navigateur exécuter celle qu'il comprend.

Exemple:

Code HTML:

<img src="images/footerlogo.png" />

Code CSS:

img{
   opacity:0.3;
   filter:alpha(opacity=30);
}
Ce qui donne:

Gestion du débordement
Supposons que vous avez déclaré une balise <div> à laquelle vous avez fixé la largeur et la hauteur.
Pourtant, vous y avez mis un texte qui dépasse. Comment la <div> se comporterait-elle? En fait, elle
a tendance à afficher quand même tout le texte qui (selon le navigateur utilisé) aura l'air qui déborde
de la <div>.

Exemple:
Code HTML:

<div>
CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style
dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS
s’intéresse à la mise en forme du contenu intégré avec du HTML.<br />
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement
et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.
</div>

Code CSS:

div{
   height:60px;
   border:solid 1px #AAAAAA;
   padding:10px;
}

Selon le navigateur utilisé, le résultat obtenu est:

CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de

style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le

CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.

Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou

l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous

servir.

Propriété overflow
La propriété overflow permet de gérer le débordement sur un élément (de type conteneur). Elle a
comme valeur:

 visible: C'est la valeur par défaut. Le contenu qui dépasse de l'élément est visible
normalement.
 hidden: Le contenu qui dépasse sera masqué.
  scroll: Une barre de défilement apparaît qu'il y ait débordement ou non, mais elle ne sera
opérationnelle que si le contenu dépasse de l’élément. Notez que l'imprimante peut
imprimer tout le contenu, même celui qui dépasse.
 auto: Une barre de défilement apparaît s'il y a un débordement.

En gérant le débordement sur l'exemple précédent, le code devient:

Code HTML:
<div>
CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style
dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS
s’intéresse à la mise en forme du contenu intégré avec du HTML.<br />
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement
et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.
</div>

Code CSS:

div{
   height:60px;
   border:solid 1px #AAAAAA;
   padding:10px;
   overflow:scroll;
}

Le résultat obtenu est:

CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de

style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le

CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.

Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou

l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous

servir.

Il existe des variantes pour overflow qui permettent de gérer le débordement seulement
horizontalement ou verticalement, il s'agit de overflow-x et overflow-y.

Page 9: Sélecteurs spéciaux

Groupement et identification d'éléments
J'ai préféré vous montrer, dans cette page, les différents sélecteurs d'éléments existants avant d'aller
plus loin en CSS et voir des styles plus avancés.

Jusqu'ici, pour désigner un élément à styler en CSS on s'est servi du sélecteur de balise. Le navigateur
applique donc le style à toutes les balises qui portent le même nom que le selecteur.

Exemple:
div{
   color:#888888;
   text-decoration:underline;
}

Dans ce cas, le navigateur parcourt toute la page en cherchant les balises <div> auxquelles il
appliquera le style décrit par le sélecteur. Alors, le contenu de toutes les <div> sera gris et souligné.
Mais, est ce qu'on souhaite vraiment que toutes les <div> de cette page soient ainsi? Sinon,
comment distinguerons nous les balises auxquelles on appliquera ce style de celles qui n'en sont pas
concernées?

Heureusement, il n'y a pas que le sélecteur de balise qui peut désigner l’élément. Il y a aussi le
sélecteur de classe et l'identifiant d'élément.

L'attribut class: Groupement d'éléments

En HTML, il existe un attribut qui est très sollicité en CSS il s'agit de l'attribut class. Cet attribut peut
avoir comme valeur un nom de votre choix et peut être appliqué à toutes les balises HTML déclarées
entre <body> et </body>. On peut appliquer le même nom de classe à plusieurs éléments similaires
ou non. Cet ensemble d'éléments constitue un groupement d'éléments.

Exemple du code HTML utilisant les classes:

<h1 class="titre"></h1>
<nav class="menu"></nav>
<div class="contenu"></div>
<article>
   <div class="meteo"></div>
   <div class="rss"></div>
</article>

Dans ce code, nous disposons de trois balises <div>. Si on utilisait le sélecteur de balise pour leur
appliquer un style il se ressembleraient toutes. Donc nous allons faire appel au sélecteur de classes
qu'on a déjà défini sur chacune des balises. Pour définir un style qui s'applique à une classe on
déclare la syntaxe suivante:

.contenu{
   /* Style de la première DIV */
}
.meteo{
   /* Style de la deuxième DIV */
}
.rss{
   /* Style de la troisième DIV */
}

Vous avez compris comment ça fonctionne. C'est grâce au point qui vient juste avant le nom de la
classe. De cette manière, la navigateur comprend qu'il doit appliquer le style à la balise qui renferme
la classe dont le nom est défini en tant que sélecteur. C'est ainsi qu'on peut appliquer des styles
différents aux balises même si elles portent le même nom. Mieux encore, on peu appliquer le même
style aux balises différentes car ils ont la même classe.

On peut donner deux (ou plusieurs) noms de classe en même temps à la même balise comme ceci
class="classe1 classe2". Il faut séparer les noms par un espace. De cette manière la balise aura les
styles de la classe1 et de la classe2 simultanément.
Attribut id: identifiant d'élément
Si une classe peut être déclarée plusieurs fois dans le même document pour constituer un
groupement d'éléments (qui accueilleront le même style), il existe un autre attribut HTML qui, quant
à lui, ne doit figurer qu'une seule fois dans le même document. Il s'agit de l'attribut id connu par
identifiant d'élément.

Exemple de code utilisant les identifiants:

<img id="logo" />

<div id="slogan"></div>

Si on veut cibler les éléments par leur id afin de leur appliquer un style, le code CSS ressemblerait à
ceci:

#logo{
   /* Style de l'image affichant le logo */
}
#slogan{
   /* Style de la DIV qui contient le slogan */
}

Là encore, on utilise le croisillon (confondu à tort avec le dièse) pour sélectionner un élément par le
biais de son identifiant.

Notez que le rôle de l'identifiant ne se limite pas au CSS, mais il est très pratique aussi en Javascript.

Autres sélecteurs pratiquesJusqu'ici nous avons vu le sélecteur de balise qui utilise le nom de la balise
pour appliquer un style CSS, le sélecteur de classe qui se sert du nom de la classe préfixé par le point
et l'identifiant d'élément qui commence par un dièse. Mais ce n'est pas tout. En CSS on peu utiliser
d'autres méthodes pour cibler les éléments.

Cibler tous les éléments

Pour cibler tous les éléments d'un document HTML, on utilise le symbole astérisque (*). De cette
manière, la balise <body> et toutes les balises qu'elle contient sont concernées par le style.

Exemple:

*{
   color:#888888;
   font-size:10pt;
   font-family:verdana, arial, sans-serif;
}

Cibler tous les éléments ayant un attribut particulier

Pour cibler toutes les balises sur lesquelles on a déclaré un attribut particulier (quelque soit sa valeur)
on fait appel au sélecteur de balise suivi de crochets qui renferment le nom de l'attribut souhaité.

Exemple:

img[title]{
   opacity:0.7;
   filter:alpha(opacity=70);
}

Dans ce cas, toutes les balises <img> qui ont un attribut title seront translucides.
Cibler tous les éléments ayant un attribut avec une valeur particulière
Pour cibler toutes les balises sur lesquelles on a déclaré un attribut qui a une valeur bien définie on
fait appel au sélecteur de balise suivi de crochets qui renferment le nom de l'attribut souhaité auquel
on a attribué la valeur voulue (comme si on le déclarait en HTML).

Exemple:

input[type="text"]{
   border:solid 1px blue;
}

Dans ce cas, toutes les zones de texte auront une bordure normale colorée en bleu.

Cibler un élément contenu dans un autre

Pour cibler un élément contenu dans un autre, on déclare le sélecteur du premier élément suivi d'un
espace suivi du sélecteur du deuxième élément. Le sélecteur peut être n'importe lequel parmi ceux
vu précédemment (balise, classe, id...).

Exemple:

div img{
   margin:10px;
}

Dans ce cas, toutes les images qui sont déclarées dans une balise <div> auront une marge de 10px de
tous les cotés.

Cibler un élément enfant direct d'un parent

Si on veut désigner un élément enfant appartement directement à un parent spécifié alors on utilise
le symbole >.

Exemple:

div>img{
   margin:10px;
}

Dans ce cas, seules les images qui sont intégrées directement dans une balise <div> seront stylées.

Cibler plusieurs éléments à la fois

Pour désigner plusieurs éléments à la fois, il suffit de les déclarer tous séparés par une virgule.

Exemple:

header,footer,nav,section{
   margin:0;
   border:none;
}

Dans ce cas, les balises <header>, <footer>, <nav> et <section> n’auront aucune marge ni aucune
bordure.

Cibler un élément précédé immédiatement par un autre

Afin de spécifier un élément HTML qui suit directement un élément particulier on utiliser le caractère
+.

Exemple:
nav+h1{
   margin:auto;
}

Dans cet exemple le style sera appliqué à la balise <h1> qui vient directement après la balise <nav>.
C'est à dire qu'on a déjà fermé la balise <nav> puis on a ouvert la balise <h1> juste après.

Ordre d'application des styles

Souvent, on se confronte à un élément dont le style est décrit plusieurs fois. La règles est simple, les
propriétés qui ne sont pas répétés d'un style à un autre sont combinées et appliquées toutes à
l'élément, par contre, les règles qui se répètent s'annulent les unes par les autres, celles qui sont
définies en dernier seront appliquées.

Page 10: Pseudo-classes et pseudo-élements

Pseudo-classes
Une pseudo-classe est un mot clé préfixé par deux points (:) qui s'ajoute à un sélecteur CSS pour
appliquer un style à un élément dans un cas particulier. L'utilisation des pseudo-classes est très
populaire sur les liens hypertextes qui changent de décor selon si ils sont nouvellement affichés, déjà
visités ou survolés... Or, leur utilisation s'étend aux autres objets HTML tel que les images, les
conteneurs, les listes...

Voici la liste des pseudo-classes les plus utilisées en CSS:

Pseudo-classe :link
La pseudo-classe :link désigne un lien hypertexte dont la page cible (celle spécifiée dans son attribut
href) n'a pas encore été visitée. Elle peut aider les internautes à distinguer les liens qu'ils n'ont pas
encore exploré.

Pseudo-classe :visited
A l'inverse de link, la pseudo-classe :visited désigne un lien hypertexte dont la page cible a déjà été
visitée. C'est un genre d'historique en quelque sorte.

Pseudo-classe :active
La pseudo-classe :active désigne un lien hypertexte sélectionné. Il s'agit de l'instant où le visiteur
clique sur le lien, si celui-ci reste affiché sur la page (cas où la page est figée après le clic, ou le lien est
ouvert dans une nouvelle fenêtre) on peut voir l'effet de cette pseudo-classe.

Pseudo-classe :hover
La pseudo-classe :hover désigne un objet survolé par le curseur de la souris, il peut être un hyperlien
ou n'importe quel autre objet.

Exemple:

Code HTML:

<a href="#">Hyperlien</a>

Code CSS:

a{
   font-weight:bold;
   color:#EE6600;
   text-decoration:none;
}
a:hover{
   color:#000088;
   text-decoration:underline;
}

Le résultat serait:

Hyperlien

Dans cet exemple, nous avons spécifié un style qui s'applique à tous les liens quelque soit leur état
(sélecteur a). Après nous avons explicité le style de l'état survolé (a:hover). Il faut savoir que tous les
styles déjà déclarés dans le premier sélecteur sont hérités par le sélecteur de l'état survolé, et ceux
qui ont été redéfinis seront écrasés et remplacés par leur nouvelle valeur (cas des propriétés color et
text-decoration).

Appliquons maintenant cette pseudo-classe à une image:

Code HTML:

<img src="images/footerlogo.png" id="logo" />

Code CSS:

#logo{
   opacity:1;
   filter:alpha(opacity=100);
   cursor:pointer;
}
#logo:hover{
   opacity:0.5;
   filter:alpha(opacity=50);
}

Le résultat serait:

Si vous survolez l'image, vous constatez que le curseur de la sourie change de forme pour ressembler
à celle qu'on a l'habitude de voir sur des liens hypertextes. C'est grâce à la propriété cursor à laquelle
on a attribué la valeur pointer. Il existe d'autres valeurs comme move, crosshair, default...

Pseudo-classe :focus
La pseudo-classe :focus désigne un élément activé ou sélectionné suite à un clic ou une tabulation.
C'est souvent utilisé sur les champs de formulaire.

Exemple:

Code HTML:

<input type="text" name="login" />

Code CSS:

input[type="text"]{
   border:solid 1px #CCCCCC;
   color:#888888;
   padding:10px;
   border-radius:4px;
}
input[type="text"]:focus{
   border:solid 1px #EE6600;
   color:#888888;
   outline:none;
}

Ce qui donne le résultat:

Là encore vous avez remarqué la propriété outline à laquelle on a donné la valeur none. Elle désigne
un cadre qui ressemble à la bordure mais qui entoure l'objet (sa bordure comprise). Certains
navigateur (comme Google Chrome) appliquent automatiquement ce cadre aux champs de
formulaires sélectionnés, ce qui peut altérer un peu le design souhaité. La valeur none élimine tout
cadre éventuel.

La propriété outline a les mêmes valeurs que la propriété border.

Pseudo-classe :first-child
La pseudo-classe first-child désigne le premier élément enfant. Supposons que nous avons déclaré le
sélecteur suivant span:first-child. Le navigateur appliquera le style associé à toutes les balises <span>
qui figurent en tant que premier élément enfant de n'importe quelle balise. Si le code HTML était
comme ceci:

<div>
   <span>Bonjour</span>
   à
   <span>tous</span>
</div>

Alors seule la premier balise <span> s'attribuerait le style décrit dans le sélecteur.

Pseudo-classe :nth-child(n)
Si la pseudo-classe first-child permet d'accéder au premier élément enfant d'un parent quelconque,
la pseudo-classe nth-child(n) quant à elle, permet d'accéder à un élément enfant de n'importe quel
rang et pas que le premier. Le paramètre n mis entre les parenthèse désigne le rand de l'élément à
styler. Il s'agit d'un indice numérique qui commence de 1 (1 étant le premier élément, 2 le deuxième
et ainsi de suite...).

Pour l'exemple HTML précédent, le sélecteur div>span:nth-child(2) fait référence à la deuxième

balise <span>.

Pseudo-éléments
Tout comme les pseudo-classes, les pseudo-éléments sont préfixés par deux points (:) et ajoutés au
sélecteur. Si les pseudo-classe décrivent un état d'un élément (comme un lien hypertexte survolé),
les pseudo-éléments eux accèdent à certaines parties de l'élément pour les styler.

Bon, si vous êtes débutant, vous aurez peut être du mal à soulever la petite nuance qui sépare les
deux pseudo-trucs. Mais avec la pratique ça sera de plus en plus claire.
Notez qu'en CSS3 on préfixe les pseudo-éléments par double deux point (::) ou lieu de deux points
(:), mais les navigateurs continuent quand même à reconnaître les pseudo-élément même s'il
commencent par deux points.

Voyons maintenant les pseudo-éléments les plus fréquents:

Pseudo-élement ::first-letter
Le pseudo-élément ::first-letter désigne la première lettre de l'élément auquel il est associé. Il
permet de donner un style particulier à la première lettre d'un élément.

Exemple:

Code HTML:

<div>
   La première lettre de ce texte est différente!
</div>

Code CSS:

div::first-letter{
   font-size:24pt;
   color:orange;
}

Ce qui donne:

La première lettre de ce texte est différente!

C'est pratique non? En fait, sans pseudo-élément on aurait du mettre la lettre L dans la balise <span>
qu'on stylera par la suite à notre guise, mais ça fait plus de travail!

Pseudo-élement ::first-line
Le pseudo-élément ::first-line désigne la première ligne de l'élément. On peut lui donner un style
particulier tout comme pour first-letter. Le contenu de la première ligne peut changer selon la
largeur de la fenêtre du navigateur.

Exemple:

Code HTML:

<p class="paragraphe">
Tout comme les pseudo-classes, les pseudo-éléments sont préfixés par deux points (:) et ajoutés au
sélecteur. Si les pseudo-classe décrivent un état d'un élément (comme un lien hypertexte survolé),
les pseudo-éléments eux accèdent à certaines parties de l'élément pour les styler.
</p>

Code CSS:

.paragraphe::first-line{
   color:blue;
}

Ce qui donne:

Tout comme les pseudo-classes, les pseudo-éléments sont préfixés par deux points (:) et
ajoutés au sélecteur. Si les pseudo-classe décrivent un état d'un élément (comme un lien
hypertexte survolé), les pseudo-éléments eux accèdent à certaines parties de l'élément pour les
styler.

Pseudo-élements ::before et ::after

::before permet de créer un pseudo-élément au début de l'élément sur lequel il est déclaré. Oui, j'ai
bien dit "créer". Désormais on peut intégrer du texte à un élément grâce au CSS, mais il ne faut
recourir à cette pratique tout le temps, car n'oubliez pas que c'est HTML qui devrait créer le contenu
et le CSS ne fait que le styler.

::after crée un pseudo-élément à la fin de l'élément sur lequel il est déclaré.

Les pseudo-éléments ::before et ::after font appel à la propriété content qui ajoute du contenu (par
défaut de type inline).

Pour mieux comprendre comment ça fonctionne faisons un exemple:

Code HTML:

<div>
   Contenu de la DIV
</div>

Code CSS:

div::before{
   content:"Avant";
   color:red;
}
div::after{
   content:"Après";
   color:blue;
}

Ce qui donne le résultat:

Avant Contenu de la DIV Après

Sachez qu'il existe bien des dizaines de pseudo-classes et pseudo-éléments qui offrent beaucoup plus
de possibilités. Mais j'ai essayé de vous montrer les plus utiles et les plus fréquents.

Page 11: Exercice - Styler un formulaire

Exercice

Il est temps de mettre en pratique ce que nous avons vu jusqu'ici. On va faire simple, question
de vous initier un peu à la manière de coder le design d'une page entière en CSS.

L'objectif de cet exercice est de créer un formulaire d'inscription qui comporte les champs:
nom, prénom, email, login, mot de passe (à deux reprises) et un bouton d'envoie. On fera en
sorte d'entourer notre formulaire par un cadre (fieldset ou autre objet). Le plus important c'est
de réussir un design sobre mais agréable. Je vous laisse donc la liberté de faire ce que vous
voulez. Cependant, je veux vous montrer l'exemple que j'ai codé, si jamais vous voulez le
suivre.
Inscription
Nom
Prénom

Email

Mot de passe

Confirmer

Voici quelques points qu'il faut respecter:

1. Les textes et les champs de formulaires sont alignés verticalement.

2. Le fond est un dégradé du gris.
3. Les champs actifs (sélectionnés pour la saisie) changent de couleur d'arrière-plan.

Solution

Code HTML:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <link rel="stylesheet" type="text/css" href="monstyle.css" />
   </head>
   <body id="exercice1_body">
      <div id="exercice1_conteneur">
         <form name="inscription" method="post" action="#">
            <fieldset class="exercice1_fieldset">
               <legend class="exercice1_legend">Inscription</legend>
               <div class="exercice1_label">
                  Nom
               </div>
               <div class="exercice1_input">
                  <input type="text" name="nom" class="exercice1_champ" />
               </div><br />
               <div class="exercice1_label">
                  Prénom
               </div>
               <div class="exercice1_input">
                  <input type="text" name="prenom" class="exercice1_champ" />
               </div><br />
               <div class="exercice1_label">
                  Email
               </div>
               <div class="exercice1_input">
                  <input type="text" name="email" class="exercice1_champ" />
               </div><br />
               <div class="exercice1_label">
                  Mot de passe
               </div>
               <div class="exercice1_input">
                  <input type="password" name="mdp" class="exercice1_champ" />
               </div><br />
               <div class="exercice1_label">
                  Confirmer
               </div>
               <div class="exercice1_input">
                  <input type="password" name="remdp" class="exercice1_champ" />
               </div><br />
               <div class="exercice1_label">
                  
               </div>
               <div class="exercice1_input">
                  <input type="submit" name="sinscrire" value="S'inscrire"
class="exercice1_champ" />
               </div><br />
            </fieldset>
         </form>
      </div>
   </body>
</html>
Code CSS:
#exercice1_body{
   margin:0;
}
#exercice1_conteneur{
   margin:0;
   padding:10px;
   background:linear-gradient(to bottom,#DDDDDD,#FFFFFF);
}
.exercice1_fieldset{
   margin:10px;
   border:none;
   background-color:#FFFFFF;
   border-radius:10px;
   padding:20px;
}
.exercice1_legend{
   font-family:verdana, arial, sans-serif;
   font-size:14pt;
   font-weight:bold;
   color:#FFFFFF;
   margin:10px;
   padding:10px 20px 10px 20px;
   background-color:#AAAAAA;
   border-radius:4px;
}
.exercice1_label{
   display:inline-block;
   width:200px;
   font-family:verdana, arial, sans-serif;
   font-size:10pt;
   padding:10px;
}
.exercice1_input{
   display:inline-block;
   width:200px;
   padding:6px;
}
.exercice1_champ{
   outline:none;
   border:solid 1px #AAAAAA;
   padding:10px;
   border-radius:4px;
   font-family:verdana, arial, sans-serif;
}
input[type="text"].exercice1_champ:focus, input[type="password"].exercice1_champ:focus{
   background-color:#EEEEEE;
}
input[type="submit"].exercice1_champ{
   background-color:#EE6600;
   color:#FFFFFF;
   padding:6px 20px 6px 20px;
   border:none;
   cursor:pointer;
   padding:10px;
   width:160px;
}
Vous avez remarqué le sélecteur input[type="text"].exercice1_champ:focus? Il signifie la
balise <input> qui a l'attribut type ayant comme valeur text et une classe nommée
exercice1_champ quand elle est sélectionnée (pseudo-classe :focus). On peut combiner les
sélecteurs comme bon nous semble. Simple non?
Sachez qu'il existe plus d'une façon pour réussir la même présentation. Le code que je propose
n'est pas unique.

Page 12: Les transformations CSS

Transformation de l'origine
A partir de la version 3 de CSS il est devenu possible de transformer les objets intégrés en 2D (et
même en 3D) sans vraiment modifier leurs propriétés (largeur, hauteur...). Cette technique a permis
aux designers de réussir des effets époustouflants avec un minimum de code.

Les transformations d'objets sont appliquées par rapport à son point d'origine. Ce point est par
défaut situé au centre l'objet.

Si on souhaite modifier le point d'origine on fait appel à la propriété transform-origin.

Propriété transform-origin
La propriété transform-origin permet de modifier le point d'origine d'un objet HTML. Il accepte
comme valeur le X et le Y de l'origine souhaité séparés par un espace. Ces deux informations peuvent
être spécifiées en pourcentage, en pixel, ou par les mots clé left, right, top, bottom et center.

Si par exemple nous déclarons le style suivant:

transform-origin:0 0;

L'origine de l'objet sera placé ainsi:

Si la valeur d'une propriété CSS est nulle, on ne spécifie pas l'unité.

Et si la déclaration correspond à ceci:

transform-origin:100% 100%;

L'origine de l'objet sera placé ainsi:

Fonctions de transformation qui s'appliquent à la propriété transform

Pour appliquer une transformation en CSS on utilise la syntaxe suivante:

transform: fonction1() fonction2() fonction3()...

Les fonctions sont séparées par un espace. Cependant on peut toujours utiliser une seule fonction si
on veut.

Les fonctions contiennent des paramètres qui permettent de personnaliser la transformation

souhaitée. Ces paramètres sont renseignés entre les parenthèses de la fonction.

Fonction translate()
La fonction translate() permet la translation de l'objet HTML d'un emplacement initial (où il est
normalement défini) à un autre emplacement. Les coordonnées du nouvel emplacement sont
renseignées entre les parenthèses de translate() et ils sont exprimés en pixel. L'origine des
coordonnées, comme on l'a vu précédemment, est le point haut à gauche.
Exemple:

div{
   width:100px;
   height:100px;
   background-color:orange;
   transform:translate(100px,30px);
}

Si on exécute le code on aura:

La forme pointillée représente l'objet sans transformation. Notez que j'ai appliqué un peu de
transparence sur l'objet transformé afin de le localiser par rapport à son état initial. Les propriétés de
la transparence n'ont pas été déclarées dans le code de l'exemple.

Le premier paramètre de la fonction translate() représente la translation horizontale, et le deuxième

la translation verticale. Notez que les sens positifs sont vers la gauche et vers le bas. Si vous
renseignez des valeurs négatives à la fonctions alors la translation sera appliquée dans le sens
opposé.

Il existe aussi les fonctions translateX() qui réalise une translation horizontale et translateY() qui
réalise une translation verticale. Dans ce cas, nous spécifions une seule valeur dans les parenthèses.
Important:
Pour les navigateurs anciens il faut renseigner le préfixe vendeur avant la propriété transform. Pour
que le dernier code soit conforme avec tous les navigateurs connus, il doit ressembler à cela:

div{
   width:100px;
   height:100px;
   background-color:orange;
   -moz-transform:translate(100px,30px);
   -webkit-transform:translate(100px,30px);
   -o-transform:translate(100px,30px);
   -ms-transform:translate(100px,30px);
   transform:translate(100px,30px);
}

Fonction scale()
La fonction scale() permet de redimensionner l'objet HTML (avec son contenu). Les parenthèses de la
fonction peuvent accueillir une seule valeur ou deux valeurs séparées par une virgule. Ces valeurs
désignent le facteur d'agrandissement. Ils n'ont pas d'unité et peuvent contenir de virgule. S'ils sont
supérieur à 1 alors l'objet est agrandit, sinon alors il est rétréci.

Si une seule valeur est renseignée dans les parenthèses, alors le même facteur d'agrandissement agit
sur la largeur et la hauteur de l'objet.

Exemple:

div{
   width:100px;
   height:100px;
   background-color:orange;
   transform-origin:0 0;
   transform:scale(1.5);
}

On obtiendra donc:

J'ai changé l'origine de l'objet pour que la transformation s'effectue par rapport au point haut à
gauche.

Essayons maintenant le code suivant:

div{
   width:100px;
   height:100px;
   background-color:orange;
   transform-origin:0 0;
   transform:scale(2,0.8);
}

On aura donc:
Il existe également les fonctions scaleX() et scaleY() qui appliquent respectivement un facteur
d'agrandissement uniquement sur la largeur ou la hauteur.
Fonctions skewX() et skewY()
Les fonctions skewX() et skewY() permettent d'incliner un objet respectivement horizontalement et
verticalement par rapport à son origine. La valeur renseignée dans les parenthèses désigne l'angle
d'inclinaison et elle est exprimée en degré (deg).

Exemple d'inclinaison horizontale:

div{
   width:100px;
   height:100px;
   background-color:orange;
   transform-origin:0 0;
   transform:skewX(30deg);
}

Cela donne:

Exemple d'inclinaison verticale:

div{
   width:100px;
   height:100px;
   background-color:orange;
   transform-origin:0 0;
   transform:skewY(30deg);
}

Ce qui donne:

Et maintenant un exemple d'inclinaison horizontale et verticale:

div{
   width:100px;
   height:100px;
   background-color:orange;
   transform-origin:0 0;
   transform:skewX(30deg) skewY(30deg);
}

Ce qui donne:

L'angle d'inclinaison peut être positive ou négative.

Il existait autrefois la fonction skew() qui pouvait appliquer l'inclinaison horizontale et verticale en
même temps, mais le W3C l'a rendu obsolète.

Fonction rotate()
Comme son nom l'indique, la fonction rotate() applique une rotation à l'objet autour de l'axe
traversant son origine. Les parenthèses contiennent l'angle de la rotation exprimée en degré.
Selon l'axe de rotation on distingue trois variantes de la fonction rotate():

 rotate() ou rotateZ(): la rotation est appliquée par rapport à l'axe virtuel perpendiculaire à
l'écran (le fameux axe des Z de z-index) qui traverse le point d'origine de l'objet. La rotation
s'applique donc sur le même plan que l'écran.
 rotateX(): la rotation est appliquée par rapport à l'axe horizontale traversant l'origine de
l'objet (l'axe des X). La rotation aura donc un effet 3D
 rotateY(): la rotation est appliquée par rapport à l'axe vertical traversant l'origine de l'objet
(l'axe des Y). La rotation aura aussi un effet 3D

Exemple d'une rotation sur l'axe des Z:

div{
   width:100px;
   height:100px;
   background-color:orange;
   transform-origin:50% 50%;
   transform:rotate(30deg);
}

Ce qui donne:

Exemple d'une rotation sur l'axe des X:

div{
   width:100px;
   height:100px;
   background-color:orange;
   transform-origin:50% 50%;
   transform:rotateX(50deg);
}

Ce qui donne:

Mais, il est où l'effet 3D? En fait, pour avoir cet effet de profondeur il faut faire appel à une autre
fonction qui agit sur les perspectives.

Fonction perspective()
La fonction perspective() permet de prendre en compte les changements des dimensions en fonction
de la profondeur (ou perspectives). Par exemple, si la rotation est appliquée par rapport à l'axe des X,
le côté le plus loin (celui qui, soi-disant, entre dans l'écran) sera plus petit que celui qui en sort.

La fonction perspective() reçoit une valeur exprimée en pixel qui désigne la distance (virtuelle) qui
sépare l'observateur de l'axe de rotation (qui traverse l'origine de l'objet). Plus cette distance est
petite, plus l'effet de perspective est accentuée et inversement.

Reprenons l'exemple dernier, celui de la rotation par rapport à l'axe des X et appliquons lui les
perspectives:

div{
   width:100px;
   height:100px;
   background-color:orange;
   transform-origin:50% 50%;
   transform:perspective(150px) rotateX(50deg);
}

Ce qui donne:

C'est mieux non?

Voyons maintenant ce qui se passe par rapport à l'axe des Y:

div{
   width:100px;
   height:100px;
   background-color:orange;
   transform-origin:50% 50%;
   transform:perspective(150px) rotateY(50deg);
}

Ce qui donne:

Page 13: Les transitions en CSS

Les transitions CSS
Si jusqu'ici nous avons vu des styles CSS qui peuvent métamorphoser l'affichage de nos objets de
fond en comble, je peux vous garantir que ce cette partie est la plus amusante de toutes. En effet, à
partir de là, on peut créer des animations, et en plus, avec du code infiniment simple.

Les transitions CSS permettent le passage d'un objet d'un état à un autre d'une manière progressive
créant ainsi une animation. Pour être plus précis, ce type d'animation s'appelle Interpolation de
mouvement.

L'interpolation de mouvement est un principe qui ne date pas d'hier. En effet, il simplifie nettement
la création des séquences animées en ne fournissant qu'un nombre limité d'images (qu'on appelle
des images clé), et le processus se charge en suite d'en déduire les images intermédiaires.

Adobe Flash (anciennement Macromedia Flash) est le logiciel le plus populaire pour avoir pris en
charge cette technique pour créer les animations destinées au Web. Mais, l'interpolation de
mouvement est aussi utilisée au cinéma.

En CSS, on a souvent recours aux transitions avec les pseudo-classes. Par exemple, après avoir
survolé un objet, celui ci se met à bouger pour correspondre aux styles définis par :hover.

Pour mieux comprendre de quoi il s'agit nous allons créer un objet et nous allons définir son état
survolé (grâce à :hover) deux fois, une sans transition et l'autre avec transitions.

Survolez le premier carré orange puis le deuxième et jugez par vous même.
Vous comprenez maintenant c'est quoi une transition? Parfait.

Propriété transition-property
Supposons que nous avons créé un objet dont on a défini l'arrière plan (propriété background) et la
bordure (propriété border), puis nous avons créé des styles appliquées à une pseudo-classe de cet
objet (:hover par exemple) qui changeront l'arrière plan et la bordure déjà définis. Si on applique une
transition entre l'état initial et l'état survolé, on imagine que l'arrière plan et la bordure se mettront à
s'animer pour correspondre aux styles définis à :hover. Cependant, CSS permet de désigner quels
sont les propriétés qui devront subir la transition et quels sont celles qui ne s'animeront pas. Il s'agit
de la propriété transition-property.

La propriété transition-property accepte comme valeur le nom (ou la famille) de styles sur lesquelles
la transition sera appliquée.

Par exemple:

div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   transition-property:background;
}

Comme vous le constatez en passant de l'état initial à l'état survolé, la bordure et l'arrière plan de la
balise <div> changeront, mais seule l'arrière plan subira la transition alors que la bordure changera
instantanément.

Par contre, si on avait mis transition-property:all, dans ce cas toutes les propriétés auraient subit la
transition.

Certains anciens navigateurs ne reconnaissent pas la propriété transition, il faut donc l'associer au
préfixe vendeur. Le style précédent ressemblerait à ceci:
div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   -webkit-transition-property:background;
   -moz-transition-property:background;
   -o-transition-property:background;
   -ms-transition-property:background;
   transition-property:background;
}

Propriété transition-duration
Comme son nom l'indique la propriété transition-duration permet de spécifier la durée de la
transition (la durée que mettra l'animation pour aller de l'état 1 à l'état 2). Elle est exprimée en
secondes.

Exemple:
div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   transition-property:background;
   transition-duration:0.5s;
}

Dans ce cas, l'animation fera une demi seconde. Comme pour la propriété transition-property il faut
prévoir le préfixe vendeur à transition-duration.

Propriété transition-timing-function
La fonction transition-timing-function permet de définir la cadence avec laquelle la transition sera
faite. Elle permet de changer la vitesse de la transition au long de sa durée (on parle de la courbe
d'accélération). Les valeurs que cette propriété peut accueillir sont:

 ease: le mouvement est rapide au début puis ralentit petit à petit jusqu'à l'arrêt complet.
 linear: le mouvement garde la même vitesse du début à la fin de la transition.
 ease-in: le mouvement commence lentement puis gagne en vitesse avec le temps.
 ease-out: le mouvement est rapide au début puis ralentit à la fin (le ralenti avec ease-out est
moins senti qu'avec ease).
 ease-in-out: le mouvement commence lentement et fini lentement, mais il est plus rapide au
milieu de la transition.

Il existe d'autres valeurs mais en général c'est ease qui est utilisé car elle donne un effet plus
spectaculaire à la transition.
Exemple:
div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   transition-propertyall;
   transition-duration:0.5s;
   transition-timing-function:ease;
}

Notez qu'on peut regrouper les propriétés de la transition dans une seule qui est transition. Le
dernier code CSS devient alors:

div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   transition:all 0.5s ease;
}
N'oublier pas de prévoir le préfixe vendeur pour que le code soit compatible avec les anciens
navigateurs.

div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   -webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
   -ms-transition:all 0.5s ease;
   transition:all 0.5s ease;
}

Propriété transition-delay
La propriété transition-delay permet de retarder le début de la transition lorsque l’événement qui la
déclenche est détecté.

Exemple:

div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   transition-propertyall;
   transition-duration:0.5s;
   transition-timing-function:ease;
   transition-delay:1s;
}

Dans ce cas, si on survole la DIV, la transition ne commencera qu'une seconde après.

Je vous montre maintenant le code du carré orange qui devient un cercle bleu du début de cette
page:

Code HTML:

<div class="cours_transitions"></div>

Code CSS:

.cours_transitions{
   width:200px;
   height:200px;
   background-color:#FF8800;
   margin:30px;
   cursor:pointer;
   -webkit-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -ms-transition:all 0.5s ease;
   transition:all 0.5s ease;
}
.cours_transitions:hover{
   background-color:#003569;
   border-radius:100px;
   -webkit-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -ms-transition:all 0.5s ease;
   transition:all 0.5s ease;
}

Ce qui donne le résultat de tout à l'heure:

Vous avez remarqué que j'ai déclaré les transition sur l'état survolé et l'état initiale de la balise <div>.
De cette manière le mouvement se fera sentir quand on survole l'objet et aussi quand on le quitte.

Exemple: menu accordéon

On va essayer de mettre en pratique les transitions CSS. L'objectif est de créer un menu dit
accordéon. C'est un menu de navigation dont les entrées s'allongent et se rétractent comme le
soufflet d'un accordéon. Pour faire simple on va agir sur l'épaisseur de la bordure de chacun des
éléments constituant le menu. Associé aux transitions, la bordure changera d'épaisseur
progressivement ce qui fera penser à un accordéon en action.

Voici le code HTML:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <link rel="stylesheet" type="text/css" href="monstyle.css" />
   </head>
   <body>
      <nav>
         <div class="exercice_accordeon">Accueil</div>
         <div class="exercice_accordeon">Qui sommes-nous?</div>
         <div class="exercice_accordeon">Nos produits</div>
         <div class="exercice_accordeon">SAV</div>
         <div class="exercice_accordeon">Contact</div>
      </nav>
   </body>
</html>

Code CSS:

.exercice_accordeon{
   width:200px;
   background-color:#CCCCCC;
   padding:10px;
   margin-bottom:1px;
   font:10pt verdana;
   color:#FFFFFF;
   border:solid 1px #CCCCCC;
   cursor:pointer;
   -webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
   -ms-transition:all 0.5s ease;
   transition:all 0.5s ease;
}
.exercice_accordeon:hover{
   background-color:#FFFFFF;
   color:#003569;
   border:solid 1px #003569;
   border-bottom:solid 60px #003569;
   -webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
   -ms-transition:all 0.5s ease;
   transition:all 0.5s ease;
}

Résultat obtenu:

Accueil

Qui sommes-nous?

Nos produits

SAV

Contact

Page 14: Les Media Queries (Responsive Design)

Les Média Queries pour un "Responsive Design"
Depuis l'arrivée des appareils mobiles (smartphones, tablettes...) et les smart TV, les règles du Web
ont changé de fond en comble. En effet, il y a quelques années, les critères d'un bon design se
jouaient sur la répartition des éléments sur la page, l'imagerie, des objets entrelacés (comme des
images qui se croisent) et des animations Falsh qui ajoutaient une touche joyeuse à la page. Or, les
choses on changé, et un grand nombre d'internautes ne consultent le Web qu'à travers leurs
téléphones. Les Téléviseurs sont désormais connectés à Internet et les tablettes gagnent du terrain
jour après jour. Alors finis les pages Web qu'il faut faire défiler à gauche et à droite pour accéder à un
texte ou un bouton. Le Responsive Design est arrivé!

Il existe une technique (de moins en moins utilisée) qui permet d'adapter l'affichage à la page. Elle
s'appelle le design fluide, où quasiment tous les éléments sont redimensionnés en pourcentage, de
telle manière à ce qu'ils s’adaptent à la largeur de l'écran qui affiche la page. Cependant, avec les
nouveaux périphériques cette technique révèle aussitôt ses limites.

Les Media Queries (ou requêtes média) est une technique (apparue avec les spécifications CSS3) qui
permet de définir des conditions pour appliquer des styles CSS. Ces conditions ont un rapport avec la
nature et les propriétés du périphérique de sortie (écran, smartphone, imprimante...). Les Média
Queries permettent de réussir ce qui est communément connu sous le nom du Responsive Design
qui consiste à adapter dynamiquement de design à l'aide du CSS.

Ce site par exemple vérifie le Responsive Design. Essayez de réduire la fenêtre ou changer de
périphérique pour voir comment il réagit.
A quoi ressemble du code CSS où les Media Queries sont pris en compte?
Le code CSS reste le même, mais au lieu de définir un seul style figé, on en défini plusieurs, et pour
sélectionner lequel appliquer, on recours à des règles qui constituent le cœur des Media Queries.

Imaginons que nous disposons de deux feuilles de styles, une s'appelle ecran.css et l'autre
imprimante.css. Vous en avez sans doute compris l'utilité. En fait, la première feuille s'appliquera
quand c'est un écran qui affiche la page Web, et la deuxième c'est quand on veut imprimer la même
page. Pour définir l'appel à ces feuilles de styles on peut utiliser la balise
<link> de cette façon:

<link rel="stylesheet" type="text/css" href="ecran.css" media="screen" />

<link rel="stylesheet" type="text/css" href="imprimante.css" media="print" />

Pour que le navigateur décide quelle feuille de style faut-il appliquer, il se réfère à l'attribut media.

Attribut media
L'attribut media est déclaré sur la balise <link> pour indiquer au navigateur dans quel cas il faut
appliquer la feuille de style associée. Les valeurs qu'elle peut accueillir sont nombreuses, mais voici
les plus courantes:

 screen: signifie les écrans.

 print: pour les imprimantes.
 handheld: désigne les appareils mobiles ou écrans de petite taille.
 projection: signifie les projecteurs.
 tv: pour les téléviseurs.
 tty: signifie terminal (on peut visualiser une page Web sur un terminal comme l'invite de
commande).
 all: qui désigne tous les périphériques.

Vous avez donc compris qu'il faut créer une feuille de style pour chaque type de périphérique.
Cependant on peut recourir à une autre méthode plus pratique. C'est la règle-at media (@media).
Règle @media
Au lieu de créer plusieurs feuilles de styles, chacune pour un type de périphérique, on peut créer une
seule qui renferme tous les styles groupés par les conditions Media Queries commençant par
@media.

Exemple:

@media screen{
   h1{
      font-size:24pt;
      font-weight:normal;
   }
   nav{
      display:inline-block;
   }
}
@media print{
   h1{
      font-size:18pt;
      font-weight:bold;
   }
   nav{
      display:none;
   }
}

La règle @media est suivie du type de périphérique puis deux accolades ({}) qui contiennent
l'ensemble des styles CSS à appliquer. Dans cet exemple, si on affiche la page sur un écran, alors les
titres H1 sont sans graisse et le menu de navigation est affiché en tant qu'élément inline-block. Par
contre, si on veut imprimer la page, les titres H1 deviennent gras mais plus petits, et le menu
disparaît.

Cependant, le fait de savoir que le périphérique est un écran ne suffit pas à définir les styles
adéquats, car il y a des écrans larges et des petits écrans. Heureusement, les Media Queries
proposent des opérateurs logiques qui permettent de mieux affiner la cible du style.

Opérateur logiques et critères

Opérateurs logiques
Les opérateurs logiques disponibles pour les Media Queries sont:

 and: qui signifie un ET logique. Par exemple, la règle A and B est vraie si A et vrai et B est vrai
aussi.
 only: qui signifie UNIQUEMENT. Par exemple, la règle only A est vraie si A tout seul est vrai.
 not: qui signifie NON. Par exemple, la règle not A est vraie si A est fausse.

Exemple:
@media screen and (min-width:1280px){
   .pub{
      diaplay:inline-block;
   }
}

Ce code signifie qu'on peut afficher la publicité (désignée par la classe pub) si le périphérique est un
écran et la largeur de la fenêtre (du navigateur) est supérieure ou égale à 1280 pixels.

Les Media Queries sont des règles logiques. Si elles sont vraies le style associé est appliqué, sinon il
est ignoré.

Critère des Media Queries

Les critères sont placés entre des parenthèses pour constituer un élément de la condition à vérifier. Il
existe plusieurs critères sur lesquels reposent les Media Queries. Mais je vais vous lister ceux dont
vous aurez le plus besoin.

 width: signifie la largeur de la fenêtre d'affichage (est pas celle de l'écran). Si par exemple
nous spécifions (width:800px) cela veut dire que cet élément de la condition est vrai si la
largeur de la fenêtre est exactement égale à 800 pixels. On peut préfixer ce critère par min-
( pour min-width) ou max- (pour max-width) pour désigner respectivement la largeur
minimale et la largeur maximale.
 height: signifie la hauteur de la fenêtre d'affichage. On peut préfixer ce critère par min-
( pour min-height) ou max- (pour max-height) pour désigner respectivement la hauteur
minimale et la hauteur maximale.
 device-width: signifie la largeur de l'écran. On peut préfixer ce critère par min- ( pour min-
device-width) ou max- (pour max-device-width) pour désigner respectivement la largeur
minimale de l'écran et la largeur maximale de l'écran.
 device-height: signifie la hauteur de l'écran. On peut préfixer ce critère par min- ou max-.
 aspect-ratio: signifie le ratio (rapport entre la largeur et la hauteur) de la fenêtre d'affichage.
 device-aspect-ratio: signifie le ratio de l'écran (par exemple: 16/9 ou 4/3).
  orientation: signifie l'orientation de la zone d'affichage et peut prendre deux valeurs:
portrait pour l'affichage vertical ou landscape pour l'affichage horizontale (ou paysage).

Exemple:
@media all and (max-width:1280px){
   .header{
      width:100%;
      height:50px;
      text-align:center;
      background-image:url("../images/back_header_sr.png");
      border-bottom:solid 1px #E1E1E1;
      background-repeat:repeat-x;
   }
   #sfooter{
      width:100%;
      text-align:left;
      font-family:eras, "Century Gothic", verdana, sans-serif;
      color:#AAAAAA;
   }
}
@media all and (min-width:960px){
   .contdercours{
      width:30%;
      min-height:600px;
      background-color:#F4F4F4;
      float:right;
   }
   .contaccueil{
      width:68%;
      min-height:600px;
      float:left;
      border-left:dotted 1px #165877;
   }
}

Il s'agit là d'un extrait de code CSS utilisé sur ce site. Je suis sûr que vous comprenez sa signification.

Vu que le marché regorge de modèles de smartphones et de tablettes, il est un peu dur d'éditer des
règles Media Queries qui couvrent toutes les résolutions existantes. C'est pourquoi la plupart des
designers recourent aux bibliothèques et frameworks qui facilitent le travail. Le plus célèbre pour CSS
s'appelle Bootstrap.

Le viewport
Le viewport correspond à la surface sur laquelle une page Web est visible (ou la surface de la fenêtre
utilisée par le navigateur). Cette notion a été introduite suite à l’avènement des appareils mobiles
(smartphones et tablettes) sur lesquelles on ne peut pas redimensionner la fenêtre du navigateur
(comme on peut le faire sur un écran classique).

Parmi les caractéristiques clé d'un appareil mobile, il y a la définition de l'écran (qu'on appelle à tort
la résolution). La définition représente le nombre de pixels que renferme l'écran sur la largeur et sur
la hauteur. Par exemple le iPhone 6+ en contient 1080x1920 pixels (C'est de la vraie HD).
Cependant, pour afficher du contenu (les pages Web en particulier), les appareils mobiles se basent
sur une autre définition tout à fait différente de celle qu'ils ont en réalité. C'est la définition en pixel
CSS connue également sous le nom device-width. Elle représente le nombre de pixels que l'appareil
pense avoir. Par exemple le iPhone 6+ pense avoir 414x736 pixels.

Le viewport quant à lui est tout à fait différent des deux dernières notions. En effet, il est souvent
supérieur à la définition réelle de l'appareil. Si c'est le cas, c'est pour y introduire une page Web
entière quelque soit sa largeur, en lui appliquant un facteur de zoom inférieur à 1. C'est ce qui
explique le fait que si vous visitez une page Web ne satisfaisant pas le Responsive Design depuis
votre téléphone, vous constatez qu'elle est très petite et se tient toute entière dans la largeur de
votre appareil. Le contenu est par conséquent trop petit et les textes sont quasiment illisibles. Il faut
donc que vous zoomiez sur la page pour arriver à lire. Et bien sûr il faut défiler à droite et à gauche
pour suivre le texte jusqu'au bout. C'est très gênant!

Et comme si tous ces détails ne suffisaient pas, sachez que le viewport ne dépend pas de l'appareil
comme on l'aurait pensé, mais du navigateur.

Pour palier ce problème, c'est à nous de renseigner au navigateur la valeur du viewport à appliquer
aux pages Web. Et comme vous l'avez certainement deviné, la valeur initiale typique du viewport
doit être égale à la largeur en pixel de l'appareil (la définition que l'appareil pense avoir).

Balise META viewport

Pour déclarer la nouvelle valeur du viewport, on fait appel à la balise <meta>:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Ce code signifie que la valeur du viewport initiale correspond à la largeur en pixel CSS de l'appareil (la
largeur qu'il pense avoir) et le zoom initial est égal à 1x (ce qui signifie: aucun zoom).

On peut aussi ajouter les sous-propriétés: height, maximum-scale et minimum-scale qui signifient
respectivement hauteur, zoom maximal, et zoom minimal.

La valeur de maximum-scale et minimum-scale est comprise entre 0.0 et 10.0.

Règle-at viewport
Pour définir le viewport, on peut aussi le faire en CSS grâce à une règle-at comme ceci:

@viewport{
   width:device-width;
   zoom:1;
}

Comme cette syntaxe n'est pas compatible avec tous les navigateurs, il faut penser à déclarer le
préfixe vendeur. Le code devient donc:

@-webkit-viewport{
   width:device-width;
   zoom:1;
}
@-moz-viewport{
   width:device-width;
   zoom:1;
}
@-o-viewport{
   width:device-width;
   zoom:1;
}
@-ms-viewport{
   width:device-width;
   zoom:1;
}
@viewport{
   width:device-width;
   zoom:1;
}

La propriété zoom applique un zoom initial, dans ce cas il vaut 1 ce qui signifie: aucun zoom.

Il existe aussi les propriétés: min-width, max-width, height, min-height, max-height, min-zoom et
max-zoom, dont la signification est exprimée par leurs noms.

Ces règles CSS ne sont pas encore largement implémentées au sein des navigateurs, il faut donc
prévoir de déclarer la balise META viewport au cas où.

Quiz (Pour tester vos connaissances)

1. Si on veut adapter l'affichage d'un contenu selon la largeur de l'écran, quelle propriété
doit-on déclarer ans la règle @media?

width

screen-width

device-width

1. Si nous n'appliquons pas la balise META VIEWPORT comme ceci:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Le texte de la page Web sera trop petit sur un appareil mobile.

Le texte de la page Web sera trop grand sur un appareil mobile.

Le texte s'affichera normalement sur un appareil mobile.

Le viewport par défaut d'un navigateur mobile est généralement très grand. Par conséquent la
définition de l'écran vue par le contenu HTML sera très grande aussi et le contenu aura alors
l'air très petit.

1. Que signifit le code suivant?

@media screen and (min-width:960px){

   #conteneur{
      width:920px;
   }
}
 La balise identifiée par "conteneur" aura une largeur de 920px si la fenêtre du
navigateur fait au minimum 960px de largeur.
La balise identifiée par "conteneur" aura une largeur de 920px si la fenêtre du
navigateur fait au maximum 960px de largeur.
La balise identifiée par "conteneur" aura une largeur de 960px si la fenêtre du
navigateur fait au minimum 920px de largeur.
La balise identifiée par "conteneur" aura une largeur de 960px si la fenêtre du
navigateur fait au maximum 920px de largeur.

1. Pourquoi les mobiles considèrent-ils la définition en pixel CSS (Device Width) alors
qu'ils ont déjà une définition réélle?

La définition réélle n'a aucun sens sans définition en pixels CSS.

La définition réélle renferme beaucoup de pixles sur un espace réduit, ce qui

entraine l'affichage en petits caractères du contenu hypertexte.
La définition réélle sert à afficher le contenu hypertexte alors que la définition en
pixel CSS sert à afficher les photos de la Caméra.
Même si la définition en pixel CSS sert à mieux afficher le contenu hypertexte, il faut
cependant la déclarer comme valeur du Viewport. Sinon, celui-ci a une valeur qui est
généralement très grande ce qui accentuera la réduction de taille des caractères sur le
navigateur.

1. Serait-il judicieux d'inclure des images et des vidéos au sein d'une page déstinée à un
média du type tty?

Oui

Non
Les navigateurs de type tty supportent uniquement du texte (comme l'invite de commande). Il
n'est donc pas utile d'envoyer un contenu autre que du texte brute.

Page 15: Flexbox - les boites flexibles

Les boites flexibles en CSS (Flexbox)
En général, il y a deux types d'objets en HTML, des objets inline et des objets block.

 Les objets inline: sont des objets qui occupent juste l'espace necessaire pour leur affichage, il
ne génèrent pas de retour à la ligne automatique et ne sont pas redimensionnables en CSS
(sauf quelques exceptions comme les blaises <img /> ou <input />). C'est le cas des balises
<span>, <b>, <i>...
 Les objets block: sont des objets qui par défaut occupent la ligne entière (ou block de
plusieurs lignes) et engendrent ainsi un retour à la ligne avant et après. C'est le cas des
balises <div>, <form>, <p>, <header>, <nav>...

Si on souhaite avoir un objet redimensionnable et qu'on peut mettre sur une ligne qui contient déjà
un autre objet (inline) alors une solution a été proposée en CSS3; il s'agit de display:inline-block.
D'autres solutions sont aussi possibles et la plus célèbre est le flottement (float).
Cependant, avec ces solutions là (display:inline-block ou float:left/right) la mise en page de plusieurs
objets sur la même ligne s'avère difficile à maitriser. Des fois, un minuscule pixel de plus peut faire
s'écrouler tout le design. Mais une solution magique a été introduite en CSS, il s'agit de Flexbox ou
boites flexibles.
Qu'est ce qu'une flexbox?
Une flexbox (pour flexible box ou boite flexible) est un conteneur qui renferme des éléments (inline
ou block) de telle sorte à ce que ces éléments là soient emboités d'une manière flexible sans générer
de débordement ou de retour à la ligne incontrôlé.

En gros une flexbox permet:

 La distribution des éléments horizontalement ou verticalement en spécifiant comment gérer

les espaces restants.
 L'aligenement des éléments d'une manière fluide et personnalisée.
 L'organisation des élément dans un ordre qui peut être différent de celui établi par le flux du
DOM.

Rendre un conteneur flexible

Généralement, les conteneurs sont de type block comme c'est le cas pour les balises <div>,
<section>, <aside>... Afin de les rendre flexibles (ou flexbox) il faut changer leur propriété CSS display
comme ceci:

élement{
   display: flex;
}

Ainsi tous les éléments enfants de l'élément flexbox seront réaligné par défaut de manière à ce qu'ils
soient tous sur la même ligne (même s'ils sont de type block).

Prenons le code suivant:

<div id="flexbox">
   <div class="enfant">ENFANT 1</div>
   <div class="enfant">ENFANT 2</div>
   <div class="enfant">ENFANT 3</div>
</div>

Si on exécute ce code on obtient quelque chose comme ceci:

ENFANT 1

   

ENFANT 2

   

ENFANT 3

Sans surprise, les DIV enfant sont alignés l'une en dessous de l'autre, ce qui est un comportement
normal.

Appliquons maintenant la propriété display:flex sur le conteneur (#flexbox):

<style>
   #flexbox{
      display:flex;
   }
</style>
<div id="flexbox">
   <div class="enfant">ENFANT 1</div>
   <div class="enfant">ENFANT 2</div>
   <div class="enfant">ENFANT 3</div>
</div>

Le résultat obtenu est:

ENFANT 1

   

ENFANT 2

   

ENFANT 3

Vous constatez que les éléments enfant sont désormais aligné sur la même ligne, et en plus leur
largeur a automatiquement été réduite pour correspondre à leur juste contenu.

Essayons maintenant d'appliquer une largeur de 100% sur tous les éléments enfants:

<style>
   #flexbox{
      display:flex;
   }
   .enfant{
      width:100%;
   }
</style>
<div id="flexbox">
   <div class="enfant">ENFANT 1</div>
   <div class="enfant">ENFANT 2</div>
   <div class="enfant">ENFANT 3</div>
</div>

Le résultat obtenu est:

ENFANT 1

   

ENFANT 2

   

ENFANT 3

Vous avez remarqué que la largeur a automatiquement été rectifiée par le navigateur pour que les
trois éléments enfant soient emboités dans la même ligne. Je vous laisse donc imaginer les
innombrables possibilités que cela peut offrir pour mieux maitriser le positionnement de ses
éléments sans se soucier de calculer minutieusement les largeurs au pixel près.

Notez que les flexbox sont compatibles avec tous les navigateurs actuels. Pour Inernet Explorer, la
prise en charge de la propriété flex commence à partir de la version 10.

Aller plus loin avec flexbox

Définition de l'axe principal: propriété flex-direction
Un conteneur quelconque dispose de deux axes, un axe principal et un axe secondaire qui, par
défaut, correspondent respectivement aux axes horizontal et vertical.

Dans l'exemple précédent nous avons vu que les éléments ont été distribué horizontalement après
l'application de la propriété display:flex sur le parent. En effet, il s'agit là de l'axe principal.

La propriété que l'on peut appliquer sur le conteneur pour changer la direction par défaut de l'axe
principal est flex-direction et qui peut prendre les valeurs suivantes:

 row: qui est la valeur par défaut, est qui distribue les éléments enfant sur l'axe horizontal
dans l'ordre de flux (par défaut, de gauche à droite). Si vous appliquez l'attribut HTML dir:rtl
alors l'alignement sera effectuée de droite à gauche.
 column: dans ce cas la distribution des éléments enfant sera effectuée sur l'axe vertical de
haut en bas.
 row-reverse: la distribution sera faite suivant l'axe horizontal mais dans l'ordre inversé.
 column-reverse: la distribution sera faite suivant l'axe vertical mais dans l'ordre inversé (du
bas vers le haut).

Exemple:
<style>
   #flexbox{
      display:flex;
      flex-direction:row-reverse;
   }
   .enfant{
      width:100%;
   }
</style>
<div id="flexbox">
   <div class="enfant">ENFANT 1</div>
   <div class="enfant">ENFANT 2</div>
   <div class="enfant">ENFANT 3</div>
</div>

On obtient:

ENFANT 1

   

ENFANT 2

   

ENFANT 3

Alignement sur l'axe principal: propriété justify-content

Pour aligner les éléments sur l'axe principal on fait appel à la propriété justify-content et peut
prendre les valeurs suivantes:

 flex-start: (valeur par défaut) les éléments enfant seront alignés l'axe principal dans l'ordre
normal du flux au début du conteneur.
 flex-end: les éléments enfant seront aligné à la fin du conteneur.
  space-between: les éléments seront répartis sur tout l'axe principal, si leur largeur
combinées est inférieur à celle du conteneur alors un espacement sera placé entre deux
enfants voisins d'une manière régulière.
 space-around: les éléments seront répartis sur tout l'axe principal, si leur largeur combinées
est inférieur à celle du conteneur alors un espacement sera placé autour de tous les enfants.
 center: les éléments seront centrés dans le conteneur.

Exemple 1:
<style>
   #flexbox{
      display:flex;
      justufy-content:space-between;
   }
   .enfant{
      width:auto;
   }
</style>
<div id="flexbox">
   <div class="enfant">ENFANT 1</div>
   <div class="enfant">ENFANT 2</div>
   <div class="enfant">ENFANT 3</div>
</div>

On obtient:

ENFANT 1

   

ENFANT 2

   

ENFANT 3

Exemple 2:

<style>
   #flexbox{
      display:flex;
      justufy-content:space-around;
   }
   .enfant{
      width:auto;
   }
</style>
<div id="flexbox">
   <div class="enfant">ENFANT 1</div>
   <div class="enfant">ENFANT 2</div>
   <div class="enfant">ENFANT 3</div>
</div>

On obtient:

ENFANT 1

   

ENFANT 2
   

ENFANT 3

Alignement sur l'axe secondaire: propriété align-items

Pour contrôler l'alignement sur l'axe secondaire (l'axe vertical par défaut du conteneur) on utilise la
propriété align-itemsw qui peut prendre les valeurs suivantes:

 flex-start: (valeur par défaut) les éléments enfant seront alignés l'axe secondaire dans l'ordre
normal du flux au début du conteneur.
 flex-end: les éléments enfant seront aligné à la fin du conteneur.
 stretch: si le éléments enfant ont des hauteurs différentes alors elles seront étirés jusqu'à ce
qu'ils aient la même hauteur.
 center: les éléments seront centrés dans le conteneur.

Exemple 1:
<style>
   #flexbox{
      display:flex;
      align-items:flex-end;
   }
   .enfant{
      width:auto;
   }
</style>
<div id="flexbox">
   <div class="enfant">ENFANT 1</div>
   <div class="enfant">ENFANT 2</div>
   <div class="enfant">ENFANT 3</div>
</div>

On obtient:

ENFANT 1

   

ENFANT 2

   

ENFANT 3

Exemple 2:

<style>
   #flexbox{
      display:flex;
      justify-content:center;
      align-items:center;
   }
   .enfant{
      width:auto;
   }
</style>
<div id="flexbox">
   <div class="enfant">ENFANT 1</div>
   <div class="enfant">ENFANT 2</div>
   <div class="enfant">ENFANT 3</div>
</div>

On obtient:

ENFANT 1

   

ENFANT 2

   

ENFANT 3

Changement de l'ordre par défaut: propriété order

Par défaut, les éléments enfant sont affichés soit dans l'ordre du flux ou l'ordre inverse (flex-end).
Toutefois, on peut établir un ordre tout à fait personnalisé sans toucher au code HTML. C'est possible
grâce à la propriété order que l'on applique sur l'élément enfant.
Exemple:

<style>
   #flexbox{
      display:flex;
      justify-content:center;
      align-items:center;
   }
   .enfant{
      width:auto;
   }
</style>
<div id="flexbox">
   <div class="enfant" style="order:2">ENFANT 1</div>
   <div class="enfant" style="order:3">ENFANT 2</div>
   <div class="enfant" style="order:1">ENFANT 3</div>
</div>

On obtient:

ENFANT 1

   

ENFANT 2

   

ENFANT 3

Elasticité (ou flexibilité): propriété flex

Il est possible de doter un élément enfant d'une largeur (ou hauteur) qui fait le double ou le triple...
de ses voisins d'une manière fluide. C'est possible grâce à la propriété flex qui prend une valeur
numérique qui désigne le multiplicateur de taille. Cette propriété est appliquée sur l'élément enfant:
Exemple:

<style>
   #flexbox{
      display:flex;
      justify-content:center;
      align-items:center;
   }
   .enfant{
      width:auto;
   }
</style>
<div id="flexbox">
   <div class="enfant" style="flex:2">ENFANT 1</div>
   <div class="enfant" style="flex:1">ENFANT 2</div>
   <div class="enfant" style="flex:3">ENFANT 3</div>
</div>

On obtient:

ENFANT 1

   

ENFANT 2

   

ENFANT 3

Conclusion
Flexbox est une boite à outils riche et remarquablement pratique puisqu'elle simplifie nettement la
mise en page et le contrôle de ses éléments sans se soucier de leurs dimensions ou leurs bordures ou
encore leur marge internes ou externes. Leur emboitement devient facile à gérer et leur ordre
d'affichage aussi. Alors fini les éléments flottants et les calculs des dimensions pixel par pixel pour
éviter les débordements.

Page 16: Les animations en CSS

Appliquer du mouvement aux éléments HTML

Animer les objets avec les transitions

Nous avons vu dans un chapitre précédent l'animation par transition CSS. Il s'agit en fait de
propriétés CSS qui permettent de changer progressivement les styles CSS d'un objet en passant d'un
état à un autre, comme par exemple changer la taille, l'angle de rotation, la couleur... et tout ça,
d'une manière progressive (interpolée).

Ces transitions sont souvent appliquées avec des pseudo-classes qui interprètent les différents états
d'un objet.

Exemple:

#objet{
   background-color:#E80;
   width:200px;
   height:100px;
   transition:all 0.5s ease;
}
#objet:hover{
   background-color:#0A0;
   width: 100%;
   transition:all 0.5s ease;
}
Dans ce cas on verra passer l'objet HTML identifié par #objet de l'état normal à l'état survolé avec
une transition qui dure une demi seconde. Si on quitte l'objet de la sourie, il retrouvera son état
initial avec une transition de même durée.

Bien que les transitions on un rendu impressionnant, il restent tout de même appliquables entre
deux états différents d'un objet et leur lancement se fait par l'intervention de l'utilisateur (comme le
survol, le clic...).

Les animations proprement dites

Les animations en CSS consistent à un ensemble de propriétés qui permettent de décrire l'évolution
d'un objet HTML dans le temps par le changement de ses propriété CSS. On aura donc des
animations plus poussées que leur homologues en transitions. Mais ce n'est pas tout, car si les
transitions permettent d'appliquer une animation entre deux états d'un objet, les animations quant à
elles permettent de définir à tout instant l'attitude de l'objet. Plus encore, leur lancement ne
demande pas forcément l'intervention de l'utilisateur et peuvent donc se lancer automatiquement et
se répéter autant de fois que l'on souhaite.

Pour avoir une idée, l'illustration suivante représente une animation en CSS:

Personnaliser son animation

Vous vous êtes certainement rendu compte que l'on peut réussir des animations compliquées sans
vraiment utiliser des langages de scripts comme Javascript. De simples déclarations CSS suffisent
pour parvenir à ses fins.

Dans ce qui suit nous allons voir les différentes propriétés qui gèrent les animations afin que vous
puissiez personnaliser celles ci à votre goût.

Appliquer une animation à un objet: animation-name

Pour qu'un objet HTML soit animé, il faut le doter de la propriété CSS animation-name. Cette
propriété permet d'identifier la suite d'animations à lui appliquer parmi d'autres (s'il en existe sur la
page courante).

Cette propriété (animation-name) accepte comme valeur un mot de votre choix. Si des animations
différentes sont présentes sur la même page, alors il faut veiller à ce que la valeur de animation-
name soit unique pour éviter tout conflit.

Exemple:

#objet{
   width:100px;
   height:100px;
   background-color:#E80;
   animation-name:monanimation;
}

Définir la séquence d'animations à associer à un objet: @keyframes

Pour définir la séquence d'animation voulu, on aura recourt à une règle @ (dite règle at) (comme
celles qu'on a vu pour @font-face, @media...). Cette règle s'appelle @keyframes et c'est elle qui
contiendra les style de chaque cas (une sorte d'image clé pour les animations interpolées).

Le code suivant illustre la déclaration de @keyframes avec quelques styles-clés:

<style>
   #objet{
      width:100px;
      height:100px;
      background-color:#E80;
      animation-name:monanimation;
   }
   @keyframes monanimation{
      0%{
         width:100px;
         height:100px;
         background-color:#E80;
      }
      50%{
         width:100px;
         height:100px;
         background-color:#0A0;
         border-radius:100px;
         transform:rotate(90deg);
      }
      100%{
         width:100px;
         height:100px;
         background-color:#E80;
         transform:rotate(180deg);
      }
   }
</style>

Expliquons ce code:

Comme nous avons doté l'élément #objet de la propriété animation-name:monanimation, alors il

faut spécifier les différents styles-clés qui correspondent à ce nom là (monanimation), et c'est
justement le rôle de @keyframes monanimation qui signifie que l'ensemble des styles-clés qui
suivent seront appliqué à l'élément #objet.

La règle @keyframes renferme tous les styles-clés de l'objet spécifié avec animation-name et ces
styles là il faut les déclarer tous entre deux accolades ouvrante et fermante {}.

Les styles-clés sont spécifiés avec des valeurs en pourcentage. Par exemple, si l'animation dure 2
secondes alors 0% signifie l'instant 0s, 50% signifie l'instant 1s et 100% signifie l'instant 2s.

Chaque valeur en pourcentage contient l'ensemble des styles-clés qui seront appliqués à l'instant
approprié. Le changement de ces styles (entre un instant et l'instant suivant) se fait d'une manière
progressive ce qui crée l'animation voulue.

Définir les propriétés de l'animation

Pour personnaliser une animation, il suffit de définir les styles voulues aux instants-clés. Cependant, il
reste des choses qu'il faut renseigner au navigateur pour qu'il puisse jouer l'animation
convenablement comme la durée, le répétition, le rythme entre séquences, l'ordre...

Durée de l'animation: animation-duration

Il s'agit de la durée total de l'animation entre l'instant 0% et l'instant 100%. Donc, on peut s'amuser à
ajouter des styles-clés sans modifier la durée total de l'animation.
Pour définir la durée de l'animation (ainsi que toutes les propriétés qui vont suivre) on la déclare
dans l'objet dans le même block de styles que animation-name.

#objet{
   width: 100px;
   height: 100px;
   background-color: #E80;
   animation-name: monanimation;
   animation-duration: 1s;
}

Rythme entre séquences de l'animation: animation-timing-function

Comme pour les transitions, elle permet de changer la vitesse de l'animation entre deux séquences
voisines (on parle de la courbe d'accélération). Les valeurs que cette propriété peut avoir sont:

 ease: le mouvement est rapide au début puis ralentit petit à petit jusqu'à l'arrêt complet.
 linear: le mouvement garde la même vitesse du début à la fin de la transition.
 ease-in: le mouvement commence lentement puis gagne en vitesse avec le temps.
 ease-out: le mouvement est rapide au début puis ralentit à la fin (le ralenti avec ease-out est
moins senti qu'avec ease).
 ease-in-out: le mouvement commence lentement et fini lentement, mais il est plus rapide au
milieu de la transition.

#objet{
   width: 100px;
   height: 100px;
   background-color: #E80;
   animation-name: monanimation;
   animation-duration: 1s;
   animation-timing-function: ease;
}

Délai avant démarrage de l'animation: animation-delay

Cette propriété définit la durée d'attente avant de lancer l'animation. Cette durée est calculée à
partir de l'instant du chargement total du contenu de la page. Si elle n'est pas définie alors elle vaut
par défaut 0s et l'animation commence instantanément.

#objet{
   width: 100px;
   height: 100px;
   background-color: #E80;
   animation-name: monanimation;
   animation-duration: 1s;
   animation-timing-function: ease;
   animation-delay: 5s;
}

Nombre de répétitions de l'animation: animation-iteration-count

La propriété animation-iteration-count définit le nombre de fois que l'animation sera jouée. Par
défaut elle vaut 1 et l'animation se joue donc une seule fois puis s'arrête. Si on veut que l'animation
tourne à l'infinie alors on applique la valeur infinite.
#objet{
   width: 100px;
   height: 100px;
   background-color: #E80;
   animation-name: monanimation;
   animation-duration: 1s;
   animation-timing-function: ease;
   animation-delay: 5s;
   animation-iteration-count: infinite;
}

Sens de l'animation: animation-direction

La propriété animation-direction permet de définir le sens du mouvement. Elle peut accueillir les
valeurs suivante:

 normal: (valeur par défaut) l'animation sera jouée dans le sens normal de l'instant 0% à 100%
 reverse: l'animation sera jouée dans le sens inverse, donc de 100% à 0%
 alternate: l'animation sera jouée dans les deux sens, de 0% à 100% puis de 100% à 0% de
manière consécutive.

#objet{
   width: 100px;
   height: 100px;
   background-color: #E80;
   animation-name: monanimation;
   animation-duration: 1s;
   animation-timing-function: ease;
   animation-delay: 5s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}

Exemple
<style>
   #objet{
      width:100px;
      height:100px;
      background-color:#E80;
      animation-name:monanimation;
      animation-iteration-count:infinite;
      animation-duration:2s;
      animation-timing-function:ease;
      animation-direction:normal;
   }
   @keyframes monanimation{
      0%{
         width:100px;
         height:100px;
         transform:translate(0,0) rotate(0);
         background-color:#E80;
      }
      25%{
         width:100px;
         height:100px;
         transform:translate(100%,0) rotate(-90deg);
         background-color:#0A0;
      }
      50%{
         width:100px;
         height:100px;
         transform:translate(100%,100%) rotate(-180deg);
         background-color:#F0F;
      }
      75%{
         width:100px;
         height:100px;
         transform:translate(0,100%) rotate(-270deg);
         background-color:#00A;
      }
      100%{
         width:100px;
         height:100px;
         transform:translate(0,0) rotate(-360deg);
         background-color:#E80;
      }
   }
</style>

Page 17: Les filtres CSS

Les filtres CSS

Les filtres CSS permettent d'appliquer des transformations spectaculaires aux images et autres objets
HTML. Il permettent par exemple d'afficher une image colorée en niveau de gris, rendre flou un objet
ou inverser les couleurs de celui-ci... Leur effet est très pratique lors de l'affichage des albums photo
dans un site Web par exemple.

Appliquer un filtre à un objet

Pour appliquer des filtres à un objet on fait appel à la propriété filter et on procède de la même
manière que pour la propriété transform, c'est à dire qu'on déclare tous les filtres souhaités en les
séparant par un espace comme ceci:

img{
   filter: filtre1() filtre2() filtre3();
}

Les parenthèses servent de placer des valeurs qui permettent de personnaliser (ou calibrer) le filtre
souhaité selon nos besoins.

L'effet grayscale
Le filtre grayscale() permet d'afficher une image (ou autre objet HTML) en niveau de gris (ou en noir
et blanc).

Dans les parenthèses on spécifie une valeur en pourcentage qui permet de spécifier la profondeur du
filtre du niveau de gris. La valeur 0% n'applique aucun effet visible et la valeur 100% permet d'avoir
un objet complètement en niveau de gris.
Exemple:

img{
   filter: grayscale(100%);
}

A gauche, il s'agit de l'image originale et à droite, c'est l'image avec le filtre décrit dans le code
précédent.

L'effet saturate
Le filtre saturate() permet de régler la saturation d'un objet HTML.

Dans les parenthèses on spécifie une valeur en pourcentage qui permet de spécifier le degrés de
saturation. La valeur 100% correspond à la valeur par défaut (sans filtre). Une valeur supérieur
permet d'augmenter la saturation et une valeur inférieure permet de diminuer celle-ci. La valeur 0
permet de rendre une un objet noire et blanc.

Exemple:

img{
   filter: saturate(180%);
}

L'effet blur
Le filtre blur() permet de rendre flou un objet HTML.

Dans les parenthèses on spécifie une valeur en pixels. Plus cette valeur est grande plus l'objet sera
flouté. Des valeur trop grandes font littéralement disperser les pixels de l'objet à tel point que celui-ci
devient méconnaissable, voir invisible.

Exemple:

img{
   filter: blur(4px);
}

L'effet brightness
Le filtre brightness() permet de régler la luminosité d'un objet.

Dans les parenthèses on spécifie une valeur en pourcentage. La valeur 100% est la valeur par défaut,
et elle n'applique aucun effet visible sur l'objet. Plus cette valeur et grande plus l'objet devient
lumineux et plus elle est petite plus l'objet devient sombre.

Exemple:

img{
   filter: brightness(130%);
}

L'effet contrast
Le filtre contrast() permet de régler le contraste de l'objet. Le contraste permet de régler la
différence entre les nuances sombres et les nuances claires (littéralement le noir et le blanc).

Dans les parenthèses on spécifie une valeur en pourcentage. La valeur 100% est la valeur par défaut
qui applique le contraste d'origine de l'objet. Une valeur supérieure à 100% augmente le contraste,
donc rend les nuances claires encore plus claires et les nuances sombres plus sombres.

Exemple:

img{
   filter: contrast(130%);
}

L'effet sepia
Le filtre sepia() permet d'appliquer l'effet sepia à une image. Il s'agit d'un effet qui donne
l'impression d'une vieille photographie.

Dans les parenthèses on spécifie une valeur en pourcentage (ou décimale) . La valeur 0 est la valeur
par défaut qui applique aucun effe. La valeur 100% désigne un effet sepia absolu.

Exemple:

img{
   filter: sepia(100%);
}

L'effet invert
Le filtre invert() permet d'afficher le négatif d'une image.

Entre les parenthèses on spécifie une valeur en pourcentage (ou décimale). La valeur 100% affiche
une image en couleurs totalement négatives.

Exemple:

img{
   filter: invert(100%);
}

L'effet hue-rotate
Le filtre hue-rotate() permet de changer les teints d'une image en les décalant toutes d'un angle
spécifié entre les parenthèses. La valeur 0 n'applique aucun effet visible sur l'image. Des valeurs
différentes permettent de changer tous les teints de l'image.

Exemple:

img{
   filter: hue-rotate(90deg);
}

L'effet opacity
Le filtre opacity() permet de changer l'opacité d'une image ou un objet. Il applique exactement le
même effet que la propriété opacity.

On spécifie la valeur de l'opacité entre les parenthèses soit par un nombre décimal (compris entre 0
et 1) soit en pourcentage.

Exemple:

img{
   filter: opacity(50%);
}
L'effet drop-shadow
Le filtre drop-shadow() permet d'appliquer une ombre portée à une image ou à un objet HTML. Cet
effet se comporte exactement comme la propriété box-shadow et accepte les mêmes paramètres
que celui-ci, à savoir: l'étalement horizontal de l'ombre, l'étalement vertical, la dispersion et la
couleur.

Exemple:

img{
   filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
}