Introduction to CSS3
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introduction to CSS3

on

  • 4,859 views

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.

Statistics

Views

Total Views
4,859
Views on SlideShare
1,634
Embed Views
3,225

Actions

Likes
7
Downloads
101
Comments
1

4 Embeds 3,225

http://blogs.msdn.com 3218
http://club.zeppelin-group.com 3
https://twitter.com 2
http://translate.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to CSS3 Presentation 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