Your SlideShare is downloading. ×
0
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Introduction to CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to CSS3

4,860

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.

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,860
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
129
Comments
1
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction to CSS3Doris Chen Ph.D.Developer EvangelistMicrosofthttp://blogs.msdn.com/dorischen/
  • 2. Agenda What is CSS3? Media Queries Advanced Layout Tools Summary and Resources
  • 3. What’s is CSS3?
  • 4. What is CSS used for now? Layout Colors Fonts and text Backgrounds Borders Floats
  • 5. The Fundamentals  Elements  Attributes  Selectors  Properties5
  • 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. What is CSS3? Last update: June 13, 2011 Geolocation ECMAHTML CSS Web Apps SVG7
  • 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. 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. Media Queries
  • 11. A look… 11
  • 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. 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. 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. http://mediaqueri.es15
  • 16. View States
  • 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. Media Queries: Portrait View Before After19 Space is used more efficiently after apply all css rules in Media Queries
  • 19. Advanced Layout
  • 20. Manage the wireframe
  • 21. 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. 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. 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. 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. Grid Layout12327
  • 27. 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. 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. Multi-Column Layout31
  • 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. 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. CSS3
  • 35. Tools
  • 36. The development tools are FREE!If you use a higher SKU, it just works!
  • 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. Summary
  • 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. Resources
  • 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. 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. IE Test Drive ietestdrive.comPAGE 45

×