Glossaire des propriétés CSS - Freetony3d3.free.fr/files/Glossaire-des-proprietes-CSS.pdf ·...

Glossaire des propriétés CSS

Par Torgar - Didier Mouronval

Date de publication : 14 août 2012

Dernière mise à jour : 6 décembre 2013

• 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 cettepage.

Participez à l'enrichissement de ce glossaire.

En complément sur Developpez.com• La syntaxe d'une règle CSS• Tous les cours et tutoriels CSS• La FAQ CSS• Le forum « Publications (X)HTML et CSS »

http://www.developpez.com

http://www.developpez.net/forums/u186569/torgar/

http://torgar.developpez.com/

http://www.developpez.net/forums/u243304/bovino/

http://dmouronval.developpez.com/

http://csscreator.com/properties

http://christophe-f.developpez.com/tutoriels/css/cours-css/syntaxe-regle-css/#LI-E-1

http://christophe-f.developpez.com/tutoriels/css/cours-css/syntaxe-regle-css/#LI-E-1

http://www.developpez.net/forums/d1335771/webmasters-developpement-web/html-dhtml-xhtml/publications-x-html-css/contribuez-glossaire-css/

http://christophe-f.developpez.com/tutoriels/css/cours-css/syntaxe-regle-css/

http://css.developpez.com/cours/

http://css.developpez.com/faq/

http://www.developpez.net/forums/f1775/webmasters-developpement-web/html-dhtml-xhtml/publications-x-html-css/

Glossaire des propriétés CSS par Torgar - Didier Mouronval

- 2 -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'autorisationexpresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

http://css.developpez.com/tutoriels/glossaire-proprietes-css/

Utilisation des préfixes navigateurs.............................................................................................................................5I - Propriétés de mise en forme de texte....................................................................................................................6

I-A - Mise en forme de la police............................................................................................................................6I-A-1 - Nom de police | font-family................................................................................................................... 6I-A-2 - Police personnalisée | @font-face........................................................................................................ 7I-A-3 - Taille du texte | font-size....................................................................................................................... 7I-A-4 - Gras | font-weight.................................................................................................................................. 8I-A-5 - Petites capitales | font-variant............................................................................................................... 8I-A-6 - Petites capitales | font-variant............................................................................................................... 9I-A-7 - Italique | font-style................................................................................................................................. 9I-A-8 - La police tout-en-un | font..................................................................................................................... 9

I-B - Mise en forme des paragraphes..................................................................................................................10I-B-1 - Alignement horizontal | text-align........................................................................................................ 10I-B-2 - Dernière ligne | text-align-last............................................................................................................. 11I-B-3 - Alignement vertical | vertical-align.......................................................................................................12I-B-4 - Décoration | text-decoration................................................................................................................ 13I-B-5 - Capitales | text-transform.................................................................................................................... 13I-B-6 - Alinéa | text-indent...............................................................................................................................14I-B-7 - Hauteur de ligne | line-height..............................................................................................................14I-B-8 - Césure | white-space...........................................................................................................................15I-B-9 - Césure forcée | word-wrap..................................................................................................................16I-B-10 - Ombrage | text-shadow..................................................................................................................... 16

I-C - Définition de la couleur de texte..................................................................................................................17I-C-1 - Couleur de texte | color...................................................................................................................... 17

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

II-A-1 - Largeur | width....................................................................................................................................18II-A-2 - Hauteur | height..................................................................................................................................18II-A-3 - Largeur minimale | min-width............................................................................................................. 19II-A-4 - Largeur maximale | max-width........................................................................................................... 19II-A-5 - Hauteur minimale | min-height........................................................................................................... 20II-A-6 - Hauteur maximale | max-height......................................................................................................... 20

II-B - Marges extérieures..................................................................................................................................... 21II-B-1 - Marge externe en haut | margin-top.................................................................................................. 21II-B-2 - Marge externe à gauche | margin-left................................................................................................22II-B-3 - Marge externe à droite | margin-right................................................................................................ 22II-B-4 - Marge externe en bas | margin-bottom..............................................................................................23II-B-5 - Marge externe | margin......................................................................................................................24

II-C - Espacements...............................................................................................................................................25II-C-1 - Espacement en haut | padding-top....................................................................................................25II-C-2 - Espacement à gauche | padding-left................................................................................................. 26II-C-3 - Espacement à droite | padding-right..................................................................................................27II-C-4 - Espacement en bas | padding-bottom............................................................................................... 27II-C-5 - Espacement tout-en-un | padding......................................................................................................28

II-D - Bordures......................................................................................................................................................29II-D-1 - Épaisseur de la bordure | border-width*............................................................................................ 29II-D-2 - Couleur de la bordure | border-color*................................................................................................ 30II-D-3 - Type de bordure | border-style*......................................................................................................... 31II-D-4 - Bordure à gauche | border-left*......................................................................................................... 33II-D-5 - Bordure en haut | border-top*............................................................................................................34II-D-6 - Bordure à droite | border-right*.......................................................................................................... 34II-D-7 - Bordure en bas | border-bottom*....................................................................................................... 35II-D-8 - Bordure tout-en-un | border*.............................................................................................................. 35II-D-9 - Bordure arrondie | border-radius........................................................................................................36II-D-10 - Ombre | box-shadow........................................................................................................................36

II-E - Contours...................................................................................................................................................... 38II-E-1 - Épaisseur du contour | outline-width..................................................................................................39II-E-2 - Couleur du contour | outline-color......................................................................................................39









II-E-3 - Type de contour | outline-style...........................................................................................................39II-E-4 - Décalage du contour | outline-offset.................................................................................................. 40II-E-5 - Contour tout-en-un | outline............................................................................................................... 40

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

III-A-1 - Couleur de fond | background-color..................................................................................................41III-B - Image de fond............................................................................................................................................42

III-B-1 - Image de fond | background-image.................................................................................................. 42III-B-2 - Fond fixé | background-attachment...................................................................................................42III-B-3 - Répétition du fond | background-repeat............................................................................................43III-B-4 - Position du fond | background-position.............................................................................................44III-B-5 - Fond tout-en-un | background...........................................................................................................45III-B-6 - Transparence | opacity...................................................................................................................... 46

IV - Propriétés des listes........................................................................................................................................... 46IV-A - Type de liste | list-style-type......................................................................................................................46IV-B - Position en retrait | list-style-position.........................................................................................................47IV-C - Puce personnalisée | list-style-image........................................................................................................48IV-D - Liste tout-en-un | list-style......................................................................................................................... 49

V - Propriétés de mise en forme des tableaux......................................................................................................... 49V-A - Type de bordure | border-collapse............................................................................................................. 49V-B - Cellules vides | empty-cells........................................................................................................................50V-C - Position du titre | caption-side....................................................................................................................51V-D - Affichage des cellules | table-layout...........................................................................................................52V-E - Espacement des cellules | border-spacing.................................................................................................53

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

VI-A-1 - Type d'élément | display................................................................................................................... 54VI-A-2 - Affichage | visibility............................................................................................................................55VI-A-3 - Afficher seulement une partie | clip.................................................................................................. 56VI-A-4 - Limiter les dimensions | overflow......................................................................................................57

VI-B - Positionnement.......................................................................................................................................... 58VI-B-1 - Flottant | float.................................................................................................................................... 58VI-B-2 - Stopper un flottant | clear................................................................................................................. 59VI-B-3 - Type de positionnement | position.................................................................................................... 60VI-B-4 - Position par rapport aux coins | top bottom left right........................................................................61VI-B-5 - Ordre d'affichage | z-index................................................................................................................62

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

VII-A-1 - Origine de la transformation | transform-origin................................................................................ 63VII-A-2 - Perspective 3D | perspective........................................................................................................... 64VII-A-3 - Origine de la perspective | perspective-origin................................................................................. 65VII-A-4 - Fonctions de transformation | transform.......................................................................................... 65

Translation | translate()..............................................................................................................................66Rotation | rotate().......................................................................................................................................66Redimensionnement | scale()....................................................................................................................67Distorsion | skew()..................................................................................................................................... 67Transformation matricielle | matrix().......................................................................................................... 68

VII-A-5 - Face arrière | backface-visibility.......................................................................................................69VII-A-6 - Héritage 3D | transform-style...........................................................................................................69VII-A-7 - Exemple de transformation 3D........................................................................................................ 70

VII-B - Propriétés de transition.............................................................................................................................71VII-B-1 - Nom de propriété(s) | transition-property.........................................................................................72VII-B-2 - Durée de transition | transition-duration...........................................................................................72VII-B-3 - Effet de transition | transition-timing-function...................................................................................73VII-B-4 - Délai de démarrage | transition-delay..............................................................................................73VII-B-5 - La transition tout-en-un | transition.................................................................................................. 74VII-B-6 - Exemple récapitulatif........................................................................................................................74

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









VII-C-1 - Étapes de l'animation | @keyframes............................................................................................... 76VII-C-2 - Nom de l'animation | animation-name............................................................................................. 77VII-C-3 - Durée de l'animation | animation-duration....................................................................................... 78VII-C-4 - Effet de l'animation | animation-timing-function............................................................................... 78VII-C-5 - Délai de l'animation | animation-delay.............................................................................................79VII-C-6 - Itérations de l'animation | animation-iteration-count........................................................................ 79VII-C-7 - Sens de l'animation | animation-direction........................................................................................80VII-C-8 - État de l'animation | animation-play-state........................................................................................80VII-C-9 - Style de l'élément hors animation | animation-fill-mode.................................................................. 81VII-C-10 - L'animation tout-en-un | animation................................................................................................ 81VII-C-11 - Exemple récapitulatif...................................................................................................................... 81









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'entreelles 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 quela fonctionnalité est implémentée, mais pas encore en version finale, c'est-à-dire que soncomportement est encore susceptible d'évoluer pour corriger d'éventuels bogues ou mieuxcoller aux spécifications.

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

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

Par exemple, si le moteur XYZ souhaite expérimenter la propriété prop, il pourra le faire sousle 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 commesuffisamment stable pour fonctionner correctement dans les cas généraux et n'êtrepotentiellement boguée que dans des cas limites.

Pour mettre en place ces propriétés dans votre page, vous devez lister tous les préfixespossibles (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 estimportant de mettre celle-ci en fin de liste afin d'écraser les versions expérimentales si la versiondé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 despréfixes et la notation JavaScript des propriétés standards sont normalisées (en utilisant la





http://www.w3.org/TR/CSS2/syndata.html#vendor-keywords

http://www.w3.org/TR/CSS2/syndata.html#vendor-keywords





notation camelCase : voir Comment passer d'une propriété de style CSS à celle quicorrespond 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 utilisentune notation dite UpperCamelCase (avec majuscule initiale) pour différencier les propriétéspré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émentdont 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 pour le visualiser.

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>





http://javascript.developpez.com/faq/javascript/?page=CSS#cssJavascript

http://javascript.developpez.com/faq/javascript/?page=CSS#cssJavascript

http://peter.sh/experiments/vendor-prefixed-css-property-overview/






Explications :

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

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 tousles 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



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 */





http://vviale.developpez.com/tutoriels/font-face/






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



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) */


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



Version CSS : 1

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


Voir la source<p style="font-variant: small-caps;">Lorem ipsum dolore sit amet</p>












Voir la source<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



Version CSS : 1

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


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



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) */


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 obligatoireset dans cet ordre (avec éventuellement le line-height entre les deux). 'font-style' || 'font-variant' || 'font-weight' sontoptionnels, 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



Version CSS : 1

font: bold 16px Arial;


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



Version CSS : 1

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


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


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èreligne 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 typebloc 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é */


Voir la source<style type="text/css">





http://css.developpez.com/tutoriels/glossaire-proprietes-css/?page=prefixes







Voir la source .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 typeinline-block.

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



Version CSS : 1

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











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



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) */


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



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) */


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



Version CSS : 1

text-indent : 20px;


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



Version CSS : 1

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


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;











Voir la source 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+


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>).


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>










Voir la source<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;


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;


Voir la source<style type="text/css">






https://developer.mozilla.org/fr/docs/CSS/text-shadow






Voir la source .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+


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.


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>





http://debray-jerome.developpez.com/articles/comprendre-les-couleurs-en-css3/






Voir la source<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



Version CSS : 1

Width : 200px ;


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, espacementset bordures.




Version CSS : 1

Height : 50px ;


Voir la source<style type="text/css"> .height { width: 200px;











Voir la source 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 comptedes marges, espacements et bordures.



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 ;


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 desmarges, espacements et bordures.

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



Version CSS : 2.1

max-width: 50px;


Voir la source<style type="text/css"> .max-w { max-width: 50px; border: 2px solid #696969;











Voir la source 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 desmarges, espacements et bordures.




Version CSS : 2.1

min-height: 200px;


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 comptedes marges, espacements et bordures.

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



Version CSS : 2.1

max-height: 20px;


Voir la source<style type="text/css"> .max-h { max-height: 20px; width: 50%; border: 2px solid #696969; background-color: #93caff;











Voir la source 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 cettepropriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit



Version CSS : 2.1

margin-top: 20px;


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 cettepropriété (px, %, em). Les valeurs négatives sont autorisées.




Version CSS : 1

margin-left: 20px;


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 cettepropriété (px, %, em). Les valeurs négatives sont autorisées.













Version CSS : 1

Margin-right : 20px ;


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 cettepropriété (px, %, em). Les valeurs négatives sont autorisées.




Version CSS : 1

Margin-bottom : 20px ;












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égativessont autorisées.

Syntaxe : <margin-width>{1,4} | 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 */


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










Voir la source } .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 pourcette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit



Version CSS : 1

padding-top: 20px;


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










Voir la source 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 pourcette propriété (px, %, em). Les valeurs négatives sont autorisées.




Version CSS : 1

padding-left: 20px;


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>










Voir la source </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 pourcette propriété (px, %, em). Les valeurs négatives sont autorisées.




Version CSS : 1

padding-right: 20px;


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 pourcette propriété (px, %, em). Les valeurs négatives sont autorisées.













Version CSS : 1

padding-bottom: 20px;


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 valeursnégatives sont autorisées.

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



Version CSS : 1


• 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 */












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éfinirplus précisément l'effet voulu en "combinant" les noms de propriétés.Exemples :border-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-topborder-top-colorborder-top-styleborder-top-widthborder-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-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











Version CSS : 1


• 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;


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


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


• 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;











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: hiddenborder-style: solid;border-style: double;border-style: dashed;border-style: dotted;border-style: inset;border-style: outset;border-style: ridge;border-style: groove;


Voir la source<style type="text/css"> .b-style1 { border-color: black; border-style: solid; margin-bottom: 10px;











Voir la source 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









Voir la sourceut 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



Version CSS : 1

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


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



Version CSS : 1

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


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 pasd'importance.

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



Version CSS : 1

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


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











Voir la sourceut 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 pasd'importance.

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



Version CSS : 1

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


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



Version CSS : 1

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


Voir la source<style type="text/css"> .border { border: 2px dotted red; width: 60%; background-color: #93caff;











Voir la source }</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


• 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 */


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)





http://debray-jerome.developpez.com/articles/les-bordures-en-css3/


https://developer.mozilla.org/fr/docs/CSS/-moz-box-shadow





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 lagauche ;

• 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;


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;





http://red-team-design.developpez.com/tutoriels/css/creer-effets-etonnants-avec-propriete-css3-box-shadow/






Voir le code source 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 :


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


Note : Les valeurs prédéfinies dépendent de l'agent utilisateur, néanmoins, les valeurs habituelles sont de 1px pourthin, 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 derniercomme dans l'exemple ci-dessus. Cependant, il ne constitue pas lui-même un élément etne masque pas réellement les éléments qui sont en-dessous. Notamment, les liens restentcliquables 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


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










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 espacementtransparent est créé entre l'élément et le contour (si la valeur est négative, le contour est contracté à l'intérieur del'é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










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



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);


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>





http://debray-jerome.developpez.com/articles/comprendre-les-couleurs-en-css3/






Voir la source</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


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

Version CSS : 1

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


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



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;


Voir la source<style type="text/css"> .background-attch1 {











Voir la source 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



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;


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. Pourfonctionner 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












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 */


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


Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype et ne supporte pasplusieurs 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é */


Voir la source<style type="text/css"> .background1 { width: 200px;











Voir la source 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édentesversions, 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 */


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;


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



Version CSS : 1

• inside : sans retrait ;• outside : avec retrait (par défaut).

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


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



Version CSS : 1










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


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. Vousn'ê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



Version CSS : 1

list-style: inside square;


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;


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 sontdistinctes.

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;











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;


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











Voir la source 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, soitdes dimensions spécifiées. À noter que si le contenu des lignes est supérieur en terme d'espace, les cellules adoptentun overflow automatiquement.

Version CSS : 2.1

Exemple :


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; }










Voir la source .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 colonnesadjacentes), la seconde longueur indique l'espacement vertical (espace entre deux cellules d'une même colonne).

Version CSS : 2.1

Exemple :


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 {










Voir la source 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


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 sontpas 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;


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


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;


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+











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 seraaffiché.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.


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 sonconteneur. C'est utilisé, entre autres, pour afficher des barres de défilement.

Syntaxe : visible | hidden | scroll | auto | 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 ajouterades 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;


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



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;


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



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 ;










Voir la source</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 unpositionnement absolu, fixe ou relatif. Si la propriété position est à la valeur static, ces propriétés n'ont pas d'effet.




Version CSS : 2.1

top: 30px;left: 50px; bottom: 10px;right: 30px;


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>










Voir la source</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 lenombre sera grand, plus il sera au premier plan.

Syntaxe : auto | <integer> | inherit



Complément d'information : Comprendre z-index.

Version CSS : 2.1

z-index: 1;z-index: 2;z-index: 5;


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>





http://philipwalton.developpez.com/tutoriels/css/connaitre-z-index/






Voir la source<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éfixesvendeurs.

VII-A - Propriétés de transformation

Les transformations permettent de modifier le rendu visuel d'un ou plusieurs éléments. Ces transformations peuventse 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 transformations3D, 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.


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%ClaudeLeloup2013-12-05T18:37:37Normalement une espace insécable entre le nombre et le symbole. Mais c'est peut-être la syntaxe du langage ?Didier Mouronval2013-12-06T08:07:15Répondre à Claude Leloup (05/12/2013, 18:37):"..."Oui, c'est bien ça : syntaxe du langage. 50% 0). Si une seule valeur est passée, l'origine est uniquement déplacéesur 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 Yest 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é (voirles 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;







http://debray-jerome.developpez.com/articles/les-transformations-en-css3/


#LI-A-4-b





VII-A-2 - Perspective 3D | perspective

perspective | transform: perspective() : permettent de déterminer le point de fuite des transformations 3D etd'appliquer des effets de perspective.


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 lacombinant 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 unevaleur 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 dontla 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).


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.


Syntaxe : [<pourcentage> | <longueur> | left | center | right | top | bottom] | [[<pourcentage> | <longueur> | left | center| right ] && [ <pourcentage> | <longueur> | top | center | bottom]]


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).


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.


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, parexemple :

selecteur{ transform: translate(100px, 50px) rotate(50deg);}








http://debray-jerome.developpez.com/articles/les-transformations-en-css3/





Si la valeur de transform est différente de none, alors un nouveau contexte d'empilement estcréé, 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.


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 etcliquez sur « Déplacer » (cliquez sur la boîte jaune pour annuler le déplacement).


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.


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 :





http://philipwalton.developpez.com/tutoriels/css/connaitre-z-index/








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 quel'unité n'est pas reconnue, cliquez sur la boîte jaune pour annuler la rotation).


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.


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 valeursnégatives sont autorisées, dans ce cas, l'élément semblera retourné. Les valeurs supérieures à 1 agrandirontl'é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 pourannuler la rotation).


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.














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 valeursné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() etskewY() 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 annulerla déformation).

Attention : certaines valeurs d'angles proches provoquent une déformation aux dimensionsexcessives de l'élément, d'autres le rendent invisible.


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.


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 quedes 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 MathematicallyChallenged.

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);







http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/





transform: matrix(1, 0, 0.6, 1, 250, 25);


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

backface-visibility : permet d'indiquer la visibilité de la face arrière d'un élément.


Syntaxe : visible | hidden


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 lestransformations 3D, permettant ainsi de visualiser ou non les éléments superposés.

Démo.


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 unnouveau à partir de celui-ci.


Syntaxe : flat | preserve-3d


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 estindépendant des autres et peut être déplacé individuellement, soit certains éléments peuvent contenir des élémentsenfants 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 onintégrera à chaque face un nombre d'images constituant les points du dé, ces images devront donc être liées à laface 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'ilsappartiennent à 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'imageappartient au cadre et la translation ne s'applique plus (sauf si l'on définit une valeur de perspective pour le cadre).


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


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);











Voir le code de l'exemple 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 pasen 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 interactionsavec 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 CSSimpliquées d'un état à un autre.Complément d'information : Les transitions en CSS3.





http://torgar.developpez.com/articles/css/transitions-css3/





S'il est possible d'animer un grand nombre de propriétés CSS, certaines ne le permettenttoutefois 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 auxtransitions depuis plusieurs versions. Quant à IE, si l'implémentation est récente (IE 10+), il n'ya 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 nemettant pas à jour leur navigateur (ce qui est rare, car ceux-ci ont un système de mise à jourautomatique 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).


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.


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 auxdiffé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;





https://developer.mozilla.org/fr/docs/CSS/proprietes_css_animees







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.


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 entre0 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érentesproprié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 navigateurrevient 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.


Syntaxe : initial | <duree>[, <duree>]*


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 auxdiffé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 auraitdû être si elle avait commencé au moment indiqué par le délai négatif.

Exemples :






http://easings.net/fr

http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/






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.


Syntaxe : <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>


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éplacesur 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çonsynchronisé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 unmessage (voir le code de l'exemple).

Les navigateurs ne reconnaissant pas les transformations 3D ne verront pas le dos doré ni l'effetde retournement, mais juste un glissement de la carte vers la droite. Les autres animationsseront visibles.


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;











Voir le code de l'exemple 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 desproprié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 dansle 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 vamodifier 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'uneanimation 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 êtreré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.


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é pourl'animation (<identifiant>), il servira à appeler cette animation pour un sélecteur. On ouvre ensuite un bloc (à l'aided'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 destyles 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 ( ou100%), si l'une (ou les deux) manque, le navigateur devra la créer en utilisant les valeurs calculées des propriétésdevant ê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 notionde cascade pour @keyframes.Si une étape est déclarée plusieurs fois, seule la dernière déclaration est utilisée, cependant, certains navigateursont 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.






http://dev.w3.org/csswg/css-animations/#keyframes





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.


Syntaxe : none | <nom>#


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èresde 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.


Syntaxe : <duree>


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 auxdiffé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.


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).


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 entre0 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érentesanimations listées dans animation-name dans le même ordre ; s'il y a plus de propriétés que d'effets, le navigateurrevient 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 del'animation.

Toutefois, il est possible d'indiquer une valeur de animation-timing-function dans un intervallede @keyframes, dans ce cas, c'est cette fonction qui sera utilisée pour cet intervalle.







http://easings.net/fr

http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/





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.


Syntaxe : initial | <duree>


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 auxdiffé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 auraitdû ê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.


Syntaxe : infinite | <nombre>


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 dela 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.


Syntaxe : normal | reverse | alternate | alternate-reverse


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çonalterné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.


Syntaxe : running | paused


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 connaitreson é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.


Syntaxe : none | backwards | forwards | both


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ù elleest 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 del'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'animationaprè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èsl'animation.

Exemple :

animation-play-state: both;

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

animation : regroupe toutes les propriétés d'animation.


Syntaxe : <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> ||<animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state>


Version CSS : 3

Note : en dehors du nom, toutes les valeurs sont optionnelles et l'ordre n'importe pas sauf pour les durées : lapremiè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 foisl'animation lancée (et tant que la souris survole le cadre pointillé), un carré se déplace de gauche à droite puis dedroite à 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 pourtransform).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 mall'utilisation de animation-timing-function dans @keyframes.

L'utilisation de la propriété -webkit-transform dans la version non préfixée de @keyframespourra 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 laversion 15, demande la version préfixée @-webkit-keyframes.


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{










Voir le code de l'exemple initial 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>





Glossaire des propriétés CSS - Freetony3d3.free.fr/files/Glossaire-des-proprietes-CSS.pdf ·...

Documents

Transcript of Glossaire des propriétés CSS - Freetony3d3.free.fr/files/Glossaire-des-proprietes-CSS.pdf ·...