Introduction to CSS3

transcript

1. Selectors2. RGBA And Opacity3. Multi-Column Layout4. Multiple Backgrounds5. Word Wrap6. Text Shadow7. @font-face-Attribute8. Border Radius9. Border Image10. Box Shadow11. Box Sizing12. Media Queries13. Speech

What’s different about CSS3?

http://coding.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/

http://trentwalton.com/examples/CSS3_Speed_Test/

CSS3CSS

1. linear-gradient2. border-radius3. radial-gradient4. text-shadow5. box-shadow with RGBa

http://coding.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/

http://reference.sitepoint.com/css/understandingnthchildexpressions

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

: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

Selectors: Pseudo-Classes: Browser Compatibility

http://www.quirksmode.org/css/contents.html

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

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:

Cross-browser support with CSS Vendor Prefixes

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

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;

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;

Introduction to CSS3

Documents