Introduction to CSS3Doris Chen Ph.D.Developer EvangelistMicrosofthttp://blogs.msdn.com/dorischen/
Agenda What is CSS3? Media Queries Advanced Layout Tools Summary and Resources
What’s is CSS3?
What is CSS used for now? Layout Colors Fonts and text Backgrounds Borders Floats
The Fundamentals     Elements     Attributes     Selectors     Properties5
Why Should I Care? Key technology in the HTML5 family Benefits    Improve response times    Less reliance on JavaScrip...
What is CSS3?                           Last update: June 13, 2011                                                    Geol...
What is CSS3?                          Defines visual appearance                           of webpages                   ...
What’s New in CSS3?            2D Transforms              3D Transforms            Backgrounds & Borders      Animatio...
Media Queries
A look…          11
Media Queries Examine device properties to determine optimal delivery  and placement of content The CSS3 Media Queries M...
Media Queries Samples@media screen and (max-width: 600px) {  body {    font-size: 80%;  }}@media screen and (min-width:320...
Supported Media Properties           min/max-width          color           min/max-height         color-index        ...
http://mediaqueri.es15
View States
device-portrait    /* Re-arrange and hide/show content */                                                                F...
Media Queries: Portrait View            Before                             After19     Space is used more efficiently afte...
Advanced Layout
Manage the wireframe
22
CSS 3 flexible box layout• Define direction and     •   display: flexbox  ordering of flexible     •   -ms-box-direction  ...
CSS 3 flexible box layout uses Build simple designs that partition  space vertically or horizontally Align related eleme...
Grid Layout Organizes a webpage by dividing space into major  regions Allows elements to align into columns and rows wit...
CSS3 grid layout Create a grid and          display: grid  define grid rows and       -ms-grid-columns  columns        ...
Grid Layout12327
28
CSS3 grid layout uses Enables you to easily design grid-aligned apps  that partition space vertically and horizontally U...
Multi-Column Layout Layout content in multiple columns without the use of  tables Content can flow from one column to an...
Multi-Column Layout31
CSS3 multiple column layout• Break text across   • column-count  multiple columns    • column-width• Specify column      •...
33
Thinking About Adaptability Manage Device Families    CSS3 Media Queries Manage Real Estate    CSS3 Grid Layout Adapt...
CSS3
Tools
The development tools are FREE!If you use a higher SKU, it just works!
Blend five ways: Visual Design ToolLayout     Visual sizing & re-     parenting, CSS3 grids,     element managementStyling...
Summary
Summary Leverage CSS3 to design Windows 8 apps more  easily Think about Responsive Web Design    Manage Device Families...
Resources
RESOURCES    • Internet Explorer 10 Developer Guide for CSS       • http://msdn.microsoft.com/en-         us/library/ie/hh...
Windows 8 RTM Resources Windows 8 and Tools Download    http://bit.ly/Wins8Download Windows 8 Cheat Sheet    http://bi...
IE Test Drive ietestdrive.comPAGE 45
Introduction to CSS3
Introduction to CSS3
Upcoming SlideShare
Loading in...5
×

Introduction to CSS3

4,932

Published on

This presentation is target for developers that are new to CSS3, and would like to know what CSS3 they need to understand for Windows 8 development.

1 Comment
9 Likes
Statistics
Notes
  • For introduction to CSS3, demo, video, for this presentation, check out: chttp://blogs.msdn.com/b/dorischen/archive/2012/10/01/introduction-to-css3-responsive-web-design.aspx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,932
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
132
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Introduction to CSS3

  1. 1. Introduction to CSS3Doris Chen Ph.D.Developer EvangelistMicrosofthttp://blogs.msdn.com/dorischen/
  2. 2. Agenda What is CSS3? Media Queries Advanced Layout Tools Summary and Resources
  3. 3. What’s is CSS3?
  4. 4. What is CSS used for now? Layout Colors Fonts and text Backgrounds Borders Floats
  5. 5. The Fundamentals  Elements  Attributes  Selectors  Properties5
  6. 6. Why Should I Care? Key technology in the HTML5 family Benefits  Improve response times  Less reliance on JavaScript and plug-ins  Less site maintenance Good Patterns  Progressive enhancement  Adaptive design A new audience for us
  7. 7. What is CSS3? Last update: June 13, 2011 Geolocation ECMAHTML CSS Web Apps SVG7
  8. 8. What is CSS3?  Defines visual appearance of webpages  Divided into over 50 modules  Vendor prefixes used to specify browser extensions  -ms-  -moz- Geolocation ECMA  -webkit- HTML CSS Web Apps SVGPAGE 8
  9. 9. What’s New in CSS3?  2D Transforms  3D Transforms  Backgrounds & Borders  Animations  Gradient  Color  CSS Exclusions (Floats)  Values and Units  Flexible Box (“Flexbox”)  Selectors Layout  Web Fonts  Grid Layout  Media Queries  Multi-column Layout  Region  Namespaces  SVG Filter Effects  Text Shadow  TransitionsPAGE 9
  10. 10. Media Queries
  11. 11. A look… 11
  12. 12. Media Queries Examine device properties to determine optimal delivery and placement of content The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set of precise device capabilities. Adapt output based on media type  The Desktop Browser, Screen, Print  Mobile Browsers  Tablet form-factors  Televisions  Game Consoles
  13. 13. Media Queries Samples@media screen and (max-width: 600px) { body { font-size: 80%; }}@media screen and (min-width:320px) and(max-width:480px)@media not print and (max-width:600px)
  14. 14. Supported Media Properties  min/max-width  color  min/max-height  color-index  device-width  monochrome  device-height  resolution  orientation  aspect-ratio  device-aspect-ratioPAGE 14
  15. 15. http://mediaqueri.es15
  16. 16. View States
  17. 17. device-portrait /* Re-arrange and hide/show content */ Full screen Portrait full-screen snapped fill Snap Fill Blog http://blogs.msdn.com/dorischen
  18. 18. Media Queries: Portrait View Before After19 Space is used more efficiently after apply all css rules in Media Queries
  19. 19. Advanced Layout
  20. 20. Manage the wireframe
  21. 21. 22
  22. 22. CSS 3 flexible box layout• Define direction and • display: flexbox ordering of flexible • -ms-box-direction box items • -ms-box-orient• Define how to • -ms-box-ordinal- distribute and share group free space to flexibly • -ms-box-line- space and size progression elements • -ms-box-lines• Align items • -ms-box-pack horizontally or • -ms-box-flex vertically • -ms-box-align
  23. 23. CSS 3 flexible box layout uses Build simple designs that partition space vertically or horizontally Align related elements and distribute available space Perfect for menus, lightweight collections, or simple designs
  24. 24. Grid Layout Organizes a webpage by dividing space into major regions Allows elements to align into columns and rows without the use of tables Enables a variety of layouts  Span columns or rows  Overlap  Layer Adapts to changes due to  Media  Orientation  Available space
  25. 25. CSS3 grid layout Create a grid and  display: grid define grid rows and  -ms-grid-columns columns  -ms-grid-rows Place grid items within  -ms-grid-column the grid rows and  -ms-grid-row columns  -ms-grid-column-span Define flexible row,  -ms-grid-row-span column sizing Align grid children  -ms-grid-column-align  -ms-grid-row-align
  26. 26. Grid Layout12327
  27. 27. 28
  28. 28. CSS3 grid layout uses Enables you to easily design grid-aligned apps that partition space vertically and horizontally Uses declarative styles to create clean designs that can be easily adapted to multiple resolutions Allows you to specify positions independent of content order Perfect for more complex Metro style apps
  29. 29. Multi-Column Layout Layout content in multiple columns without the use of tables Content can flow from one column to another Columns are separated by a gap and rule
  30. 30. Multi-Column Layout31
  31. 31. CSS3 multiple column layout• Break text across • column-count multiple columns • column-width• Specify column • column-gap gaps • column-rule-color• Enable and style • column-rule-style column rules • column-rule-width
  32. 32. 33
  33. 33. Thinking About Adaptability Manage Device Families  CSS3 Media Queries Manage Real Estate  CSS3 Grid Layout Adaptive Components  CSS3 FlexBox  CSS3 Multi-Column
  34. 34. CSS3
  35. 35. Tools
  36. 36. The development tools are FREE!If you use a higher SKU, it just works!
  37. 37. Blend five ways: Visual Design ToolLayout Visual sizing & re- parenting, CSS3 grids, element managementStyling Responsive design, rich value editors for CSS3 propertiesDebug HTML Live DOM, inspect both markup and live valuesDebug CSS Cascade, computed values, “Winning Properties”JavaScript Runs on the design surface – you are styling the live application. 39
  38. 38. Summary
  39. 39. Summary Leverage CSS3 to design Windows 8 apps more easily Think about Responsive Web Design  Manage Device Families  Media Queries  CSS3 Grid and CSS3 flexible box to design elegant and flexible apps  Adaptive Components  Positioned floats, CSS3 multiple columns, for beautiful text-centric designs
  40. 40. Resources
  41. 41. RESOURCES • Internet Explorer 10 Developer Guide for CSS • http://msdn.microsoft.com/en- us/library/ie/hh673536(v=vs.85).aspx • CSS3 For Windows 8 Demo • http://ie.microsoft.com/testdrive/Graphics/hands- on-css3/ • Feature-specific demos • http://ie.microsoft.com/testdrive/ • Real-world demos • http://www.beautyoftheweb.com/ • IE Team BlogsPAGE 43 • http://blogs.msdn.com/b/ie/ Blog http://blogs.msdn.com/dorischen
  42. 42. Windows 8 RTM Resources Windows 8 and Tools Download  http://bit.ly/Wins8Download Windows 8 Cheat Sheet  http://bit.ly/wins8cheatsheet Develop Windows 8 in 30 Days with Consulting& Support  http://bit.ly/Win8GenApp Free Windows 8 training & Hackathon Events  http://bit.ly/wins8Hackathon Windows 8 Dev Center  http://dev.windows.com
  43. 43. IE Test Drive ietestdrive.comPAGE 45
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×