Intro to CSS3 Vishal Kurup

Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in 1996 (CSS1) CSS2 published as a recommendation in May 1998 CSS2.1 goes to candidate recommendation status – July CSS Level 3 under development since Dec 15, 2005 (W3C CSS3 Progress Report)W3C CSS3 Progress Report

CSS3 FYI CSS3 is still under development Modules: A new approach to standardization Each browser still implementing slightly different syntax for certain properties: – moz – ; //Firefox – webkit – ; //Chrome, Safari (webkit) Opera (in most cases) uses the default with no prefix but in some cases you will see – o – ;

Let’s look at some items that CSS3 makes TRIVIAL

CSS3 Rounded Corners Past approaches? Example

CSS3 Rounded Corners - Recap Makes creating rounded divs a breeze No Internet Explorer support but it degrades gracefully Markup:.div2 { width:300px; height:300px; border: 3px solid #000; background:#cc0000; border-radius:30px; -moz-border-radius:30px; //Prefix to make this work in Firefox -webkit-border-radius:30px; //Prefix to make this work in webkit browsers }

CSS3 Border Images You can now specify an image to be used as part of the border property. Example

CSS3 Border Images - Recap Format: border-image: source slice width outset repeat; Markup: border-image: url(borderbg.jpg) repeat; -webkit-border-image: url(borderbg.jpg) repeat; -moz-border-image: url(borderbg.jpg) repeat;

CSS3 - Shadows What do you do when you want to generate a shadow behind a layout element? Example

CSS3 Shadows - Recap Once again no IE support Format: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow == Position of horizontal shadow V-shadow == Position of vertical shadow Blur == Blur distance Spread == Size of shadow Color == Shadow Color Inset == Make the shadow an inner (shadow)

CSS3 Backgrounds Page backgrounds in CSS2 Example

CSS3 Backgrounds Format: background-size: length | percentage | cover | contain; Sample Markup: background-size: 400px 500px; //width, height background-size:30% 40%; //width, height background-size:100%; //Omitting first value sets //the second to auto background-size:cover; background-size:contain;

CSS3 Text Properties Text Overflow Word Break Text Shadow

Text Overflow Supported in Internet Explorer (+ other browsers) Example

Text Overflow - Recap Format: text-overflow: clip | ellipsis | string; Also requires the whitespace:nowrap; & overflow:hidden properties to be set. Sample Markup: #div1 {width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

Word Wrap Force a line break even with a long word Example Format: word-wrap:break-word|normal;

Text Shadow Can be added outside the graphic No IE support Example Format: text-shadow: h-shadow v-shadow blur color;

Transformations CSS3 supports 2D & 3D transformations 2D transforms: Translate Rotate Scale Skew 3D transforms: Not covered, limited support

Transitions Effects that let an element change from one style to another. Limited Support – Currently only supported by Webkit based browsers (Chrome, Safari) Example Caveats: – You must specify the property you want to add an effect to. – You must specify a duration for the effect – Effect is typically applied on property change. Format: transition: -webkit-transition: *You can specify multiple properties separated by commas

Animations Effects that let an element change from one style to another. Limited Support – Currently only supported by Webkit based browsers (Chrome, Safari) Example

Nicely Formatted Columns Putting content into columns is super easy Again, No IE support Example

CSS3 Font Faces Allows you to use non-standard fonts Mixed support for otf, ttf, svg and eot Example

CSS3 Font Faces Things to remember: Internet Explorer only supports EOT Mozilla browsers support OTF and TTF Safari and Opera support OTF, TTF and SVG Chrome supports TTF and SVG. { font-family: ; src:url(‘localfontname.ttf’) || url(‘ } Recommended Read: face-implementation-syntaxhttp://paulirish.com/2009/bulletproof-font- face-implementation-syntax Great resource:

Examples CSS3 Accordion (No Jquery) CSS3 Accordion CSS Coke Can CSS Animation