Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css3 shubelal

365 views

Published on

HTMl5 CSS3 Tutorial

Published in: Spiritual, Technology
  • Be the first to comment

  • Be the first to like this

Css3 shubelal

  1. 1. CSS3Shubelal kumar
  2. 2. − Introduction of CSS3?− New Selector?− Fonts− Pseudo-Classes− Transformation (Rotate, Resize…etc)− Animation (Fade In/Fade Out)− Media Queries− Cross Browser CompatibilityTopicsAgenda for CSS3
  3. 3. − CSS is used to control the style and layout of Web pages.− CSS3 is the latest standard for CSS.− CSS (Cascading Style Sheets) is a language which describes how adocument written in a markup language looks and how it is formatted. Givinglayout, colors and fonts to a document and its elements can change how yourwebsite looks and how people think about it. CSS has evolved over time fromCSS1 to CSS2 (which is the current standard) to CSS3 (which is still indevelopment). Modern browser support CSS1 and CSS2 but for CSS3 thesupport is still limited.Introduction of CSS3?
  4. 4. The CSS3 Selectors module introduces three new attribute selectors, which aregrouped together under the heading “Substring Matching Attribute Selectors”.These new selectors are as follows:[att^=val] – the “begins with” selector[att$=val] – the “ends with” selector[att*=val] – the “contains” selectorCSS3 Attribute Selectors
  5. 5. − translate()− rotate()− scale()− skew()− matrix()Transformation
  6. 6. <style>div{width:200px;height:100px;background-color:yellow;/* Rotate div */transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-webkit-transform:rotate(30deg); /* Safari and Chrome */-moz-transform:rotate(30deg); /* Firefox */}</style><body><div>Hello</div></body>
  7. 7. Animation (Fade In/Fade Out)he CSS3 Transitions module introduces a number of properties which together canbe used to specify: the CSS property (or properties) to be transitioned; theduration of the transition; the timing function of the transition; and an optionaldelay.These properties are as follows:transition-propertytransition-durationtransition-timing-functiontransition-delayLive Demo
  8. 8. With CSS3, you can create rounded borders, add shadow to boxes, and use an imageas a border - without using a design program, like Photoshop.− border-radius− box-shadow− border-imageCSS3 Borders
  9. 9. CSS3 Borders Examples<style>div{width:300px;height:100px;border:2px solid;border-radius:25px;background-color:#890000;box-shadow: 10px 10px 5px #888888;}</style>Box shadowLive Demo
  10. 10. In the new @font-face rule you must first define a name for the font (e.g.myFirstFont), and then point to the font file.− Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support the WOFF (WebOpen Font Format) font.− Firefox, Chrome, Safari, and Opera support fonts of type TTF (True Type Fonts) andOTF (OpenType Fonts).− Chrome, Safari and Opera also support SVG fonts/shapes.− Internet Explorer also supports EOT (Embedded OpenType) fonts.Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.The CSS3 Font RuleLive Demo
  11. 11. @font-face Rule@font-face{font-family: myFirstFont;src: url(sansation_light.woff);}@font-face{font-family: myFirstFont;src: url(sansation_bold.woff);font-weight:bold;}
  12. 12. Pseudo-Classes:root - Selects the element that is at the root of the document. Almost certainly will select the<html> element, unless you are specifically working in some weird environment that somehowalso allows CSS. Perhaps XML.:first-child - Selects the first element of its type within a parent.:last-child - Selects the last element of its type within a parent.:nth-child(N) - Selects elements based on a simple provided algebraic expression (e.g. "2n" or"4n-1"). Has the ability to do things like select even/odd elements, "every third", "the first five",and things like that. Covered in more detail here with a tester tool.:nth-of-type(N) - Works like :nth-child, but used in places where the elements at the samelevel are of different types. Like if inside a div you had a number of paragraphs and anumber of images. You wanted to select all the odd images.
  13. 13. Pseudo-Classes continue…:nth-child wont work there, youd use div img:nth-of-type(odd). Particularly useful when workingwith definition lists and their alternating <dt> and <dd> elements.:first-of-type - Selects the first element of this type within any parent. So if you have two divs, eachhad within it a paragraph, image, paragraph, image. Then div img:first-of-type would select the firstimage inside the first div and the first image inside the second div.:last-of-type - Same as above, only would select the last image inside the first div and the lastimage inside the second div.:nth-last-of-type(N) - Works like :nth-of-type, but it counts up from the bottom instead of the top.:nth-last-child(N) - Works like :nth-child, but it counts up from the bottom instead of the top.:only-of-type - Selects only if the element is the only one of its kind within the current parent.
  14. 14. Pseudo-Classes
  15. 15. − This new CSS3 selector lets you achieve multi-column layouts without having to usemultiple divs. The browser interprets the properties and create the columns, givingthe text a newspaper-like flow.Multi-Column Layout.index #content div {-webkit-column-count : 4;-webkit-column-gap : 20px;-moz-column-count : 4;-moz-column-gap : 20px; }div { column-rule: 1px solid #00000; }
  16. 16. Multi-Column Layout ExampleLive Demo
  17. 17. − Media queries allow the page to use different CSS style rules based oncharacteristics of the device the site is being displayed on, most commonly the widthof the browser.Media Queries<meta name=”viewport” content=”width:device-width”>Live Demo
  18. 18. Cross Browser Compatibility
  19. 19. Cross Browser Compatibility
  20. 20. Cross Browser Compatibility<!--[if gte IE 8]>According to the conditional comment this is IE 8 or higher<br /><![endif]--><!--[if lt IE 9]>According to the conditional comment this is IE lower than 9<br /><![endif]--><!--[if lte IE 7]>According to the conditional comment this is IE lower or equal to 7<br /><![endif]--><!--[if gt IE 6]>According to the conditional comment this is IE greater than 6<br /><![endif]-->
  21. 21. CSS3− http://css3-tutorial.com/− http://www.w3schools.com/css3/− http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/− http://www.css3.info/− http://webdesignerwall.com/Reference
  22. 22. Questions?
  23. 23. Thank you

×