1 / 6

Why & How

Why & How. Nate Zaugg. CSS 3. Initially released in December 1996 Written to allow separation of document content from document layout Different styles can target different Media CSS2 which was released in 1998 became a recommendation 7 June 2011 !

delora
Download Presentation

Why & How

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Why & How Nate Zaugg

  2. CSS 3 • Initially released in December 1996 • Written to allow separation of document content from document layout • Different styles can target different Media • CSS2 which was released in 1998 became a recommendation 7 June 2011! • CSS3 is divided into separate “modules” each with are at a different stage • CSS3 was published in June 1999

  3. CSS3 Modules • Many of these could be moved into the CSS2.1 specification before it is finalized • Selectors • Namespaces • Box Model • Backgrounds and Borders • Text Effects • 2D/3D Transformations • Animations • Multiple Column Layout • Color • Media Queries • … {30+ more}

  4. Why CSS3 • Makes some things easier • Most browsers support most features • Can easily be added to existing websites • Makes sites look nicer • More compatible than “CSS Hacks” • Faster than “CSS Hacks” or images • Helps with Mobile support • Makes sites look nicer!

  5. CSS3 Features • Table Based Positioning • Box Enhancements • border-radius, border-image, box-shadow, background-size, background-origin, resize, flexible box, linebox • Media Queries • Text Enhancements • @font-face, text-shadow, word-wrap, text-justify, text-overflow • Multiple columns • Transforms • 2D: translate, rotate, scale, skew, matrix • 3D: rotateX/Y/Z/3D, scaleX/Y/Z/3D, perspective, backface-visibility, translateX/Y/Z/3D, matrix3D • Animations • Transitions – effects that let an element gradually change from one style to another (ex. animate the change in width of a box) • @keyframe, name, duration, timing-function, iteration-count, direction

  6. Thanks! • Thanks to J Michael Palermo IV for demo code • Please rate me on SpeakerRate.com • Thanks to the sponsors!

More Related