Las novedades de CCS 3 (II) - Nobbot

Las novedades de CCS 3 (II)

CSS 3En la primera parte de este artículo, ya dimos un repaso a algunas de las novedades que traerá consigo CSS 3 cuando sea formalmente publicado, entre las cuales estaban los bordes redondeados, las transparencias y el uso de cualquier tipo de fuente para nuestro diseño web. Queda claro por tanto que esta nueva versión del lenguaje para edición de hojas de estilo nos facilitará mucho las cosas a la hora de dejar volar nuestra creatividad.

Pero aún hay más, y en unión con HTML 5, la web promete dar un paso de gigante en los próximos años, si sabemos sacar partido de todo lo que estos lenguajes nos aportarán. Si estáis interesados en conocer un poco más, aquí os dejo con otra tanta de novedades de CSS 3:

  • Sombreados para textos y elementos: Un recurso tan viejo como el diseño gráfico, para cuya aplicación en la web se habían inventado cientos de alternativas, a cual más engorrosa. Como no podía ser de otro modo, la tercera generación de CSS llegará para hacernos la vida más fácil, pues nos permitirá aplicar sombreados sobre cualquier elemento de una manera así de sencilla:

    -moz-box-shadow: black 10px 5px 5px;
    -webkit-box-shadow: black 10px 5px 5px;
    box-shadow: black 10px 5px 5px;

    Como resultado, el cuadro al que apliquemos este estilo pasará a tener un sombreado negro desplazado hacia la izquierda y hacia abajo, tal y como os muestro en la imagen a continuación:

    Sombra CSS 3

    Esta propiedad funciona en las últimas versiones de Firefox, Safari y Chrome. Así mismo, también podemos aplicar el sombreado a un texto exclusivamente, posibilidad también compatible con Opera, pero no con Chrome. Para ello, habría que incluir estas líneas a la hoja de estilos:

    text-shadow: black 10px 5px 5px;

  • Bordes con imágenes: Ya vimos la posibilidad de redondear los bordes de los elementos, ¿pero por qué no añadirle directamente las imágenes que nos venga en gana? Una vez más, nos encontramos ante una novedad que dará alas a nuestra creatividad, que puede aplicarse tal y como os muestro a continuación a modo de ejemplo:

    -webkit-border-image: url(/imagenes/borde.png) 10 repeat;
    -moz-border-image: url(/imagenes/borde.png) 10 repeat;
    border-image: url(/imagenes/borde.png) 10 repeat;

    Pero las posibilidades de este atributo no acaban ahí, porque podemos aplicarlo a un único lado empleando “border-top-image”, por ejemplo, o directamente a las esquinas con “border-corner-image”. Os gusta, ¿verdad? Pues como de costumbre, funciona en todos los navegadores modernos, excepto Internet Explorer.

    Bordes CSS 3

  • Color RGBA: Más allá de los esquemas de colores tradicionales, HTML y RGB, esta novedad nos permitirá incluir transparencia a cualquier color por medio del canal Alpha. Por ejemplo, un elemento verde con la transparencia al 50% se definiría así:

    background: rgba(0, 255, 0, 0.5);

    Como habréis supuesto, las posibilidades son similares a las de las transparecias que comentamos en la primera parte del artículo, aunque aplicando el valor dentro del propio campo de color. Vamos, que se trata de una forma de hacernos la vida aún más fácil a los diseñadores. A vuestra disposición en todos los navegadores modernos.

    RGBA CSS 3