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

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

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

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

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-property
transition-duration
transition-timing-function
transition-delay
Live Demo

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

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

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

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

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.

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.

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

Multi-Column Layout Example
Live Demo

− 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

Cross Browser Compatibility

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

Css3 shubelal

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to Css3 shubelal

Similar to Css3 shubelal (20)

Recently uploaded

Recently uploaded (13)

Css3 shubelal

Editor's Notes