Css3

Ashu Tomar
ashu@knoldus.com
CSS3
Cascading Style Sheets

Agenda
1. Importance of CSS
2. CSS Definition
3. CSS3 Combinators
4. CSS3 Transforms
5. CSS3 Transitions
6. CSS3 Animations
7. Demo without JS
8. Demo with JS()

Importance of CSS
A simple web page without using CSS

CSS Definition
Design is not just something designers do.
Design is marketing.
Cascading Style Sheets (CSS) primary
language used to describe look and formatting
for webpages across the Internet and
documents of markup in general.
Use CSS to define styles for your documents,
including the design, layout and variations in
display for different devices and screen sizes.

CSS Combinators
There are four different combinators in CSS3:
1. Descendant selector
2. Child selector
3. Adjacent sibling selector
4. General sibling selector
1. Descendant selector
The descendant selector matches all elements that are
descendants of a specified element.

<head>
<style>
div p {
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<span><p>Paragraph 3.</p></span>
</div>
<p>Paragraph 4. </p>
</body>

2. Child selector
The child selector selects all elements that are the immediate
children of a specified element.

<head>
<style>
div > p {
}
</style>
</head>
<body>
<div>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 2.</p>
<span><p>Paragraph 3.</p></span>
</div>
</body>

3. Adjacent Sibling Selector
The adjacent sibling selector selects all elements that
are the adjacent siblings of a specified element.
Sibling elements must have the same parent element,
and "adjacent" means "immediately following".

4. General Sibling Selector
The general sibling selector selects all elements that are siblings
of a specified element.

<head>
<style>
div ~ p {
}
</style>
</head>
<body>
<div>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<p>Paragraph 4.</p>
</body>

CSS3 Transforms
A transformation is an effect that lets an element change shape,
size and position.
CSS3 transforms allow you to translate, rotate, scale, and skew
elements.
CSS3 supports 2D and 3D transformations.

CSS3 2D Transforms
2D transformation methods:
– translate()
– rotate()
– scale()
– skewX()
– skewY()

The translate() Method
The translate() method moves an element from its current position
(according to the parameters given for the X-axis and the Y-axis).

<head>
<style>
div {
width: 300px;
height: 100px;
border: 1px solid black;
-ms-transform: translate(150px,100px);
-webkit-transform: translate(150px,100px);
transform: translate(150px,100px);
}
</style>
</head>
<body>
<div>
The translate() method moves an element from
its current position. This div element is moved
50 pixels to the right, and 100 pixels down from
its current position.
</div>
</body>

The rotate() Method
The rotate() method rotates an element clockwise or counter-
clockwise according to a given degree.
–

The scale() Method
The scale() method increases or decreases the size of an element
(according to the parameters given for the width and height).

The skewX() & skewY() Method
The skewX() and SkewY() method skews an element along the X-axis or
Y-axis by the given angle.
These property tilts an element to the left or right, like turning a triangle into
a parallelogram. There is no shorthand skew property.
email
For entering email addresses, and hints that the @ should be shown on the keyboard by default. You can add the multiple attribute if more than one email address will be provided.
email
For entering email addresses, and hints that the @ should be shown on the keyboard by default. You can add the multiple attribute if more than one email address will be provided.

div{
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
}
div {
-ms-transform: skewY(20deg);
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
}

Browser Support for 2D Transforms

CSS3 Transitions
CSS3 transitions allows you to change property values
smoothly (from one value to another), over a given duration.
The following lists all the transition properties:
Property Description
transition : A shorthand property for setting the
four transition properties into a
single property.
transition-delay : Specifies a delay (in seconds) for the
transition effect.

transition-duration : Specifies how many seconds or
milliseconds a transition effect takes to
complete
transition-property : Specifies the name of the CSS property
the transition effect is for
transition-timing-function: Specifies the speed curve of the transition
effect

The transition-timing-function property can have the
following values:
• ease - specifies a transition effect with a slow start, then fast,
then end slowly (this is default)
• linear - specifies a transition effect with the same speed from
start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and
end

CSS3 Animations
An animation lets an element gradually change from one style to
another.
You can change as many CSS properties you want, as many
times you want.
To use CSS3 animation, you must first specify some keyframes
for the animation.
Keyframes hold what styles the element will have at certain times.

The @keyframes Rule
When you specify CSS styles inside the @keyframes rule,
the animation will gradually change from the current style
to the new style at certain times.
To get an animation to work, you must bind the animation
to an element.

The following table lists the @keyframes rule and all the
animation properties:
Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting
all the animation properties
animation-delay Specifies a delay for the start of an
animation
animation-direction Specifies whether an animation
should play in reverse direction or
alternate cycles

animation-duration Specifies how many seconds or
milliseconds an animation takes to
complete one cycle
animation-iteration-count Specifies the number of times an
animation should be played
animation-name Specifies the name of the @keyframes
animation

Browser Support for Animations

Css3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Css3

Similar to Css3 (20)

More from Knoldus Inc.

More from Knoldus Inc. (20)

Recently uploaded

Recently uploaded (20)

Css3