Css3 shubelal

23
CSS3 Shubelal kumar

description

HTMl5 CSS3 Tutorial

Transcript of Css3 shubelal

Page 1: Css3   shubelal

CSS3

Shubelal kumar

Page 2: Css3   shubelal

− Introduction of CSS3?− New Selector?− Fonts− Pseudo-Classes− Transformation (Rotate, Resize…etc)− Animation (Fade In/Fade Out)− Media Queries− Cross Browser Compatibility

Topics

Agenda for CSS3

Page 3: Css3   shubelal

− 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 a document written in a markup language looks and how it is formatted. Giving layout, colors and fonts to a document and its elements can change how your website looks and how people think about it. CSS has evolved over time from CSS1 to CSS2 (which is the current standard) to CSS3 (which is still in development). Modern browser support CSS1 and CSS2 but for CSS3 the support is still limited.

Introduction of CSS3?

Page 4: Css3   shubelal

The CSS3 Selectors module introduces three new attribute selectors, which are grouped 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” selector

CSS3 Attribute Selectors

Page 5: Css3   shubelal

− translate()− rotate()− scale()− skew()− matrix()

Transformation

Page 6: Css3   shubelal

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

Page 7: Css3   shubelal

Animation (Fade In/Fade Out)

he CSS3 Transitions module introduces a number of properties which together can be used to specify: the CSS property (or properties) to be transitioned; the duration of the transition; the timing function of the transition; and an optional delay. These properties are as follows:

transition-propertytransition-durationtransition-timing-functiontransition-delay

Live Demo

Page 8: Css3   shubelal

With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.

− border-radius− box-shadow− border-image

CSS3 Borders

Page 9: Css3   shubelal

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 shadow

Live Demo

Page 10: Css3   shubelal

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 (Web Open Font Format) font.

− Firefox, Chrome, Safari, and Opera support fonts of type TTF (True Type Fonts) and OTF (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 Rule

Live Demo

Page 11: Css3   shubelal

@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;}

Page 12: Css3   shubelal

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 somehow also 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 same level are of different types. Like if inside a div you had a number of paragraphs and a number of images. You wanted to select all the odd images.

Page 13: Css3   shubelal

Pseudo-Classes continue… :nth-child won't work there, you'd use div img:nth-of-type(odd). Particularly useful when working with 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, each had within it a paragraph, image, paragraph, image. Then div img:first-of-type would select the first image 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 last image 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.

Page 14: Css3   shubelal

Pseudo-Classes

Page 15: Css3   shubelal

− This new CSS3 selector lets you achieve multi-column layouts without having to use multiple divs. The browser interprets the properties and create the columns, giving the 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; }

Page 16: Css3   shubelal

Multi-Column Layout Example

Live Demo

Page 17: Css3   shubelal

− Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

Media Queries

<meta name=”viewport” content=”width:device-width”>

Live Demo

Page 18: Css3   shubelal

Cross Browser Compatibility

Page 19: Css3   shubelal

Cross Browser Compatibility

Page 20: Css3   shubelal

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]-->

Page 21: Css3   shubelal

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

Page 22: Css3   shubelal

Questions??

? ??

??

? ???

Page 23: Css3   shubelal

Thank you