Your SlideShare is downloading. ×
0
Introduction to CSS3
What’s different about CSS3?     1. Selectors     2. RGBA And Opacity     3. Multi-Column Layout     4. Multiple Backgroun...
CSS3                                                          CSS       http://trentwalton.com/examples/CSS3_Speed_Test/
1. linear-gradient   2. border-radius   3. radial-gradient   4. text-shadow   5. box-shadow with RGBahttp://coding.smashin...
Selectors: Pseudo-Classes  CSS3 provides four powerful pseudo-classes that allow the CSS designer to select  multiple elem...
Selectors: Pseudo-Classes
Selectors: Pseudo-Classes          :last-child - matches an element that’s the last child element of its parent element   ...
Selectors: Pseudo-Classes: Browser Compatibility                                                   http://www.quirksmode.o...
RGBA & Opacity                 http://24ways.org/2009/working-with-rgba-colour
RGBA & Opacity                 http://coding.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3
RGBA & Opacity: Browser Compatibility                                        http://caniuse.com/#feat=css3-colors
Cross-browser support with CSS Vendor Prefixes    CSS vendor prefixes or CSS browser prefixes are a way for browser makers...
Cross-browser support with CSS Vendor Prefixes  In most cases, to use a more advanced CSS style property, you take the sta...
Cross-browser support with CSS Vendor Prefixes       Yes, might feel annoying and repetitive to have to write the properti...
Upcoming SlideShare
Loading in...5
×

Introduction to CSS3

733

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
733
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to CSS3"

  1. 1. Introduction to CSS3
  2. 2. What’s different about CSS3? 1. Selectors 2. RGBA And Opacity 3. Multi-Column Layout 4. Multiple Backgrounds 5. Word Wrap 6. Text Shadow 7. @font-face-Attribute 8. Border Radius 9. Border Image 10. Box Shadow 11. Box Sizing 12. Media Queries 13. Speech http://coding.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  3. 3. CSS3 CSS http://trentwalton.com/examples/CSS3_Speed_Test/
  4. 4. 1. linear-gradient 2. border-radius 3. radial-gradient 4. text-shadow 5. box-shadow with RGBahttp://coding.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/
  5. 5. Selectors: Pseudo-Classes CSS3 provides four powerful pseudo-classes that allow the CSS designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it’s easy once you get the hang of it. The pseudo-classes are: :nth-child(N) matches elements on the basis of their positions within a parent element’s list of child elements :nth-last-child(N) matches elements on the basis of their positions within a parent element’s list of child elements :nth-of-type(N) matches elements on the basis of their positions within a parent element’s list of child elements of the same type :nth-last-of-type(N) matches elements on the basis of their positions within a parent element’s list of child elements of the same type http://reference.sitepoint.com/css/understandingnthchildexpressions
  6. 6. Selectors: Pseudo-Classes
  7. 7. Selectors: Pseudo-Classes :last-child - matches an element that’s the last child element of its parent element :first-of-type - matches the first child element of the specified element type :last-of-type - matches the last child element of the specified element type :only-child - matches an element if it’s the only child element of its parent :only-of-type - matches an element that’s the only child element of its type :root - matches the element that’s the root element of the document :empty - matches elements that have no children :target - matches an element that’s the target of a fragment identifier in the document’s URI :enabled - matches user interface elements that are enabled :disabled - matches user interface elements that are disabled :checked Pseudo-class - matches elements like checkboxes or radio buttons that are checked :not(S) - matches elements that aren’t matched by the specified selector http://reference.sitepoint.com/css/css3psuedoclasses
  8. 8. Selectors: Pseudo-Classes: Browser Compatibility http://www.quirksmode.org/css/contents.html
  9. 9. RGBA & Opacity http://24ways.org/2009/working-with-rgba-colour
  10. 10. RGBA & Opacity http://coding.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3
  11. 11. RGBA & Opacity: Browser Compatibility http://caniuse.com/#feat=css3-colors
  12. 12. Cross-browser support with CSS Vendor Prefixes CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized. The CSS browser prefixes are: Android: -webkit- Chrome: -webkit- Firefox: -moz- Internet Explorer: -ms- iOS: -webkit- Opera: -o- Safari: -webkit- http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
  13. 13. Cross-browser support with CSS Vendor Prefixes In most cases, to use a more advanced CSS style property, you take the standard CSS property and add the prefix above for each browser. For example, if you want to add a CSS3 transition to your document, you would use the transition property with the prefixes listed first: -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
  14. 14. Cross-browser support with CSS Vendor Prefixes Yes, might feel annoying and repetitive to have to write the properties 2–5 times to get it to work in all browsers, but it’s temporary. As browsers improve, they add support for the standards based version of the property, and you can remove the prefixed versions. For example, just a few years ago, to set a rounded corner on a box you had to write: -moz-border-radius: 10px 5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 5px; border-radius: 10px 5px; But now you really only need: -webkit-border-radius: 10 5px; border-radius: 10px 5px; http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×