CSS3 introduce nuevos módulos que añaden funcionalidades a CSS2, aumentando las capacidades de diseño para aplicar estilos modernos a sitios web. Los principales módulos incluyen efectos de texto como sombras de texto, bordes redondeados con border-radius, animaciones con @keyframes, transformaciones 2D y 3D, y transiciones para cambios de estilo progresivos.

1. CSS3
El nuevo CSS3 se caracteriza por su estructura de módulos.
Estos módulos contienen nuevas funcionalidades que se
añaden a las ya existentes en la versión anterior, CSS2.
De este modo, CSS3 aumenta considerablemente sus
capacidades de diseño, es decir, permite aplicar estilos más
modernos a los diferentes elementos de un sitio web. A
continuación vamos a ver sus principales características.
Módulos destacados
CSS3 propiedades
Efectos de texto: CSS3 incorpora nuevas propiedades para crear diseños de texto más
atractivos. Entre todas ellas destaca text-shadow, la cual, como su nombre indica, añade un
efecto de sombra al texto. Su sintaxis es la siguiente: text-shadow: h v blur color;. Las 2
primeras definen la posición de la sombra, mientras las últimas, la magnitud del blur y el color
de la sombra.
Bordes: Ahora podemos diseñar de manera sencilla bordes redondeados con la propiedad
border-radius, bordes formados por imágenes con border-image, y sombras con box-shadow,
entre otras opciones.
Animaciones: También tenemos otra nueva función en CSS3 que permite conseguir
resultados similares a las animaciones creadas con Flash. Se trata de la regla @keyframes,
dentro de ella se encuentra el estilo css que define la animación. Además es nece sario asignar
un nombre que identifique al @keyframes, de este modo, se puede aplicar el efecto desde el
objeto que queramos.
Transformaciones 2D / 3D: Las transformaciones en css3 ofrecen la posibilidad de cambiar el
tamaño y posición de una figura con la utilización de diversos métodos y la propiedad
transform. Algunos de los métodos principales son; rotate(), scale() y matrix() para
transformaciones 2D; y rotate3d(), matrix3d() y translate3d() para efectos 3D.
Transiciones: Este tipo de efectos permiten cambiar el estilo de un objeto de manera
progresiva. Para ello se utiliza el elemento transition, al cual le asignamos las propiedades que
deseamos cambiar y el tiempo de la transición en segundos. Por ejemplo, para cambiar la
altura de un elemento en 5 segundos: transition: height 5s;