Css3 shubelal


Published on

HTMl5 CSS3 Tutorial

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

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • TITLE PAGE– Headline 36pt Arial in WHITE– Sub-head 18pt Arial Reg in GREY– Do not include client logos on title page– TEXT ONLY
  • 1-COLUMN– Headline 32pt Arialin BLACK– Sub-heads 12pt Arial Reg in ORANGE– Body copy & bulleted text 10pt Arial Reg in GRAY; body copy not to go below 6 pt– Left-justify all text and design elements– Divider Lines no larger than 1pt*****Divider lines are not built into Master Slides – must copy and paste from example slide*****
  • TITLE PAGE (ALT)Footer is only editable feature.
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.