Intro to CSS3Vishal 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 19 2007• CSS Level 3 under development since Dec 15,

2005 (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 – <property> ; //Firefox– webkit – <property>; //Chrome, Safari (webkit)Opera (in most cases) uses the default with no

prefix but in some cases you will see – o – <property>;

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) 30 30 repeat;-webkit-border-image: url(borderbg.jpg) 30 30 repeat;-moz-border-image: url(borderbg.jpg) 30 30 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, heightbackground-size:30% 40%; //width, heightbackground-size:100%; //Omitting first value sets

//the second to autobackground-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:

TranslateRotateScaleSkew

• 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: <property> <duration>-webkit-transition: <property> <duration>*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.• Format:

@font-face{

font-family:<makeupaname>;src:url(‘localfontname.ttf’) || url(‘http://fontlocation’);

}• Recommended Read: http://paulirish.com/2009/bulletproof-font-

face-implementation-syntax • Great resource: http://www.fontsquirrel.com/fontface

Examples

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

http://www.findmebyip.com/litmus

</end>