1) Animaciones CSS

2) Web Fonts

3) Media Querys que dan lugar al diseño fluido ó responsivo
hacen referencia a un nuevo seudo selector CSS3 que es este "@media" este seudo selector sirve para ajustar el contenido de nuestra web en base a la resolución del dispositivo sobre el que se este ejecutando la aplicación web.
ejemplos: @media screen and (max-width:600px){
.estilo1{
background:#AABBCC;
}
}

<link rel="stylesheet" media="screen and (max-width:600px)" href="hoja600.css"/>

@media screen and (min-width:600px){
.estilo2{
background:#CCC;
}
}

@media screen and (min-width:600px) and (max-width:1000px){
.estilo3{
background:#00F;
}
}

@media screen and (max-device-width:480px){
.estilo4{
background:#9AD;
}
}

4) Nuevas reglas de diseño/Nuevos selectores:

reglas de borde.- reglas de como hacer los bordes en tipo block:

Border-radius.- permite redondear el borde que nosotros queramos expecificando el radio de la curvatura

-moz-border-radius: 5px;

-webkit-border-radius: 5px;                    son reglas de cada motor, para asegurarnos que las reconozca.

border-radius: 5px;                                 cuando el estandar este cerrado se utilizara el ultimo.

border-radius: 10px(paro los bordes de arriba) 20px(para los bordes de abajo);

Border-image.- para utilizar alguna imagen prepara como bordes.

-moz-border-image:

-webkit-border-image:

border-image: url('imagen1.png') 3 3 3 3; ---> los 3 son anchura en cada borde, se puede poner a cada uno o solo un 3 para todos los bordes.

border-image-source: 'imagen1.png';

border-image-slice: 3 3 3 3; 

border-image-width: 5px; anchura

border-image-height: 5px; altura

border-image-outset: 2px; hace referencia al area de la imagen que se estiende mas alla del borde definido, sirve para crear degradados en el borde.

box-shadow.- para dar sobras a una caja.

-moz-box-shadow:

-webkit-box-shadow:

box-shadow: 3px(desplazamiento horizontal de la sombra) -9px(desplazamiento vertical de la sombra valor negativo sombra abajo, valor positivo sombra arriba, 0 no habria desplazamiento vertical) 7px(es el valor de difuminado de la sombra mientras mas valor mas sombra tendremos)(el tamaño de la sombra) #000000(color de la sombra);

regla de texto multicolumna.- esta regla surgio para maquetar textos en libros electronicos.
column-width (anchura de columnas)
column-gap (el espacio en blanco entre columnas)
column-rule (para crear la linea divisoria entre columnas)
column-count (para definir cuantas columnas)
-esta regla no esta soportada por todos los navegadores, el internet explorer 9 no la soporta.

.cincocolumnas{
-moz-column-count:5;
-moz-column-gap:2m;
-moz-column-rule:1px solid #000;
-webkit-column-count:5;
-webkit-column-gap:2m;
-webkit-column-rule:1px solid #000;
}

http://www.w3c.org/TR/css3-multicol/

Fuentes tipográficas(@font-face).- tipos de fuentes que se pueden usar ttf y otf.
@font-face{
font-family: "..................";
src:url(dirección donde se encuentra el archivo);
font-weight: ....;
font-size: .....;
font-style: ....;
}
el @font-face tiene que coger la fuente de un servidor real, un apache, etc..
@font-face{
font-family: "Vivaldi";
font-style:normal;
font-weight:normal;
src:url(vivaldi.cot);
}

h2{
font-family:"Vivaldi";
}

Degradados.- se crea un degradado se lo puede usar como color, ya sea texto una caja o a cualquier cosa que se le pueda asignar un color.
lineal.-
linear-gradient:(black; orange); minimo se le pueden pasar 2 colores

div{
height:300px;
width:300px;
background:-moz-linear-gradient(black, white);
background:-webkit-linear-gradient(black, white);
background:-o-linear-gradient(black, white);
background:linear-gradient(black, white); 
}

circular.-
div{
height:300px;
width:300px;
background:-moz-radial-gradient(black, white);
background:-webkit-radial-gradient(black, white);
background:-o-radial-gradient(black, white);
background:radial-gradient(black, white); 

}

circular con repetición.-

repeating-radial-gradient(ellipse, #fc4, #abc 33%); primero la forma, luego los colores como minimo 2 y el porcentaje del total de la caja.

background:-moz-repeating-radial-gradient(20% 80%, ellipse closest-side, red, blue, red 50px);
    background:-webkit-repeating-radial-gradient(20% 80%, ellipse closest-side, red, blue, red 50px);
    background:-o-repeating-radial-gradient(20% 80%, ellipse closest-side, red, blue, red 50px);
    background:repeating-radial-gradient(20% 80%, ellipse closest-side, red, blue, red 50px);

en lugar del closest se puede poner farthest.

ejercicio de maquetación, hacer la siguiente página web http://www.areafor.com/ejemplos/clinicaveterinaria


*Animaciones CSS3
Maneras para realizar animaciones:

-Animaciones en Canvas}Javascript
-Animaciones en svg}Javascript
-Animaciones en CSS3} adopta las bondades del flash, no necesita javascript solo código css (EDGE aplicación para crear flash) hay un EDGE orientado a programación y otro a animación. estan en beta por lo cual son gratuitas.

Reglas CSS3 que nos permitiran crear animaciones:

-animation-name: nombre de la animación

-animation-duration: duracion de la animacion, se lo dice en segundo o milisegundos, por defecto es cero.

-animation-iteration-count: indicamos cuantas veces queremos que nuestra animacion se repita. se lo puede indicar con valores enteros, o infinite.

-animation-direction: indicamos la direccion de la animacion, por defecto viene la direccion normal, se la puede hacer alternative para que vaya y venga, en clicos.

-animation-timing-function: hacer referencia a la curva temporal que utilizaremos para calcular los diferentes estados entre el inicio y el final de la animación, concepto de linea de tiempo, si queremos q al principio vaya mas rapido que al final, por defecto viene case, pero podemos darle linear, case-in, case-out, case-in-out, cubic-bezier.

-animation-fill-mode: hace referencia el estilo antes o despues de que se ejecute la animación, tiene 4 valores posibles que son: forwards(aplicaremos todas las propiedades en el último fotograma), backwards(aplicaremos todas las opciones en el primer fotograma), both(las aplicaremos en el inicio y en el final), none(no habrá ningún tipo de aplicación)

-animation-delay: indica el valor en segundos o milisegundos el retardo en comenzar la animación, por defecto siempre es cero.

-animation-play-state: tiene 2 valores que pueden ser play y pause

estas animaciones esta soportadas por cualquier navegador webkit y mozilla, no la soporta explorer.