Problemas con HTML5 y CSS3

Hola amigos de Cristalab

He estado practicando ultimamente con el HTML5 y el CSS3 y me ha facilitado mucho las cosas gracias a su nuevo lenguaje semántico, mejor nombrar objetos como <section> y <article> que por <div>

Mi problema tiene que ver con la propiedad de CSS3, llamada border radius.

Por favor miren este sitio que uso para practicar

http://www.camilocastro.webs.com

El sitio tiene unas animaciones de hover en las 3 columnas article organizadas con inline-block y otra animacion mas sutil en en <h1> del título.

Se ve bien y funcina como debe en Chrome, y en Mozilla, donde lo unico que no muestra es el transform del titulo. Pero al verlo en el Internet Explorer nada se ve como debería... todos los bloques desaparecen y solo me muestra el texto... a qué se puede deber, si en las propiedades que lo requiere estoy anteponiendo el -ms- : por ejemplo: -ms-border-radius: 1em; pero no se ve así.

Así es diseñar para internet explorer (no estoy seguro si exista -ms- para border-radius)

La propiedad border-radius no esta soportada en IE 8 y anteriores.

Sin embargo puedes usar esta herramienta css3 pie para simular el efecto en cualquier version de IE.

Ademas de border radius tabien sirve para las siguientes propiedades de css3:

box-shadow
border-image
multiple background images
linear-gradient as background image

Ya que estás iniciándote en HTML5 y CSS3 te recomiendo agendar este sitio que te dirá qué está soportado en qué navegador: http://caniuse.com/

Excelentes aportes

Ya le hice una pequeña actualizacion a mi web gratuita, la cual mejorare este año que pienso comprar un hosting con dominio para uso profesional.

Me gustaria recibir comentarios, se que esta muy básica aun, pero estoy probando ahora el uso de rellenos degradados con css3

http://camilocastro.webs.com/

Ya estare terminando muy pronto el resto de contenidos de la web.

Agradezco una vez más sus grandes aportes.

Está muy bien.

La única puntualización que puedo hacer es cuando declarar gradientes, has olvidado ponerlos sin prefijos de navegador. Los prefijos sirven para probar la funcionalidad en tal o cual render pero también debes poner el atributo estándar. Lo mismo vale para border-radius.

Y Opera también soporta gradientes a la manera de FF con prefijo -o-.

En realidad si puse los prefijos, pero solo he probado con -webkit-gradient y -moz-gradient, con los resultados esperados, desafortunadamente no existe un estándar para esta propiedad de rellenos degradados

Lamento corregirte pero sí existe un estándar:
CSS Image Values and Replaced Content Module Level 3 - Gradients

Si afortunadamente ya existe un estándar en el uso del relleno degradado, lo encontre por www.css3files.com, tiene información excelente sobre el uso de las propiedades que se aplican más frecuentemente en sitios web