Nate Zaugg. Initially released in December 1996 Written to allow separation of document content from...

download Nate Zaugg. Initially released in December 1996 Written to allow separation of document content from document layout Different styles can target different

of 6

  • date post

    30-Dec-2015
  • Category

    Documents

  • view

    213
  • download

    0

Embed Size (px)

Transcript of Nate Zaugg. Initially released in December 1996 Written to allow separation of document content from...

CSS3 Why & How

Why & HowNate Zaugg

1CSS 3Initially released in December 1996Written to allow separation of document content from document layoutDifferent styles can target different MediaCSS2 which was released in 1998 became a recommendation 7 June 2011!CSS3 is divided into separate modules each with are at a different stageCSS3 was published in June 1999

CSS3 ModulesMany of these could be moved into the CSS2.1 specification before it is finalizedSelectorsNamespacesBox ModelBackgrounds and BordersText Effects2D/3D TransformationsAnimationsMultiple Column LayoutColorMedia Queries {30+ more}

Why CSS3Makes some things easierMost browsers support most featuresCan easily be added to existing websitesMakes sites look nicerMore compatible than CSS HacksFaster than CSS Hacks or imagesHelps with Mobile supportMakes sites look nicer!

CSS3 FeaturesTable Based PositioningBox Enhancementsborder-radius, border-image, box-shadow, background-size, background-origin, resize, flexible box, lineboxMedia QueriesText Enhancements@font-face, text-shadow, word-wrap, text-justify, text-overflowMultiple columnsTransforms2D: translate, rotate, scale, skew, matrix3D: rotateX/Y/Z/3D, scaleX/Y/Z/3D, perspective, backface-visibility, translateX/Y/Z/3D, matrix3DAnimationsTransitions 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

Thanks!Thanks to J Michael Palermo IV for demo codePlease rate me on SpeakerRate.comThanks to the sponsors!