![Page 1: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/1.jpg)
Intro to CSS3Vishal Kurup
![Page 2: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/2.jpg)
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)
![Page 3: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/3.jpg)
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>;
![Page 4: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/4.jpg)
Let’s look at some items that CSS3 makes TRIVIAL
![Page 5: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/5.jpg)
CSS3 Rounded Corners
• Past approaches?• Example
![Page 6: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/6.jpg)
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
}
![Page 7: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/7.jpg)
CSS3 Border Images
• You can now specify an image to be used as part of the border property.
• Example
![Page 8: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/8.jpg)
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;
![Page 9: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/9.jpg)
CSS3 - Shadows
• What do you do when you want to generate a shadow behind a layout element?
• Example
![Page 10: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/10.jpg)
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)
![Page 11: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/11.jpg)
CSS3 Backgrounds
• Page backgrounds in CSS2• Example
![Page 12: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/12.jpg)
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;
![Page 13: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/13.jpg)
CSS3 Text Properties
• Text Overflow• Word Break• Text Shadow
![Page 14: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/14.jpg)
Text Overflow
• Supported in Internet Explorer (+ other browsers)
• Example
![Page 15: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/15.jpg)
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;
}
![Page 16: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/16.jpg)
Word Wrap
• Force a line break even with a long word• Example• Format: word-wrap:break-word|normal;
![Page 17: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/17.jpg)
Text Shadow
• Can be added outside the graphic• No IE support • Example• Format: text-shadow: h-shadow v-shadow
blur color;
![Page 18: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/18.jpg)
Transformations
• CSS3 supports 2D & 3D transformations• 2D transforms:
TranslateRotateScaleSkew
• 3D transforms: Not covered, limited support
![Page 19: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/19.jpg)
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
![Page 20: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/20.jpg)
Animations
• Effects that let an element change from one style to another.
• Limited Support – Currently only supported by Webkit based browsers (Chrome, Safari)
• Example
![Page 21: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/21.jpg)
Nicely Formatted Columns
• Putting content into columns is super easy• Again, No IE support• Example
![Page 22: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/22.jpg)
CSS3 Font Faces
• Allows you to use non-standard fonts• Mixed support for otf, ttf, svg and eot• Example
![Page 23: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/23.jpg)
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
![Page 24: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/24.jpg)
Examples
• CSS3 Accordion (No Jquery)• CSS Coke Can• CSS Animation
![Page 25: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/25.jpg)
http://www.findmebyip.com/litmus
![Page 26: Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in](https://reader035.vdocuments.site/reader035/viewer/2022062322/56649c995503460f949567b5/html5/thumbnails/26.jpg)
</end>