Novedades CSS3

La tercera versión de las hojas de estilo para páginas web presenta muchas novedades que nos ofrecen múltiples posibilidades para dar un aspecto moderno y atractivo a nuestros diseños webs. El problema quizás sea la compatibilidad. A continuación, detallaremos alguna de las nuevas opciones que nos da CSS3 que son compatibles con todos los navegadores, a excepción de las versiones de Internet Explorer inferiores a la 9. Textos y sus fuentes: La propiedad text-shadow nos permite añadir sombra a cualquier texto de nuestra web. Podemos indicarle la posición horizontal, la posición vertical, el desenfocado y el color de la sombra. Para sombrear ESTE TEXTO hemos añadido la siguiente línea en el css: text-shadow: 5px 5px 5px red; CSS3 también nos permite indicar el funcionamiento de las palabras o textos cuando éstas no entran en un div o elemento contenedor. Mediante word-wrap, las palabras se dividirán (break-word) y text-overflow ofrece la misma posibilidad para textos largos, dándonos la opción de ocultar el texto sobrante (clip) y de advertir de que hay más contenido añadiendo unos sutiles puntos suspensivos (ellipsis) Contenedores con sombra y bordes especiales: De nuevo hay que decir que con CSS3, añadir sombras, bordes (con imágenes, redondeados, ...) es muy fácil. La propiedad border-radius le da un aspecto redondeado al borde de cualquier elemento HTML. En el ejemplo se utiliza un border-radius: 10px; pero funciona como el padding o el margin, pudiendo indicar a cada esquina como mostrarse. Box-shadow se configura fácilmente con 5 parámetros: posición horizontal, vertical, desenfocado, inicio del desenfocado, color y, de forma opcional, indicarle que la sombra sea interior (inset)