CSS3

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.

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

CSS3 new properties

•Borders

•Backgrounds

•Transitions

•Animation

Description

•Border-radius – creates rounded borders

•Box-shadow – adds shadow to boxes

•Border-image – uses an image as the border

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

Box-shadow

Syntax:

Box-shadow: box-shadow: none | <shadow> [,<shadow>]*where <shadow> is defined as:

<offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>

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

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;

}

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.

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

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/

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

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/

End