La tercera versi\u00f3n de las hojas de estilo para p\u00e1ginas web presenta muchas novedades que nos ofrecen m\u00faltiples posibilidades para dar un aspecto moderno y atractivo a nuestros dise\u00f1os webs.<\/p>\n
El problema quiz\u00e1s sea la compatibilidad. A continuaci\u00f3n, detallaremos alguna de las nuevas opciones que nos da CSS3<\/strong> que son compatibles con todos los navegadores, a excepci\u00f3n de las versiones de Internet Explorer inferiores a la 9.<\/p>\n Textos y sus fuentes:<\/strong><\/em><\/span><\/p>\n La propiedad text-shadow<\/strong> nos permite a\u00f1adir sombra a cualquier texto de nuestra web. Podemos indicarle la posici\u00f3n horizontal, la posici\u00f3n vertical, el desenfocado y el color de la sombra. Para sombrear ESTE TEXTO<\/span> hemos a\u00f1adido la siguiente l\u00ednea en el css:\u00a0text-shadow:\u00a05px 5px 5px\u00a0red;<\/em><\/p>\n CSS3 tambi\u00e9n nos permite indicar el funcionamiento de las palabras o textos cuando \u00e9stas no entran en un div o elemento contenedor. Mediante\u00a0word-wrap<\/strong>, las palabras se dividir\u00e1n (break-word) y text-overflow<\/strong> ofrece la misma posibilidad para textos largos, d\u00e1ndonos la opci\u00f3n de ocultar el texto sobrante (clip) y de advertir de que hay m\u00e1s contenido a\u00f1adiendo unos sutiles puntos suspensivos (ellipsis)<\/p>\n Contenedores con sombra y bordes especiales:<\/em><\/strong><\/span><\/p>\n De nuevo hay que decir que con CSS3, a\u00f1adir sombras, bordes (con im\u00e1genes, redondeados, …) es muy f\u00e1cil.<\/p>\n 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.<\/p>\n Box-shadow se configura f\u00e1cilmente con 5 par\u00e1metros: posici\u00f3n horizontal, vertical, desenfocado, inicio del desenfocado, color y, de forma opcional, indicarle que la sombra sea interior (inset)<\/p>\n