1 / 26

Intro to CSS3

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 19 2007

joycethompson
Download Presentation

Intro to CSS3

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. Intro to CSS3 Vishal Kurup

  2. 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)

  3. 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>;

  4. Let’s look at some items that CSS3 makes TRIVIAL

  5. CSS3 Rounded Corners • Past approaches? • Example

  6. 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 webkitbrowsers }

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

  8. 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;

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

  10. 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)

  11. CSS3 Backgrounds • Page backgrounds in CSS2 • Example

  12. 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;

  13. CSS3 Text Properties • Text Overflow • Word Break • Text Shadow

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

  15. 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; }

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

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

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

  19. 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

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

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

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

  23. 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

  24. Examples • CSS3 Accordion (No Jquery) • CSS Coke Can • CSS Animation

  25. http://www.findmebyip.com/litmus

  26. </end>

More Related