PDF de programación - Guía completa de CSS 3

Por: Geovanny Quilarque



Con CSS 3, más control sobre la forma

El objetivo inicial de CSS, separar el contenido de la forma, se cumplió ya con las primeras
especificaciones del lenguaje. Sin embargo, el objetivo de ofrecer un control total a los
diseñadores sobre los elementos de la página ha sido más difícil de cubrir. Las especificaciones
anteriores del lenguaje tenían muchas utilidades para aplicar estilos a las webs, pero los
desarrolladores aún continúan usando trucos diversos para conseguir efectos tan comunes o tan
deseados como los bordes redondeados o el sombreado de elementos en la página.

CSS 1 ya significó un avance considerable a la hora de diseñar páginas web, aportando mucho
mayor control de los elementos de la página. Pero como todavía quedaron muchas otras cosas
que los diseñadores deseaban hacer, pero que CSS no permitía especificar, éstos debían hacer uso
de trucos para el diseño. Lo peor de esos trucos es que muchas veces implica alterar el contenido
de la página para incorporar nuevas etiquetas HTML que permitan aplicar estilos de una manera
más elaborada. Dada la necesidad de cambiar el contenido, para alterar al diseño y hacer cosas
que CSS no permitía, se estaba dando al traste con alguno de los objetivos para los que CSS fue
creado, que era el separar por completo el contenido de la forma.

CSS 2 incorporó algunas novedades interesantes, que hoy ya utilizamos habitualmente, pero CSS 3
todavía avanza un poco más en la dirección, de aportar más control sobre los elementos de la
página.

Así pues, la novedad más importante que aporta CSS 3, de cara a los desarrolladores de webs,
consiste en la incorporación de nuevos mecanismos para mantener un mayor control sobre el
estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a trucos o hacks,
que a menudo complicaban el código de las web.

Propiedades nuevas en CSS 3

He aquí una lista de las principales propiedades que son novedad en CSS3.

Bordes

 border-color
 border-image
 border-radius
 box-shadow

Fondos

 background-origin
 background-clip
 background-size
 hacer capas con múltiples imágenes de fondo

Color





colores HSL
colores HSLA
colores RGBA


 Opacidad

Texto



text-shadow
text-overflow


 Rotura de palabras largas
 Web Fonts

Interfaz

resize

 box-sizing

 outline
 nav-top, nav-right, nav-bottom, nav-left

Selectores

 Selectores por atributos

Modelo de caja básico

 overflow-x, overflow-y

Degradados CSS3

 Degradados lineales
 Degradados radiales
 Degradados lineales de repetición
 Degradados radiales de repetición

Otros

creación de múltiples columnas de texto

 media queries

 propiedades orientadas a discurso o lectura automática de páginas web
 animaciones CSS3



Explicaciones y test de nuevas características CSS 3

Artículos prácticos con explicaciones de las nuevas características de la especificación CSS 3, útiles
para hacer todo tipo de efectos gráficos de las webs modernas.

Bordes redondeados en CSS 3

Las características de CSS 3 incluyen bordes redondeados, a través del atributo border-radius, que
define la curvatura que debe tener el borde del elemento.

CSS 3 incorpora nuevas propiedades para el control de bordes de los elementos. Ahora se
permiten bordes con las esquinas redondeadas, bordes con imágenes (incluso varias imágenes se
pueden utilizar para definir el aspecto del borde), sombras, etc.

Tenemos la propiedad border-radius, que permite definir bordes redondeados en las esquinas,
especificando las medidas del radio que deben darse a la curva de las esquinas. Su uso sería
aproximado al que vemos a continuación:

border-radius: 5px;

Definiría un radio de 5 píxeles en el redondeo de las esquinas del elemento. Por el momento
Mozilla ha adoptado este atributo con un nombre especial, que es válido para productos como
Firefox, mientras que las especificaciones de CSS3 no hayan alcanzado el estado "Candidate
Recommendation", que es cuando se supone que
los distintos navegadores deben
implementarlas. El nombre del atributo por el momento es:

-moz-border-radius

Los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las
esquinas redondeadas de CSS 3, pero el atributo border-radius tampoco funciona directamente,
como en el caso de Firefox, sino que hay que utilizar un "alias":

-webkit-border-radius

Por el momento, para navegadores Mozilla y WebKit que son los primeros en adaptarse a CSS3,
podemos utilizar el atributo border-radius de la siguiente manera:

DIV {

border: 1px solid #000000;

-moz-border-radius: 7px;

-webkit-border-radius: 7px;

padding: 10px;

}

Con esto conseguimos que todos los div tengan un borde redondeado en las esquinas de radio de
7 píxeles. Fijarse en el uso de los atributos -moz-border-radius y -webkit-border-radius, que sirven
para lo mismo, pero en navegadores basados en Mozilla y basados en WebKit.

Pero el atributo border-radius tiene otras posibles configuraciones, en la que se pueden definir los
valores para el radio de las cuatro esquinas por separado. De esta manera:

-moz-border-radius: 7px 27px 100px 0px;

Así estaríamos definiendo un borde redondeado con radio de 7 pixel para la esquina superior
izquierda, luego 27px para la esquina superior derecha, de 100px para la inferior derecha y 0px
para la inferior izquierda. (Hay que explicar que un border-radius de 0px es un borde con esquina
en ángulo recto)

Los bordes redondeados con CSS 3, como se podrá imaginar, sólo se ven si se tiene definido algún
borde visible al elemento que se los asignamos, ya sea solid, dotted, etc. Eso es lo que definen las
especificaciones de CSS3, aunque en el momento de escribir el artículo debo señalar que incluso
Mozilla o Firefox (el único que por ahora soporta este atributo de CSS3) no funciona del todo
correctamente con esto y sólo muestra los bordes redondeados con solid.

Múltiples imágenes de fondo con CSS

Cómo conseguir que un elemento de la página tenga varias imágenes de fondo a la vez, con CSS
básico y con características de CSS 3.

Con el atributo background-image podemos conseguir que un elemento de la página tenga un
fondo de imagen. Esto debemos saberlo, puesto que es algo básico de las hojas de estilo en
cascada (CSS).

Una de las nuevas características de CSS 3 consiste en la posibilidad de declarar varios fondos de
imagen a un elemento de la página. Lo que antes hemos visto que es posible, creando varios
elementos anidados y colocando un fondo en cada uno, se puede hacer en CSS 3 con un solo
elemento, al que aplicaremos varios fondos distintos.

El HTML del ejemplo de varias imágenes de fondo sería el siguiente:

<div id="fondos">

texto de un único elemento

...

</div>

Ahora veamos el CSS 3 válido para este ejemplo:

<style type="text/css">

#fondos{

background: url(fondo3.png) bottom right no-repeat,

url(fondo2.png) center no-repeat,

url(fondo1.gif) center repeat;

width: 300px;

}

</style>

Sólo cabe comentar que las distintas imágenes de fondo se tienen que escribir en la declaración
CSS separadas por comas. Además, las imágenes que declaramos se van colocando de modo que
la primera aparece sobre las siguientes. Así pues, en esta declaración, fondo1.gif, que está
colocada como último fondo, es la que aparece detrás del todo.

Colores RGBA en CSS 3

Veremos qué son los colores RGBA y su notación, que se incluyen en la especificación de Hojas de
Estilo en Cascada CSS 3.

Como sabemos, los colores en HTML se expresan en valores RGB, igual que en CSS, que admite
diversas notaciones para definir el color, a través de números en hexadecimal e incluso en
decimal. Todo esto suponemos no será un misterio para los lectores, que sin duda habrán
experimentado con CSS y probablemente estén familiarizados con las distintas notaciones para
especificar color en las hojas de estilo.

Ahora queremos hablar de una nueva notación, que no es simplemente una manera nueva de
expresar lo mismo, sino una que nos permite definir colores por medio de valores adicionales. Se
trata de la notación RGBA, que a partir de CSS 3 está disponible para los desarrolladores.

La notación RGBA es una manera de especificar colores en la que se definen cuatro valores. Los
tres primeros son los bien conocidos canales RGB (rojo, verde y azul) y el cuarto parámetro es el
canal Alpha, que no es más que el grado de transparencia u opacidad del color. El canal Alpha es
un valor entre cero y uno, siendo 0 totalmente transparente y 1 totalmente opaco.

En el mundo del diseño quizás ya habremos visto otros formatos o sistemas que soportan colores
con canal Alpha y por ello puede que estemos familiarizados con este parámetro. El formato de
imagen PNG, que tanto nos gusta por soportar transparencia que se ve correctamente en todos
los fondos posibles, implementa justamente este canal alpha en la definición del color para
conseguir una transparencia ideal.

Ahora, por medio de los colores en RGBA en CSS 3, podremos aplicar nuevas transparencias a los
colores que especificamos con CSS, abriendo nuevas posibilidades a los diseñadores sin necesidad
de complicarse con pequeños trucos como el uso de imágenes de fondo semitransparentes en
PNG, etc. Además, como los colores RGBA se pueden aplicar a cualquier elemento que soporte
asignación de color, las