http://meyerweb.com/eric/html-xhtml/html5logo/                                                         CSS3http://css-tric...
CSS3 - Nouveautés•Évolution technique et technologique•Pourquoi débuter maintenant•Stratégie•Modules CSS3
ÉVOLUTION TECHNIQUE ET TECHNOLOGIQUE         http://www.flickr.com/photos/raneko/4204026836/in/photostream/
1, 675 TECHNIQUES ULTIMES QUI VONT VOUSPERMMETTRE DE DEVENIR UN NINJA DU CSS
Problèmes = Solutions documentés, workarounds pournavigateurs, groupes de supports, partages detechniques, etc.           ...
http://www.flickr.com/photos/pete-karl/3654692936/
/* http://meyerweb.com/eric/tools/css/reset/   v2.0 | 20110126   License: none (public domain)*/html, body, div, span, app...
Aujourd’hui nos sites sont :     http://www.flickr.com/photos/ajc1/4663140532/
Aujourd’hui nos sites sont :                                                    Mulit-platforme     http://www.flickr.com/p...
Aujourd’hui nos sites sont :                                                    Mulit-platforme                           ...
Aujourd’hui nos sites sont :                                                    Mulit-platforme                           ...
Aujourd’hui nos sites sont :                                                    Mulit-platforme                           ...
Aujourd’hui nos sites sont :                                                    Mulit-platforme                           ...
Accélération des sorties des navigateurs               http://meyerweb.com/eric/browsers/timeline-structured.html
Les navigateurs modernes gagnent du terrain.                      http://gs.statcounter.com/
“10 years ago a browser was born. Its name was InternetExplorer 6. Now that we’re in 2011, in an era of modern webstandard...
Le design doit être identique sur tous les navigateurs                                    http://www.flickr.com/photos/jsta...
Le design doit être identique sur tous les navigateurs                                    http://www.flickr.com/photos/jsta...
Augmentation des mobiles et contextes d’utilisations                      http://gs.statcounter.com/
POURQUOI DÉBUTER  MAINTENANT
CSS3 vs. CSS: A Speed Benchmark                                  1. linear-gradient                                  2. bo...
Résultats : Diminution du temps de chargement“Pour moi, CSS3 a été non seulement plus rapide maisbeaucoup plus agréable,pa...
Temps de production, de maintenance et coûts réduits                http://www.flickr.com/photos/disowned/1158857526/
STRATÉGIE•Statuts des modules•Priorités des modules•Support des navigateurs•Choix et implantation des alternatives(Fallbac...
Statuts des modulesCompleted work REC W3C RecommendationDrafts  PR     Proposed Recommendation  CR     Candidate Recommend...
Priorités des modules                                            Completed work                                           ...
Support des navigateurs•caniuse.com•QuirksMode - CSS contents and browser compatibility•Robert Nyman - CSS3 - Information ...
Choix et implantation des alternatives
MODULES CSS3
PR CSS COLOR MODULE LEVEL 3RGB(A), HSL(A) et noms de couleurs•≠ propriété, = nouveau modèle de couleur•Valeur RGB ou HSL a...
opacity•Opacité d’un élément de 0 à 1•RGBa = 1 couleur / Opacity = 1 élément + enfants                   http://www.findmeb...
PR           SELECTORS LEVEL 3[att]•Attribut att, peut importe la valeur de l’attribut
PR           SELECTORS LEVEL 3[att]•Attribut att, peut importe la valeur de l’attribut[att=val]•Attribut att et la valeur ...
PR           SELECTORS LEVEL 3[att]•Attribut att, peut importe la valeur de l’attribut[att=val]•Attribut att et la valeur ...
[att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour l...
[att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour l...
[att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour l...
[att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour l...
::first-line•Représente la première ligne formatté d’un élément.
::first-line•Représente la première ligne formatté d’un élément.::first-letter•Représente la première lettre d’un élément, s...
The target pseudo-class :target•Certaines URIs ce terminant par # et un identifiant de fragement refère à un emplacement da...
The target pseudo-class :target•Certaines URIs ce terminant par # et un identifiant de fragement refère à un emplacement da...
General sibling combinator (~)•Fait de 2 séquences de sélecteurs séparés par ~. Les éléments représenté par ces deux séque...
CR      CSS BACKGROUNDS AND     BORDERS MODULE LEVEL 3Background-image•Plusieurs image de background sur un élément•Séparé...
http://robertnyman.com/css3/
Background-clip•Spécifie la zone de peinture de fond du background•“border-box” Affiché à l’intérieur du border-box•“padding...
Background-origin•Spécifie comment la position du background est calculé•“border-box” Positionné relativement selon la bord...
Background-size•Spécifie la taille de l’image de background•La première valeur donne la largeur tandis que la deuxième vale...
Border-radius•Arrondis les coins d’un élément avec une valeur de rayon (%, px ou ems)•Possibilité de contrôlé chaque coins...
Box-shadow•Ajoute une ombre à un élément•Possibilité de combiné avec RGBa pour un effet•La première valeur = au décalage h...
CR               MEDIA QUERIES•Étiquettage plus précis des feuilles de styles•width, height, min/max, color, orientation, ...
Responsive Web Design•Le site doit être construit avec une grille flexible.•Les images dans le design doivent être flexibles...
CR CSS MULTI-COLUMN LAYOUT          MODULE•Mise en page avec colonnes ≠ floats•Nous pouvons définir un système de colonnes s...
CR     CSS3 BASIC USER INTERFACE              MODULEbox-sizing•content-box = width, height et min/max appliqué au content ...
Outline•Agit comme border (width, style, color)•+ outline-offsetMAIS•Ils ne prenne pas d’espace•Peuvent être non-rectangul...
WD           CSS TEXT LEVEL 3text-shadow•Propriété CSS2 abandonné dans CSS 2.1 et ré-introduis dans CSS3•Ajout d’une ombre...
http://robertnyman.com/css3/http://unitinteractive.com/blog/test/textshadow.html
WD CSS FONTS MODULE LEVEL 3•Utilisation de fonts plus variés. Pas de Flash, pas de JavaScripts•Vérifier la licence EULA (En...
http://www.fontspring.com/fontface
http://fffo.grahambird.co.uk/http://robertnyman.com/css3/
WD        CSS 2D TRANSFORMS          MODULE LEVEL 3•Développé initialement par l’équipe de WebKit et ensuite incorporé au ...
Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’or...
Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’or...
Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’or...
Skew•Skew prends les coordonnés x et y et penche un élément.
Skew•Skew prends les coordonnés x et y et penche un élément.Translate•Translate déplace les éléments via les coordonnés x/...
Skew•Skew prends les coordonnés x et y et penche un élément.Translate•Translate déplace les éléments via les coordonnés x/...
WD     CSS TRANSITIONS MODULE             LEVEL 3•Développé initialement par l’équipe de WebKit et ensuite incorporé au W3...
transition-timing-function•ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier
Transition pour plusieurs propriétés•Séparés par une virgule (,)•Chacuns peu avoir ses fonctionnalités de temps et de délais
RESSOURCESLiens d’introduction•http://meyerweb.com/eric/html-xhtml/html5logo/Support des navigateurs•caniuse.com•QuirksMod...
CSS3 Selectors•CSS3 Selectors TestCSS3 Font-face•Font Squirrel @font-face generator•Review of Popular Web Font Embedding S...
Générateurs•http://css3generator.com/•http://css3please.com/•http://www.css3maker.com/index.html•http://border-radius.com/...
CSS3                    CSS3 Logo by W3Chttp://www.slideshare.net/rsavard/css3-webeducation          @REMYSAVARD
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
CSS3 WebEducation
Upcoming SlideShare
Loading in...5
×

CSS3 WebEducation

1,518

Published on

CSS3, qui est parfois assimilé avec le HTML5, est de mieux en mieux pris en charge par les navigateurs Web modernes. Quels sont les nouvelles fonctionnalités de CSS3 et quels stratégies s’offrent à nous pour commencer l’utilisation de celles-ci dès maintenant ? Comment implémenter les fonctionnalités les mieux supportés de CSS3.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,518
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "CSS3 WebEducation"

    1. 1. http://meyerweb.com/eric/html-xhtml/html5logo/ CSS3http://css-tricks.com/overriding-the-default-text-selection-color-with-css/http://spigotdesign.com/ CSS3 Logo by W3C Nouveautés 19 mai 2011 - Rémy Savard
    2. 2. CSS3 - Nouveautés•Évolution technique et technologique•Pourquoi débuter maintenant•Stratégie•Modules CSS3
    3. 3. ÉVOLUTION TECHNIQUE ET TECHNOLOGIQUE http://www.flickr.com/photos/raneko/4204026836/in/photostream/
    4. 4. 1, 675 TECHNIQUES ULTIMES QUI VONT VOUSPERMMETTRE DE DEVENIR UN NINJA DU CSS
    5. 5. Problèmes = Solutions documentés, workarounds pournavigateurs, groupes de supports, partages detechniques, etc. http://www.flickr.com/photos/kartooner/32891895/
    6. 6. http://www.flickr.com/photos/pete-karl/3654692936/
    7. 7. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object,iframe,h1, h2, h3, h4, h5, h6, p, blockquote,pre,a, abbr, acronym, address, big, cite,code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr,th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header,hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} http://www.flickr.com/photos/aquan/2780541892/ http://www.flickr.com/photos/aquan/2780541892/
    8. 8. Aujourd’hui nos sites sont : http://www.flickr.com/photos/ajc1/4663140532/
    9. 9. Aujourd’hui nos sites sont : Mulit-platforme http://www.flickr.com/photos/ajc1/4663140532/
    10. 10. Aujourd’hui nos sites sont : Mulit-platforme Accessible http://www.flickr.com/photos/ajc1/4663140532/
    11. 11. Aujourd’hui nos sites sont : Mulit-platforme Accessible Sémantique http://www.flickr.com/photos/ajc1/4663140532/
    12. 12. Aujourd’hui nos sites sont : Mulit-platforme Accessible Sémantique Optimisé http://www.flickr.com/photos/ajc1/4663140532/
    13. 13. Aujourd’hui nos sites sont : Mulit-platforme Accessible Sémantique Optimisé Standard http://www.flickr.com/photos/ajc1/4663140532/
    14. 14. Accélération des sorties des navigateurs http://meyerweb.com/eric/browsers/timeline-structured.html
    15. 15. Les navigateurs modernes gagnent du terrain. http://gs.statcounter.com/
    16. 16. “10 years ago a browser was born. Its name was InternetExplorer 6. Now that we’re in 2011, in an era of modern webstandards, it’s time to say goodbye.” Microsoft - http://www.theie6countdown.com/
    17. 17. Le design doit être identique sur tous les navigateurs http://www.flickr.com/photos/jstar/2338025074/
    18. 18. Le design doit être identique sur tous les navigateurs http://www.flickr.com/photos/jstar/2338025074/
    19. 19. Augmentation des mobiles et contextes d’utilisations http://gs.statcounter.com/
    20. 20. POURQUOI DÉBUTER MAINTENANT
    21. 21. CSS3 vs. CSS: A Speed Benchmark 1. linear-gradient 2. border-radius 3. radial-gradient 4. text-shadow 5. box-shadow with RGBa http://www.smashingmagazine.com/2011/04/21/css3- vs-css-a-speed-benchmark/
    22. 22. Résultats : Diminution du temps de chargement“Pour moi, CSS3 a été non seulement plus rapide maisbeaucoup plus agréable,parce que jétais concentré sur uneseule fenêtre (mon éditeur CSS)[...]. Dautre part, le tranchageet le transfert des images à partir de Photoshop à FTP àléditeur CSS à été une corvée, ce qui a pris plus de temps.”Trent Walton - http://www.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/
    23. 23. Temps de production, de maintenance et coûts réduits http://www.flickr.com/photos/disowned/1158857526/
    24. 24. STRATÉGIE•Statuts des modules•Priorités des modules•Support des navigateurs•Choix et implantation des alternatives(Fallbacks)
    25. 25. Statuts des modulesCompleted work REC W3C RecommendationDrafts PR Proposed Recommendation CR Candidate Recommendation LC Last Call Draft WD Working Draft http://www.w3.org/standards/techs/css#w3c_all
    26. 26. Priorités des modules Completed work High priority Medium priority Low Priority http://www.w3.org/Style/CSS/current-work
    27. 27. Support des navigateurs•caniuse.com•QuirksMode - CSS contents and browser compatibility•Robert Nyman - CSS3 - Information and samples•findmebyIP - HTML5 & CSS3 Support http://morcha.blogbus.com/logs/30886671.html
    28. 28. Choix et implantation des alternatives
    29. 29. MODULES CSS3
    30. 30. PR CSS COLOR MODULE LEVEL 3RGB(A), HSL(A) et noms de couleurs•≠ propriété, = nouveau modèle de couleur•Valeur RGB ou HSL avec optionnellement l’opacité http://robertnyman.com/css3/
    31. 31. opacity•Opacité d’un élément de 0 à 1•RGBa = 1 couleur / Opacity = 1 élément + enfants http://www.findmebyip.com/litmus/
    32. 32. PR SELECTORS LEVEL 3[att]•Attribut att, peut importe la valeur de l’attribut
    33. 33. PR SELECTORS LEVEL 3[att]•Attribut att, peut importe la valeur de l’attribut[att=val]•Attribut att et la valeur exact val
    34. 34. PR SELECTORS LEVEL 3[att]•Attribut att, peut importe la valeur de l’attribut[att=val]•Attribut att et la valeur exact val[att~=val]•Attribut att avec des valeurs séparés par des espaces, l’une d’elles doit être val
    35. 35. [att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour les sous-code de languages
    36. 36. [att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour les sous-code de languages[att^=val]•Attribut att et une valeur qui commence par val
    37. 37. [att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour les sous-code de languages[att^=val]•Attribut att et une valeur qui commence par val[att$=val]•Attribut att et une valeur qui se termine par val
    38. 38. [att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour les sous-code de languages[att^=val]•Attribut att et une valeur qui commence par val[att$=val]•Attribut att et une valeur qui se termine par val[att*=val]•Attribut att et une valeur qui contient au moins une instance de la substring val
    39. 39. ::first-line•Représente la première ligne formatté d’un élément.
    40. 40. ::first-line•Représente la première ligne formatté d’un élément.::first-letter•Représente la première lettre d’un élément, si elle n’est pas précédé par aucuns autres éléments de contenu (images) sur sa ligne.•Utiliser pour donner du style•La ponctuation qui précède ou suit le première lettre devrait être inclus•Pourrait être un chiffre. 67 millions = 6
    41. 41. The target pseudo-class :target•Certaines URIs ce terminant par # et un identifiant de fragement refère à un emplacement dans une ressource.•Exemple: http://example.com/html/top.html#section_2•Ces URIs ciblent vers un élément dans le document, connu comme l’élément cible.
    42. 42. The target pseudo-class :target•Certaines URIs ce terminant par # et un identifiant de fragement refère à un emplacement dans une ressource.•Exemple: http://example.com/html/top.html#section_2•Ces URIs ciblent vers un élément dans le document, connu comme l’élément cible.::selection•Change la couleur de background et de texte des sélections.•http://css-tricks.com/overriding-the-default-text- selection-color-with-css/
    43. 43. General sibling combinator (~)•Fait de 2 séquences de sélecteurs séparés par ~. Les éléments représenté par ces deux séquences partagent le même parent et l’élément représenté par la première séquence précède (Pas nécessairement immédiatement) l’élément représenté par la deuxième séquence. http://www.quirksmode.org/css/selector_sibling.html
    44. 44. CR CSS BACKGROUNDS AND BORDERS MODULE LEVEL 3Background-image•Plusieurs image de background sur un élément•Séparés par une virgule (,)•Les navigateurs qui ne supportent pas vont ignoré la règle, donc mettre une déclaration simple avant•La première image dans la liste est la plus près de l’utilisateur
    45. 45. http://robertnyman.com/css3/
    46. 46. Background-clip•Spécifie la zone de peinture de fond du background•“border-box” Affiché à l’intérieur du border-box•“padding-box” Affiché à l’intérieur du padding-box•“content-box” Affiché à l’intérieur du content-box http://robertnyman.com/css3/
    47. 47. Background-origin•Spécifie comment la position du background est calculé•“border-box” Positionné relativement selon la bordure•“padding-box” Positionné relativement selon le padding•“content-box” Positionné relativement selon le contenu http://robertnyman.com/css3/
    48. 48. Background-size•Spécifie la taille de l’image de background•La première valeur donne la largeur tandis que la deuxième valeur donne la hauteur•Si une des dimensions à sa valeur à auto, l’image doit garder son ration. http://robertnyman.com/css3/
    49. 49. Border-radius•Arrondis les coins d’un élément avec une valeur de rayon (%, px ou ems)•Possibilité de contrôlé chaque coins•IE7 et IE8 = coins carrés devraient être acceptables http://robertnyman.com/css3/
    50. 50. Box-shadow•Ajoute une ombre à un élément•Possibilité de combiné avec RGBa pour un effet•La première valeur = au décalage horizontal, la seconde = décalage vertical et la troisième valeur = rayon de flou. Finalement, couleur pour l’ombrage•Pour créé une effet plus naturel de 3D il est possible d’ajouter une 2e ombre http://robertnyman.com/css3/
    51. 51. CR MEDIA QUERIES•Étiquettage plus précis des feuilles de styles•width, height, min/max, color, orientation, aspect-ratio, etc•Outil pour “Responsive Web Design”•Changement de CSS en haut de 800px de large: http://robertnyman.com/css3/
    52. 52. Responsive Web Design•Le site doit être construit avec une grille flexible.•Les images dans le design doivent être flexibles.•Différentes vues doivent êtres offertes pour les différents contextes via les media queries. http://sixrevisions.com/web_design/understanding-the-elements-of-responsive-web-design/ http://mediaqueri.es/
    53. 53. CR CSS MULTI-COLUMN LAYOUT MODULE•Mise en page avec colonnes ≠ floats•Nous pouvons définir un système de colonnes soit en définissant le nombre de colonnes ou la largeur des colonnes•Le contenu peut continuer d’une colonne à une autre http://robertnyman.com/css3/
    54. 54. CR CSS3 BASIC USER INTERFACE MODULEbox-sizing•content-box = width, height et min/max appliqué au content box. Padding et border à l’éxtérieur des dimensions•border-box = width, height et min/max détermine le border box. Padding et border compris dans les dimensions http://robertnyman.com/css3/
    55. 55. Outline•Agit comme border (width, style, color)•+ outline-offsetMAIS•Ils ne prenne pas d’espace•Peuvent être non-rectangulaire http://robertnyman.com/css3/
    56. 56. WD CSS TEXT LEVEL 3text-shadow•Propriété CSS2 abandonné dans CSS 2.1 et ré-introduis dans CSS3•Ajout d’une ombre au texte, avec des options de direction, quantité de flou et couleur de l’ombre•Les 2 premières valeurs servent au décalage horizontal et vertical. La 3e valeur est le rayon du dégradé de l’ombre. Finalement, la couleur de l’ombre•Valeurs négatives acceptés•Possibilité de mettre plusieurs ombres
    57. 57. http://robertnyman.com/css3/http://unitinteractive.com/blog/test/textshadow.html
    58. 58. WD CSS FONTS MODULE LEVEL 3•Utilisation de fonts plus variés. Pas de Flash, pas de JavaScripts•Vérifier la licence EULA (End User License Agreement)•La police doit se trouver sur le même domaine
    59. 59. http://www.fontspring.com/fontface
    60. 60. http://fffo.grahambird.co.uk/http://robertnyman.com/css3/
    61. 61. WD CSS 2D TRANSFORMS MODULE LEVEL 3•Développé initialement par l’équipe de WebKit et ensuite incorporé au W3C•Permet au élément rendu par CSS d’être transformé dans un espace en 2 dimensions http://robertnyman.com/css3/
    62. 62. Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’origine
    63. 63. Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’origineRotate
    64. 64. Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’origineRotate
    65. 65. Skew•Skew prends les coordonnés x et y et penche un élément.
    66. 66. Skew•Skew prends les coordonnés x et y et penche un élément.Translate•Translate déplace les éléments via les coordonnés x/y•Valeurs négatives acceptés
    67. 67. Skew•Skew prends les coordonnés x et y et penche un élément.Translate•Translate déplace les éléments via les coordonnés x/y•Valeurs négatives acceptés
    68. 68. WD CSS TRANSITIONS MODULE LEVEL 3•Développé initialement par l’équipe de WebKit et ensuite incorporé au W3C•Changement des valeurs dans les CSS lorsque qu’une interaction est déclenché (hover)•Liste des propriétés qui peuvent être en transition http://robertnyman.com/css3/
    69. 69. transition-timing-function•ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier
    70. 70. Transition pour plusieurs propriétés•Séparés par une virgule (,)•Chacuns peu avoir ses fonctionnalités de temps et de délais
    71. 71. RESSOURCESLiens d’introduction•http://meyerweb.com/eric/html-xhtml/html5logo/Support des navigateurs•caniuse.com•QuirksMode - CSS contents and browser compatibility•Robert Nyman - CSS3 - Information and samples•findmebyIP - HTML5 & CSS3 Support•universal-ie6-css
    72. 72. CSS3 Selectors•CSS3 Selectors TestCSS3 Font-face•Font Squirrel @font-face generator•Review of Popular Web Font Embedding ServicesMedia Queries•CSS 3 Media Queries for all Browser (jQuery Plugin)•css3-mediaqueries-js•Respond•1140 CSS Grid•ProtoFluid•Hardboiled CSS3 Media Queries•Responsive-Images
    73. 73. Générateurs•http://css3generator.com/•http://css3please.com/•http://www.css3maker.com/index.html•http://border-radius.com/•http://css3-buttons.heroku.com/generator•http://www.colorzilla.com/gradient-editor/
    74. 74. CSS3 CSS3 Logo by W3Chttp://www.slideshare.net/rsavard/css3-webeducation @REMYSAVARD
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×