Let’s move directly in to the topic.
CSS3 has improved much and added some cool features. We’ll go through all new features added one by one.


Using webfonts with @font-face


@font-face feature has already been integrated in css2, it was supported by IE 5 and used a proprietary font format embedded open type (.eot). Now website developers can use any licensed truetype font (.ttf) or open type font (.otf)

To use webfonts, each font family must be first declared use @font-face. It’s a kinda rule to declare font family. syntax is very simple

@font-face{
font-family : fontname;
src : url('location of font file');
}

@font-face{
font-family : fontname;
font-weight:bold;
src : url('location of bold font file');
}

Any no. of font families can be used. we need to declare for each version of font (bold, italic etc.) with src files. Once @font-face rule is declared, font family can be used anywhere.

p{ font-family:fontname;}


HSL Colors


CSS3 can understand HSL(Hue, Saturation, Lightness) colors values.

Hue: it’s the purity of colors and varies from 0-360. 0 or 360 is red, 120 is green and 240 is blue.

Saturation: it’s the intensity of colors. it’s value varies from 0-100%

Lightness: it created different shades for same colors. 0% is dark(black) and 100% is light(white) and it’s values varies in between


box-shadow


css3 has a nice feature of drop shadow around boxes “box-shadow”. box-shadow takes 4 arguments

1. first one is x offset. so a positive x means shadow on right and negative x means shadow on left.

2. second is y offset. positive y means shadow at bottom and negative y means shadow on top.

3. third parameter is blur value of shadow. so, a 0 will create sharp shadow.

4. fourth and last one is the color of shadow.

box-shadow:5px 5px 0 #aaaaaa;

above code will create a shadow of grey color in right bottom of the box

box-shadow:5px 5px 5px #ccc;

to work box-shadow in all browsers which support it, you need to put commands for them separately

-moz-box-shadow
-webkit-box-shadow
-o-box-shadow


CSS Animation , transform and transition


css3 provides functionality to move and transform elements. So, we can create cool animations and effects using css3.

let’s start with animation
To start animation first we’ve to declare animation name, duration and loop value.

  1. -webkit-animation-name:myanimation;
  2. -webkit-animation-duration:10s;
  3. -webkit-animation-iteration-count:infinite;
  4. -webkit-animation-direction:normal;
  5. -webkit-animation-timing-function:ease-in-out;
  6. -webkit-animation-delay:0;


1. this statement declared animation with the name “myanimation” in further declarations my animation can be used.

2. this statement declares duration of the animation. this animation will be 10 seconds long. default value for duration is 0 and it signifies no animation.

3. this statement sets iteration count. it’s value varies from 0 to infinite. negative no. are considered as 0. iteration count has default value 1, so animation will run from beginning to end.
animation-direction declared direction of animation. it’s default value is normal. it can take any value from [normal, alternate]. In case of alternate value, animation having animation cycle count odd will be played in reverse direction and even value counts are played in normal direction.

4. animation-timing-function property determine how animation will progress over one cycle. It’s default value is ease other possible values are
ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )

5. animation-delay is the delay in starting animation after animation is applied. it’s default value is 0 i.e. there will be no delay.

animation events are also available in DOM. Animation events will be covered in later posts.

Transitions

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

Normally when the value of a css property changes, the rendered result is updated instantly. Transition allows the value changes updated smoothly over specified duration. So, element css values are animated from old to new value during animation.

Transition are presentational effect, so only properties that can be animated can be transitioned. Properties that can be animated can be viewed here

Transition for a property can be defined easily

div{
-webkit-transition-property:opacity;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:ease-out;
}


Multiple transition property can be defined by comma separated values

div{
-webkit-transition-property:opacity,background;
-webkit-transition-duration:2s, 4s;
-webkit-transition-timing-function:ease-out, ease;
}

shorthand notation for single transition property

div{
-webkit-transition:opacity 4s ease-out;
}

transition-property: can have a comma separated list of values to transition other values possible are none and all. ‘none’ means transition will not be applied on any property and ‘all’ means every property that can go under transition, transition will be applied.

The transition-timing-function: property describes how the intermediate values used during a transition will be calculated. Intermediate values are calculated by using ‘cubic bezier’ functions. These are called ‘easing’ function. effect of this property is that, transition from start to end takes place smoothly in varying speeds according to value of easing function set. Possible values for transition-timing-function are

ease | linear | ease-in | ease-out | ease-in-out

If you understands bezier function you can use it directly by

cubic-bezier(<number>, <number>, <number>, <number>)

Mixing the two functions animation and transition can create really amazing effects and good animation. More on animation with css3 can be seen here

More new exciting properties are left. I'll keep on writing on this topic in my later posts.