CSS 3 properties and animations

1. CSS3

2. Before we start
I don’t claim to have infallible knowledge
on CSS3. If you find any of this
information to be incorrect or inefficient let
me know, I’d love to hear your thoughts.

3. CSS 3
• CSS is used to control style and layout of
the web pages
• CSS3 is the latest standard for css.
Although the specification for css3 is still
under development by W3C. However,
many properties of css3 are supported by
the modern browsers

4. CSS3 new properties
•Borders
•Backgrounds
•Transitions
•Animation

5. Description
•Border-radius – creates rounded borders
•Box-shadow – adds shadow to boxes
•Border-image – uses an image as the
border

6. Border-radius
•W3C specification
Border-radius
Border-top-left-radius
Border-top-right-radius
Border-bottom-right-radius
Border-bottom-left-radius
•Mozilla Implementation
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
Syntax:
border-radius:25px; // length

7. Box-shadow
Syntax:
Box-shadow: box-shadow: none |
<shadow> [,<shadow>]*
where <shadow> is defined as:
<offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>

8. Examples
Example A shows a shadow offset to the left and top by 5px:
#Example_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}
Example B shows the same shadow with a blur distance of 5px:
#Example_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

9. Border-image
Syntax:
Border-image: <source> slice width outset repeat;
#round{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and
Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

10. Browser Support
•Internet Explorer 9 supports two of the new border
properties.
•Firefox requires the prefix -moz- for border-image.
•Chrome and Safari requires the prefix -webkit- for border-
image.
•Opera requires the prefix -o- for border-image.
•Opera supports the new border properties.

11. CSS3 Transitions
With CSS3, we can add an effect when changing from one
style to another, without using Flash animations or
JavaScripts.
Transition properties:
• Transition-property
• Transition-duration
• Transition-timing-function
• Transition-delay

12. CSS3 Animations
What is Animation?
The technique of photographing successive drawings or positions of
puppets or models to create an illusion of movement when the film is
shown as a sequence.
How:
When the animation is created in the @keyframe, bind it to a selector,
otherwise the animation will have no effect. Bind the animation to a
selector by specifying at least these two CSS3 animation properties:
• Specify the name of the animation
• Specify the duration of the animation
• Working draft: http://www.w3.org/TR/2009/WD-css3-animations-20090320/

13. Timing Functions
• Declared using animation-timing-function
• Value Description
• linear The animation has the same speed from start to end
• ease
• Default. The animation has a slow start, then fast, before it ends slowly
• ease-in The animation has a slow start
• ease-out The animation has a slow end
• ease-in-out The animation has both a slow start and a slow end
• cubic-bezier(n,n,n,n) Possible values are numeric values from 0 to 1
• Very useful tool for creating Cubic-Bezer code: http://cubic-bezier.com/#.14,.98,.91,.11

14. Important Links
•http://www.sitepoint.com/build-awesome-apps-with-css3-
animations/#fbid=siBj6rCkHLg
•http://tympanus.net/Tutorials/AnimatedButtons/index4.html
•http://chrisyaxley.co.uk/css3animations/swingAndFall.shtml
•http://caniuse.com/css-animation
•http://daneden.me/animate/

15. End