Glossaire des propriétés CSS

| Torgar | Didier Mouronval |

- Les informations de compatibilité sont données à titre d'information et sont soumises à la version CSS prise en charge par le navigateur au moment de son déploiement. (Source : http://csscreator.com/properties).

- Vous trouverez plus d'explications concernant la syntaxe des règles CSS sur cette page.

Participez à l'enrichissement de ce glossaire.

Commentez

- Titre : Glossaire des propriétés CSS

- Auteurs : Torgar, Didier Mouronval

- Parution : 14 août 2012

- Mise à jour : 6 décembre 2013

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Torgar. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Voir également :

- La syntaxe d'une règle CSS

- Tous les cours et tutoriels CSS

- La FAQ CSS

- Le forum « Publications (X)HTML et CSS »

Sommaire

- Utilisation des préfixes navigateurs

- I. Propriétés de mise en forme de texte

- I-A. Mise en forme de la police

- I-A-1. Nom de police | font-family

- I-A-2. Police personnalisée | @font-face

- I-A-3. Taille du texte | font-size

- I-A-4. Gras | font-weight

- I-A-5. Petites capitales | font-variant

- I-A-6. Petites capitales | font-variant

- I-A-7. Italique | font-style

- I-A-8. La police tout-en-un | font

- I-B. Mise en forme des paragraphes

- I-B-1. Alignement horizontal | text-align

- I-B-2. Dernière ligne | text-align-last

- I-B-3. Alignement vertical | vertical-align

- I-B-4. Décoration | text-decoration

- I-B-5. Capitales | text-transform

- I-B-6. Alinéa | text-indent

- I-B-7. Hauteur de ligne | line-height

- I-B-8. Césure | white-space

- I-B-9. Césure forcée | word-wrap

- I-B-10. Ombrage | text-shadow

- I-C. Définition de la couleur de texte

- I-C-1. Couleur de texte | color

- II. Propriétés de mise en forme des boîtes

- II-A. Dimensions des boîtes

- II-A-1. Largeur | width

- II-A-2. Hauteur | height

- II-A-3. Largeur minimale | min-width

- II-A-4. Largeur maximale | max-width

- II-A-5. Hauteur minimale | min-height

- II-A-6. Hauteur maximale | max-height

- II-B. Marges extérieures

- II-B-1. Marge externe en haut | margin-top

- II-B-2. Marge externe à gauche | margin-left

- II-B-3. Marge externe à droite | margin-right

- II-B-4. Marge externe en bas | margin-bottom

- II-B-5. Marge externe | margin

- II-C. Espacements

- II-C-1. Espacement en haut | padding-top

- II-C-2. Espacement à gauche | padding-left

- II-C-3. Espacement à droite | padding-right

- II-C-4. Espacement en bas | padding-bottom

- II-C-5. Espacement tout-en-un | padding

- II-D. Bordures

- II-D-1. Épaisseur de la bordure | border-width*

- II-D-2. Couleur de la bordure | border-color*

- II-D-3. Type de bordure | border-style*

- II-D-4. Bordure à gauche | border-left*

- II-D-5. Bordure en haut | border-top*

- II-D-6. Bordure à droite | border-right*

- II-D-7. Bordure en bas | border-bottom*

- II-D-8. Bordure tout-en-un | border*

- II-D-9. Bordure arrondie | border-radius

- II-D-10. Ombre | box-shadow

- II-E. Contours

- II-E-1. Épaisseur du contour | outline-width

- II-E-2. Couleur du contour | outline-color

- II-E-3. Type de contour | outline-style

- II-E-4. Décalage du contour | outline-offset

- II-E-5. Contour tout-en-un | outline

- III. Propriétés de mise en forme d'arrière-plans

- III-A. Couleur de fond

- III-A-1. Couleur de fond | background-color

- III-B. Image de fond

- III-B-1. Image de fond | background-image

- III-B-2. Fond fixé | background-attachment

- III-B-3. Répétition du fond | background-repeat

- III-B-4. Position du fond | background-position

- III-B-5. Fond tout-en-un | background

- III-B-6. Transparence | opacity

- IV. Propriétés des listes

- IV-A. Type de liste | list-style-type

- IV-B. Position en retrait | list-style-position

- IV-C. Puce personnalisée | list-style-image

- IV-D. Liste tout-en-un | list-style

- V. Propriétés de mise en forme des tableaux

- V-A. Type de bordure | border-collapse

- V-B. Cellules vides | empty-cells

- V-C. Position du titre | caption-side

- V-D. Affichage des cellules | table-layout

- V-E. Espacement des cellules | border-spacing

- VI. Propriétés d'affichage et de positionnement

- VI-A. Affichage

- VI-A-1. Type d'élément | display

- VI-A-2. Affichage | visibility

- VI-A-3. Afficher seulement une partie | clip

- VI-A-4. Limiter les dimensions | overflow

- VI-B. Positionnement

- VI-B-1. Flottant | float

- VI-B-2. Stopper un flottant | clear

- VI-B-3. Type de positionnement | position

- VI-B-4. Position par rapport aux coins | top bottom left right

- VI-B-5. Ordre d'affichage | z-index

- VII. Propriétés de transformation et d'animation (CSS 3)

- VII-A. Propriétés de transformation

- VII-A-1. Origine de la transformation | transform-origin

- VII-A-2. Perspective 3D | perspective

- VII-A-3. Origine de la perspective | perspective-origin

- VII-A-4. Fonctions de transformation | transform

- Translation | translate()

- Rotation | rotate()

- Redimensionnement | scale()

- Distorsion | skew()

- Transformation matricielle | matrix()

- VII-A-5. Face arrière | backface-visibility

- VII-A-6. Héritage 3D | transform-style

- VII-A-7. Exemple de transformation 3D

- VII-B. Propriétés de transition

- VII-B-1. Nom de propriété(s) | transition-property

- VII-B-2. Durée de transition | transition-duration

- VII-B-3. Effet de transition | transition-timing-function

- VII-B-4. Délai de démarrage | transition-delay

- VII-B-5. La transition tout-en-un | transition

- VII-B-6. Exemple récapitulatif

- VII-C. Propriétés d'animation

- VII-C-1. Étapes de l'animation | @keyframes

- VII-C-2. Nom de l'animation | animation-name

- VII-C-3. Durée de l'animation | animation-duration

- VII-C-4. Effet de l'animation | animation-timing-function

- VII-C-5. Délai de l'animation | animation-delay

- VII-C-6. Itérations de l'animation | animation-iteration-count

- VII-C-7. Sens de l'animation | animation-direction

- VII-C-8. État de l'animation | animation-play-state

- VII-C-9. Style de l'élément hors animation | animation-fill-mode

- VII-C-10. L'animation tout-en-un | animation

- VII-C-11. Exemple récapitulatif

Utilisation des préfixes navigateurs

CSS 3 apporte de nombreuses nouvelles fonctionnalités qui sont implémentées au fur et à mesure par les navigateurs.

L'implémentation d'une nouvelle fonctionnalité se fait en plusieurs étapes. La dernière d'entre elles est la mise en place sur la version stable du navigateur pour pouvoir tester la fonctionnalité dans un contexte réel et affiner le cas échéant certains détails. Cela signifie donc que la fonctionnalité est implémentée, mais pas encore en version finale, c'est-à-dire que son comportement est encore susceptible d'évoluer pour corriger d'éventuels bogues ou mieux coller aux spécifications.

Il faut donc que la fonctionnalité puisse être testée sans être pour autant disponible dans sa version définitive. Pour pouvoir faire la distinction entre les propriétés CSS stables et celles en cours de finalisation, le W3C a normalisé lasyntaxe des préfixes vendeurs (vendor-specific extensions).

La règle est simple : chaque moteur de rendu peut implémenter des propriétés en les préfixant avec leur propre identifiant entouré de tirets.

Par exemple, si le moteur XYZ souhaite expérimenter la propriété prop, il pourra le faire sous le nom -xyz-prop.

Les principaux préfixes utilisés sont :

- -moz- (Firefox et dérivés) ;

- -webkit- (Chrome, Safari, Opera 15+ et dérivés) ;

- -ms- (Internet Explorer) ;

- -o- (Opera jusqu'à la version 12).

Même s'il est déconseillé d'utiliser les propriétés préfixées sur une page Web en production (puisque leur implémentation est expérimentale), il est malgré tout courant de le faire, notamment parce qu'à ce stade de développement, l'implémentation est considérée comme suffisamment stable pour fonctionner correctement dans les cas généraux et n'être potentiellement boguée que dans des cas limites.

Pour mettre en place ces propriétés dans votre page, vous devez lister tous les préfixes possibles (par exemple pour border-radius) :

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;

Enfin, il faut penser au futur ! N'oubliez donc pas de préciser la propriété définitive. Il est important de mettre celle-ci en fin de liste afin d'écraser les versions expérimentales si la version définitive est disponible :

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

Les propriétés de style avec préfixe sont utilisables en JavaScript. Si la notation CSS des préfixes et la notation JavaScript des propriétés standards sont normalisées (en utilisant la notation camelCase : voir Comment passer d'une propriété de style CSS à celle qui correspond en JavaScript ?), la gestion du préfixe dans la notation JavaScript ne l'est pas. Certains navigateurs conservent la notation camelCase (ou lowerCamelCase), d'autres utilisent une notation dite UpperCamelCase (avec majuscule initiale) pour différencier les propriétés préfixées de celles qui ne le sont pas.

Par exemple, pour récupérer ou affecter la valeur de la propriété border-radius pour l'élément dont l'identifiant est element, on procèdera comme suit :

var $element = document.getElementById('element');
if($element.style.borderRadius){
// border-radius
}
else if($element.style.MozBorderRadius){
// -moz-border-radius
}
else if($element.style.webkitBorderRadius){
// -webkit-border-radius
}
else if($element.style.msBorderRadius){ // IE accepte aussi MsBorderRadius
// -ms-border-radius
}
else if($element.style.OBorderRadius){
// -o-border-radius
}
else{
// il faut peut-être changer de navigateur ?
}

Complément d'information : Liste des propriétés CSS préfixées.

I - Propriétés de mise en forme de texte

I-A - Mise en forme de la police

I-A-1 - Nom de police | font-family

font-family : permet d'indiquer les noms de polices par ordre de préférence.

Syntaxe : [[ <family-name> | <generic-family> ] [, <family-name> | <generic-family>]* ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

font-family: "Arial Black", Arial, Verdana, serif;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source :

<style type="text/css">
.font-fam {
font-family: 'Arial Black', Arial, Verdana, serif;
}
</style>
<p class="font-fam">Lorem ipsum dolore sit amet, consectetur adipisicing elit</p>

Explications :

si le visiteur possède la police Arial Black, elle sera utilisée, sinon Arial, sinon Verdana ou enfin serif ;

il est possible d'utiliser des polices personnalisées en combinaison avec @font-face ;

pour les polices composées de deux mots, il faut les entourer de guillemets.

I-A-2 - Police personnalisée | @font-face

@font-face : permet de déclarer une nouvelle police, qui sera téléchargée sur l'ordinateur de vos visiteurs.

Syntaxe : <font-description>+

Compatibilité : IE 9+, FF 3.5+, Chrome 0.2+, Safari 3.1+, Opera N/C

Version CSS : 2.1

Complément d'information : Comment utiliser une police personnalisée sur un site Web ?

@font-face {
font-family: 'ma_police';
src: url('ma_police.eot') format('eot'),
url('ma_police.woff') format('woff'),
url('ma_police.ttf') format('truetype'),
url('ma_police.svg') format('svg');
}

Explications :

il est important ici de voir qu'une police est définie par plusieurs formats étant donné que tous les navigateurs ne prennent pas en charge tous les formats.

I-A-3 - Taille du texte | font-size

font-size : permet de définir la taille de la police de caractères. Elle peut être exprimée avec plusieurs unités.

Syntaxe : <absolute-size> | <relative-size> | <length> | <percentage> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

font-size: 12px;
font-size: 100%; /* normal */
font-size: 1.2em; /* 1.0 : normal */
font-size: 1ex;
font-size: xx-small; /* très très petit */
font-size: x-small; /* très petit */
font-size: small; /* petit */
font-size: medium; /* moyen */
font-size: large; /* grand */
font-size: x-large; /* très grand */
font-size: xx-large; /* très très grand */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<p style="font-size: 12px;">Lorem ipsum dolore sit amet</p>
<p style="font-size: 100%;">Lorem ipsum dolore sit amet</p>
<p style="font-size: 1.2em;">Lorem ipsum dolore sit amet</p>
<p style="font-size: 1ex;">Lorem ipsum dolore sit amet</p>
<p style="font-size: xx-small;">Lorem ipsum dolore sit amet</p>
<p style="font-size: x-small;">Lorem ipsum dolore sit amet</p>
<p style="font-size: small;">Lorem ipsum dolore sit amet</p>
<p style="font-size: medium;">Lorem ipsum dolore sit amet</p>
<p style="font-size: large;">Lorem ipsum dolore sit amet</p>
<p style="font-size: x-large;">Lorem ipsum dolore sit amet</p>
<p style="font-size: xx-large">Lorem ipsum dolore sit amet</p>

I-A-4 - Gras | font-weight

font-weight : permet de définir l'épaisseur de la police de caractères.

Syntaxe : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

font-weight: bold; /* gras */
font-weight: bolder; /* plus gras */
font-weight: lighter; /* plus fin */
font-weight: normal; /* pas gras (par défaut) */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<p style="font-weight: bold;">Lorem ipsum dolore sit amet</p>
<p style="font-weight: bolder;">Lorem ipsum dolore sit amet</p>
<p style="font-weight: lighter;">Lorem ipsum dolore sit amet</p>
<p style="font-weight: normal;">Lorem ipsum dolore sit amet</p>

I-A-5 - Petites capitales | font-variant

font-variant : met le texte en petites capitales.

Syntaxe : normal | small-caps | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

font-variant: small-caps; /* petites capitales */
font-variant: normal; /* normal (par défaut) */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<p style="font-variant: small-caps;">Lorem ipsum dolore sit amet</p>
<p>LOREM IPSUM DOLORE SIT AMET</p>

I-A-6 - Petites capitales | font-variant

font-variant : met le texte en petites capitales.

Syntaxe : normal | small-caps | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

font-variant: small-caps; /* petites capitales */
font-variant: normal; /* normal (par défaut) */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<p style="font-variant: small-caps;">Lorem ipsum dolore sit amet</p>
<p>LOREM IPSUM DOLORE SIT AMET</p>

I-A-7 - Italique | font-style

font-style : permet de mettre un texte en italique.

Syntaxe : normal | italic | oblique | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

font-style: italic; /* italique (forcément !) */
font-style: oblique; /* autre façon de mettre en italique */
font-style: normal; /* normal (par défaut) */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<p style="font-style: italic;">Lorem ipsum dolore sit amet</p>
<p style="font-style: oblique;">Lorem ipsum dolore sit amet</p>
<p style="font-style: normal;">Lorem ipsum dolore sit amet</p>

I-A-8 - La police tout-en-un | font

font : regroupe les propriétés de mise en forme de la police. À moins de l'utilisation d'une des valeurs "caption | icon | menu | message-box | small-caption | status-bar | inherit", font-size et font-family sont tous les deux obligatoires et dans cet ordre (avec éventuellement le line-height entre les deux). 'font-style' || 'font-variant' || 'font-weight' sont optionnels, dans n'importe quel ordre, mais avant le font-size.

Syntaxe : [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

font: bold 16px Arial;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<p style="font: 14pt bolder Arial;">Lorem ipsum dolore sit amet</p>

I-B - Mise en forme des paragraphes

I-B-1 - Alignement horizontal | text-align

text-align : aligne un texte horizontalement.

Syntaxe : left | right | center | justify | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

text-align: left; /* à gauche (par défaut) */
text-align: center; /* centré */
text-align: right; /* à droite */
text-align: justify; /* texte justifié */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

<style type="text/css">
.t-align-left {
text-align: left;
background-color: #93caff;
border: 2px solid #696969;
margin-bottom: 10px;
width: 50%;
}

.t-align-center {
text-align: center;
background-color: #93caff;
border: 2px solid #696969;
margin-bottom: 10px;
width: 50%;
}

.t-align-right {
text-align: right;
background-color: #93caff;
border: 2px solid #696969;
margin-bottom: 10px;
width: 50%;
}

.t-align-justify {
background-color: #93caff;
text-align: justify;
width: 50%;
border: 2px solid #696969;
}
</style>
<p class="t-align-left">Lorem ipsum dolore sit amet</p>
<p class="t-align-center">Lorem ipsum dolore sit amet</p>
<p class="t-align-right">Lorem ipsum dolore sit amet</p>
<p class="t-align-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

I-B-2 - Dernière ligne | text-align-last

Cette propriété peut nécessiter l'utilisation des préfixes vendeurs.

text-align-last : aligne la dernière ligne d'un texte horizontalement.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : auto | start | end | left | right | center | justify

Compatibilité : IE 5.5+, FF 12.0+, Chrome, Safari, Opera

Version CSS : 3

Explications.
auto : la ligne adopte le même alignement que pour text-align, sauf si text-align vaut justify, dans ce cas, la dernière ligne sera alignée à gauche.
start : la dernière ligne sera alignée en début de ligne, le côté dépendant du sens de lecture (ltr ou rtl).
end : la dernière ligne sera alignée en fin de ligne, le côté dépendant du sens de lecture (ltr ou rtl).
left : la dernière ligne sera alignée à gauche.
right : la dernière ligne sera alignée à droite.
center : la dernière ligne sera centrée.
justify : la dernière ligne prendra la largeur de l'élément.

Notes.
La notion de dernière ligne correspond à la dernière ligne affichée avant tout saut de ligne forcé (fin de balise de type bloc ou avant une balise entrainant un saut de ligne comme <br />.
Internet Explorer ne supporte pas les valeurs start et end.

Exemples :

text-align-last: auto; /* par défaut */
text-align-last: center; /* centré */
text-align-last: end; /* selon le sens de lecture */
text-align-last: justify; /* justifié */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.t-align-last-left {
text-align: right;
text-align-last: left;
background-color: #93caff;
border: 2px solid #696969;
margin-bottom: 10px;
width: 50%;
}

.t-align-last-center {
text-align: left;
text-align-last: center;
background-color: #93caff;
border: 2px solid #696969;
margin-bottom: 10px;
width: 50%;
}

.t-align-last-right {
text-align: left;
text-align-last: right;
background-color: #93caff;
border: 2px solid #696969;
margin-bottom: 10px;
width: 50%;
}
</style>
<p class="t-align-last-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="t-align-last-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="t-align-last-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

I-B-3 - Alignement vertical | vertical-align

vertical-align : la propriété vertical-align ne fonctionne que pour les cellules (<td></td>) ou les éléments de type inline-block.

Syntaxe : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

vertical-align: top; /* en haut */
vertical-align: middle; /* au milieu */
vertical-align: bottom; /* en bas */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir source

<table>
<tr style="height: 50px; background-color: #93caff;">
<td style="vertical-align: top;">Lorem ipsum dolore sit amet</td>
<td style="vertical-align: middle;">Lorem ipsum dolore sit amet</td>
<td style="vertical-align: bottom;">Lorem ipsum dolore sit amet</td>
</tr>
</table>

I-B-4 - Décoration | text-decoration

text-decoration : permet d'appliquer une décoration sur un texte (souligné, barré, etc.).

Syntaxe : none | [ underline || overline || line-through ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

text-decoration: underline; /* souligné */
text-decoration: overline; /* ligne au-dessus */
text-decoration: line-through; /* barré */
text-decoration: none; /* normal (par défaut) */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<p style="text-decoration: underline;">Lorem ipsum dolore sit amet</p>
<p style="text-decoration: overline;">Lorem ipsum dolore sit amet</p>
<p style="text-decoration: line-through;">Lorem ipsum dolore sit amet</p>
<p style="text-decoration: none;">Lorem ipsum dolore sit amet</p>

I-B-5 - Capitales | text-transform

text-transform : permet de changer la casse du texte.

Syntaxe : capitalize | uppercase | lowercase | none | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

text-transform: uppercase; /* tout mettre en majuscules */
text-transform: lowercase; /* tout mettre en minuscules */
text-transform: capitalize; /* début des mots en majuscules */
text-transform: none; /* normal (par défaut) */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<p style="text-transform: uppercase;">Lorem ipsum dolore sit amet</p>
<p style="text-transform: lowercase;">Lorem ipsum dolore sit amet</p>
<p style="text-transform: capitalize;">Lorem ipsum dolore sit amet</p>
<p style="text-transform: none;">Lorem ipsum dolore sit amet</p>

I-B-6 - Alinéa | text-indent

text-indent : permet de définir l'alinéa d'un texte.

Syntaxe : <length> | <percentage> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

text-indent : 20px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<p style="text-indent: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

I-B-7 - Hauteur de ligne | line-height

line-height : permet de définir l'interligne entre deux phrases. Les valeurs nulles ne sont pas autorisées.

Syntaxe : normal | <number> | <length> | <percentage> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

line-height: 30px;
line-height: 20%;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.line-height1 {
background-color: #93caff;
border: 2px solid #696969;
}

.line-height2 {
background-color: #93caff;
line-height: 30px;
border: 2px solid #696969;
}

.line-height3 {
background-color: #93caff;
border: 2px solid #696969;
line-height: 200%;
}
</style>
<div style="width: 40%;">
<p class="line-height1">Ici le line-height est à la valeur par défaut.<br />Ce qui explique que l'interligne soit normal.</p>
<hr />
<p class="line-height2">Là on le définit à 30px<br />On se rend compte de l'écart plus important entre les deux phrases.</p>
<hr />
<p class="line-height3">Pareil ici, le line-height est à 200%.<br />Pour un interligne "normal" mettre 100%.</p>
</div>

I-B-8 - Césure | white-space

white-space : permet de définir comment sont gérés les espaces dans un texte.

Syntaxe : normal | pre | nowrap | pre-wrap | pre-line | inherit

Compatibilité : IE 5.5+, FF 1.0+, Chrome 1.0+, Safari 1.0+, Opera 9.5+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Explications des valeurs :

- normal : passage à la ligne automatique (par défaut) ;

- nowrap : pas de passage à la ligne automatique, à moins qu'une balise HTML comme <br /> ne soit présente ;

- pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise <pre>).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.white-space1 {
white-space: normal;
width: 50%;
border: 2px solid #696969;
}

.white-space2 {
white-space: nowrap;
width: 50%;
border: 2px solid #696969;
}

.white-space3 {
white-space: pre;
width: 50%;
border: 2px solid #696969;
}
</style>
<p class="white-space1">
Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.
Lorem ipsum dolore sit amet.
</p>
<p class="white-space2">
Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.
Lorem ipsum dolore sit amet.
</p>
<p class="white-space3">
Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.
Lorem ipsum dolore sit amet.
</p>

I-B-9 - Césure forcée | word-wrap

word-wrap : permet de couper le texte si celui-ci déborde du conteneur.

Syntaxe : [ normal | break-word ]

Compatibilité : IE 5.5+, FF 3.5+, Chrome 1.0+, Safari 1.0+, Opera 10.5+

Version CSS : 3

word-wrap: normal;
word-wrap: break-word;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.word-wrap1 {
word-wrap: normal;
width:150px;
background-color: yellow;
border: 2px solid #696969;
margin-bottom: 10px;
}

.word-wrap2 {
word-wrap: break-word;
width: 150px;
background-color: yellow;
border: 2px solid #696969;
}
</style>
<p class="word-wrap1">Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsit amet, consectetur adipisicing elit</p>
<p class="word-wrap2">Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsit amet, consectetur adipisicing elit</p>

I-B-10 - Ombrage | text-shadow

text-shadow : permet d'ajouter une ombre sur un texte ou un élément de type bloc.

Syntaxe : none | [, ]* [ <couleur>? <longueur> <longueur> <longueur>? | <longueur> <longueur> <longueur>? <couleur>? ] | inherit (source: MDN)

Compatibilité : IE 10+, FF 3.5+, Chrome 4+, Safari 4+, Opera 9.5+, Opera Mobile 10+

Version CSS : 3

text-shadow: 2px 2px 4px red;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.shadow-red {
text-shadow: 4px 4px 4px red;
}

.shadow-green {
text-shadow: -4px -4px 4px green;
}

.shadow-black {
text-shadow: 4px 4px 0px black;
}
</style>
<p style="font-size: 1.2em;"><span class="shadow-red">Lorem ipsum</span> <span class="shadow-green">dolore sit amet</span>, <span class="shadow-black">consectetur adipisicing elit</span></p>

Explications des valeurs :

- décalage en pixels à droite ;

- décalage en pixels en bas ;

- force du dégradé ;

- couleur.

Le cas IE : comme (toujours ?) Internet Explorer fait bande à part, il faut utiliser la propriété filter. Voici un exemple :

filter: progid:DXImageTransform.Microsoft.Shadow(color='#ff0000', Direction=135, Strength=4);
zoom: 1;

I-C - Définition de la couleur de texte

I-C-1 - Couleur de texte | color

color : nous disposons de six types de valeur pour indiquer la couleur du texte d'un élément :

Syntaxe : <color> | inherit

Compatibilité : IE 5+, FF 1+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1 (CSS 3 pour rgba, hsl et hsla)

- la couleur en anglais : red, black, white, blue, green, etc. ;

- la couleur en hexadécimal : #C0C0C0 ;

- la couleur en Red Green Blue (RGB ou RVB en français) : rgb(0, 255, 0) ;

- la couleur en RGB avec transparence : rgba(0, 255, 0, 0.5) ;

- la couleur en Hue Saturation Luminosity (HSL ou teinte, saturation, luminosité) : hsl(250, 100%, 50%) ;

- la couleur en HSL avec transparence : hsla(250, 100%, 50%, 0.5).

Complément d'information : Les couleurs en CSS 3.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<p style="color: red;">Lorem ipsum dolore sit amet</p>
<p style="color: #C0C0C0;">Lorem ipsum dolore sit amet</p>
<p style="color: rgb(0, 255, 0);">Lorem ipsum dolore sit amet</p>
<p style="color: rgba(0, 255, 0, 0.6);">Lorem ipsum dolore sit amet</p>
<p style="color: hsl(250, 100%, 50%);">Lorem ipsum dolore sit amet</p>
<p style="color: hsla(250, 100%, 50%, 0.6);">Lorem ipsum dolore sit amet</p>

II - Propriétés de mise en forme des boîtes

II-A - Dimensions des boîtes

II-A-1 - Largeur | width

width : permet de définir la largeur d'un élément. La valeur peut être en px, %, ou encore auto, la valeur par défaut. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

width: 200px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.width {
width: 200px;
border: 2px solid #696969;
background-color: #93caff;
}
</style>
<div class="width">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>

II-A-2 - Hauteur | height

height : idem que pour la largeur mais pour la hauteur. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

height: 50px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.height {
width: 200px;
height: 50px;
border: 2px solid #696969;
background-color: #93caff;
}
</style>
<div class="height">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>

II-A-3 - Largeur minimale | min-width

min-width : permet de définir la largeur minimale sur un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

min-width: 500px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.min-w {
min-width: 500px;
width: 10%;
border: 2px solid #696969;
background-color: #93caff;
}
</style>
<p class="min-w">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</p>

II-A-4 - Largeur maximale | max-width

max-width : permet de fixer la largeur maximale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | none | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

max-width: 50px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.max-w {
max-width: 50px;
border: 2px solid #696969;
background-color: #93caff;
}
</style>
<p class="max-w">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</p>

II-A-5 - Hauteur minimale | min-height

min-height : permet de fixer la hauteur minimale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

min-height: 200px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.min-h {
min-height: 200px;
width: 50%;
border: 2px solid #696969;
background-color: #93caff;
}
</style>
<p class="min-h">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

II-A-6 - Hauteur maximale | max-height

max-height : permet de fixer la hauteur maximale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | none | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

max-height: 20px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.max-h {
max-height: 20px;
width: 50%;
border: 2px solid #696969;
background-color: #93caff;
margin-bottom: 50px;
}
</style>
<p class="max-h">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat</p>

II-B - Marges extérieures

II-B-1 - Marge externe en haut | margin-top

margin-top : permet de définir la marge externe en haut d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

margin-top: 20px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.m-top1 {
border: 1px solid black;
background-color: red;
width: 800px;
}

.m-top2 {
background-color: yellow;
}

.m-top3 {
margin-top: 20px; background-color: yellow;
}
</style>
<div class="m-top1">
<div class="m-top2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="m-top3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

II-B-2 - Marge externe à gauche | margin-left

margin-left : permet de définir la marge externe à gauche d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

margin-left: 20px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.m-left1 {
border: 1px solid black;
background-color: red;
width: 420px;
}

.m-left2 {
width: 200px;
float: left;
background-color: yellow;
}

.m-left3 {
width: 200px;
float: left;
margin-left: 20px;
background-color: yellow;
}
</style>
<div class="m-left1">
<div class="m-left2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="m-left3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="clear"></div>
</div>

II-B-3 - Marge externe à droite | margin-right

margin-right : permet de définir la marge externe à droite d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

margin-right: 20px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.m-right1 {
border: 1px solid black;
background-color: red;
width: 420px;
}

.m-right2 {
width: 200px;
float: left;
margin-right: 20px;
background-color: yellow;
}

.m-right3 {
width: 200px;
float: left;
background-color: yellow;
}
</style>
<div class="m-right1">
<div class="m-right2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="m-right3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="clear"></div>
</div>

II-B-4 - Marge externe en bas | margin-bottom

margin-bottom : permet de définir la marge externe en bas d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

margin-bottom: 20px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.m-bottom1 {
border: 1px solid black;
background-color: red;
width: 800px;
}

.m-bottom2 {
margin-bottom: 20px;
background-color: yellow;
}

.m-bottom3 {
background-color: yellow;
}
</style>
<div class="m-bottom1">
<div class="m-bottom2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="m-bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

II-B-5 - Marge externe | margin

margin : permet de définir en une seule fois les marges externes de tous les côtés d'un élément. Les valeurs négatives sont autorisées.

Syntaxe : <margin-width>{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

- une valeur : ce sera la marge pour le haut, le bas, la gauche et la droite ;

- deux valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite ;

- trois valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas ;

- quatre valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.

margin: 20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.margin1 {
border: 1px solid black;
background-color: red;
width: 800px;
}

.margin2 {
background-color: yellow;
}

.margin3 {
margin: 20px 5px;
background-color: yellow;
}

.margin4 {
background-color: yellow;
}
</style>
<div class="margin1">
<div class="margin2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="margin3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="margin4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

II-C - Espacements

II-C-1 - Espacement en haut | padding-top

padding-top : permet de définir l'espacement interne en haut d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

padding-top: 20px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.p-top1 {
background-color: red;
width: 800px;
}

.p-top2 {
padding-top: 20px;
background-color: red;
border: 1px solid black;
}

.p-top3 {
background-color: yellow;
}
</style>
<div class="p-top1">
<div class="p-top2">
<div style="p-top3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>

II-C-2 - Espacement à gauche | padding-left

padding-left : permet de définir l'espacement interne à gauche d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

padding-left: 20px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.p-left1 {
background-color: red;
width: 800px;
}

.p-left2 {
padding-left: 20px;
background-color: red;
border: 1px solid black;
}

.p-left3 {
background-color: yellow;
}
</style>
<div class="p-left1">
<div class="p-left2">
<div class="p-left3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>

II-C-3 - Espacement à droite | padding-right

padding-right : permet de définir l'espacement interne à droite d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

padding-right: 20px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.p-right1 {
background-color: red;
width: 800px;
}

.p-right2 {
padding-right: 20px;
background-color: red;
border: 1px solid black;
}

.p-right3 {
background-color: yellow;
}
</style>
<div class="p-right1">
<div class="p-right2">
<div class="p-right3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>

II-C-4 - Espacement en bas | padding-bottom

padding-bottom : permet de définir l'espacement interne en bas d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

padding-bottom: 20px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.p-bottom1 {
background-color: red;
width: 800px;
}

.p-bottom2 {
padding-bottom: 20px;
background-color: red;
border: 1px solid black;
}

.p-bottom3 {
background-color: yellow;
}
</style>
<div class="p-bottom1">
<div class="p-bottom2">
<div class="p-bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>

II-C-5 - Espacement tout-en-un | padding

padding : permet de définir en une seule fois l'espacement interne de tous les côtés d'un élément. Les valeurs négatives sont autorisées.

Syntaxe : <padding-width>{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

- une valeur : ce sera la marge pour le haut, le bas, la gauche et la droite ;

- deux valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite ;

- trois valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas ;

- quatre valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.

padding: 20px 5px 10px; /* 20px de marge en haut, 10px en bas, 5px à gauche et à droite */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.bottom1 {
border: 1px solid black;
background-color: red;
width: 800px;
}

.bottom2 {
padding: 20px 5px 10px;
background-color: red;
}

.bottom3 {
background-color: yellow;
}
</style>
<div class="bottom1">
<div class="bottom2">
<div class="bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>

II-D - Bordures

Pour les propriétés de cette partie suivies d'un astérisque (border*), il est possible de définir plus précisément l'effet voulu en "combinant" les noms de propriétés.
Exemples :

border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-top
border-top-color
border-top-style
border-top-width
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

II-D-1 - Épaisseur de la bordure | border-width*

border-width : permet de définir l'épaisseur du trait.

Syntaxe : <border-width>{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

- une valeur : bordure égale pour les quatre côtés ;

- deux valeurs : la première correspond à l'épaisseur pour le haut et le bas, la seconde pour la gauche et la droite ;

- trois valeurs : la première correspond à l'épaisseur du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;

- quatre valeurs : respectivement l'épaisseur du haut, de la droite, du bas, de la gauche.

border-width: 5px 1px 3px 0;
border-color: black;
border-style: solid;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.border-w {
border-width: 5px 1px 3px 0;
border-color: black;
border-style: solid;
background-color: #93caff;
}
</style>
<p class="border-w">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

II-D-2 - Couleur de la bordure | border-color*

border-color : permet de définir la couleur de la bordure.

Syntaxe : [ <color> | transparent ]{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Notes : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit. Internet Explorer 6 et précédents ne supportent pas la valeur transparent.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

- une valeur : couleur unique pour les quatre côtés ;

- deux valeurs : la première correspond à la couleur pour le haut et le bas, la seconde pour la gauche et la droite ;

- trois valeurs : la première correspond à la couleur du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;

- quatre valeurs : respectivement la couleur du haut, de la droite, du bas, de la gauche.

border-width: 5px 2px 3px 4px;
border-color: black red blue green;
border-style: solid;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.border-color {
border-width: 5px 2px 3px 4px;
border-color: black red blue green;
border-style: solid;
background-color: #93caff;
}
</style>
<p class="border-color">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

II-D-3 - Type de bordure | border-style*

border-style : permet de définir le style de bordure.

Syntaxe : <border-style>{1,4} | inherit

Compatibilité : IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : les valeurs inherit et hidden ne sont pas supportées par IE 8 et précédents.

Version CSS : 1

- none : pas de bordure ;

- hidden : bordure cachée, l'espace de bordure est apparent contrairement à none ;

- solid : ligne pleine ;

- double : ligne double : nécessite une taille de bordure de 3 pixels minimum) ;

- dashed : tirets ;

- dotted : pointillés ;

- inset : effet 3D "enfoncé" (dépend de la couleur de la bordure) ;

- outset : effet 3D "surélevé" (dépend de la couleur de la bordure) ;

- ridge : effet 3D double bordure (dépend de la couleur de la bordure) ;

- groove : autre effet 3D double bordure (dépend de la couleur de la bordure).

border-color: black;

border-style: none;
border-style: hidden
border-style: solid;
border-style: double;
border-style: dashed;
border-style: dotted;
border-style: inset;
border-style: outset;
border-style: ridge;
border-style: groove;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.b-style1 {
border-color: black;
border-style: solid;
margin-bottom: 10px;
background-color: #93caff;
}

.b-style2 {
border-color: black;
border-style: double;
margin-bottom: 10px;
background-color: #93caff;
}

.b-style3 {
border-color: black;
border-style: dashed;
margin-bottom: 10px;
background-color: #93caff;
}

.b-style4 {
border-color: black;
border-style: dotted;
margin-bottom: 10px;
background-color: #93caff;
}

.b-style5 {
border-color: black;
border-style: inset;
border-width: 5px;
margin-bottom: 10px;
background-color: #93caff;
}

.b-style6 {
border-color: black;
border-style: outset;
border-width: 5px;
margin-bottom: 10px;
background-color: #93caff;
}

.b-style7 {
border-color: black;
border-style: ridge;
border-width: 5px;
margin-bottom: 10px;
background-color: #93caff;
}

.b-style7 {
border-color: black;
border-style: groove;
border-width: 5px;
margin-bottom: 10px;
background-color: #93caff;
}
</style>
<div class="b-style1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style7">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style8">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-4 - Bordure à gauche | border-left*

border-left : indique la couleur, l'épaisseur et le type de bordure pour la bordure gauche. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-left-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

border-left: 2px dotted red; /* Bordure en pointillé rouge de 2px */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.b-left {
border-left: 2px dotted red;
width: 70%;
background-color: #93caff;
}
</style>
<div class="b-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-5 - Bordure en haut | border-top*

border-top : indique la couleur, l'épaisseur et le type de bordure pour la bordure en haut. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-top-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

border-top: 2px dotted red; /* Bordure en pointillé rouge de 2px */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.b-top {
border-top: 2px dotted red;
width: 60%;
background-color: #93caff;
}
</style>
<div class="b-top">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-6 - Bordure à droite | border-right*

border-right : indique la couleur, l'épaisseur et le type de bordure pour la bordure à droite. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-right-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

border-right: 2px dotted red; /* Bordure en pointillé rouge de 2px */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.b-right {
border-right: 2px dotted red;
width: 60%;
background-color: #93caff;
}
</style>
<div class="b-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-7 - Bordure en bas | border-bottom*

border-bottom : indique la couleur, l'épaisseur et le type de bordure pour la bordure en bas. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-bottom-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

border-bottom: 2px dotted red; /* Bordure en pointillé rouge de 2px */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.b-bottom {
border-bottom: 2px dotted red;
width: 60%;
background-color: #93caff;
}
</style>
<div class="b-bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-8 - Bordure tout-en-un | border*

border : permet de définir la bordure en une seule fois, aussi bien pour le style, l'épaisseur que la couleur.

Syntaxe : [ <border-width> || <border-style> || 'border-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

border: 2px dotted red; /* Bordure en pointillé rouge de 2px */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.border {
border: 2px dotted red;
width: 60%;
background-color: #93caff;
}
</style>
<div class="border">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-9 - Bordure arrondie | border-radius

border-radius : permet d'arrondir les angles

Syntaxe : <valeur>{1,4} / <valeur>{1,4}

Compatibilité : IE 9+, FF 4+, Chrome 0.2+, Safari 5+, Opera 6+

Version CSS : 3

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

- une valeur : angle unique pour les quatre côtés ;

- deux valeurs : la première correspond à l'angle pour le haut et le bas, la seconde pour la gauche et la droite ;

- trois valeurs : la première correspond à l'angle du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;

- quatre valeurs : respectivement : l'angle du haut, de la droite, du bas, de la gauche.

Complément d'information : Les bordures en CSS 3.

border-radius: 5px 10px 0 15px;
background-color: yellow;
border: 1px solid red;
padding: 5px; /* Pour éviter que le texte déborde des bordures arrondies */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir le code source

<style type="text/css">
.border-radius {
border-radius: 5px 10px 0 15px;
background-color: yellow;
border: 1px solid red;
padding: 5px; width: 60%;
}
</style>
<div class="border-radius">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-10 - Ombre | box-shadow

box-shadow : permet d'ajouter un ombrage sur un élément.

Syntaxe : none | [, ]* <ombre> | inherit ou <ombre> [ <couleur>? <length> <longueur> <longueur>? <longueur>? | <longueur> <longueur> <longueur>? <longueur>? <couleur>? ] (source : MDN)

Compatibilité : IE 9+, FF 4+, Chrome 10+, Safari 4+, Opera 10.5+

Version CSS : 3

Explications sur la syntaxe (source : Créer des effets étonnants avec la propriété CSS3 box-shadow) :

- une valeur positive pour le décalage horizontal décale l'ombre vers la droite, une valeur négative vers la gauche ;

- une valeur positive pour le décalage vertical décale l'ombre vers le bas, une valeur négative vers le haut ;

- vous ne pouvez pas donner une valeur négative pour l'étendue de flou. Plus la valeur est grande, plus le flou s'étale ;

- une distance de propagation positive entraine une expansion de la zone d'ombre dans toutes les directions, une valeur négative entraine une contraction ;

- la couleur est celle de l'ombre ;

- la propriété inset indique une ombre interne plutôt qu'externe.

box-shadow: 2px 2px 4px black;
box-shadow: 2px 2px 4px black inset;
box-shadow: 3px 3px 10px 1px #7b7b7b;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir le code source

<style type="text/css">
.box1 {
width: 200px;
height: 100px;
background-color: yellow;
box-shadow: 2px 2px 4px black;
position: relative;
margin-bottom: 10px;
}

.box2 {
position: absolute;
top: 1px;
left: 1px;
font-style: italic;
font-weight: bold;
}

.box3 {
position: absolute;
top: 1px;
right: 1px;
}

.box4 {
width: 200px;
height: 100px;
background-color: yellow;
box-shadow: 2px 2px 4px black inset;
position: relative;
margin-bottom: 10px;
}

.box5 {
position: absolute;
top: 3px;
left: 5px;
font-style: italic;
font-weight: bold;
}

.box6 {
position: absolute;
top: 3px;
right: 1px;
}

.box7 {
box-shadow: 3px 3px 10px 1px #7b7b7b;
border: 1px solid #cecdcd;
background-color: white;
width: 80px;
height: 80px;
}
</style>
<div class="box1">
<div class="box2">Note :</div>
<div class="box3">[X]</div>
</div>
<div class="box4">
<div class="box5">Note :</div>
<div class="box6">[X]</div>
</div>
<div class="box7"></div>

II-E - Contours

Les contours permettent d'entourer un élément. Bien que similaires aux bordures, ils diffèrent sur certains points :

- ils n'augmentent pas l'espace utilisé par l'élément mais se positionnent par dessus le contenu (voir exemple) ;

- ils ne sont pas nécessairement rectangulaires, bien que la plupart des navigateurs ne respectent pas la spécification (et dessinent des contours rectangulaires) ;

- on ne peut pas définir de contour spécifique à chaque côté ;

- en cas de saut de ligne, le contour n'est pas coupé, il est fermé en fin de ligne et ouvert à la ligne suivante, donnant visuellement deux contours.

Exemple :

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.outline-w-p {
outline-width: thick;
outline-color: gold;
outline-style: solid;
outline-offset: 5px;
border: 3px solid black;
background-color: #93caff;
padding: 0.8em;
width: 80%;
margin: 10px auto 20px;  /* Évite de chevaucher le cadre de code */
}
.outline-w-span {
outline-width: 0.8em;
outline-color: silver;
outline-color: rgba(214,214,214,0.8);
outline-style: solid;
}
</style>
<p class="outline-w-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore <span class="outline-w-span">magna aliqua.<br />Ut enim</span> ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

II-E-1 - Épaisseur du contour | outline-width

outline-width : permet de définir l'épaisseur du trait.

Syntaxe : thin | medium | thick | <longueur> | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note : Les valeurs prédéfinies dépendent de l'agent utilisateur, néanmoins, les valeurs habituelles sont de 1px pour thin, 3px pour medium et 5px pour thick.

Version CSS : 2.1

Le contour est placé en avant du contenu, cachant éventuellement une partie de ce dernier comme dans l'exemple ci-dessus. Cependant, il ne constitue pas lui-même un élément et ne masque pas réellement les éléments qui sont en-dessous. Notamment, les liens restent cliquables ou le texte sélectionnable.

Exemples :

outline-width: thin;
outline-width: 0.2em;
outline-width: 4px;

II-E-2 - Couleur du contour | outline-color

outline-color : permet de définir la couleur du contour.

Syntaxe : <couleur> | invert | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Notes.
La valeur invert (qui est pourtant la valeur par défaut) n'est pas supportée par Chrome, Opera 15+ et Safari et a été abandonnée par Firefox 3.0+.
Pour les navigateurs ne supportant pas invert, la valeur par défaut correspond à la valeur calculée pour color.

Version CSS : 2.1

Exemples :

outline-color: green;
outline-color: #93caff;
outline-color: rgba(127, 218, 54, 0.8);

II-E-3 - Type de contour | outline-style

outline-style : permet de définir le style du contour.

Syntaxe : <outline-style> | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note : même si elle est peu appliquée, la spécification prévoit que le contour doit s'adapter aux débordements éventuels du contenu et peut ne pas être rectangulaire (Opera 12 et inférieurs respecte la spécification).

Version CSS : 2.1

- none (par défaut) : pas de bordure ;

- solid : ligne pleine ;

- double : ligne double : nécessite une taille de bordure de 3 pixels minimum) ;

- dashed : tirets ;

- dotted : pointillés ;

- inset : effet 3D "enfoncé" (dépend de la couleur de la bordure) ;

- outset : effet 3D "surélevé" (dépend de la couleur de la bordure) ;

- ridge : effet 3D double bordure (dépend de la couleur de la bordure) ;

- groove : autre effet 3D double bordure (dépend de la couleur de la bordure).

Exemples :

outline-style: none;
outline-style: solid;
outline-style: double;
outline-style: dashed;
outline-style: dotted;
outline-style: inset;
outline-style: outset;
outline-style: ridge;
outline-style: groove;

II-E-4 - Décalage du contour | outline-offset

outline-offset : permet de décaler les limites du contour.

Syntaxe : <longueur> | inherit

Compatibilité : IE, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 9.5+

Note : par défaut, le contour est collé aux limites de l'élément, si offline-offset est différent de 0, un espacement transparent est créé entre l'élément et le contour (si la valeur est négative, le contour est contracté à l'intérieur de l'élément).

Version CSS : 3

Exemples :

outline-offset: 0;
outline-offset: 5px;
outline-offset: -5px;
outline-offset: 0.4em;

II-E-5 - Contour tout-en-un | outline

outline : permet de définir le contour en une seule fois, aussi bien pour le style, l'épaisseur que la couleur.

Syntaxe : [ <outline-width> || <outline-style> || <outline-color> ] | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note : la propriété outline-offset ne peut pas être intégrée à la propriété raccourcie outline.

Version CSS : 2.1

Exemples :

outline: thin dotted blue;
outline: solid #FFD700;
outline: 6px double;

III - Propriétés de mise en forme d'arrière-plans

III-A - Couleur de fond

III-A-1 - Couleur de fond | background-color

background-color : définit la couleur de fond de l'élément.

Syntaxe : <color> | transparent | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Complément d'information : Les couleurs en CSS 3.

Version CSS : 1

background-color: red;
background-color: #C0C0C0;
background-color: rgb(0, 255, 0);
background-color: rgba(0, 255, 0, 0.6);
background-color: hsl(250, 100%, 50%);
background-color: hsla(250, 100%, 50%, 0.6);

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.background-color1 {
background-color: red;
border: 2px solid #696969;
margin-bottom: 10px;
}

.background-color2 {
background-color: #C0C0C0;
border: 2px solid #696969;
margin-bottom: 10px;
}

.background-color3 {
background-color: rgb(0, 255, 0);
border: 2px solid #696969;
}
</style>
<div style="width: 60%;">
<p class="background-color1">Lorem ipsum dolore sit amet</p>
<p class="background-color2">Lorem ipsum dolore sit amet</p>
<p class="background-color3">Lorem ipsum dolore sit amet</p>
</div>

III-B - Image de fond

III-B-1 - Image de fond | background-image

background-image : indiquer l'URL de l'image (chemin absolu ou relatif).

Syntaxe : <uri> | none | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype et ne supporte pas plusieurs images de fond pour un même élément. IE 9 supporte inherit.

Version CSS : 1

background-image: url("./images/background.png"); /* relatif */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.background-image {
width: 100px;
height: 100px;
background-image: url('./images/background.png');
border: 2px solid #696969;
}
</style>
<div class="background-image"></div>

III-B-2 - Fond fixé | background-attachment

background-attachment : permet de fixer le fond lors du défilement de la page.

Syntaxe : scroll | fixed | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

- fixed : le fond reste fixe quand on scrolle ;

- scroll : le fond défile quand on scrolle (par défaut).

background-attachment: fixed;
background-attachment: scroll;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.background-attch1 {
background-image: url('./images/background.png');
background-attachment: fixed;
background-repeat: no-repeat;
}

.background-attch2 {
background-image: url('./images/background.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
<div class="background-attch1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="background-attch2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

III-B-3 - Répétition du fond | background-repeat

background-repeat : permet de répéter ou non le fond.

Syntaxe : repeat | repeat-x | repeat-y | no-repeat | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

- repeat : le fond est répété (par défaut) ;

- repeat-x : le fond est répété horizontalement ;

- repeat-y : le fond est répété verticalement ;

- no-repeat : le fond est affiché une fois, il n'est pas répété.

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.background-repeat1 {
width: 200px;
height: 200px;
background-image: url('./images/background.png');
background-repeat: repeat;
float: left;
border: 2px solid #696969;
margin-right: 20px;
}

.background-repeat2 {
width: 200px;
height: 200px;
background-image: url('./images/background.png');
background-repeat: repeat-x;
float: left;
border: 2px solid #696969;
margin-right: 20px;
}

.background-repeat3 {
width: 200px;
height: 200px;
background-image: url('./images/background.png');
background-repeat: repeat-y;
float: left;
border: 2px solid #696969;
margin-right: 20px;
}

.background-repeat4 {
width: 200px;
height: 200px;
background-image: url('./images/background.png');
background-repeat: no-repeat;
float: left;
border: 2px solid #696969;
}
</style>
<div class="background-repeat1"></div>
<div class="background-repeat2"></div>
<div class="background-repeat3"></div>
<div class="background-repeat4"></div>
<div style="clear: both;"></div>

III-B-4 - Position du fond | background-position

background-position : permet de définir l'emplacement du fond. Utilisé pour la gestion de sprite par exemple. Pour fonctionner sous Firefox et Opera, la propriété background-attachment doit être à fixed.

Syntaxe : [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Il y a deux possibilités pour cette propriété :

- la première, en définissant la position en px ou % depuis le coin en haut à gauche ;

background-position: 100px 20px; /* 100px à droite, 20px en bas */

- la seconde, en utilisant les valeurs prédéfinies pour la verticale et pour l'horizontale :

background-position: top; /* en haut, verticalement */
background-position: center; /* au milieu, verticalement */
background-position: bottom; /* en bas, verticalement */

background-position: left; /* à gauche, horizontalement */
background-position: center; /* au centre, horizontalement */
background-position: right; /* à droite, horizontalement */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.background-pos1 {
width: 200px;
height: 200px;
background-image: url('./images/background.png');
background-repeat: no-repeat;
background-position: 100px 20px;
border: 2px solid #696969;
}
</style>
<div class="background-pos1"></div>

III-B-5 - Fond tout-en-un | background

background : comme la propriété font, il est possible de définir le fond en une seule fois via background.
L'ordre importe peu, mais il est possible de définir : background-image, background-repeat, background-attachment, background-position.

Syntaxe : ['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype et ne supporte pas plusieurs images de fond pour un même élément. IE 9 supporte inherit.

Version CSS : 1

background: url("./images/background.png") no-repeat top right; /* l'image reste en haut à droite de l'écran et n'est pas répété */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.background1 {
width: 200px;
height: 200px;
background: url('./images/background.png') no-repeat top right;
border: 2px solid #696969;
}
</style>
<div class="background1"></div>

III-B-6 - Transparence | opacity

opacity / filter : permet de rendre un élément transparent à un certain pourcentage. Pour IE8 et ses précédentes versions, il faut passer par la propriété filter. Le reste des navigateurs acceptent opacity.

Syntaxe : <valeur> | inherit

Compatibilité : IE 9, FF 3.6+, Chrome 17+, Safari 5+, Opera 11.6+

Note : IE 8 et précédents supporte un équivalent : filter: alpha(opacity=50).

Version CSS : 3

opacity: 0.5;
filter: alpha(opacity=50); /* <= IE8 */

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.opacity1 {
width: 100px;
height: 100px;
background-image: url('./images/background.png');
border: 2px solid #696969;
}

.opacity2 {
width: 50px;
height: 50px;
background-color: red;
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
<div class="opacity1">
<div class="opacity2"></div>
</div>

IV - Propriétés des listes

IV-A - Type de liste | list-style-type

list-style-type : permet de définir le type de la liste.

Syntaxe : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

Compatibilité : IE complète 8 - partielle 7, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : IE 8 et précédents ne supporte les valeurs : decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian et inherit que si un doctype est déclaré.

Version CSS : 1

- Pour les listes non ordonnées (<ul>) :

- disc (par défaut) : un disque noir ;

- circle : un cercle ;

- square : un carré ;

- none : aucune puce ne sera utilisée.

- Pour les listes ordonnées (<ol>) :

- decimal : des nombres 1, 2, 3, 4, 5... (par défaut) ;

- decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...) ;

- upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...) ;

- lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...) ;

- upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...) ;

- lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...) ;

- lower-greek : numérotation grecque, en minuscules ;

- none : aucune.

list-style-type: disc;
list-style-type: square;
list-style-type: upper-roman;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.list1 {
list-style-type: disc;
}

.list2 {
list-style-type: square;
}

.list3 {
list-style-type: upper-roman;
}
</style>
<div>
<ul class="list1">
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
</ul>
<ul class="list2">
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
</ul>
<ol class="list3">
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
</ol>
</div>

IV-B - Position en retrait | list-style-position

list-style-position : permet de définir la position de la puce lorsque le contenu est sur plusieurs lignes.

Syntaxe : inside | outside | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

- inside : sans retrait ;

- outside : avec retrait (par défaut).

list-style-position: inside;
list-style-position: outside;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.list-pos1 {
list-style-position: inside;
}

.list-pos2 {
list-style-position: outside;
}
</style>
<div style="width: 400px;">
<ul class="list-pos1">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</li>
</ul>
<ul class="list-pos2">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</li>
</ul>
</div>

IV-C - Puce personnalisée | list-style-image

list-style-image : permet de mettre une image en guise de puce.

Syntaxe : <uri> | none | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

list-style-image: url('./images/puce.gif');

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.list-img {
list-style-image: url('./images/puce.gif');
}
</style>
<div>
<ul class="list-img">
<li>article 1</li>
<li>article 2</li>
<li>article 3</li>
</ul>
</div>

IV-D - Liste tout-en-un | list-style

list-style : permet de définir les valeurs de list-style-type, list-style-position et list-style-image en une seule fois. Vous n'êtes pas obligé de mettre toutes les valeurs et l'ordre n'a pas d'importance.

Syntaxe : [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

list-style: inside square;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.list-style {
list-style: inside square;
}
</style>
<div>
<ul class="list-style">
<li>article 1</li>
<li>article 2</li>
<li>article 3</li>
</ul>
</div>

V - Propriétés de mise en forme des tableaux

V-A - Type de bordure | border-collapse

border-collapse : permet de définir l'affichage des bordures des cellules d'un tableau.

Syntaxe : collapse | separate | inherit

Compatibilité : IE complète 8 - partielle 5 à 7, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Version CSS : 2.1

- collapse : les bordures du tableau et des cellules sont unifiées ;

- separate : les bordures du tableau et des cellules sont distinctes (par défaut) ;

- inherit : la valeur est reprise du parent. Non supportée par Internet Explorer (IE 9 compris).

border-collapse: collapse;
border-collapse: separate;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.border1 {
border-collapse: collapse;
margin-bottom: 20px;
}

.border2 {
border-collapse: separate;
}
</style>
<div>
<table class="border1">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>

<table class="border2">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
</div>

V-B - Cellules vides | empty-cells

empty-cells : permet d'afficher ou masquer les cellules vides. Ne fonctionne que si les bordures des cellules sont distinctes.

Syntaxe : hide | show | inherit

Compatibilité : IE complète 8 (si un doctype est déclaré) - partielle 7, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Version CSS : 2.1

- hide : les bordures des cellules vides sont masquées (par défaut) ;

- show : les bordures des cellules vides sont affichées.

empty-cells: hide;
empty-cells: show;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.empty1 {
empty-cells: hide;
border-collapse: separate;
margin-bottom: 20px;
}

.empty2 {
empty-cells: show;
border-collapse: separate;
}
</style>
<div>
<table class="empty1">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td></td>
</tr>
</table>

<table class="empty2">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td></td>
</tr>
</table>
</div>

V-C - Position du titre | caption-side

caption-side : permet de définir la position du titre pour le tableau.

Syntaxe : top | bottom | inherit

Compatibilité : IE 8+ (si un doctype est déclaré), FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Version CSS : 2.1

- top : le titre sera en haut du tableau (par défaut) ;

- bottom : le titre sera en bas du tableau.

caption-side: top;
caption-side: bottom;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.caption1 {
caption-side: top;
margin-bottom: 20px;
}

.caption2 {
caption-side: bottom;
}
</style>
<div>
<table class="caption1" style="border: 1px solid black;">
<caption>Titre du tableau</caption>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>

<table class="caption2" style="border: 1px solid black;">
<caption>Titre du tableau</caption>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
</div>

V-D - Affichage des cellules | table-layout

table-layout : permet de définir la façon dont les cellules d'un tableau se comportent.

Syntaxe : inherit | auto | fixed

Compatibilité : IE 5+, FF 1.0+, Chrome, Safari 1.0+, Opera 7+

Explication.
inherit/auto : la largeur dépend du contenu et de l'algorithme utilisé par le navigateur.
fixed : la largeur est fixe et dépend soit de la largeur de la première ligne si aucune dimensions n'est spécifiée, soit des dimensions spécifiées. À noter que si le contenu des lignes est supérieur en terme d'espace, les cellules adoptent un overflow automatiquement.

Version CSS : 2.1

Exemple :

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.table-layout1 {
border-collapse: collapse;
margin-bottom: 20px;
table-layout: fixed;
width: 200px;
}
.table-layout2 {
border-collapse: collapse;
margin-bottom: 20px;
table-layout: auto;
width: 200px;
}

.table-layout2 td {
white-space: nowrap;
}
</style>
<table class="table-layout1">
<tr>
<td>Cellule 1</td>
<td>Lorem ipsum dolore sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
<table class="table-layout2">
<tr>
<td>Lorem ipsum dolore sit amet, consectetur adipiscing elit</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Lorem ipsum dolore sit amet, consectetur adipiscing elit Lorem ipsum dolore sit amet, consectetur adipiscing elit</td>
<td>Cellule 4</td>
</tr>
</table>

V-E - Espacement des cellules | border-spacing

border-spacing : permet de définir l'espacement enter les cellules. Ne fonctionne que si les cellules sont séparées (border-collapse: separate). Cette propriété est équivalente à l'attribut de présentation cellspacing en HTML.

Syntaxe : inherit | <longueur> | <longueur> <longueur>

Compatibilité : IE 7+, FF 1.0+, Chrome, Safari 1.0+, Opera 6+

Note : indiquez de une à deux valeurs à la suite. Selon le nombre de valeurs, la signification change :
une valeur : espacement horizontaux et verticaux ;
deux valeurs : la première longueur indique l'espacement horizontal (espace entre deux cellules de colonnes adjacentes), la seconde longueur indique l'espacement vertical (espace entre deux cellules d'une même colonne).

Version CSS : 2.1

Exemple :

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.border-spacing1 {
border-collapse: separate;
margin-bottom: 20px;
width: 200px;
border-spacing: 10px;
}
.border-spacing2 {
border-collapse: separate;
margin-bottom: 20px;
width: 200px;
border-spacing: 10px 20px;
}

.border-spacing2 td {
white-space: nowrap;
}
</style>
<table class="border-spacing1">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
<table class="border-spacing2">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>

VI - Propriétés d'affichage et de positionnement

VI-A - Affichage

VI-A-1 - Type d'élément | display

display : définit comment doit être affiché un élément HTML.

Syntaxe : inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 7+

Notes : la valeur inline-block n'est supportée par IE 6 que pour les éléments initialement inline ; les valeurs inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row, table-row-group et inherit ne sont pas supportées par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte ces valeurs.

Version CSS : 1

On ne va reprendre ici que ceux étant les plus utilisés :

- none : l'élément ne sera pas affiché ;

- block : l'élément devient de type "bloc" (comme <div>). Un élément de type bloc ajoute un espace avant et après le bloc, ainsi qu'un saut de ligne ;

- inline : l'élément devient de type "inline" (en ligne, comme <span>). Valeur par défaut. Il n'y a pas d'espace avant ni après et n'ajoute pas de saut de ligne ;

- inline-block : l'élément est affiché comme un "inline" mais peut être redimensionné comme un bloc ;

- list-item : l'élément devient de type "élément de liste à puce" (comme <li>) ;

- table : l'élément est affiché comme une table ;

- table-caption : l'élément est affiché comme le titre d'un tableau ;

- table-cell : l'élément est affiché comme une cellule de tableau ;

- table-column : l'élément est affiché comme une colonne de tableau ;

- table-column-group : l'élément est affiché comme un groupe de colonnes (<colgroup>) ;

- table-header-group : l'élément est affiché comme l'en-tête d'un tableau ;

- table-footer-group : l'élément est affiché comme le pied de page d'un tableau ;

- table-row : l'élément est affiché comme une ligne de tableau ;

- table-row-group : l'élément est affiché comme un groupe de lignes.

display: none;
display: block;
display: inline;
display: inline-block;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.display1 {
display: none;
background-color: red;
}

.display2 {
display: block;
background-color: red;
}

.display3 {
display: inline;
background-color: red;
}

.display4 {
display: inline-block;
background-color: red;
}
</style>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet,
<span class="display1">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet,
<span class="display2">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet,
<span class="display3">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet,
<span class="display4">consectetur</span> adipisicing elit</div>

VI-A-2 - Affichage | visibility

visibility : permet d'afficher ou de masquer un élément.

Syntaxe : visible | hidden | collapse | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : les valeurs inherit et collapse ne sont pas supportées par IE 8 et précédents.

Version CSS : 2.1

Contrairement à display: none;, l'élément masqué occupe toujours l'espace dans la page.

- visible : l'élément est affiché ;

- hidden : l'élément est masqué mais conserve son espace dans la page ;

- collapse : cache une ligne ou une colonne d'un tableau.

visibility: visible;
visibility: hidden;
visibility: collapse;
display: none;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.visible1 {
visibility: visible;
}

.visible2 {
visibility: hidden;
}

.visible3 {
visibility: collapse;
}

.display {
display: none;
}
</style>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
<div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<div class="visible1">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<p>Ici la phrase est affichée.</p>
</div>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
<div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<div class="visible2">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<p>Ici la phrase sera masquée mais l'espace est conservé.</p>
</div>
<div style="margin-bottom: 10px; background-color: #93caff; padding: 10px; width: 60%;">
<table>
<tr id="visible3" class="visible3">
<td>lorem ipsum dolore sit amet, consectetur adipisicing elit.</td>
</tr>
<tr>
<td>lorem ipsum dolore sit amet, consectetur adipisicing elit.</td>
</tr>
<tr>
<td><button>Cliquez ici</button></td>
</tr>
</table>
<p>Ici c'est une ligne d'un tableau que l'on masque</p>
</div>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
<div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<div class="display">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<p>Ici la phrase est masquée et l'espace supprimé.</p>
</div>

VI-A-3 - Afficher seulement une partie | clip

clip : permet de spécifier une zone visible d'un élément.

Syntaxe : <shape> | auto | inherit

Compatibilité : IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquer quatre valeurs à la suite :

clip: rect(0px, 50px, 50px, 0px);
clip: rect(10px, 90px, 60px, 10px);

Cela permet de n'afficher qu'une partie d'un élément. rect() permet d'indiquer les coordonnées du rectangle qui sera affiché.
Les valeurs 1 à 4 correspondent respectivement aux coins haut, droite, bas et gauche du rectangle.

Attention, clip ne s'applique qu'aux éléments dont la position est absolue.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.clip1 {
position: absolute;
clip: rect(0px 50px 50px 0px);
width: 150px;
border: 2px solid #696969;
background-color: #93caff;
}

.clip2 {
position: absolute;
clip: rect(10px, 90px, 60px, 10px);
width: 150px;
border: 2px solid #696969;
background-color: #93caff;
left: 150px;
}
</style>
<div style="position: relative; height: 110px;">
<div class="clip1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</div>
<div class="clip2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</div>
</div>

VI-A-4 - Limiter les dimensions | overflow

overflow : permet de déterminer comment sera affiché le contenu d'un élément quand il dépasse les limites de son conteneur. C'est utilisé, entre autres, pour afficher des barres de défilement.

Syntaxe : visible | hidden | scroll | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 7+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

- visible : tout l'élément sera affiché (par défaut) ;

- hidden : l'élément sera masqué s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte masquée ;

- scroll : tout comme pour hidden, l'élément sera coupé s'il dépasse les limites. Cette fois le navigateur ajoutera des barres de défilement pour qu'on puisse voir la suite du texte. Ces barres seront obligatoirement affichées, même si celles-ci ne sont pas nécessaires ;

- auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas.

Cette propriété peut être étendue par overflow-x et overflow-y.

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.myDiv {
width: 300px;
height: 300px;
background-color: #93caff;
border: 2px solid #696969;
margin-bottom: 100px;
}
</style>
<button onclick="overflow('overflow: visible;');">visible</button>
<button onclick="overflow('overflow: hidden;');">hidden</button>
<button onclick="overflow('overflow: scroll;');">scroll</button>
<button onclick="overflow('overflow: auto;');">auto</button>
<div class="myDiv" style="overflow: visible;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies est in dui aliquet vel dictum tellus sagittis.
Etiam fringilla laoreet tortor, ut dapibus ligula pharetra eget. Pellentesque faucibus
eleifend faucibus. Nam sapien lacus, congue at mattis mattis, blandit ac leo.</p>
<p>Vestibulum at elit cursus urna lacinia dapibus vel quis magna. Nullam nibh elit, congue eget imperdiet id, bibendum in risus.
Suspendisse potenti. Donec nec orci ut ante luctus pharetra. Proin tristique, nibh at
porttitor tristique, enim ante aliquam justo, nec feugiat leo dolor quis dui.</p>
<p>Proin quis enim neque, ut ultricies sapien. Cras risus eros, placerat eget pharetra ut, molestie sit amet metus. Ut tortor
purus,     molestie eget dictum eget, vestibulum sed nisi. Quisque posuere feugiat arcu
at mattis. Nunc vehicula dui tortor, ut convallis odio.</p>
</div>

VI-B - Positionnement

VI-B-1 - Flottant | float

float : permet de définir le flottement d'une boîte à gauche, à droite ou pas du tout.

Syntaxe : none | left | right | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

- left : l'élément flotte à gauche ;

- right : l'élément flotte à droite ;

- none : pas de flottement (par défaut).

float: none;
float: left;
float: right;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.float1 {
width: 500px;
height: 204px;
border: 2px solid #696969;
background-color: #93caff;
}

.float2 {
width: 100px;
height: 100px;
float: none;
border: 1px solid black;
background-color: white;
}

.float3 {
width: 100px;
height: 100px;
float: left;
border: 1px solid black;
background-color: yellow;
}

.float4 {
width: 100px;
height: 100px;
float: right;
border: 1px solid black;
background-color: red;
}
</style>
<div class="float1">
<div class="float2">NONE</div>
<div class="float3">LEFT</div>
<div class="float4">RIGHT</div>
</div>

VI-B-2 - Stopper un flottant | clear

clear : permet de définir si un élément doit être adjacent à un autre ou placé en dessous.

Syntaxe : none | left | right | both | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

- left : l'élément est déplacé vers le bas pour se libérer des éléments flottants de gauche ;

- right : l'élément est déplacé vers le bas pour se libérer des éléments flottants de droite ;

- both : l'élément est déplacé vers le bas pour se libérer des éléments flottants de gauche comme de droite ;

- none : l'élément ne se déplacera pas (par défaut).

clear: left;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

<style type="text/css">
.div1 {
float: left;
border: 1px solid #696969;
background-color: white;
height: 50px;
}

.div2 {
float: left;
border: 1px solid #696969;
background-color: yellow;
height: 50px;
margin-left: 20px;
}

.clear1 {
clear: left;
}
</style>
<div style="border: 2px solid #696969; background-color: #93caff; width: 60%; padding: 10px;">
<div class="div1">Flottant à gauche</div>
<div class="div2">Flottant à gauche avec marge de 20 pixels</div>
<div class="clear1">Flottant nettoyé</div>
</div>

VI-B-3 - Type de positionnement | position

position : permet de définir le mode de positionnement d'un élément.

Syntaxe : absolute | fixed | relative | static | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

- absolute : retire complètement l'élément du flux et le positionne par rapport à son plus proche ancêtre lui-même positionné (ou par défaut la fenêtre du navigateur) en fonction des propriétés top, right, bottom et left ;

- fixed : position fixe. L'élément reste à sa position dans la fenêtre ;

- relative : déplace l'élément par rapport à sa position dans le flux. Il n'est pas retiré du flux ;

- static : positionnement normal (par défaut).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.div_position {
border: 2px solid #696969;
background-color: #93caff;
width: 60%;
height: 400px;
}

.position {
width: 100px;
height: 100px;
background-color: red;
left: 10px;
top: 100px;
}
</style>
<button onclick="position('position: static;');">static</button>
<button onclick="position('position: fixed;');">fixed</button>
<button onclick="position('position: relative;');">relative</button>
<button onclick="position('position: absolute;');">absolute (sera placé tout en haut de la page)</button>
<div class="div_position">
<div class="position" style="position: static;"></div>
</div>

VI-B-4 - Position par rapport aux coins | top bottom left right

top - bottom - left - right : permettent de définir la position d'un élément. Valeurs en px, %, em... À utiliser pour un positionnement absolu, fixe ou relatif. Si la propriété position est à la valeur static, ces propriétés n'ont pas d'effet.

Syntaxe : <length> | <percentage> | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

top: 30px;
left: 50px;

bottom: 10px;
right: 30px;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.div_pos {
position: relative;
width: 60%;
height: 400px;
border: 2px solid #696969;
background-color: #93caff;
}

.pos1 {
position: absolute;
width: 100px;
height: 100px;
top: 30px;
left: 50px;
border: 1px solid black;
background-color: white;
}

.pos2 {
position: absolute;
width: 100px;
height: 100px;
bottom: 10px;
right: 30px;
border: 1px solid black;
background-color: yellow;
}
</style>
<div class="div_pos">
<div class="pos1"></div>
<div class="pos2"></div>
</div>

VI-B-5 - Ordre d'affichage | z-index

z-index : permet, pour les éléments positionnés, de définir quel élément sera placé au-dessus de l'autre. Plus le nombre sera grand, plus il sera au premier plan.

Syntaxe : auto | <integer> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Complément d'information : Comprendre z-index.

Version CSS : 2.1

z-index: 1;
z-index: 2;
z-index: 5;

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir la source

<style type="text/css">
.div_index {
width: 400px;
height: 400px;
border: 2px solid #696969;
background-color: #93caff;
position: relative;
}

.index1 {
width: 150px;
height: 150px;
background-color: yellow;
z-index: 1;
top: 50px;
left: 50px;
position: absolute;
}

.index2 {
width: 150px;
height: 150px;
background-color: red;
z-index: 2;
top: 80px;
left: 80px;
position: absolute;
}

.index3 {
width: 150px;
height: 150px;
background-color: blue;
z-index: 2;
top: 120px;
left: 120px;
position: absolute;
}
</style>
<div class="div_index">
<div class="index1"></div>
<div class="index2"></div>
<div class="index3"></div>
</div>

VII - Propriétés de transformation et d'animation (CSS 3)

Les propriétés présentées dans cette partie peuvent nécessiter l'utilisation des préfixes vendeurs.

VII-A - Propriétés de transformation

Les transformations permettent de modifier le rendu visuel d'un ou plusieurs éléments. Ces transformations peuvent se faire dans le plan de la page (transformations 2D) ou dans un espace 3D.
Les transformations 2D sont correctement supportées par les navigateurs récents, en revanche, les transformations 3D, apparues plus récemment, le sont un peu moins.
Complément d'information : Les transformations 2D en CSS3.

VII-A-1 - Origine de la transformation | transform-origin

transform-origin : permet de définir quel sera le point d'origine de la transformation.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : [<pourcentage> | <longueur> | left | center | right | top | bottom] | [[<pourcentage> | <longueur> | left | center | right ] && [ <pourcentage> | <longueur> | top | center | bottom]]

Compatibilité (base) : IE 9+, FF 3.5+, Chrome, Safari 3.1+, Opera 10.5+
Compatibilité (3D ; trois valeurs) : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Version CSS : 3

Notes :
Trois valeurs sont possibles correspondant au déplacement sur les axes X, Y et Z (valeurs par défaut 50% 50% 0). Si une seule valeur est passée, l'origine est uniquement déplacée sur l'axe X (à moins que cette valeur soit un mot-clé spécifique à l'axe Y :top ou bottom, dans ce cas, seul l'axe Y est impacté), les autres axes prennent leur valeur par défaut.
Si deux valeurs sont passées, elles correspondent aux axes X et Y, l'axe Z prend sa valeur par défaut.
Seules des longueurs sont acceptées pour l'axe Z. L'origine peut se trouver en dehors de l'élément transformé (voir les démos de rotate() et scale()).

Démo de mise en œuvre de cette propriété.

Exemples :

transform-origin: 25%;
transform-origin: top -50px;
transform-origin: 2em bottom 10px;

VII-A-2 - Perspective 3D | perspective

perspective | transform: perspective() : permettent de déterminer le point de fuite des transformations 3D et d'appliquer des effets de perspective.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe (perspective) : none | <longueur>
Syntaxe (transform) : perspective(none | <longueur>)

Il existe deux façons de déclarer une perspective (voir exemples). Soit avec la propriété perspective, soit sous forme de fonction de transformation liée à la propriété transform.

La première permet de définir une perspective pour un ensemble d'éléments à partir d'un élément parent commun, la seconde pour une perspective liée à un seul élément en la combinant avec d'autres fonctions de transformation.

Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Version CSS : 3

Explications.
La valeur de la perspective permet de déterminer la distance de l'utilisateur au plan z=0. Si elle vaut none, 0 ou une valeur non autorisée, aucune perspective n'est appliquée.
Les dimensions affichées de chaque élément vont dépendre de leur positionnement selon l'axe z, un élément dont la position sur l'axe z est positive sera vu plus grand et plus petit pour une position négative.
Un élément se trouvant sur un plan de coordonnée z supérieure ou égale à la valeur de la perspective sera considéré comme « derrière » l'utilisateur et ne sera pas affiché.

Sur Firefox, un élément situé sur l'axe z à la même valeur que la perspective n'est pas affiché, pour les valeurs supérieures, il est affiché retourné.

Exemples :

perspective: none;
perspective: 25px;
perspective: 2em;

Exemples :

transform: perspective(none);
transform: perspective(25px);
transform: perspective(2em);

Dans la démo suivante, entrez les coefficients, puis cliquez sur « Appliquer » (cliquez sur la boîte jaune pour annuler).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Extrait du code de l'exemple

#element{ /* L'élément recevant la transformation */
transform: perspective(xpx) translateZ(zpx); /* x : valeur du champ Perspective ; z : valeurs du champ Décalage Z */
}

VII-A-3 - Origine de la perspective | perspective-origin

transform-origin : permet de définir quel sera le point d'origine de la perspective.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : [<pourcentage> | <longueur> | left | center | right | top | bottom] | [[<pourcentage> | <longueur> | left | center | right ] && [ <pourcentage> | <longueur> | top | center | bottom]]

Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Version CSS : 3

Note : par défaut, l'origine de la perspective se trouve au centre de l'élément (50% 50%).

Exemples :

perspective-origin: 25%;
perspective-origin: top -50px;

Dans la démo suivante, entrez les coefficients, puis cliquez sur « Appliquer » (cliquez sur la boîte jaune pour annuler).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Extrait du code de l'exemple

#outerElement{ /* Bordure pointillée */
perspective: Zpx; /* Z : valeur de Perspective */
perspective-origin: Xpx Ypx; /* X : valeur de Origine X ; Y : valeur de Origine Y */
}
#innerElement{ /* Cadre doré */
transform: translateZ(50px);
}

VII-A-4 - Fonctions de transformation | transform

transform : permet d'appliquer une fonction de transformation sur un élément.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : none | <transform-fonction>+

Compatibilité (fonctions de base) : IE 9+, FF 3.5+, Chrome, Safari 3.1+, Opera 10.5+
Compatibilité (fonctions 3D) : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Version CSS : 3

Complément d'information : Les transformations en CSS 3.

Il est possible de définir plusieurs transformations différentes sur un même élément, par exemple :

selecteur{
transform: translate(100px, 50px) rotate(50deg);
}

Si la valeur de transform est différente de none, alors un nouveau contexte d'empilement est créé, ce qui influe sur le comportement de z-index.

Translation | translate()

translate() | translate3d() : permettent de déplacer l'élément sur les différents axes.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : translate(<longueur-x>[, <longueur-y>])
Syntaxe : translate3d(<longueur-x>, <longueur-y>, <longueur-z>)

Notes.
longueur-x, longueur-y et le cas échéant longueur-z sont des longueurs, les pourcentages ne sont pas autorisés.
Pour translate(), une seule valeur est autorisée, dans ce cas, elle est appliquée aux deux dimensions.
Il est possible d'effectuer une translation sur un seul axe avec les dérivés translateX(), translateY() et translateZ().

Exemples :

-moz-transform: translate(100px, -50px);
-webkit-transform: translate(100px, -50px);
-ms-transform: translate(100px, -50px);
-o-transform: translate(100px, -50px);
transform: translate(100px, -50px);

Dans la démo suivante, entrez les valeurs numériques pour les décalages en X et Y dans les champs suivants et cliquez sur « Déplacer » (cliquez sur la boîte jaune pour annuler le déplacement).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Extrait du code de l'exemple

#element{ /* L'élément recevant la transformation */
transform: translate(xpx, ypx); /* x : valeur du champ Décalage X ; y : valeurs du champ Décalage Y */
}

Rotation | rotate()

rotate() | rotate3d() : permettent de faire pivoter un élément suivant le point d'origine.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : rotate(<angle>)
Syntaxe : rotate3d(<longueur-x>, <longueur-y>, <longueur-z>, <angle>)

Notes.
Pour rotate3d(), longueur-x, longueur-y et longueur-z sont des longueurs, les pourcentages ne sont pas autorisés.
Il est possible d'effectuer une rotation sur un seul axe avec les dérivés rotateX(), rotateY() et rotateZ().

- deg (degrés), un cercle complet mesure 360 degrés (360deg) ;

- grad (grades), un cercle complet mesure 400 grades (400grad) ;

- rad (radians), un cercle complet mesure 2π (≈6.2832rad) ;

- turn (tour), un cercle complet mesure 1 tour (1turn).

Quatre unités d'angle sont autorisées :

Exemples :

-moz-transform: rotate(260deg);
-webkit-transform: rotate(300grad);
-ms-transform: rotate(1.2rad);
-o-transform: rotate(0.25turn);
transform: rotate(260deg);

Dans la démo suivante, entrez l'angle de rotation, l'unité, puis cliquez sur « Rotation » (si rien ne se passe, c'est que l'unité n'est pas reconnue, cliquez sur la boîte jaune pour annuler la rotation).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Extrait du code de l'exemple

#element{ /* L'élément recevant la transformation */
transform-origin: valeur; /* Valeur du champ Origine */
transform: rotate(x<angle>); /* x : valeur du champ Angle ; <angle> : valeurs du champ Unité */
}

Redimensionnement | scale()

scale() | scale3d() : permettent de redimensionner un élément selon les différents axes.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : scale(<nombre-x>[, <nombre-y>])
Syntaxe : scale3d(<nombre-x>, <nombre-y>, <nombre-z>)

Notes.
nombre-x, nombre-y et le cas échéant nombre-z correspondent aux facteurs de redimensionnement, les valeurs négatives sont autorisées, dans ce cas, l'élément semblera retourné. Les valeurs supérieures à 1 agrandiront l'élément, les valeurs inférieures le rétréciront.
Pour scale(), une seule valeur est autorisée, dans ce cas, elle est appliquée aux deux dimensions.
Il est possible d'effectuer un redimensionnement sur un seul axe avec les dérivés scaleX(), scaleY() et scaleZ().

Exemples :

-moz-transform: scale(1.5);
-webkit-transform: scale(0.5, 0.8);
-ms-transform: scale(1.5, 0.5);
-o-transform: scale(1);
transform: scale(2,1.5);

Dans la démo suivante, entrez les coefficients, puis cliquez sur « Redimensionner » (cliquez sur la boîte jaune pour annuler la rotation).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Extrait du code de l'exemple

#element{ /* L'élément recevant la transformation */
transform-origin: valeur; /* Valeur du champ Origine */
transform: scale(x, y); /* x : valeur du champ Axe X ; y : valeurs du champ Axe Y */
}

Distorsion | skew()

skew() | skewX() | skewY() : permettent la distorsion des éléments.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : skew(<angle-x>[, <angle-y>])
Syntaxe : skewX(<angle-x>) | skewY(<angle-y>)

Notes.
angle-x et angle-y sont des angles qui déterminent l'angle de la distorsion à appliquer sur chaque axe, les valeurs négatives sont autorisées.
Pour skew(), une seule valeur est autorisée, dans ce cas, l'angle sur l'axe y vaut 0.
Le comportement de skew() avec deux valeurs n'est pas le même que si l'on applique successivement skewX() et skewY() avec des valeurs identiques.

Exemples :

-moz-transform: skew(260deg);
-webkit-transform: skew(-300grad, 45deg);
-ms-transform: skewX(1.2rad);
-o-transform: skewY(0.25turn);
transform: skew(260deg);

Dans la démo suivante, entrez les angles, puis cliquez sur « Déformer » (cliquez sur la boîte jaune pour annuler la déformation).

Attention : certaines valeurs d'angles proches provoquent une déformation aux dimensions excessives de l'élément, d'autres le rendent invisible.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Extrait du code de l'exemple

#element{ /* L'élément recevant la transformation */
transform: skew(adeg, adeg); /* Si skew() sélectionné ; a : valeur du champ Angle */
transform: skewX(adeg); /* Si skewX() sélectionné ; a : valeur du champ Angle */
transform: skewY(adeg); /* Si skewY() sélectionné ; a : valeur du champ Angle */
}

Transformation matricielle | matrix()

matrix() | matrix3d() : permettent de transformer un élément selon une matrice de transformation.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : matrix(<nombre-a>, <nombre-b>, <nombre-c>, <nombre-d>, <longueur-x>, <longueur-y>)
Syntaxe : matrix3d(<matrice-4x4>)

Notes.
En réalité, toutes les fonctions de transformation utilisent matrix() (ou matrix3d()), les autres fonctions ne sont que des formes simplifiées.
Le fonctionnement de matrix() et matrix3d() ainsi que le détail des paramètres impliquent des notions complexes (notamment mathématiques) qui vont au-delà du cadre de ce glossaire, ces points ne seront donc pas détaillés.
Pour les versions préfixées de Firefox (-moz-transform), les longueurs doivent contenir l'unité.

Article détaillé sur les matrices de transformation : The CSS3 matrix() Transform for the Mathematically Challenged.

Exemples :

-moz-transform: matrix(1, 0, 0.6, 1, 250px, 25px);
-webkit-transform: matrix(1, 0, 0.6, 1,  250, 25);
-o-transform: matrix(1, 0, 0.6, 1,  250, 25);
-ms-transform: matrix(1, 0, 0.6, 1,  250, 25);
transform: matrix(1, 0, 0.6, 1,  250, 25);

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

VII-A-5 - Face arrière | backface-visibility

backface-visibility : permet d'indiquer la visibilité de la face arrière d'un élément.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : visible | hidden

Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Version CSS : 3

Notes.
La face arrière d'un élément est toujours transparente, la visibilité indique donc si l'on peut voir la face avant en miroir (visible) ou non (hidden).
Bien qu'il soit possible d'utiliser cette propriété pour des transformations 2D, elle est surtout utile pour les transformations 3D, permettant ainsi de visualiser ou non les éléments superposés.

Démo.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Extrait du code HTML de l'exemple

<div id="conteneur">
<div id="element">Texte</div>
<div id="under"></div>
</div>

Extrait du code CSS de l'exemple

#conteneur{ /* Le conteneur (bordure pointillée)
transform-style: preserve-3d; /* Permet l'empilement sur l'axe z des éléments */
}
#element{ /* L'élément recevant la transformation (fond doré) */
backface-visibility: visible|hidden; /* Case Fond arrière visible cochée|décochée */
transform: rotateY(180deg|0); /* Case Élément retourné cochée|décochée */
}
#under{ /* L'élément en dessous (fond image developpez.com) */
transform: translateZ(-10px); /* Permet de déplacer en arrière sur l'axe z */
}

VII-A-6 - Héritage 3D | transform-style

transform-style : permet d'indiquer si les éléments enfants héritent de l'espace 3D de leur parent ou en créent un nouveau à partir de celui-ci.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : flat | preserve-3d

Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Internet Explorer (y compris la version 11) ne reconnait que la valeur flat pour cette propriété.

Version CSS : 3

Explications.
Lorsque l'on crée un espace 3D, deux types de comportement peuvent être souhaités : soit chaque élément est indépendant des autres et peut être déplacé individuellement, soit certains éléments peuvent contenir des éléments enfants dépendants de celui-ci.
Par exemple, si l'on veut créer un dé, on créera six éléments (les faces) qui appartiendront à l'espace 3D puis on intégrera à chaque face un nombre d'images constituant les points du dé, ces images devront donc être liées à la face associée sans être intégrées à l'espace 3D.
La valeur flat indique que les éléments enfants appartiennent au plan de leur parent, la valeur preserve-3d qu'ils appartiennent à l'espace 3D.

Démo.
Dans cet exemple, l'image est enfant du cadre doré. On applique au cadre une rotation de 45° (rotateY(45deg)) et à l'image une translation de 50px (translateZ(50px)).
Si preserve-3d est cochée, l'image appartient à l'espace 3D et la transformation s'applique, si flat est cochée, l'image appartient au cadre et la translation ne s'applique plus (sauf si l'on définit une valeur de perspective pour le cadre).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Extrait du code de l'exemple

#conteneur{ /* Le conteneur (bordure pointillée)
perspective: 200px;
}
#element{ /* L'élément recevant la transformation (fond doré) */
transform-style: preserve-3d|flat; /* Case preserve-3d|flat cochée */
transform: rotateY(45deg);
}
#image{ /* L'élément image interne (image developpez.com) */
transform: translateZ(50px); /* Permet de déplacer en arrière sur l'axe z */
}

VII-A-7 - Exemple de transformation 3D

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir le code de l'exemple

<style>
#cube{
position: relative;
margin: 20px auto 100px;
width: 100px;
height: 100px;
-webkit-perspective: 300px;
-ms-perspective: 300px;
perspective: 300px;
-webkit-perspective-origin: -50% -50%;
-ms-perspective-origin: -50% -50%;
perspective-origin: -50% -50%;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.face{
position: absolute;
width: 100px;
height: 100px;
font-size: 75px;
line-height: 100px;
text-align: center;
}
#face1{
-webkit-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
background-color: rgba(200,0,0,0.6);
}
#face2{
-webkit-transform-origin: left 50%;
-webkit-transform: rotateY(270deg);
-ms-transform-origin: left 50%;
-ms-transform: rotateY(270deg);
transform-origin: left 50%;
transform: rotateY(270deg);
background-color: rgba(0,200,0,0.6);
}
#face3{
-webkit-transform-origin: 50% top;
-webkit-transform: rotateX(90deg);
-ms-transform-origin: 50% top;
-ms-transform: rotateX(90deg);
transform-origin: 50% top;
transform: rotateX(90deg);
background-color: rgba(0,0,200,0.6);
}
#face4{
-webkit-transform-origin: 50% bottom;
-webkit-transform: rotateX(90deg) translateY(100px);
-ms-transform-origin: 50% bottom;
-ms-transform: rotateX(90deg) translateY(100px);
transform-origin: 50% bottom;
transform: rotateX(90deg) translateY(100px);
background-color: rgba(200,200,0,0.6);
}
#face5{
-webkit-transform-origin: right 50%;
-webkit-transform: rotateY(90deg);
-ms-transform-origin: right 50%;
-ms-transform: rotateY(90deg);
transform-origin: right 50%;
transform: rotateY(90deg);
background-color: rgba(200,0,200,0.6);
}
#face6{
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
background-color: rgba(0,200,200,0.6);
}
</style>
<div id="cube">
<div class="face" id="face6">6</div>
<div class="face" id="face5">5</div>
<div class="face" id="face4">4</div>
<div class="face" id="face3">3</div>
<div class="face" id="face2">2</div>
<div class="face" id="face1">1</div>
</div>

Dans le code HTML, l'ordre des faces est inversé pour éviter que les navigateurs ne prenant pas en compte la valeur preserve-3d n'affichent les faces cachées au-dessus des faces visibles.

VII-B - Propriétés de transition

Il est de plus en plus fréquent qu'une page Web modifie l'apparence de certains éléments en fonction des interactions avec l'utilisateur, que ce soit en CSS (avec notamment la pseudoclasse :hover) ou en JavaScript.
Les transitions CSS permettent de fluidifier ces changements d'aspect visuel en animant les propriétés CSS impliquées d'un état à un autre.
Complément d'information : Les transitions en CSS3.

S'il est possible d'animer un grand nombre de propriétés CSS, certaines ne le permettent toutefois pas. Voir une liste des propriétés qui peuvent être animées.

Les principaux navigateurs ont intégré la version non préfixée des propriétés liées aux transitions depuis plusieurs versions. Quant à IE, si l'implémentation est récente (IE 10+), il n'y a pas eu de version préfixée de ces propriétés.

Il ne semble donc pas utile d'utiliser les versions préfixées si ce n'est pour les utilisateurs ne mettant pas à jour leur navigateur (ce qui est rare, car ceux-ci ont un système de mise à jour automatique activé par défaut).

VII-B-1 - Nom de propriété(s) | transition-property

transition-property : permet de définir quelle(s) propriété(s) sera (seront) animée(s).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : none | all | <propriete>[, <propriete>]*

Compatibilité : IE 10+, FF 4+, Chrome, Safari, Opera 11.6+

Version CSS : 3

Exemples :

transition-property: none;
transition-property: all;
transition-property: width, color, transform, -webkit-transform, -ms-transform, -o-transform;

VII-B-2 - Durée de transition | transition-duration

transition-duration : permet de définir la durée de la transition.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : inherit | <duree>[, <duree>]*

Compatibilité : IE 10+, FF 4+, Chrome 1, Safari 3, Opera 11.6+

Version CSS : 3

Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une durée de 0s indique qu'aucun effet ne sera appliqué.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que de durées, le navigateur revient au début de la liste pour compléter, s'il y a plus de durées, les dernières sont ignorées.

Exemples :

transition-duration: 2s;
transition-duration: 250ms;
transition-duration: 2s, 250ms, 120ms;
transition-duration: inherit;

VII-B-3 - Effet de transition | transition-timing-function

transition-timing-function : permet d'assouplir l'effet de transition selon une fonction dite d'easing.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : <effet>[, <effet>]*

Valeurs possibles : linear, ease (valeur par défaut), ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier(x1, y1, x2, y2), steps(nb_pas, start|end).

Compatibilité : IE 10+, FF 4+, Chrome, Safari, Opera 11.6+

Version CSS : 3

Complément d'information : Easing Functions - Guide de référence.

Notes.
Pour la fonction cubic-bezier(), x1, y1, x2 et y2 correspondent à des nombres (x1 et x2 doivent être compris entre 0 et 1) qui vont définir une courbe de Bézier.
Pour la fonction steps(), des états intermédiaires (le nombre de pas) seront affichés à intervalles de temps réguliers, start et end indiquent si le nouvel état doit être affiché au début ou à la fin de l'intervalle.
Il est possible d'indiquer plusieurs effets (séparés par des virgules), dans ce cas, ils correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que d'effets, le navigateur revient au début de la liste pour compléter, s'il y a plus d'effets, les derniers sont ignorés.

Exemples :

transition-timing-function: linear;
transition-timing-function: step(4, end);
transition-timing-function: cubic-bezier(0.25, -0.8, 0.75, 2);
transition-timing-function: ease-in, step-start, cubic-bezier(0.2, 1.75, 0.8, 0.75);

VII-B-4 - Délai de démarrage | transition-delay

transition-delay : permet d'indiquer un délai avant de démarrer une transition.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : initial | <duree>[, <duree>]*

Compatibilité : IE 10+, FF 4+, Chrome 1, Safari 3, Opera 11.6+

Version CSS : 3

Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une valeur de 0s ou initial indique que la transition sera appliquée immédiatement.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que de durées, le navigateur revient au début de la liste pour compléter, s'il y a plus de durées, les dernières sont ignorées.
Il est possible d'indiquer une valeur négative, dans ce cas, la transition débutera aussitôt, mais au point où elle aurait dû être si elle avait commencé au moment indiqué par le délai négatif.

Exemples :

transition-delay: 2s;
transition-delay: -250ms;
transition-delay: 2s, 250ms, 120ms;
transition-delay: initial;

VII-B-5 - La transition tout-en-un | transition

transition : regroupe toutes les propriétés de transition.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

Compatibilité : IE 10+, FF 4+, Chrome 1, Safari 3, Opera 11.6+

Version CSS : 3

Note : il est possible d'indiquer plusieurs transitions séparées par des virgules.

Exemples :

transition: all 2s;
transition: width 250ms, height 100ms 250ms;
transition: all 2s steps(5, end) 250ms, 120ms;

VII-B-6 - Exemple récapitulatif

L'exemple suivant vous montre la mise en œuvre de certaines fonctionnalités de transition.

Dans cet exemple, on affiche le dos doré d'une carte. Au survol du cadre pointillé, la carte se retourne et se déplace sur la droite en laissant apparaitre la figure.
Vous pouvez constater dans le code HTML qu'il s'agit en fait de deux éléments distincts animés de façon synchronisée : il n'est pas possible (du moins pas encore) de donner des styles à la face arrière d'un élément.
Une fois la carte retournée, un troisième élément, initialement transparent (opacity: 0) apparait pour afficher un message (voir le code de l'exemple).

Les navigateurs ne reconnaissant pas les transformations 3D ne verront pas le dos doré ni l'effet de retournement, mais juste un glissement de la carte vers la droite. Les autres animations seront visibles.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir le code de l'exemple

<style>
#transition{
position: relative;
margin: 20px auto;
width: 336px;
height: 250px;
border: 1px dotted;
-webkit-perspective-origin: 50% 50% 84px;
-webkit-perspective: 500px;
-ms-perspective-origin: 50% 50% 84px;
-ms-perspective: 500px;
perspective-origin: 50% 50% 84px;
perspective: 500px;
}
#transition div{
transition: all 1s;
position: absolute;
width: 168px;
height: 250px;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
#transition .dos{
border-radius: 20px;
background-color: gold;
left: 0;
}
#transition .carte{
background-image: url(carte.png);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
left: 0;
}
#transition .delayed{
transition: all 1s;
border-radius: 0;
background-color: #F5F2F0;
line-height: 250px;
text-align: center;
font-weight: bold;
opacity: 0;
overflow: hidden;
}
#transition:hover .dos{
transition: all 1s;
left: 168px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#transition:hover .carte{
transition: all 1s;
left: 168px;
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
#transition:hover .delayed{
transition: opacity 1s 1s, border-radius 500ms 2s, box-shadow 500ms cubic-bezier(0.75, 0.25, 0.75, 0.5) 1.5s, text-shadow 500ms linear 2s, color 500ms linear 2s;
opacity: 1;
border-radius: 50%;
box-shadow: inset 0 0 5px 2px black;
text-shadow: 1px 1px 2px black, 0 0 1em gold, 0 0 0.2em gold;
color: white;
}
</style>
<div id="transition">
<div class="delayed">Voici ma carte !</div>
<div class="dos"></div>
<div class="carte"></div>
</div>

VII-C - Propriétés d'animation

Les animations CSS permettent de modifier certaines propriétés CSS d'un ou plusieurs éléments dans le temps. Elles se composent de deux éléments : une description de l'animation sous forme d'expression CSS (at-rule) et des propriétés applicables à un (ou plusieurs) élément sur lequel doit s'effectuer l'animation.
Si les propriétés sont appliquées à des sélecteurs (donc à des éléments), la description est, elle, indépendante dans le code CSS.

Il existe plusieurs différences notables entre une transition et une animation CSS.

Une transition est déclenchée lorsqu'une propriété CSS est modifiée alors qu'une animation va modifier elle-même une propriété selon des règles déterminées.

En dehors des fonctione transition, une transition n'est pas paramétrable alors qu'une animation permet de définir des étapes-clés.

Une transition nécessite une action (soit de la part de l'utilisateur, soit avec un script JavaScript) pour être déclenchée, ce qui n'est pas forcément le cas d'une animation.

Une transition ne s'exécute qu'une fois par changement d'état alors qu'une animation peut être répétée.

VII-C-1 - Étapes de l'animation | @keyframes

@keyframes : indique les différentes étapes de l'animation et la valeur de chaque propriété pour cette étape.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe :

@keyframes <identifiant>{
[[ from | to | <pourcentage> ] [, from | to | <pourcentage> ]* bloc ]*
}

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Explications.

La syntaxe de l'expression CSS @keyframes est un peu particulière.
On commence avec le mot-clé @keyframes (éventuellement préfixé, voir les exemples) suivi du nom souhaité pour l'animation (<identifiant>), il servira à appeler cette animation pour un sélecteur. On ouvre ensuite un bloc (à l'aide d'accolades {}) pour définir les différentes étapes de l'animation.
Chaque étape débute par une valeur (from, to ou pourcentage) suivie d'un nouveau bloc.
Ces blocs contiendront les différentes propriétés à animer et leur valeur à cette étape de l'animation.
Les déclarations @keyframes ne sont pas liées à un sélecteur et se trouvent donc en dehors des déclarations de styles liées à ceux-ci.

Notes.

Pour être valide, l'animation doit au moins comprendre les étapes from (ou 0%, la valeur 0 n'est pas valide) et to ( ou 100%), si l'une (ou les deux) manque, le navigateur devra la créer en utilisant les valeurs calculées des propriétés devant être animées.
Les propriétés non animables ou les étapes hors de la plage [0% 100%] sont ignorées.
Si une propriété n'est pas déclarée à une étape (ou si sa déclaration n'est pas valide), l'animation pour cette propriété se fera comme si cette étape n'existait pas.
Si une animation est déclarée plusieurs fois, seule la dernière déclaration est prise en compte, il n'y a pas de notion de cascade pour @keyframes.
Si une étape est déclarée plusieurs fois, seule la dernière déclaration est utilisée, cependant, certains navigateurs ont mis en place un système de cascade non prévu par la spécification.
Il n'y a pas d'obligation à déclarer les étapes dans l'ordre chronologique.
Il est possible de grouper plusieurs étapes dont les valeurs seraient identiques en les séparant par des virgules.

Exemples :

@keyframes clignote{
from, 100%{
color: red;
}
50%{
color: blue;
}
}
@-moz-keyframes bouge{
from{
left: 0%;
}
75%{
left: 90%;
}
50%{
left: 80%;
}
to{
left: 100%;
}
}
@-webkit-keyframes bordure{
50%{
border-width: 10px;
}
}
@keyframes erreur{
from{
border-radius: 0;
}
100%{
border-radius: 25px;
}
to{
/* Cette déclaration vide est supposée écraser la précédente
qui correspond à la même étape : aucune animation ne sera visible.
Firefox contourne la spécification et
utilise la cascade, rendant l'animation visible. */
}
}

VII-C-2 - Nom de l'animation | animation-name

animation-name : indique le nom de l'animation à utiliser.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : none | <nom>#

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Note : un nom valide doit commencer par une lettre ou un tiret (mais pas deux) suivi d'une lettre puis les caractères de la classe [-_0-9a-zA-Z].

Exemples :

animation-name: foo;
animation-name: foo1_bar;
animation-name: -Foo-Bar2;
animation-name: foo, bar;

VII-C-3 - Durée de l'animation | animation-duration

animation-duration : permet de définir la durée de l'animation.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : <duree>

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une durée de 0s indique qu'aucun effet ne sera appliqué.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans animation-name.

Exemples :

animation-duration: 2s;
animation-duration: 250ms;
animation-duration: 2s, 250ms, 120ms;

VII-C-4 - Effet de l'animation | animation-timing-function

animation-timing-function : permet d'assouplir l'animation selon une fonction dite d'easing.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : <effet>[, <effet>]*

Valeurs possibles : linear, ease (valeur par défaut), ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier(x1, y1, x2, y2), steps(nb_pas, start|end).

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Complément d'information : Easing Functions - Guide de référence.

Notes.
Pour la fonction cubic-bezier(), x1, y1, x2 et y2 correspondent à des nombres (x1 et x2 doivent être compris entre 0 et 1) qui vont définir une courbe de Bézier.
Pour la fonction steps(), des états intermédiaires (le nombre de pas) seront affichés à intervalles de temps réguliers, start et end indiquent si le nouvel état doit être affiché au début ou à la fin de l'intervalle.
Il est possible d'indiquer plusieurs effets (séparés par des virgules), dans ce cas, ils correspondront aux différentes animations listées dans animation-name dans le même ordre ; s'il y a plus de propriétés que d'effets, le navigateur revient au début de la liste pour compléter, s'il y a plus d'effets, les derniers sont ignorés.

La fonction définie s'applique à chaque intervalle de l'animation et non à l'ensemble de l'animation.

Toutefois, il est possible d'indiquer une valeur de animation-timing-function dans un intervalle de @keyframes, dans ce cas, c'est cette fonction qui sera utilisée pour cet intervalle.

Exemples :

animation-timing-function: linear;
animation-timing-function: step(4, end);
animation-timing-function: cubic-bezier(0.25, -0.8, 0.75, 2);
animation-timing-function: ease-in, step-start, cubic-bezier(0.2, 1.75, 0.8, 0.75);
@keyframes{
...
50%{
...
animation-timing-function: linear;
}
...
}

VII-C-5 - Délai de l'animation | animation-delay

animation-delay : permet d'indiquer un délai avant de démarrer une animation.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : initial | <duree>

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une valeur de 0s ou initial indique que la transition sera appliquée immédiatement.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que de durées, le navigateur revient au début de la liste pour compléter, s'il y a plus de durées, les dernières sont ignorées.
Il est possible d'indiquer une valeur négative, dans ce cas, l'animation débutera aussitôt, mais au point où elle aurait dû être si elle avait commencé au moment indiqué par le délai négatif.

Exemples :

animation-delay: 2s;
animation-delay: -250ms;
animation-delay: 2s, 250ms, 120ms;
animation-delay: initial;

VII-C-6 - Itérations de l'animation | animation-iteration-count

animation-iteration-count : détermine le nombre de répétitions de l'animation.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : infinite | <nombre>

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Notes.
La valeur infinite indique que l'animation sera répétée indéfiniment.
Les valeurs négatives ne sont pas valides.
Il est possible d'indiquer un nombre non entier. Dans ce cas, la dernière répétition sera incomplète en proportion de la partie décimale (par exemple, la valeur 0.5 montrera la moitié de l'animation.

Exemples :

animation-iteration-count: infinite;
animation-iteration-count: 5;
animation-iteration-count: 2.5;

VII-C-7 - Sens de l'animation | animation-direction

animation-direction : permet de définir le sens de l'animation suivant les répétitions.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : normal | reverse | alternate | alternate-reverse

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Explications.
normal : l'animation sera jouée selon le sens prévu. reverse : l'animation sera jouée à l'envers (à partir de la fin). alternate : l'animation se fera de façon alternée à chaque itération. alternate-reverse : l'animation se fera de façon alternée à chaque itération, mais en commençant à l'envers.

Exemples :

animation-direction: alternate;
animation-direction: alternate, alternate-reverse;

VII-C-8 - État de l'animation | animation-play-state

animation-play-state : détermine si l'animation est en pause ou non.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : running | paused

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Explications.
Cette propriété permet de savoir ou d'indiquer si une animation est en cours d'exécution (running) ou en pause (paused).
Il est possible d'interroger cet état (par exemple en JavaScript : AnimatedElement.animationPlayState) pour connaitre son état actuel.
Lorsqu'une animation en pause redémarre, elle le fait au point où elle s'était arrêtée.

Exemples :

animation-play-state: running;
animation-play-state: paused;

VII-C-9 - Style de l'élément hors animation | animation-fill-mode

animation-fill-mode : indique quelles propriétés CSS sont applicables avant et après l'animation.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : none | backwards | forwards | both

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Explications.
Par défaut, une animation ne modifie pas les propriétés de l'élément auquel elle s'applique entre le moment où elle est définie et le moment où elle démarre (donc pendant la période de animation-delay), ni après son exécution.
Il est possible de modifier ce comportement avec la propriété animation-fill-mode.
Si la valeur backwards est appliquée, les propriétés CSS de l'élément prendront les valeurs du premier pas de l'animation durant la période animation-delay. Ce premier pas est déterminé en fonction de la propriété animation-direction : si l'animation commence à l'endroit (valeurs normal ou alternate), il s'agit des valeurs CSS de from (ou 0%), si l'animation commence à l'envers (valeurs reverse ou alternate-reverse), il s'agit des valeurs CSS de to (ou 100%).
Si la valeur forwards est appliquée, les propriétés CSS de l'élément prendront les valeurs du dernier pas de l'animation après l'exécution de celle-ci selon les mêmes règles concernant animation-direction.
Si la valeur both est indiquée, les règles concernant backwards et forwards seront appliquées avant et après l'animation.

Exemple :

animation-play-state: both;

VII-C-10 - L'animation tout-en-un | animation

animation : regroupe toutes les propriétés d'animation.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Syntaxe : <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state>

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Note : en dehors du nom, toutes les valeurs sont optionnelles et l'ordre n'importe pas sauf pour les durées : la première durée sera toujours interprétée comme animation-duration et la seconde comme animation-delay.

Exemple :

animation: aller_retour 2s ease-in-out infinite alternate;

VII-C-11 - Exemple récapitulatif

L'exemple suivant vous montre la mise en œuvre de certaines fonctionnalités d'animation.

Pour activer l'animation, il faut survoler le cadre pointillé (activation de la propriété animation-play-state). Une fois l'animation lancée (et tant que la souris survole le cadre pointillé), un carré se déplace de gauche à droite puis de droite à gauche en effectuant une rotation et en diminuant son opacité.
Au milieu de l'animation (50%), on modifie la fonction d'easing (step-start) pour les propriété concernées par cette étape (opacity et transform) et leur modification se fera en une seule fois au début de cet intervalle (non visible pour transform).
Vous pouvez modifier avec les listes déroulantes les valeurs de animation-duration et animation-direction.

Tous les navigateurs ne permettent pas la modification individuelle des propriétés de l'animation, les listes déroulantes seront sans effet avec ces navigateurs.

L'exemple est susceptible de boguer avec Internet Explorer qui implémente encore mal l'utilisation de animation-timing-function dans @keyframes.

L'utilisation de la propriété -webkit-transform dans la version non préfixée de @keyframes pourra sembler inutile. Elle est due au fait que Chrome reconnait @keyframes (mais étonnamment pas encore animation-*) alors qu'Opera, qui utilise le moteur webkit depuis la version 15, demande la version préfixée @-webkit-keyframes.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Voir le code de l'exemple initial

<style>
#animation-controles{
position: relative;
margin: 20px auto;
text-align: center;
width: 90%;
max-width: 600px;
}
#animation{
position: relative;
margin: 20px auto;
text-align: center;
width: 90%;
max-width: 600px;
height: 70px;
line-height: 70px;
border: 1px dotted;
overflow: hidden;
}
#animated{
width: 50px;
height: 50px;
background-color: #FF0000;
position: absolute;
top: 10px;
-webkit-animation: aller_retour 2s ease-in-out infinite alternate;
animation: aller_retour 2s ease-in-out infinite alternate;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#animation:hover #animated{
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes aller_retour{
from{
margin-left: -50px;
}
50%{
opacity: 0.2;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: step-start;
}
to{
margin-left: 100%;
}
}
@keyframes aller_retour{
from{
margin-left: -50px;
}
50%{
opacity: 0.2;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-timing-function: step-start;
}
to{
margin-left: 100%;
}
}
</style>
<div id="animation">Survoler ce cadre pour démarrer l'animation
<div id="animated"></div>
</div>