CSS3 - Possibilite creatives

2 403 vues

Publié le

Possibilités créatives avec CSS3

Publié dans : Technologie
1 commentaire
1 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
2 403
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
65
Commentaires
1
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • \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
  • CSS3 - Possibilite creatives

    1. 1. CSS3 CSS3 Logo by W3CPossibilités créatives 8 mars 2011 - Rémy Savard
    2. 2. UN PEU D’HISTOIRE1996•Première spécification CSS à devenir une Recommandation W3C Officiel, CSS Level 1(CSS1)
    3. 3. UN PEU D’HISTOIRE1996•Première spécification CSS à devenir une Recommandation W3C Officiel, CSS Level 1(CSS1)1997•Le  HTML Editorial Review Board (ERB) se divise en 3 groupes: HTML Working group, DOM Working group et CSS Working group•Création de CSS level 2 par le CSS Working Group•Le W3C ne maintient plus la recommandation CSS1
    4. 4. 1998•La spécification CSS2 devient une recommandation•CSS2 inclus: positionnement absolu, relatif et fixé + ...•CSS2 révision 1: Retrait des fonctionnalités mal pris en charge•Développement de la spécification CSS3•Le W3C ne maintient plus la recommandation CSS2
    5. 5. 1998•La spécification CSS2 devient une recommandation•CSS2 inclus: positionnement absolu, relatif et fixé + ...•CSS2 révision 1: Retrait des fonctionnalités mal pris en charge•Développement de la spécification CSS3•Le W3C ne maintient plus la recommandation CSS21999•Le premier draft CSS3 est publié
    6. 6. http://www.flickr.com/photos/jasperfields/2442146122/
    7. 7. 2005•Des standard déjà publié tel que CSS 2.1, CSS 3 Selectors et CSS 3 Text sont ramenés de Candidate Recommendation à Working Draft•CSS 2.1 devient Candidate Recommendation, mais est renversé à l’état de Working Draft quelques mois après
    8. 8. 2005•Des standard déjà publié tel que CSS 2.1, CSS 3 Selectors et CSS 3 Text sont ramenés de Candidate Recommendation à Working Draft•CSS 2.1 devient Candidate Recommendation, mais est renversé à l’état de Working Draft quelques mois après2007•CSS 2.1 devient Candidate Recommendation
    9. 9. 2005•Des standard déjà publié tel que CSS 2.1, CSS 3 Selectors et CSS 3 Text sont ramenés de Candidate Recommendation à Working Draft•CSS 2.1 devient Candidate Recommendation, mais est renversé à l’état de Working Draft quelques mois après2007•CSS 2.1 devient Candidate Recommendation2009•CSS 2.1 est mis à jour 2 fois
    10. 10. 2005•Des standard déjà publié tel que CSS 2.1, CSS 3 Selectors et CSS 3 Text sont ramenés de Candidate Recommendation à Working Draft•CSS 2.1 devient Candidate Recommendation, mais est renversé à l’état de Working Draft quelques mois après2007•CSS 2.1 devient Candidate Recommendation2009•CSS 2.1 est mis à jour 2 fois2010•CSS 2.1 est renversé à l’état de Working Draft
    11. 11. “CSS is designed primarily to enable the separation ofdocument content (written in HTML or a similar markuplanguage) from document presentation, including elementssuch as the layout, colors, and fonts.”Wikipedia - http://en.wikipedia.org/wiki/Cascading_Style_Sheets
    12. 12. Aujourd’hui
    13. 13. Aujourd’hui1, 675 ULTIMATE CSS TECHNIQUES YOU WISHYOU KNEW BEFORE AND WILL HELP YOUBECOME A NINJA WEB DESIGNER
    14. 14. Aujourd’hui•Problèmes = Solutions documentés, workarounds pour les bugs de navigateurs, groupes de supports, partages de techniques, etc.•Sortie des navigateurs au ralentie = Temps pour fabriqué des approches réutilisable + des bonnes pratiques•Obsession du pixel perfect sur tous les navigateurs•Regroupé et nommé ces bonne pratiques (site utilisables, mulit-platforme, accessible, flexible, sémantique, optimal, standard, indexable)
    15. 15. Graceful degradation•Navigateurs modernes•Tests = Versions précédentes des navigateurs principaux•Anciens navigateurs = pauvre/expérience passable, petits fixes + pas le focus/peu d’attention
    16. 16. Graceful degradation•Navigateurs modernes•Tests = Versions précédentes des navigateurs principaux•Anciens navigateurs = pauvre/expérience passable, petits fixes + pas le focus/peu d’attentionProgressive enhancement•Focus sur le contenu, ≠ navigateurs•CSS2 et un peu de CSS3•Bloque le notre potentiel créatif
    17. 17. Graceful degradation•Navigateurs modernes•Tests = Versions précédentes des navigateurs principaux•Anciens navigateurs = pauvre/expérience passable, petits fixes + pas le focus/peu d’attentionProgressive enhancement•Focus sur le contenu, ≠ navigateurs•CSS2 et un peu de CSS3•Bloque le notre potentiel créatifHardboiled•Aucuns compromis, meilleur expérience Web possible•Expérience selon les capacités du navigateur (CSS3)•Design différent pour les navigateurs
    18. 18. Aujourd’hui•W3C = gardiens des standards technologiques Web•Standards/bonnes pratiques = recommandations•Aucune organisation légal qui force les navigateurs/ développeurs à suivre ces standards/bonnes pratiques•Support des navigateurs pour standards = Chanceux•Pixel Perfect = Abandonné les nouvelles technologies non supportés par tous les navigateurs•Pour avancé, nous devons changé notre façon de penser.
    19. 19. Demain•Accepter les nouvelles réalités•Les sites Web ≠ pareil dans tous les navigateurs•Augmentation des mobiles, TV et écrans de toutes tailles•Navigateurs sortent plus rapidement•Firefox et Safari on gagné du terrain•IE6 est mort => http://ie6countdown.com/•Regarder à l’avant, pas à l’arrière•Adopter les CSS3
    20. 20. Demain•Accepter les nouvelles réalités•Les sites Web ≠ pareil dans tous les navigateurs•Augmentation des mobiles, TV et écrans de toutes tailles•Navigateurs sortent plus rapidement•Firefox et Safari on gagné du terrain•IE6 est mort => http://ie6countdown.com/•Regarder à l’avant, pas à l’arrière•Adopter les CSS3dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
    21. 21. “Rather than attempting to shove dozens of updates into asingle monolithic specification, it will be much easier andmore efficient to be able to update individual pieces of thespecification. Modules will enable CSS to be updated in amore timely and precise fashion, thus allowing for a moreflexible and timely evolution of the specification as a whole.”W3C - http://www.w3.org/TR/css3-roadmap/
    22. 22. •Approche modulaire•Si on se limite aux normes finalisées = CSS2 de 1998•Utiliser les nouvelles technologies CSS3•Éduquer vos clients, expliqué les avantages des CSS3•Focusé sur les modules implémentés + priorité élevé•Utiliser les CSS3 supportés par les navigateurs modernes et offrez une alternative pour les autres (IE6, IE7 et IE8)
    23. 23. Avancement, priorités des modules, support•http://www.w3.org/standards/techs/css#w3c_all•http://www.w3.org/Style/CSS/current-work•http://caniuse.com•http://en.wikipedia.org/wiki/ Comparison_of_layout_engines_(Cascading_Style_Sheet s)•http://www.quirksmode.org/css/contents.html•http://www.findmebyip.com/litmus/•http://www.impressivewebs.com/css3-browser-support/
    24. 24. http://www.w3.org/Style/CSS/current-work
    25. 25. STRATÉGIE•Site Web identique dans les navigateurs = Coûteux•Commentaires conditionnel + feuilles de style pour IE•JavaScripts pour ajouter le support CSS3•Dévouer aucuns temps de développement/tests au anciens navigateurs = bad•Abandonné/exclure les usagers de ces navigateurs•http://code.google.com/p/universal-ie6-css/
    26. 26. FRAMEWORKSModernizr•Librairie JavaScript = Contrôle des navigateurs qui ne supportent pas encore CSS3 et HTML5•Détection de fonctionnailités•Ajout de classes à l’élément <html>•Plug and play•Ajout support éléments HTML5•12 Kb•Utilisé par: Twitter, Burger King, Posterous, NFL, Hardboiled Web Design, Lost World’s Fairs
    27. 27. Selectivzr•Utilitaire JavaScript qui émule les pseudo-classes(19) et les sélecteurs d’attribut pour Interner Explorer 6-7•Dépend d’une librairie JavaScript (7 supportés)•≠ Styles inlines•Feuilles de style hébergé sur le même domaine•Plug and play•8 Kb
    28. 28. Head JS•Détection pour les fonctionnalité CSS3•Génération de class pour les largeurs d’écran, les navigateurs et les URLs•2.5 Kb•CSS Routing - Fournit des styles selon l’URL•http://mydomain.com/addons/node/router.html
    29. 29. Autres frameworks•CSS3 PIE (http://css3pie.com/)•eCSSstender (http://ecsstender.org/)•ie7-js (http://code.google.com/p/ie7-js/)•cssSandpaper (http://www.useragentman.com/blog/ csssandpaper-a-css3-javascript-library/)
    30. 30. Pourquoi•Intéractions, animations, mouvements ≠ Flash/JavaScripts•Prendre en compte les largeur d’écrans•Sites Web flexible + temps de développement et coûts réduits.•Fonts variés, drop shadow, coins arrondis, sélecteurs avancés, transparence transitions, transformations, etc.
    31. 31. Pourquoi•Intéractions, animations, mouvements ≠ Flash/JavaScripts•Prendre en compte les largeur d’écrans•Sites Web flexible + temps de développement et coûts réduits.•Fonts variés, drop shadow, coins arrondis, sélecteurs avancés, transparence transitions, transformations, etc.Comment•Préfixes “vendor specific”•Définitions, exemples et code•Support des navigateurs, stratégie et outils•Exercices - situations courantes
    32. 32. PRÉFIXES “VENDOR-SPECIFIC”•Commence par - suivi de l’abbr. compagnie/navigateur•"-moz-", "-webkit-"•Ensuite, nom de la propriété•"-webkit-border-radius"•Spécification -> recommandation W3C = deux implémentations complète•Processus intéressant = Navigateurs + développeurs testes => Commentaires pour améliorer la spécification•Peuvent êtres utilisés pour expérimentations•Les validateurs devraient laccepté•Préfixe = En construction
    33. 33. •L’ordre est important = La propriété actuel dans le bas•Répétez les propriétés, c’est mieux que pas de CSS3•≠ hack•= Processus de standardisation du W3C•Filtres propriétaires Microsoft ≠ préfixes•https://github.com/codler/jQuery-Css3-Finalize
    34. 34. CSS COLOR MODULE LEVEL 3 (PR)RGB(A), HSL(A) et noms de couleurs•≠ propriété, = nouveau modèle de couleur•Valeur RGB ou HSL avec optionnellement l’opacité
    35. 35. CSS COLOR MODULE LEVEL 3 (PR)RGB(A), HSL(A) et noms de couleurs•≠ propriété, = nouveau modèle de couleur•Valeur RGB ou HSL avec optionnellement l’opacité
    36. 36. CSS COLOR MODULE LEVEL 3 (PR)RGB(A), HSL(A) et noms de couleurs•≠ propriété, = nouveau modèle de couleur•Valeur RGB ou HSL avec optionnellement l’opacité http://www.findmebyip.com/litmus/
    37. 37. CSS COLOR MODULE LEVEL 3 (PR)RGB(A), HSL(A) et noms de couleurs•≠ propriété, = nouveau modèle de couleur•Valeur RGB ou HSL avec optionnellement l’opacité http://www.findmebyip.com/litmus/
    38. 38. opacity•Opacité d’un élément de 0 à 1•RGBa = 1 couleur / Opacity = 1 élément + enfants
    39. 39. opacity•Opacité d’un élément de 0 à 1•RGBa = 1 couleur / Opacity = 1 élément + enfants http://www.findmebyip.com/litmus/
    40. 40. SELECTORS LEVEL 3 (PR)[att]•Attribut att, peut importe la valeur de l’attribut
    41. 41. SELECTORS LEVEL 3 (PR)[att]•Attribut att, peut importe la valeur de l’attribut[att=val]•Attribut att et la valeur exact val
    42. 42. SELECTORS LEVEL 3 (PR)[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
    43. 43. [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
    44. 44. [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
    45. 45. [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
    46. 46. [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
    47. 47. :root•Représente l’élément HTML
    48. 48. :root•Représente l’élément HTML:nth-child(N)•L’argument N peut être un mot-clé, un nombre ou une expression de nombre sous la forme an+b•Mots-clé: odd(2n+1) et even(2n)•Si l’argument N est un nombre, il représente la position ordinale de l’élément sélectionné•Si l’argument a la forme an+b, a et b doivent être des nombres entiers (exemple, 3n+1). Le nombre b représente la position ordinale du premier élément sélectionné. Le nombre a représente la position ordinale de chaque éléments que nous voulons sélectionné après cela, si il existe
    49. 49. :nth-child(N) Suite....•Si a = b ou b =0 => b n’est pas nécessaire•3n+3 et 3n+0 = 3n = Chaque 3e éléments•Si a = 1 => a n’est pas nécessaire•1n+3 = n+3•Si a = 0 => Seulement b est requis•0n+5 = 5e élément•a et b peuvent êtres négatif, mais les éléments seront seulement sélectionnés si N à une valeur positive. http://reference.sitepoint.com/css/understandingnthchildexpressions
    50. 50. :nth-last-child(N)•Comme :nth-child(N) mais compte à partir du bas du document•li:nth-last-child(-n+4) => Les 4 derniers éléments d’une liste
    51. 51. :nth-last-child(N)•Comme :nth-child(N) mais compte à partir du bas du document•li:nth-last-child(-n+4) => Les 4 derniers éléments d’une liste:nth-of-type(N)•Comme :nth-child(N) mais sélectionne seulement les éléments qui ont le même type
    52. 52. :nth-last-of-type(N)•Comme :nth-last-child(N) mais sélectionne seulement les éléments qui ont le même nom
    53. 53. :nth-last-of-type(N)•Comme :nth-last-child(N) mais sélectionne seulement les éléments qui ont le même nom:first-child•Équivalent à :nth-child(1). Sélectionne le premier enfant du parent de l’élément
    54. 54. :nth-last-of-type(N)•Comme :nth-last-child(N) mais sélectionne seulement les éléments qui ont le même nom:first-child•Équivalent à :nth-child(1). Sélectionne le premier enfant du parent de l’élément:last-child•Équivalent à :nth-last-child(1). Sélectionne le dernier enfant du parent de l’élément
    55. 55. :first-of-type•Équivalent à :nth-of-type(1). Sélectionne le premier enfant du parent de l’élément du type d’élément spécifié
    56. 56. :first-of-type•Équivalent à :nth-of-type(1). Sélectionne le premier enfant du parent de l’élément du type d’élément spécifié:last-of-type•Équivalent à :nth-last-of-type(1). Sélectionne le dernier enfant du parent de l’élément du type d’élément spécifié
    57. 57. :first-of-type•Équivalent à :nth-of-type(1). Sélectionne le premier enfant du parent de l’élément du type d’élément spécifié:last-of-type•Équivalent à :nth-last-of-type(1). Sélectionne le dernier enfant du parent de l’élément du type d’élément spécifié:only-child•Représente un élément qui a un élément parent, qui n’a aucun autre éléments enfant.•Équivalent à :first-child:last-child ou :nth-child(1):nth-last- child(1)
    58. 58. :only-of-type•Élément qui a un élément parent, qui n’a aucun autre éléments enfant avec le même nom que celui-ci•Équivalent à :first-of-type:last-of-type ou :nth-of- type(1):nth-last-of-type(1)
    59. 59. :only-of-type•Élément qui a un élément parent, qui n’a aucun autre éléments enfant avec le même nom que celui-ci•Équivalent à :first-of-type:last-of-type ou :nth-of- type(1):nth-last-of-type(1):empty•Représente un élément qui n’a aucuns enfants
    60. 60. 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.•Un élément cible peut être représenté par la pseudo- class :target.
    61. 61. 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.•Un élément cible peut être représenté par la pseudo- class :target.The language pseudo-class :lang•Représente un sélecteur pour un élément selon sa langue si elle est spécifié
    62. 62. 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.•Un élément cible peut être représenté par la pseudo- class :target.The language pseudo-class :lang•Représente un sélecteur pour un élément selon sa langue si elle est spécifié
    63. 63. :enabled•Représente un élément de l’interface usager (ex: input) qui est dans l’état enabled
    64. 64. :enabled•Représente un élément de l’interface usager (ex: input) qui est dans l’état enabled:disabled•Représente un élément de l’interface usager (ex: input) qui est dans l’état disabled
    65. 65. :enabled•Représente un élément de l’interface usager (ex: input) qui est dans l’état enabled:disabled•Représente un élément de l’interface usager (ex: input) qui est dans l’état disabled:checked•Les éléments radio et checkbox peuvent être choisi par l’usager. Lorsque ces élément sont choisi(on) la pseudo- class :checked s’applique•Bon aussi pour les éléments qui peuvent avoir l’attribut selected
    66. 66. ::first-line•Représente la première ligne formatté d’un élément.
    67. 67. ::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
    68. 68. ::before et ::after•Les pseudo-éléments ::before et ::after peuvent êtres utilisés pour inséré du contenu généré avant ou après le contenu d’un élément.::selection•Change la couleur de background et de texte des sélections.•http://css-tricks.com/overriding-the-default-text- selection-color-with-css/
    69. 69. :not(X)•Prend comme argument un sélecteur, mais pas :not(X)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
    70. 70. •http://tools.css3.info/selectors-test/test.html•http://www.quirksmode.org/css/contents.html#CSS3
    71. 71. http://www.findmebyip.com/litmus/
    72. 72. CSS BACKGROUNDS AND BORDERS MODULE LEVEL 3(CR)Background-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
    73. 73. 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
    74. 74. 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.
    75. 75. 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
    76. 76. Border-image•Images de background à l’intérieur de la zone de bordure à la place d’un style•Les côtés et les coins sont pris de l’image spécifié, dont les parties seront découpé, redimentionné et tendu au besoin.•L’image fournit sera découpé en 9 partie selon une grille 3x3. Comme avec les guides dans Photoshop•Valeurs: Source de l’image suivit par la position des guides de découpe. Chaque partie de découpe devient une composante de la bordure: 4 coins, 4 côté entre les coins et la partie du centre (top, right, bottom, left)
    77. 77. • “stretch” L’image est étiré pour couvrir la zone•“repeat” L’image est tuilé et répété pour couvrir la zone•“round” L’image est tuilé et répété pour couvrir la zone. Si la zone n’est pas couverte avec un nombre complet de tuiles, les images sont redimensionnés afin qu’il couvrent la zone•“space”  L’image est tuilé et répété pour couvrir la zone. Si la zone n’est pas couverte avec un nombre complet de tuiles, les images se distribuent l’espace afin qu’ils couvrent la zone
    78. 78. 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
    79. 79. MEDIA QUERIES (CR)• Étendent les fonctionnalités des media type afin d’allouer une étiquettage plus précis des feuilles de styles•Parmis les fonctionnalité de media queries, “width”, “height” et “color” peuvent être utilisés afin de modifier la présentation pour être adaptées à une gamme de périphériques sans changer le contenu lui-même•Changement de CSS en haut de 800px de large:
    80. 80. •http://protofluid.com•http://mediaqueri.es/•http://stuffandnonsense.co.uk/blog/about/ hardboiled_css3_media_queriesFrameworks•http://www.protofunc.com/scripts/jquery/mediaqueries/•http://code.google.com/p/css3-mediaqueries-js/•https://github.com/scottjehl/Respond•http://lessframework.com/•http://cssgrid.net/
    81. 81. CSS MULTI-COLUMN LAYOUT MODULE (CR)•Misen 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•Les rules apparraissent dans le centre des gap
    82. 82. CSS TEXT LEVEL 3 (WD)text-shadow•Propriété CSS2 abandonné dans CSS 2.1 et ré-introduis dans CSS3•Ajout d’une ombre au text, 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. Finalment, la couleur de l’ombre•Valeurs négatives acceptés•Possibilité de mettre plusieurs ombres
    83. 83. •http://line25.com/articles/using-css-text-shadow-to- create-cool-text-effects•http://unitinteractive.com/blog/2010/11/03/text-shadow- and-too-much-time/
    84. 84. WEB FONTS (WD)•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•http://www.fontspring.com/fontface•http://fffo.grahambird.co.uk/•http://awesome-fontstacks.com/•http://www.fontsquirrel.com/fontface/generator•http://www.smashingmagazine.com/2010/10/20/review- of-popular-web-font-embedding-services/
    85. 85. CSS 2D TRANSFORMS MODULE LEVEL 3 (WD)•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
    86. 86. Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’origine
    87. 87. Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’origineRotate•http://outsideapp.com/
    88. 88. Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’origineRotate•http://outsideapp.com/
    89. 89. Skew•Skew prends les coordonnés x et y et penche un élément.
    90. 90. 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
    91. 91. 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
    92. 92. CSS TRANSITIONS MODULE LEVEL 3 (WD)•Développé initialement par l’équipe de WebKit et ensuite incorporé au W3C•Changement des valeurs dans les CSS lorsque qu’un intéraction est déclenché (hover)•Liste des propriétés qui peuvent être en transition: http://www.w3.org/TR/css3-transitions/#properties- from-css-
    93. 93. transition-timing-function•ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier
    94. 94. Transition pour plusieurs propriétés•Séparés par une virgule (,)•Chacuns peu avoir ses fonctionnalités de temps et de délais
    95. 95. EXERCICESText effects•http://line25.com/articles/using-css-text-shadow-to- create-cool-text-effects•http://unitinteractive.com/blog/2010/11/03/text-shadow- and-too-much-time/•http://line25.com/tutorials/create-a-letterpress-effect- with-css-text-shadow
    96. 96. CSS3 button•http://www.zurb.com/playground/super-awesome- buttons•http://www.zurb.com/playground/radioactive-buttons•http://www.zurb.com/playground/google-buttons•http://www.smashingmagazine.com/2009/12/02/pushing- your-buttons-with-practical-css3/•http://ubuwaits.github.com/css3-buttons/•http://www.webdesignerwall.com/tutorials/css3-gradient- buttons/•http://blog.typekit.com/2011/02/10/type-study-an-all-css- button/
    97. 97. CSS3 Dropdown menu•http://www.webdesignerwall.com/tutorials/css3- dropdown-menu/Image gallery•http://www.zurb.com/playground/css3-polaroids•http://www.zurb.com/playground/awesome-overlays•http://matthamm.com/box-shadow-curl.html•http://css-tricks.com/examples/CSS3PhotoGallery/•http://nicolasgallagher.com/css-drop-shadows-without- images/demo/•http://www.elated.com/res/File/articles/authoring/css/ smooth-fading-image-captions-with-pure-css3/•http://www.nikesh.me/blog/2010/05/sexy-image-hover- effects-using-css3/
    98. 98. Making a Mobile Web sites•http://www.smashingmagazine.com/2010/07/19/how-to- use-css3-media-queries-to-create-a-mobile-version-of- your-website/Newspaper layout•http://www.zurb.com/playground/newspaper-layout•http://www.css3.info/preview/multi-column-layout/•http://www.csscripting.com/css-multi-column/ example2.php?Modals windows•http://www.zurb.com/playground/drop-in-modals
    99. 99. CSS3 :target playing•http://css-tricks.com/css3-tabs/•http://lab.simurai.com/css/toggle/#boxShapes•http://css-tricks.com/examples/ShapesOfCSS/Advanced CSS3 demos•http://www.zurb.com/playground/css-boxshadow- experiments•http://www.zurb.com/playground/sliding-vinyl•http://www.zurb.com/playground/osx-dock•http://css-tricks.com/css3-progress-bars/•http://css-tricks.com/video-screencasts/93-css3-slideup- boxes/
    100. 100. CSS3 WEB TOOLS•http://caniuse.com/•http://www.css3.info/•http://www.smashingmagazine.com/2011/02/11/the- bright-near-future-of-css/•http://www.impressivewebs.com/css3-click-chart/Playgrounds•http://playground.html5rocks.com/ #text_and_box_shadow•http://jsfiddle.net/
    101. 101. 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/Nice CSS3 Web Sites•http://www.colly.com/•http://24ways.org/•http://hardboiledwebdesign.com/•http://playground.deaxon.com/css/
    102. 102. CSS3 CSS3 Logo by W3C@REMYSAVARD

    ×