1 / 17

CSS 3.0

CSS 3.0. By Nikhil D December 09, 2011. Agenda. What is CSS? What is 3.0? History of CSS CSS 3.0 What’s new in CSS 3.0? CSS3 Font-face property CSS3 Media Queries Browser Compatibility Demo. What is CSS? What is 3.0?.

kaiyo
Download Presentation

CSS 3.0

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. CSS 3.0 By Nikhil D December 09, 2011

  2. Agenda What is CSS? What is 3.0? History of CSS CSS 3.0 What’s new in CSS 3.0? CSS3 Font-face property CSS3 Media Queries Browser Compatibility Demo

  3. What is CSS? What is 3.0? Very briefly, CSS stands for ‘Cascading Style Sheets’ and is a mark-up language for altering and giving style to a website or elements within a website. The 3.0 represents the next generation/version of style sheet language.

  4. History of CSS • CSS 1.0 Introduced in 1996 with support for several properties and introduction of unique ‘id’ and ‘class’ to each element with same styles. • CSS 2.0 Published and became a W3C Recommendation in May 1998. Absolute, relative, and fixed positioning of elements, z-index and many more. • CSS 2.1 Published to fix errors in CSS 2.0 • CSS 3.0 CSS level 3 has been under development since December 15, 2005

  5. CSS 3.0 Unlike CSS2, a large single specification defining various features, CSS3 is divided into several separate documents called “modules”. Each module adds new capability or extends features defined in CSS2, over preserving backward compatibility. As of November 2011, there are over fifty CSS modules published from the CSS Working Group.

  6. What’s new in CSS 3.0? CSS3 Attribute Selectors Backgrounds Borders Transform and Transitions Multi-column layout CSS3 @font-face CSS3 Media Queries CSS3 Color Module (HSL, HSLA, RGBA) Animations Text Effects (text-shadow, word-wrap), etc.

  7. CSS3 Attribute Selector • CSS3 Selectors provide new, more powerful ways to select nodes, • Pattern Matching against elements in the tree • Exact Match at the beginning and end • Substring Matching • UI Element - enabled or disabled • UI Element - checked or un-checked • Check whether your browser supports all CSS3 selectors http://tools.css3.info/selectors-test/test.html

  8. Background Background-origin: Use to determine how the background-position of a background in a certain box is calculated Background-clip: Use to determine whether the backgrounds extends into the border or not. Background-size: Specify the size of background images using either lengths and percentages CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

  9. Borders W3C has offered some new options for borders in CSS3. border-color allows you to create cool colored borders border-image defines an image to be used instead of the normal border of an element border-radius allows web developers to easily utilize rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3 box-shadow allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset

  10. Transform and Transition • Transform allows you to specify 2D transform rules to be applied on the elements • Transform can be animated via transitions and animations • Supports translation, scaling, rotation and skew • Transform, • Transform • Transform-origin • Transition, • Transition-property • Transition-duration • Transition-delay

  11. Multi-column layout W3C offers a new way to arrange text “news-paper wise”, in columns. Two-ways, i. by column-width ii. by column-count

  12. CSS3 Font-Face Allow usage of any font-type on the web. Download the font if not available. Not exactly a feature which is new to CSS3, @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5! Only support for .eot format earlier Now website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages.

  13. CSS3 Media Queries Allows you to style content for different Media Types and form factors E.g. different style on web v/s when printed Or different layout on the web, phones etc. Use @media rule

  14. Browser Compatibility

  15. Questions ? demo

  16. References http://www.css3.info/ http://www.w3schools.com/cssref/ http://www.font-face.com/ http://www.w3.org/TR/CSS http://www.quirksmode.org/css/enabled.html http://www.zenelements.com/blog/ http://www.standardista.com/css3-implementable-features/ http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

  17. Thank You

More Related