Le Langage CSS

2 099 vues

Publié le

The CSS 3 Language

Publié dans : Technologie
0 commentaire
9 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 099
Sur SlideShare
0
Issues des intégrations
0
Intégrations
146
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
9
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le Langage CSS

  1. 1. Technologies et Développement Web Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine
  2. 2. Technologies et Développement Web Objectifs du module 2  Faire un tour d’horizon du langage CSS, ses propriétés et ses règles  Appliquer CSS sur des pages web Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine
  3. 3. Technologies et Développement Web Plan du module 3  Introduction  Images  Sélecteurs CSS  Transitions et Transformations  Couleur  Animations  Texte  Boîtes  Disposition Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine
  4. 4. 4 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
  5. 5. Technologies et Développement Web Qu’est-ce que le CSS ?  Un langage de règles permettant d’affecter un style à des éléments  Ce style peut être une couleur, une police de caractères, une position, …etc.  Les règles peuvent être déclarées à l’intérieur du fichier HTML ou à l’extérieur en utilisant un fichier CSS séparé Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 5
  6. 6. Technologies et Développement Web Comment ça fonctionne ? 6  Le comportement du style diffère selon l’affichage de l’élément est en mode bloc (p, h1,…) ou en mode en ligne (span, b,…)  Demo : inline-block.html Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Chaque élément est dans une « boîte invisible »
  7. 7. Technologies et Développement Web Syntaxe 7 Déclaration p { border : 1px solid red; font-family :Arial; } Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
  8. 8. Technologies et Développement Web Syntaxe - Suite 8  Une déclaration peut s’appliquer à plusieurs sélecteurs s’ils sont séparés par des virgules  Les déclarations indiquent les styles à appliquer aux éléments appartenant au sélecteur Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Le sélecteur indique à quels éléments appliquer le style
  9. 9. Technologies et Développement Web Syntaxe, suite 9 Propriétés Courrs 3 - Les Feuilles de Styles (CSS) Valeurs h1, h2 { margin: 5px; font-family :Arial; color :Yellow; } Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
  10. 10. Technologies et Développement Web Syntaxe - Suite 10  Les valeurs concernent quelle valeur affecter à un aspect (par exemple, bleu à couleur)  Exemple : voir syntaxe.html Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Les propriétés concernent l’aspect à styler : taille, couleur, police,…
  11. 11. Technologies et Développement Web CSS intégré dans le fichier HTML 11  Le CSS peut être intégré dans le HTML en utilisant la balise « style » Courrs 3 - Les Feuilles de Styles (CSS)  La balise a un attribut « type » qui dit être à « text/css » <style type="text/css"> p { font-family: 'Trebuchet MS‘; margin-bottom: 5px; } h1, h2 { color: blue; } </style> Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
  12. 12. Technologies et Développement Web CSS externe 12  La feuille de style peut être dans un fichier externe dont l’extension est « css » Courrs 3 - Les Feuilles de Styles (CSS)  Le lien entre le fichier HTML se fait à travers la balise link  L’attribut « href » spécifie l’URL du fichier CSS  L’attribut « type » doit être à « text/css »  L’attribut « rel » doit être à « stylesheet » Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
  13. 13. Technologies et Développement Web La balise link 13 <link href="external.css" rel="stylesheet" type="text/css" /> Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Voir « external.html »
  14. 14. Technologies et Développement Web CSS externe 14  Il vaut mieux mettre les feuilles de style dans des fichiers externes pour faciliter la maintenance Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Un fichier HTML peut référencer plusieurs fichiers CSS
  15. 15. Technologies et Développement Web Exercice 1 Intégrez une feuille de style externe et un style interne à votre page personnelle. Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 15
  16. 16. 16 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine
  17. 17. Technologies et Développement Web Introduction  Les sélecteurs permettent de sélectionner des éléments ayant un critère particulier : par exemple tous les éléments, appartenant à la même balise, même classe,…  Les sélecteurs CSS sont sensibles à la casse  Voir démonstrations dans selctors,html et advancedselectors.html Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 17
  18. 18. Technologies et Développement Web Sélecteurs CSS 18 Description Exemple Sélecteur universel Sélectionne tous les éléments. Utilise le symbole « * » * {} : tous les éléments Sélecteur de type Concerne tous les éléments appartenant à la même balise h2{} : tous les « h2 » p, span{} tous les paragraphes et les spans Sélecteurs de classe Concerne tous les éléments appartenant à une certaine classe (identifiés par l’attribut « classe ». Un élément HTML peut appartenir à plusieurs classes. span.nuance : tous les span dont la classe est « nuance » .couleurVerte{} : n’impote quel élément ayant la classe « couleurVerte » Sélecteur d’id Concerne un seul élément identifié par son attribut « id » span#spanId {} : le span qui a l’attribut id à « spanId » #unElement {} : n’importe quel élément ayant comme id « unElement » Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
  19. 19. Technologies et Développement Web Sélecteurs CSS - Suite 19 Description Exemple Descendant direct Les éléments qui sont descendants directs d’un autre élément. Le symbole « > » est utilisé. La fonction nth-child spécifie quel élément choisir. div > p : paragraphes descendants directs d’une div div->a:nth-child(2) : le deuxième lien descendant direct d’un div div->a:nth-child(2n+1) : tous les 2nème + 1 descendants directs : 1er, 3ème, 5ème,…etc Descendants indirects Tous les éléments qui sont des enfants (pas forcément directs) d’autres éléments div span.spanInterne : les span avec la classe « spanInterne » qui sont des descendants d’un div Frère direct Un éléments adjacent à un autre élément et qui sont au même niveau (symbole +) h2+p : le paragraphe qui vient directement après un h2 Frère indirect Les éléments se trouvant au même niveau qu’un autre élément (symbole ~) li~li : un élément adjacent à un autre élément de liste. Exclut le premier. Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
  20. 20. Technologies et Développement Web Sélecteurs avancés 20 Description :link Liens pas encore visités :visited Lien visité :hover Élément qui est survolé par la souris :focus Élément qui détient le focus input:focus : contrôle qui reçoit le focus [attribut=valeur] Sélectionne des élément ayant des attributs avec une certaine valeur a[target=_blank] {} : sélectionne les liens qui ouvrent dans une nouvelle fenêtre [attribut^=valeur] Sélectionne les éléments ayant un attribut commençant par une valeur a[href^=http] : sélectionne les liens ayant une URL commençant par HTTP [attribut*=valeur] Sélectionne les éléments ayant un attribut contenant la valeur a[href*=ynt] : sélectionne des liens qui contiennent « ynt » dans l’URL :only-child Sélectionne l’élément qui est l’unique descendant d’un autre élément div p:only-child : sélectionne le paragraphe unique à l’intérieur d’un div Section 2 : Sélecteurs CSS Exemple Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
  21. 21. Technologies et Développement Web Sélecteurs avancés 21 Description Exemple nth-child(n) Nème descendant n-child(2) : deuxième descendant n-child(2n+1), tous les descendants impairs :first-child Premier enfant :first-line Première ligne d’un paragraphe :first-letter Première lettre d’un paragraphe :before Ajoute du contenu avant l’élément :after Ajoute du contenu après l’élément not Sélectionne les éléments qui ne sont pas un élément donné Section 2 : Sélecteurs CSS p > not(a) tous les éléments sauf les liens Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
  22. 22. Technologies et Développement Web Cascade  Si plusieurs règles s’appliquent un élément, les mécanismes suivants sont appliqués (voir cascade.html)  Si deux règles sont identiques, la dernière est prise  Si une règle est plus spécifique que l’autre, elle est prise sur l’autre. h1 est spécifique sur *. span#id est spcifique à span. Span,maClasse est spécifique à .maClasse.  Si on veut prioriser une règle, on la marque avec le mot clé « !important » Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 22
  23. 23. Technologies et Développement Web 23 Courrs 3 - Les Feuilles de Styles (CSS) Exercice 1 Appliquez les sélecteurs sur votre page personnelle. Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
  24. 24. 24 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
  25. 25. Technologies et Développement Web Qu’est-ce qu’une couleur ? 25  La propriété « color » définit la couleur de texte  La propriété « background-color » définit la couleur de fond  La propriété « border-color » définit la couleur de bordure  Pour choisir une couleur : http://www.w3schools.com/tags/ref_colorpicker.asp Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Un mix entre trois valeurs : rouge, vert et bleu
  26. 26. Technologies et Développement Web Valeur des couleurs 26  On peut affecter une couleur par nom, par exemple « red » ou « darkcyan ». CSS prend en charge 147 noms de couleurs.  Par valeur hexadécimale de RGB. Par exemple #20977a;  Par valeur hexadécimale raccourcie : #f60 qui est équivalent à #ff6600.  Par la fonction rgb qui demande trois paramètres : rouge, vert et bleu. Cette fonction demande trois paramètres allant de 0 à 255 Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Voir « couleurs.html »,
  27. 27. Technologies et Développement Web Couleurs standard - Exemples 27 div#byName > span:nth-child(1) { } Courrs 3 - Les Feuilles de Styles (CSS) border-color: red; div#byHex > span:nth-child(1) { background-color: #982222;} div#byShortHex > span:nth-child(1) { border-color: #bb1; } div#byRGB > span:nth-child(1) { color: rgb(11,11,11); } Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
  28. 28. Technologies et Développement Web Couleurs CSS3 - HSL  La fonction hsl (hue + saturation + lightness) définit une couleur à partir de la teinte, saturation et brillance  La teinte est une valeur de 0 à 360, la roue de couleur. 120 correspond à vert et 240 à bleu.  La saturation est une valeur de 0 à 100%. 0% correspond à un niveau de gris. 100% correspond à la couleur d’origine.  La luminosité est une valeur de 0 à 100%. 0% correspond à noir, 100% correspond à blanc. Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 28
  29. 29. Technologies et Développement Web Couleurs HSL - Exemples 29 div#byHSL > span:nth-child(1) { Courrs 3 - Les Feuilles de Styles (CSS) background-color: hsl(120,30%,50%); color: hsl(0,100%,50%); border-color: hsl(0,100%,25%); } Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
  30. 30. Technologies et Développement Web Couleurs CSS3 - Transparence  En plus des fonctions rgb et hsl, CSS3 définit deux nouvelles fonctions prenant un quatrième paramètres (alpha) qui sont rgba et hsla  Alpha peut être entre 0 et 1. 0 pour complètement transparent et 1 pour complètement opaque.  L’opacité peut être aussi définie en utilisant la propriété CSS3 « opacity » Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 30
  31. 31. Technologies et Développement Web Transparence : Exemples 31 Section 3 : Les Couleurs Courrs 3 - Les Feuilles de Styles (CSS) div#byRGBA > span:nth-child(2) { background-color: rgba(0,0,0,0.5); } div#byHSLA > span:nth-child(2) { background-color: hsla(250,75%,50%,0.5); } div#byOpacity > span:nth-child(2) { background-color: darkolivegreen; opacity : 0.5; } Copyright © 2013, Mostefai Mohammed Amine
  32. 32. Technologies et Développement Web 32 Courrs 3 - Les Feuilles de Styles (CSS) Couleurs : démonstration Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
  33. 33. Technologies et Développement Web Couleurs : démonstration En utilisant les différentes fonctions de couleur, faites vivre votre site personnel en utilisant les couleurs Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 33
  34. 34. 34 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  35. 35. Technologies et Développement Web Polices de caractère - Typologie  Une police de caractère serif est une police avec des traits additionnels sur les caractères. Ces polices sont appréciées en lectures car très lisibles. Les petits traits supplémentaires sont appelés « serifs »  Les polices sans-serif sont des polices sans les traits supplémentaires. Elles sont très claires sur un dispositif comme l’écran.  Les polices monospace sont des polices où tous les caractères ont la même largeur. Une des utilisation des polices monospace est le code source Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 35
  36. 36. Technologies et Développement Web Polices de caractère - Typologie  Une police courbée (cursive) est une police qui ressemble à l’écriture de main  Une police fantaisiste (fantasy) est une police ayant un caractère décoratif Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 36
  37. 37. Technologies et Développement Web Polices de caractère - Typologie 37 Courrs 3 - Les Feuilles de Styles (CSS) Police serif cambria Police sans serif Arial Police mono-space consolas Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  38. 38. Technologies et Développement Web Polices de caractère - Typologie Police cursive Monotype Corsiva Police fantaisiste Haettenschweiler Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 38
  39. 39. Technologies et Développement Web 39  Lorsqu’une page web utilise un texte écrit avec une police données, il faut que cette police soit installé dans le PC du navigateur pour qu’elle soit correctement affichée  Certaines polices standard sont installés sur la plupart des ordinateurs / tablettes (times, georgia, times new roman, arial, verdana, helvetica,…)  Les navigateurs doivent supporter au moins une police générique par groupe (serif, sans serif, …)  CSS3 offre un moyen de contourner cette limitation Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Utilisation des polices de caractères dans les pages web
  40. 40. Technologies et Développement Web 40  La propriété font-family spécifie la police de caractères. La police doit être installée sur le poste du navigateur  CSS3 a introduit la règle font-face qui permet de télécharger une police si celle-ci n’est pas installé sur le poste du navigateur Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Application d’une police dans une page
  41. 41. Technologies et Développement Web Font-Family 41  Permet de spécifier plusieurs polices séparées par des virgules. Si une police n’existe pas, elle est remplacée par la suivante.  Peut inclure une police générique (par exemple serif). Cherche la police par défaut correspondante à cette police.  Voir la démonstration « fontfamily.html » Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Spécifie la police de caractères à utiliser dans une page
  42. 42. Technologies et Développement Web Font-family Syntaxe 42 ul li:nth-child(1) { } ul li:nth-child(2) { font-family: Tahoma, Geneva, Verdana, sans-serif; } ul li:nth-child(3) { font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) font-family: Verdana;
  43. 43. Technologies et Développement Web 43 Courrs 3 - Les Feuilles de Styles (CSS) Font-family Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  44. 44. Technologies et Développement Web Taille du texte  La taille du texte est spécifiée en utilisant font-size. La taille est faite en pixels.  L’affichage du texte dépend de la résolution. Moins la résolution est grande, plus les caractères sont grands.  La taille du texte peut être spécifiée en pourcentage (%) par rapport au parent. La taille par défaut dans les navigateurs est 100%.  La taille des caractères peut être spécifiée en points pour de meilleurs résultats sur des supports imprimés. Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 44
  45. 45. Technologies et Développement Web Taille du texte  La taille peut être spécifiée en (em) où « em » correspond à la taille en cours de la police sur le navigateur. Par défaut 1em équivaut à 16px.  1 em est équivalent à la largeur de la lettre « m »  La taille peut être spécifiée en utilisant les alias : « xx-small », « x-small », « small », « medium », « x-large », « xx-large », « smaller » et « larger »  L’alias inherit permet d’hériter du parent  Démonstration « fontsize.html » Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 45
  46. 46. Technologies et Développement Web Font-size Syntaxe 46 ul li:nth-child(2) { font-size: 14px; Courrs 3 - Les Feuilles de Styles (CSS) } ul li:nth-child(3) { font-size: 14pt; } ul li:nth-child(4) { font-size: 150%; } ul li:nth-child(5) { font-size: 2em; } Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  47. 47. Technologies et Développement Web 47 Courrs 3 - Les Feuilles de Styles (CSS) Font-size Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  48. 48. Technologies et Développement Web La règle @font-face (CSS3)  La balise @font-face permet de télécharger des polices qui ne sont pas installées sur le poste  L’attribut src spécifie l’URL de la police de caractères  L’attribut format définit son format  L’attribut font-family définit son nom  Une fois une police spécifiée, elle peut être utilisée comme les autres polices installées Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 48
  49. 49. Technologies et Développement Web Formats de polices de caractères 49  Le format « opentype embedded » (extension eot) est proposé par Microsoft et pris en charge par ses navigateurs  Le format « web open format » (extension woff » est un format soutenu par Microsoft et la fondation Mozilla. Il est pris en charge par Chrome ainsi que les versions récentes de IE et Firefox.  Le format truetype (extension ttf) est promu par Apple et est compatible avec Chrome et Safari Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Il existe plusieurs formats de police
  50. 50. Technologies et Développement Web Formats de polices de caractères - suite 50  Certes polices sont soumises à des licences et ne peuvent être utilisées sans payer des commissions  Certains sites comme « http://www.fontsquirrel.com/ » proposent des polices gratuites sous tous les formats  Le format svg des polices est associé au format des images vectorielles. Il a été conçu pour le web et les applications mobiles.  Voir démonstration « fontface.html » Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Le format « opentype format » (extension otf) est une extension vectorielle de « trutype » et a été proposé par Microsoft
  51. 51. Technologies et Développement Web @font-face syntaxe 51 font-family: 'blackjack'; src: url('Fonts/black_jack-webfont.woff') format('woff'), url('Fonts/black_jack.ttf') format('truetype'), url('Fonts/black_jack-webfont.eot') format('opentype'); font-weight: normal; font-style: normal; } Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) @font-face {
  52. 52. Technologies et Développement Web 52 Courrs 3 - Les Feuilles de Styles (CSS) @font-face Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  53. 53. Technologies et Développement Web Autres propriétés de texte (textcss.html) Description font-weight Permet de créer un texte en gras. (bold, bolder ou normal) sont des valeurs possibles. font-style Style de la police, par exemple italique, oblique ou normal text-transform Transforme en majuscule (uppercase), minuscule (lowercase) ou première lettre majuscule (capitalize) text-decoration Souligné (underline), surligné (overline) ou avec tiret (linethrough) ou supprimer la ligne (none) line-height Hauteur de la ligne. Idéal pour centrer verticalement le texte. letter-spacing Espacement entre les lettres word-spacing Espacement entre les mots Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Règle 53
  54. 54. Technologies et Développement Web Autres propriétés de texte (textcss.html) - suite Description text-align Alignement du texte. Left, right, center ou justify vertical-align Alignement vertical des éléments en ligne text-indent Indentation du texte :first-letter Première lettre :first-line Première ligne Section 4 : Le Texte Courrs 3 - Les Feuilles de Styles (CSS) Règle 54 Copyright © 2013, Mostefai Mohammed Amine
  55. 55. Technologies et Développement Web 55 Courrs 3 - Les Feuilles de Styles (CSS) Autres propriétés texte Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  56. 56. Technologies et Développement Web Text-Shadow (css3) 56  Syntaxe : texte-shadow dh dv couleur;  dh : décalage horizontal, dv : décalage vertical, couleur : couleur de l’ombre  Démonstration : text-shadow.html Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Permet un effet d’ombre sur le texte
  57. 57. Technologies et Développement Web Exercice En utilisant les différentes propriétés de texte, restylez votre page personnelle. Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 57
  58. 58. Technologies et Développement Web Cours 3 – Les Feuilles de Styles (CSS) 58 Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  59. 59. Technologies et Développement Web Taille des éléments  Par défaut, un conteneur change sa taille pour s’adapter à son contenu  Pour fixer la taille d’un élément, il faut affecter les propriétés width (largeur) et height (hauteur)  Les tailles peuvent être fixées en pixel, em ou pourcentage  Pour définir des limites de redimensionnement : min-height, minwidth, max-height, max-width Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 59
  60. 60. Technologies et Développement Web Contrôler les dépassements  Lorsque les tailles sont définies, il y a un risque que le contenu d’un élément dépasse sa taille  La propriété « overfow » contrôle ce dépassement  La valeur « hidden » permet de masquer les dépassements  La valeur « scroll » affiche des barres de défilements  Voir « WidthHeight.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 60
  61. 61. Technologies et Développement Web Bordures et Marges 61 Marge Extérieure (Margin) Courrs 3 - Les Feuilles de Styles (CSS) Bordure (Border) Marge Intérieure (Padding) Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  62. 62. Technologies et Développement Web Bordures et Marges  Un élément (boîte) a la largeur et le placement contrôlés par les propriétés « border », « margin » et « padding » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 62
  63. 63. Technologies et Développement Web Bordures 63 Description border-width Spécifie la largeur de la bordure. Cette largeur peut être en pixels ou en alias (thin, medium ou thick). CSS permet aussi de spécifier des largeurs différentes aux quatre bordures en utilisant border-top-width, border-right-width border-bottom-width et border-leftwidth. Des raccourcis peuvent être utilisés : border-width : haut droite bas gauche. border-style Contrôle l’apparence de la bordure. Plusieurs styles sont possibles : solid (continu), dotted (pointillés), dashed, insert, ridge, none. border-color Spécifie la couleur de la bordure. Des couleurs différentes peuvent être spécifiées pour les quatre côtés. Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Règle
  64. 64. Technologies et Développement Web Bordure raccourci 64 div p:nth-child(3) { Courrs 3 - Les Feuilles de Styles (CSS) border : 5px solid blue; } Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  65. 65. Technologies et Développement Web Marges 65  Les marges intérieures sont définies avec la propriété « padding »  Les marges extérieures sont définies avec la propriété « margin »  Les côtés peuvent avoir des marges différentes  La formule raccourcie peut être utilisée  Une marge « auto » permet de centrer horizontalement un élément à condition qu’il ait une largeur  Voir « BorderMaginPadding.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Les marges sont exprimées en pixel ou en pourcentage
  66. 66. Technologies et Développement Web Affichage des éléments 66  La valeur « collapse » de « visibility » s’applique aux tableaux et aux colonnes et permet de cacher une ligne ou une colonne sans affecter la disposition du tableau  Un élément peut aussi être caché en utilisant la propriété « display » avec la valeur « none ». La différence avec visibility est que la valeur « hidden » laisse l’espace de l’élément réservé tandis que la valeur « none » le cache et ne réserve pas sans espace.  Voir « DisplayVisibility.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  La propriété « visibility » permet d’afficher ou de cacher un élément. Elle peut avoir les valeur « visible » ou « hidden ».
  67. 67. Technologies et Développement Web Propriété display 67 Description none L’élément ne sera pas affiché block L’élément sera affiché en mode bloc Inline L’élément sera affiché en mode en ligne List-item Permet d’afficher les éléments sous forme de liste. table,table-column, tablerow et table-cell Affiche l’élément sous forme de tableau, ligne, colonne ou cellule Voir « Display.html » Inline-block Section 5 : Boîtes, Listes et Tableaux Combine en ligne et bloc Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Valeur
  68. 68. Technologies et Développement Web Bordures de type image (CSS3)  CSS3 permet de définir de nouvelles bordures  L’image spécifiée est découpée en neuf (09) portions qui sont utilisées pour les lignes et les coins.  La propriété « border-image-source » spécifie l’URL de l’image à utiliser comme bordure.  Les propriété « border-image-slice » et « border-image-width » déterminent comment découper cette image.  La propriété « border-image-stretch » détermine comment dessiner une bordure. « stretch » ajuste l’image à la taille, « repeat » répète l’image et « round » répète avec ajustement. Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 68
  69. 69. Technologies et Développement Web Bordures de type image (CSS3), Syntaxe 69 border-image: url(Images/border.png) 30 30 stretch; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) border-image: url(Images/border.png) 30 30 round;
  70. 70. Technologies et Développement Web Ombre Portée (box-shadow) 70  La règle ajoutant l’ombre est « box-shadow »  La syntaxe est comme suit : Box-shadow: d-horizontal d-vertical flou diffusion couleur; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Permet d’ajouter une ombre à une boîte
  71. 71. Technologies et Développement Web Ombre Portée (box-shadow), Suite 71 Description d-horizontal Décalage horizontal, les valeurs négatives sont acceptées d-vertical Décalage vertical, les valeurs négatives sont acceptées flou Paramètre optionnel, le fou à apporter sur l’ombre diffusion Paramètre optionnel, la diffusion de l’ombre Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Valeur
  72. 72. Technologies et Développement Web Coins arrondis (CSS 3) 72  La propriété « border-radius » permet d’arrondir avec une valeur égale à tous les coins ou des valeurs différentes border-radius: 15px; border-radius: 15px 20px 35px 10px; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  CSS3 permet d’arrondir les coins d’une boîte
  73. 73. Technologies et Développement Web Démonstration 73 Courrs 3 - Les Feuilles de Styles (CSS)  Démonstrations dans « NewBorders.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  74. 74. Technologies et Développement Web Style de liste 74 Description list-style-type Permet de définir le type alloué aux éléments de liste. Pour les listes non numérotées, la valeur peut être « circle », « square » ou « disc » par exemple. Pour les listes numérotées, les valeurs peuvent être « decimal », « decimal-leading-zero », « loweralpha », « upper-alpha », « lower-roman » ou « upper-roman ». La valeur « none » désactive la numérotation. list-style-image Permet de spécifier une image pour les éléments. list-style-position Spécifie si la puce ou le numéro est à l’intérieur ou à l’extérieur de l’élément list-style Raccourci des autres règles concernant les liste Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Valeur
  75. 75. Technologies et Développement Web Styles de listes (Démonstration, Lists.html) 75 list-style: square; Courrs 3 - Les Feuilles de Styles (CSS) list-style: square outside; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  76. 76. Technologies et Développement Web Styler les tableaux  Toutes les règles du CSS s’appliquent aux tableaux, notamment « border » qui définit les bordures.  « border-spacing » permet de définir l’espacement des cellules.  « border-collapse » permet de définir le comportement des bordures qui se rejoignent. Une valeur « collapse » fusionne les bordures. Une valeur « separate » les affiche séparées. Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 76
  77. 77. Technologies et Développement Web 77 Courrs 3 - Les Feuilles de Styles (CSS) Styler les tableaux (Voir tableaux.html) Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  78. 78. Technologies et Développement Web Styler les formulaires 78  Utiliser les listes ordonnées pour une meilleure indexation  La propriété CSS3 « box-sizing » permet de mieux contrôler la largeur des éléments Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Ne pas utiliser les tableaux.
  79. 79. Technologies et Développement Web 79 Courrs 3 - Les Feuilles de Styles (CSS) Styler les formulaires (Démonstration, formulaire.html) Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  80. 80. 80 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  81. 81. Technologies et Développement Web Introduction  HTML est composé d’éléments en mode en ligne et d’autres en mode bloc  Le regroupement en mode bloc permet de gérer la disposition des éléments  Les « div » ou les nouvelles balises HTML5 (nav, aside, header,..) sont utilisées pour la navigation Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 81
  82. 82. Technologies et Développement Web Disposition simple  HTML est composé d’éléments en mode en ligne et d’autres en mode bloc  Le regroupement en mode bloc permet de gérer la disposition des éléments  Les « div » ou les nouvelles balises HTML5 (nav, aside, header,..) sont utilisées pour la navigation  Voir « position.html »  Dans un scénario normal, chaque élément en mode bloc est affiché en dessous de l’autres  Si « width » ou « max-width » ne sont pas spécifiées , l’élément prend toute la largeur disponible Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 82
  83. 83. Technologies et Développement Web Positionnement relatif  Une position relative déplace un élément par rapport à sa position « normale »  Pour indiquer une position relative, utiliser la règle « position » avec la valeur « relative »  Pour bouger l’élément par rapport à sa position normale, utiliser « top », « left », « right » ou « bottom ». Les valeurs peuvent être en pixels, ems ou %.  Le déplacement relatif a parfois par conséquence, de mettre un élément sur un autre (le premier couvre le deuxième). Pour soigner l’effet, utiliser la propriété « z-index ».  Voir exemple 2 et 3 Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 83
  84. 84. Technologies et Développement Web Positionnement absolu  Lorsqu’une position absolue est attribuée à un élément, il est positionné par rapport aux coordonnées (top, left, right et bottom) et l’élément n’a plus aucun impact sur les autres. (Exemple 4)  Lorsqu’un élément est positionné d’une manière absolue à l’intérieur d’un autre élément en mode relatif, il est positionné par rapport à l’élément parent. (Exemple 5) Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 84
  85. 85. Technologies et Développement Web Positionnement fixe  La position fixe est semblable au positionnement absolu sauf que l’élément garde toujours la même position lorsque l’utilisateur défile la page  Exemple 6 Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 85
  86. 86. Technologies et Développement Web 86 Courrs 3 - Les Feuilles de Styles (CSS) Positionnement Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  87. 87. Technologies et Développement Web Éléments flottants  Un élément flottant est pris de sa position « normale » puis mis à gauche ou à droite  Les autres éléments d’adaptent pour contourner l’élément flottant  Voir « floats.html » Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 87
  88. 88. Technologies et Développement Web 88 Courrs 3 - Les Feuilles de Styles (CSS) Éléments flottants Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  89. 89. Technologies et Développement Web Éléments flottants pour la disposition 89  Les éléments flottants aident à mettre en place des dispositions multi-colonnes  Voir « dispositions.html »  La règle « clear » permet de réinitialiser les flottements Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Les éléments flottants peuvent mettre des élément côte à côté
  90. 90. Technologies et Développement Web 90 Courrs 3 - Les Feuilles de Styles (CSS) Disposition (Dispositions.html) Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  91. 91. Technologies et Développement Web 91 Courrs 3 - Les Feuilles de Styles (CSS) Disposition (Album.html) Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  92. 92. Technologies et Développement Web Boîte Flexible (Flexbox, CSS3) 92  Nouveau mode de positionnement basé sur CSS3 Courrs 3 - Les Feuilles de Styles (CSS)  Le parent devient un cadre d’affichage  Distribution des éléments enfants  Alignement horizontal et vertical  Gestion de l’espace disponible  Réorganisation des éléments Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  93. 93. Technologies et Développement Web 93  La version standard n’est pas encore compatible avec les navigateurs récents  Utiliser les préfixes (-webkit-) pour chrome, (-moz-) pour FireFox et –ms- pour IE Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Grille Flexible, Compatibilité des navigateurs
  94. 94. Technologies et Développement Web Possibilité du flexbox (voir flex.html) 94 Description flex-direction Peut être row ou column pour un affichage en colonnes ou un affichage en lignes. Les valeurs row-reverse et column-reverse affiche les valeurs inversées. flex-wrap Indique le comportement en cas de dépassement. nowrap indique que les éléments restent sur la même ligne. wrap et wrap-reverse provoquent une nouvelle ligne. flex-flow Regroupe les deux propriétés flex-direction et flex-wrap justify-content Alignement des élément par rapport à l’axe principal qui est le contenteur. La valeur flex-start les aligne au début, flex-end à la fin, center au centre, space-between espace les éléments et space-around les espace avec des marges à l’intérieur. Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
  95. 95. Technologies et Développement Web Possibilité du flexbox - Suite 95 Description align-items Deuxième axe d’alignement des enfants, par rapport à eux même. Valeurs possibles : flex-end : flex (appliquée aux enfants) Indique le montant d’espace à utiliser dans l’espace restant. Une valeur de 2 signifie un double d’une valeur de 1, une valeur de 9 signifie le triple de 3, …etc. align-self Aligne un seul élément par rapport aux autres Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
  96. 96. 96 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine
  97. 97. Technologies et Développement Web Introduction 97  Les propriétés « width » et « height » définissent la largeur et hauteur d’une image  Les propriétés « float » permet de faire flotter une image par rapport à un texte Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Beaucoup de concepts CSS s’appliquent aux images
  98. 98. Technologies et Développement Web Arrière plan de type image  La propriété « background-image » permet de définir une image comme un arrière plan (voir images.html)  La propriété « background-repeat » permet de définir la répétition de l’arrière plan : horizontal (repeat-x) ou vertical (repeat-y). La valeur « norepeat » désactive la répétition.  La propriété « background-attachment » définit le comportement de l’arrière plan par rapport à la page. Une valeur de « fixed » fixe l’arrière plan tandis que « scroll » le fait défiler avec la page. Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 98
  99. 99. Technologies et Développement Web Position de l’arrière plan  La position de l’arrière plan est définie avec « backgroundposition »  Des valeurs comme « left top », « center center » ou « bottom right » sont acceptées  Les propriété « background-position-x » et « background-positiony » définissent le décalage de l’arrière plan. Les valeurs peuvent être en pixel ou en pourcentage. Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 99
  100. 100. Technologies et Développement Web Alias  Toutes les valeurs de l’arrière plan peuvent être utilisées avec l’alias « background »  Ordre : couleur  image  répétition  attachement  position background: red url("Images/bois.jpg") repeat-y scroll 0 0; Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 100
  101. 101. Technologies et Développement Web Dégradés CSS3  CSS3 introduit la possibilité de définir des dégradés directement en utilisant la propriété « background-image » sans passer par des images  CSS3 supporte les dégradés linéaires et les dégradés radiaux Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 101
  102. 102. Technologies et Développement Web Dégradés linéaires 102  x, y : direction (to left / to right, to top, to bottom, to right bottom)  Couleurs : couleurs constituant le dégradé Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  background : linear-gradient(x y, couleur1, couleur2, couleurN)
  103. 103. Technologies et Développement Web Dégradés radiaux  background : radial-gradient(ellipse at x, y, couleur1, couleur2, couleurN)  x, y : direction (top, center,…)  Couleurs : couleurs constituant le dégradé Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 103
  104. 104. Technologies et Développement Web 104 Courrs 3 - Les Feuilles de Styles (CSS) Images et dégradés Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine
  105. 105. Technologies et Développement Web Cours 3 – Les Feuilles de Styles (CSS) 105 Section 8 : Les transitions et les transformations (CSS3) Copyright © 2013, Mostefai Mohammed Amine
  106. 106. Technologies et Développement Web Introduction  Les transitions CSS3 permettent aux développeurs d’effectuer des animations simples sans passer par JavaScript  Le support des transitions reste limité aux navigateurs récents  Le principe des transitions est de changer la valeur une propriété CSS d’une manière douce et progressive ce qui donne l’effet d’une animation  Exemples : changer de couleur, de dimension, …etc. Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 106
  107. 107. Technologies et Développement Web Propriétés 107 Description transition-property Propriétés à animer. Peut être « all » pour toutes les propriétés animables ou « none » pour aucune. Peut aussi contenir plusieurs noms de propriétés à condition que ces propriétés soient animables. transition-duration Durée de la transition. Spécifiée en secondes (s) ou millisecondes (ms). transition-timing-function Fonction d’interpolation, gère la vitesse de l’animation. transition-delay Retard ou avance de la transition (en secondes ou millisecondes) transition Un alias pour les paramètres de transition Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
  108. 108. Technologies et Développement Web Propriétés animables  La liste des propriétés animables est disponibles sur http://www.w3.org/TR/css3-transitions/#properties-from-css Pour qu’une propriété soit animable, le navigateur doit être capable de faire des interpolations dessus. Par exemple les couleurs et les dimensions sont animables.  Voir transitions.html Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 108
  109. 109. Technologies et Développement Web transition-timing-function 109 Description ease Rapide au début, lent à la fin linear Vitesse constante ease-in Lent au début, rapide à la fin ease-in-out Lent au début et à la fin steps Exécute l’animation en plusieurs étapes discrètes. Par exemple steps (5,start) ou steps (3,end) début ou fin. Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
  110. 110. Technologies et Développement Web 110  Les transitions peuvent être déclenchée par JavaScript simplement en changeant une propriété sur laquelle a été paramétrée une transition  Le changement d’une propriété CSS se fait via la propriété « style » d’un élément Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Déclenchement des transitions par JavaScript
  111. 111. Technologies et Développement Web Introduction aux transformations  Les transformations sont des actions géométriques (tels quel la rotation ou la translation) qui sont effectués sur des éléments HTML  Il existe deux types de transformations : en deux dimensions et en 3 dimensions  Les transformations 2D sont plus largement supportées que les transformations 3d Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 111
  112. 112. Technologies et Développement Web Transformations (transformations.html) Description none Pas de transformation translate(x,y) Translation deux dimensions translate3d(x,y,z) Translation 3d translateX(x), translateY(y) et / ou translateZ(z) Translation sur l’un des trois axes scale(x,y) Mise à l’échelle. Une valeur 1 correspond à la même taille, 0.5 à la moitié et 2 double scale3d(x,y,z) Mise à l’échelle 3 dimensions scaleX(x), scaleY(y) ou scaleZ(z) Mise à l’échelle sur l’un des trois axes Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété 112
  113. 113. Technologies et Développement Web Transformations (transformations.html) - Suite Description rotate(a) Où a est un angle, rotation d’un élément rotate3d(x,y,z,a) Rotation 3 dimensions rotateX(x), rotateY(y) ou rotateZ(z) Rotation sur l’un des trois angles skew(a,b) Où a et b sont des angles. Inclinaison bidimensionnelle de l’élément skewX(x) ou skewY(y) Inclinaison sur l’un des deux axes matrix(n1..n6) Transformation sur matrice 2d matrix3d(n1..n16) Transformation matrice 3d perspective(n) Perspective 3d Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété 113
  114. 114. Technologies et Développement Web Introduction aux transformations  Les transformations sont des actions géométriques (tels quel la rotation ou la translation) qui sont effectués sur des éléments HTML  Il existe deux types de transformations : en deux dimensions et en 3 dimensions  Les transformations 2D sont plus largement supportées que les transformations 3d Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 114
  115. 115. Technologies et Développement Web Origine des transformations 115  La propriété transform-origin définit l’origine de la transformation Courrs 3 - Les Feuilles de Styles (CSS)  Syntaxe : tansform-origin : axe-x axe-y axe-z  Par défaut, les valeurs sont 50% 50% 0 Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine
  116. 116. Technologies et Développement Web 116 Courrs 3 - Les Feuilles de Styles (CSS) Transitions et Transformations Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine
  117. 117. Technologies et Développement Web Cours 3 – Les Feuilles de Styles (CSS) 117 Section 9 : Animations (CSS3) Copyright © 2013, Mostefai Mohammed Amine
  118. 118. Technologies et Développement Web Introduction  Contrairement aux transitions qui animent une seule propriété sur une période, les animations sont constituées de plusieurs cadres et chaque cadre anime une ou plusieurs propriétés  Une animation contient au moins deux cadres  Les navigateurs utilisent le GPU pour les animations Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 118
  119. 119. Technologies et Développement Web Déclaration des cadres 119 @keyframes nom_de_l_animation from Courrs 3 - Les Feuilles de Styles (CSS) { { propriété_à_animer: valeur_initiale; } 50% { propriété_à_animer: valeur_intermédiaire; } to { propriété_à_animer: valeur_finale; } } Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine
  120. 120. Technologies et Développement Web Propriétés d’animation (Voir animations.html) Description animation-name Nom de l’animation animation-duration Durée de l’animation animation-iteration-count Nombre d’itérations. « infinite » signifie une animation infinie. animation-timing-function Fonction d’interpolation utilisée pour l’animation. Les mêmes que celles des transitions. animation-direction Direction de l’animation : normal, alternate, reverse ou alternate-reverse animation-play-state Statut de l’animation (running, paused) animation-delay Délai de lecture Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété 120
  121. 121. Technologies et Développement Web 121 Courrs 3 - Les Feuilles de Styles (CSS) Animations Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine
  122. 122. Technologies et Développement Web Bibliographie 122  Jon Duckett, HTML & CSS, Wiley Editions  Tutoriaux Alsacréation  « Introduction aux animations CSS3 », David Rousset Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine

×