CSS3

Confidential

2009 Syntel, Inc.

Iconic Representations.......
Test your
Memory

Queries

Objective

Need more
Info

Introduction to Hibernate
Confidential

2009 Syntel, Inc.

Coffee
Break

Brainstor
m

Can you
Solve?

Demo

FAQ

Recap

CSS 3
CSS3 stands for Cascading Style Sheet.
CSS defines how HTML elements are to be displayed.
CSS3 is the latest standard for CSS.
CSS3 is completely backwards-compatible with earlier
versions of CSS.

Confidential

2009 Syntel, Inc.

Vendor Prefixes
Some CSS rules wont work without the vendor prefix.
Mozilla Browsers (Firefox)
-moz
Webkit Browsers (Safari, Chrome)
-webkit
Opera
-o
Internet Explorer
-ms

Confidential

2009 Syntel, Inc.

CSS 3 Modules
CSS3 has been split into "modules".
It contains the "old CSS specification which has been split
into smaller pieces.
Most of the CSS3 Modules are W3C Recommendations,
and CSS3 properties are implemented in all modern
browsers.
Some of the important CSS3 modules are:
New Selectors
New Pseudo elements
New Pseudo classes
New Properties
Animations
Transitions
Transform

Confidential

2009 Syntel, Inc.

New Selectors
Begins with selector:
The begins with selector uses the caret (^) character to
match an element with an attribute value beginning with the
value specified in the selector.
a[href^="https"]
{
color:red;
border-bottom:1px dotted;
}
In this code snippet Only the links containing https at the
beginning of their href values are selected.
Confidential

2009 Syntel, Inc.

New Selectors
Ends with selector:
The ends with selector uses the dollar sign ($) to match
an element with an attribute value ending with the value
specified.
a[href$=".pdf"]
{
background: url('images/pdf.png')
no-repeat 0 2px;
padding-left: 25px;
}
The PDF file icon will be rendered next to the link because the
browser will match the href string ending with .pdf.
Confidential

2009 Syntel, Inc.

New Selectors
Contains selector:
The contains selector uses the asterisk character (*) to
match an element with an attribute value containing at least
one instance of the value specified.
img[src*="thumbnails"]
{
border: 5px solid #000;
}
we can select only the images containing thumbnails
anywhere in the src attributes value.

Confidential

2009 Syntel, Inc.

New Pseudo elements

:first-of-type Selector
The :first-of-type selector matches every element that is the
first child, of a particular type, of its parent.
p:first-of-type
{
background: red;
}
This will specifies a background color for the first <p> element
of its parent.

Confidential

2009 Syntel, Inc.

New Pseudo elements

:last-of-type Selector
The :last-of-type selector matches every element that is
the last child, of a particular type, of its parent.
p:last-of-type
{
background: red;
}
This specifies a background color for the last <p> element of
its parent.

Confidential

2009 Syntel, Inc.

New Pseudo elements

:only-of-type Selector
The :only-of-type selector matches every element that is
the only child of its type, of its parent.
p:only-of-type
{
background: red;
}
This specifies a background color for every <p> element that is
the only child of its type, of its parent.

Confidential

2009 Syntel, Inc.

New Pseudo classes

:first-child selector
The :first-child selector is used to select the specified
selector, only if it is the first child of its parent.

li:first-child
{
background:
yellow;
}
It selects the first <li> child element in the list.

Confidential

2009 Syntel, Inc.

New Pseudo classes

:last-child Selector
The :last-child selector matches every element that is the
last child of its parent.

p:last-child
{
background: red;
}
It selects a background color for the <p> element that is the
last child of its parent.

Confidential

2009 Syntel, Inc.

New Pseudo classes

:only-child Selector
The :only-child selector matches every element that is
the only child of its parent.

p:only-child
{
background: red;
}
It specifies a background color for every <p> element that
is the only child of its parent.

Confidential

2009 Syntel, Inc.

New Properties
Animations:
CSS3 animations can replace animations created by Flash
and JavaScript in existing web pages.
The @keyframes rule is where the animation is created.
When an animation is created in the @keyframe rule, you
must bind it to a selector, otherwise the animation will have no
effect.

Confidential

2009 Syntel, Inc.

New Properties
Bind the animation to a selector (element) by specifying at
least these two properties:
the name of the animation
the duration of the animation

If the duration part is not specified, the animation will

have no effect, because the default value is 0.

Confidential

2009 Syntel, Inc.

New Properties
Code Snippet:
/* Standard syntax */
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Here we can change the background color when the animation
is 25%, and 50%, and again when the animation is 100%
complete.
Confidential

2009 Syntel, Inc.

New Properties
Transitions
CSS3 transitions are effects that let an element gradually
change from one style to another.
For transitions we specify 2 things:

The CSS property you want to add an effect to

The duration of the effect

If the duration part is not specified, the transition will have

no effect, because the default value is 0.

Confidential

2009 Syntel, Inc.

New Properties
Code Snippet:
div
{
-webkit-transition: width 2s; /* For
Safari 3.1 to 6.0 */
transition: width 2s;
}
This will add a transition effect on the width property, with a
duration of 2 seconds.

Confidential

2009 Syntel, Inc.

New Properties
Code Snippet:
div
{
-webkit-transition: width 2s, height 2s,
-webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
This will add transition effects on width, height, and
transformation using multiple changes by separating comma.

Confidential

2009 Syntel, Inc.

New Properties
Transformations:
A transformation is an effect that lets an element change
shape, size and position.
You can transform your elements using 2D or 3D
transformation.
With CSS3 transform, we can move, scale, turn, spin, and
stretch elements.
2d transform methods:

Confidential

2009 Syntel, Inc.

translate()
rotate()
scale()

New Properties
Translate() method:
With the translate() method, the element moves from its current
position, depending on the parameters given for the left (X-axis) and the
top (Y-axis) position.

div
{
-ms-transform: ranslate(50px,100px);
-webkit-transform: translate(50px,100px);
transform: translate(50px,100px);
}
It will translates the value (50px,100px) and also moves the
element 50 pixels from the left, and 100 pixels from the top.
Confidential

2009 Syntel, Inc.

New Properties
Rotate() method:
With the rotate() method, the element rotates clockwise at a given
degree. Negative values are allowed and rotates the element
counter-clockwise.

div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
Here it will rotates the element clockwise 30 degrees.

Confidential

2009 Syntel, Inc.

New Properties
Scale() method:
With the scale() method, the element increases or decreases the size,
depending on the parameters given for the width (X-axis) and the height (Yaxis).

div {
-ms-transform: scale(2,4);
-webkit-transform: scale(2,4);
transform: scale(2,4);
}
Here the value scale(2,4) transforms the width to be twice its original size,
and the height 4 times its original size.

Confidential

2009 Syntel, Inc.

References
Websites:

www.w3schools.com
https://www.codeschool.com
www.css3-tutorial.net/

Books:

Confidential

Beginning HTML5 and CSS3: Next Generation Web Standards

CSS3 Foundations (Treehouse Book Series)Paperback
CSS Mastery: Advanced Web Standards Solutions

2009 Syntel, Inc.

Thanks

Thank You

Confidential

2009 Syntel, Inc.