El avance en el diseño de páginas web ha hecho que se deban realizar cada vez archivos CSS de mayor tamaño. Esto ha sumado una dificultad, y es que los archivos CSS pueden aumentar la carga de una página, sobre todo si tenemos en cuenta que algunos archivos pueden contar con varios miles de líneas. En un template de Joomla o WordPress, los archivos CSS pueden ser varios, y algunos de ellos pueden llegar a tener un tamaño de más de 30k, y el conjunto de los archivos CSS de un tema sencillo, puede llegar a superar fácilmente los 50k, la mitad de lo que se recomienda como peso total de la página, a lo que posteriormente debemos sumar el peso del resto de los archivos y las imágenes.

Por esta razón, es imprescindible que se tomen medidas para optimizar el tamaño de los archivos CSS, lo que resulta posible mediante la utilización de la abreviación del código, tema en el que nos adentraremos a continuación.

Utilización del código CSS abreviado
Lo primero que debemos saber es que existen dentro del estándar de la W3C, la posibilidad de utilizar formas abreviadas del código CSS, que son aceptadas por todos los navegadores. Esto significa que podemos utilizarlas sin temor a que tengamos problemas con los navegadores o con la validación del CSS.

Código abreviado para fondos
Para establecer las características del fondo de un elemento, se emplean varias propiedades que determinan cada una de estas características. Por ejemplo, la propiedad “background-image” se emplea para determinar cual será la imagen que el elemento tendrá como fondo. En algunas ocasiones, se puede llegar a tener que completar un código similar al siguiente para determinar todas las características del fondo:

Sin embargo, todas estas propiedades pueden resumirse en una única propiedad, llamada “background”, y en la que se puede determinar varias propiedades a la vez. Téngase en cuenta a la hora de hacer el código, que el orden que se establece en el código anterior es el mismo que se debe seguir para incluirse en la propiedad resumida; algunas de estas propiedades pueden modificar su posición y el navegador lo entenderá de todas formas, pero la forma semánticamente correcta de escribir el código es la que describimos. De esta forma, para resumir el código anterior, podremos hacerlo en una única línea, que se verá de la siguiente forma:

Como puede verse, se encuentran todos los valores de las propiedades utilizadas en el primer código, y que se encuentran separadas entre sí solo por un espacio. En caso de que no se incluya alguno de los valores, el navegador aplicará el valor por defecto de la propiedad faltante. En el ejemplo que vemos, si no introdujéramos un valor para la propiedad “background-color”, el navegador hará que la porción de fondo que no se encuentre cubierta por la imagen sea transparente, ya que es el valor por defecto de dicha propiedad.

Código abreviado para fuentes
Ahora que tenemos una idea clara de cómo funciona la abreviación de las propiedades CSS, nos limitaremos a brindar los ejemplos para cada uno de los casos en los que se puede realizar dicha abreviación. Para las fuentes, las propiedades que determinan sus características (con valores de ejemplo) son las siguientes:

Lo que puede resumirse también en una única línea de código como puede verse a continuación:

Código abreviado para listas
La propiedad “list-style” determina la forma en que se verá el estilo de las listas. Solo contiene tres propiedades subordinadas, como veremos en el siguiente código que no ha sido abreviado:

Y el código abreviado resultante es:

Código abreviado para márgenes y rellenos
El caso de la abreviación de los códigos CSS para márgenes y rellenos es un poco más complejo que los anteriores, por lo que junto con los bordes los hemos dejado para el final. En este apartado trataremos mágenes (margin) y rellenos (padding), ya que el tratamiento es el mismo. Daremos los ejemplos utilizando la propiedad “margin”, pero podrán utilizar el mismo principio para el relleno de los elementos.

Para comenzar, debemos tener en cuenta que se pueden determinar por separado los cuatro márgenes y rellenos de cualquier elemento, mediante la aplicación de propiedades separadas: margin-top, margin-right, margin-bottom y margin-left (en ese orden; para facilitar su identificación, puede decirse que siempre se empieza por arriba y se va en el sentido de las agujas del reloj: top, right, bottom, left).

Existe la posibilidad de utilizar cuatro formas de abreviar márgenes y rellenos, dependiendo la forma a utilizarse de las medidas repetidas que se encuentren en el código. Para que pueda comprenderse mejor, a continuación mostraremos los dos ejemplos, el primero del método extendido y el segundo empleando el método abreviado:

En el caso de que se tengan todas las dimensiones de margen y relleno diferentes, podemos ver la forma en que se produce la abreviación siguiendo en ambos códigos lo descrito para la capa llamada “capauno”.

Puede darse el caso en que las dimensiones de márgenes o rellenos superior e inferior sean diferentes, mientras que las dimensiones de derecha e izquierda son iguales. En este caso, como puede verse, se emplea solo tres dimensiones en la forma abreviada, siendo la primera para el margen o relleno superior, la segunda para derecha e izquierda a la vez, y la tercera para margen o relleno inferior.

En el tercer caso, las dimensiones superior e inferior son iguales y lo mismo sucede con las dimensiones de la derecha e izquierda. En la forma abreviada se utilizan dos dimensiones, siendo la primera para margen o relleno superior e inferior a la vez, mientras que la segunda corresponde a la izquierda y derecha a la vez.

El cuarto caso es el más simple de todos, ya que todas las dimensiones son iguales, por lo que solo se coloca un valor, el cual el navegador interpretará que corresponderá a los cuatro márgenes o rellenos.

Abreviación del código en los bordes
La propiedad que determina los bordes de un elemento (border), es un poco más compleja, porque resulta de la síntesis de los cuatro bordes posibles del elemento, es decir, superior, derecho, inferior e izquierdo; pero además, sirve para determinar el color, estilo y grosor de los mismos, tanto en forma independiente como de todos los bordes a la vez.

Así que en realidad se trata de varias propiedades resumidas, que son las siguientes:

En el ejemplo que presentamos, vemos que se trata de un elemento que tiene todos los bordes diferentes. En este caso, al igual que en ejemplos que hemos dado anteriormente, todas las propiedades de borde de un mismo elemento pueden resumirse en una sola. El orden en que se colocan los valores dentro de la propiedad no afecta la visualización, sin embargo, existe una forma correcta de colocar estos valores: grosor, estilo y color. Veamos como se debe hacer, siguiendo el ejemplo siguiente:

Al igual que en los casos anteriores, en caso de que uno de los valores no sea incluido, el valor que asume la propiedad simple faltante es el que dicha propiedad tiene por defecto. Si en el ejemplo anterior no se hubiera determinado el color de los bordes, éstos aparecerían de color negro, que es el valor por defecto. Los valores por defecto de la propiedad border son “medium” para el grosor, “none” para el estilo, y negro para el color. En caso de que se determine el grosor y el color de un borde, pero no su estilo, no aparecerá borde alguno.

Tal como dijimos, en caso de que todos los bordes de un elemento sean iguales, puede acortarse aún más el código, ya que además de poder resumir todas las propiedades de cada borde, se puede establecer los valores de todos los bordes en una única propiedad, “border”. A continuación mostramos un ejemplo de código abreviado:

En este ejemplo vemos que se han resumido todos los bordes en una sola propiedad, y que además, contiene todos los valores correspondientes al ancho, color y estilo de todos. Si utilizáramos la forma extendida de desarrollar el código, lo que está ocupado en una sola línea deberíamos hacerlo en doce.

Agrupar selectores con propiedades iguales
Es frecuente que algunos elementos tengan propiedades iguales, por lo que parece una pérdida de tiempo y un peso innecesario para el archivo, repetir las mismas propiedades y sus valores en varios selectores. Es posible abreviar sensiblemente el código CSS de una página web agrupando selectores con propiedades iguales. Veamos el ejemplo siguiente:

Como puede verse, los cuatro títulos del ejemplo tienen propiedades que son iguales y otras que son diferentes. La forma de simplificar este código es la siguiente:

Como cuando se colocan dos propiedades de un mismo elemento dentro de un código, el que resultará “ganador” en el conflicto será el que se encuentra más abajo en el código. Esto quiere decir que, aunque se haya establecido un tamaño de fuente al inicio del código de ejemplo para las cuatro etiquetas, los valores indicados más abajo serán los que serán válidos. Como puede apreciarse, la etiqueta h1 tiene todas sus propiedades determinadas en las primeras líneas, mientras que las demás etiquetas tienen su tamaño modificado en líneas posteriores.

Utilizar correctamente la herencia
Otra forma de disminuir la cantidad de líneas utilizadas para el desarrollo de las hojas de estilo, es la utilización correcta de la herencia, una de las características más notables del CSS, y una de las peor utilizadas.

Utilizar la herencia puede hacer que no sea necesario que se determinen muchas propiedades de elementos que son hijos de otros que ya tienen sus propiedades con los valores correspondientes determinados. Veamos un ejemplo:

En primer lugar hemos determinado que todos los elementos contenidos dentro de “body” tendrán color “#333”. Luego determinamos que los elementos “p” (párrafos) también tendrán color “#333”. Esto, simplemente se trata de una redundancia, ya que cualquier párrafo estará contenido dentro de “body”, por lo que si no se determina su color, simplemente tomará el valor del elemento padre, que en este caso es la etiqueta “body”.

En quiere decir que es posible que en muchos casos pueda dejarse de lado la determinación de algunas propiedades de elementos, siempre y cuando ya haya sido determinado en un elemento ascendente (padre). En el ejemplo anterior, no es necesario determinar el color de los párrafos, ya que se encuentra determinado por el elemento padre “body”.

Utilizar la menor cantidad posible de selectores y clases
Un error frecuente entre quienes se inician en el estudio de las hojas de estilo en cascada, es la exageración en la cantidad de clases e identificadores utilizados. Veamos un ejemplo:

Esta proliferación de identificadores puede simplificarse empleando solo el nombre del elemento padre, y determinando posteriormente la etiqueta, quedando el código de la siguiente forma:

Solo es necesario utilizar un identificador o clase nuevo cuando hay varios elementos del mismo tipo con propiedades diferentes.

La especificación de CSS 3 es cada vez más soportada por los navegadores actuales, como siempre, Internet Explorer es el peor el que más tiempo tarda en adoptar los cambios, pero con el anuncio de un mayor soporte de CSS 3 en IE9 y con posibles novedades sobre su salida en Marzo de 2010, tenemos un rompecabezas casi completo.

Algo muy interesante de CSS 3, son sus selectores, que como su nombre indica, permite seleccionar un elemento web para darle estilo o estructura. ¿Cuáles son?

Selectores CSS 3
Notación:

Ele – Elemento – Cualquier elemento web. Ejemplos: div, span, a, li, p, strong, etc.
atr – Atributo – Describe las características de un elemento web. Ejemplos: href, alt, class, rel, etc.
val – Valor – Magnitud de un atributo. Ejemplo: en rel=’nofollow’; rel es el atributo y nofollow el valor.
n – Cualquier número entero.

Selectores y ejemplos prácticos:

Ele [atr^='val']
Selecciona todos los elementos que inicien con un valor especificado.
Ejemplo:a[href='http://ucoz.es'] Seleccionará todos los links hacia ucoz.es

Ele[atr$='val']
Selecciona todos los elementos que terminen con un valor especificado.
Ejemplo: a[href$='.zip'] Seleccionará todos los links de archivos zip.

Ele[atr*='val']
Selecciona todos los elemento que contenga, indiferente a su ubicación, un valor especificado.
Ejemplo: a[href*='tag'] Seleccionará todos los links que contengan la palabra "tag".

Ele:nth-child(n)
Selecciona el enésimo hijo de su elemento padre.
Ejemplo: p a:nth-child(1) seleccionará el segundo enlace de un párrafo.

Ele:nth-last-child(n)
Selecciona el enésimo hijo de su elemento padre empezando a constar del último al primero.
Ejemplo: p a:nth-last-child(1) seleccionará el penúltimo enlace de un párrafo.

Ele:last-child
Selecciona el último hijo de un elemento.
Ejemplo: .post p:last-child seleccionará el último párrafo dentro de un elemento con clase "post".

Ele:first-of-type
Selecciona el primer elemento de su tipo en el elemento padre.
Ejemplo: .post img:first-of-type seleccionará la primer imagen dentro en un elemento con clase "post".

Ele:last-of-type
Selecciona el último elemento de su tipo en el elemento padre.
Ejemplo: .post img:last-of-type seleccionará la última imagen dentro en un elemento con clase "post".

Ele:only-child
Selecciona el único elemento hijo de un elemento padre.
Ejemplo: ul li:only-child seleccionará el elemento una de lista, cuando la lista solo contenga un elemento.

Ele:only-of-type
Selecciona el único elemento de cierto tipo.
Ejemplo:.post img:only-of-type seleccionará las imágenes presentes en los elementos .post con solo una imagen.

Ele:empty
Selecciona los elementos web que no tienen elementos hijos.
Ejemplo: ul:empty seleccionará todas las listas no numeradas sin elementos.

Ele:target
Selecciona los elementos que tienen como destino una URL.

Ele:enabled
Selecciona elementos (de formularios) con valor enabled (habilitado).
Ejemplo: input[type="text"]:enabled seleccionará los campos de tipo texto que están habilitados.

Ele:disabled
Selecciona elementos (de formularios) con valor disabled (deshabilitado).
Ejemplo: input[type="text"]:disabled seleccionará los campos de tipo texto que están deshabilitados.

Ele:checked
Selecciona elementos (de formularios) con valor checked (seleccionado).
Ejemplo: input:checked seleccionará los campos que estén seleccionados.

Ele::selection
Selecciona los elementos que han sido seleccionados/resaltados por el usuario. Las propiedades aplicables son color, background, cursor y outline.
Ejemplo: ::selection ubicara el texto que haya sido seleccionado/resaltado (con el cursor del mouse) por el autor.

Ele:not(s)
Selecciona todos los elementos que no sean un selector indicado (s) dentro de un elemento web.
Ejemplo: .post:not(img) seleccionará todos los elementos que no sean imágenes y estén dentro del elemento web con clase "post".

::first-line
Selecciona la primera línea de un elemento web.
Ejemplo: p::first-line seleccionará la primera línea de un párrafo.

::first-letter
Selecciona la primera letra de un elemento web.
Ejemplo: p::first-letter seleccionará la primera letra de un párrafo.

::before
Se ubica en la parte anterior de un elemento web (típicamente para agregar contenido).
Ejemplo: p::before {content: 'Nota: '} Agregará el texto "Nota :" antes de cada párrafo.

::after
Se ubica en la parte posterior de un elemento web (típicamente para agregar contenido).
Ejemplo: cite::before {content: 'Fin de la cita'} Agregará el texto "Fin de la cita" al final de cada elemento cite.

Navegadores que soportan selectores CSS 3
A grandes rasgos, sin entrar a ver cada caso, los selectores CSS 3 están soportados en:

El degradado de colores más sencillo que podemos crear es el degradado lineal. Con CSS 3 se pueden especificar con tan solo definir una serie de parámetros en la propiedad linear-gradient, que nos permiten configurar todo tipo de gradientes de dos o más colores, sin la necesidad de usar imágenes.

En el pasado post estuvimos haciendo una presentación inicial de los degradados CSS3, que nos servirá para conocer básicamente los tipos de degradados y ver un par de ejemplos. En este artículo veremos con detalle la construcción de los degradados lineales, que resultan bastante potentes y atractivos para decorar cualquiera de los elementos de un sitio web.

Veremos además diversos ejemplos que estamos seguros clarificarán las distintas posibilidades de construcción de degradados, pues, aunque no resulta difícil de conseguirlos, existen muchas variables que nos pueden ayudar a crear infinitos tipos de degradado con solo la definición de un atributo de estilos CSS.

Sintaxis de creación de degradados lineales
Así pues, después de haber leído la introducción a los degradados CSS3, veamos en líneas generales cuál sería la sintaxis para la construcción de un degradado lineal.

O bien:

Como vemos, para asignar un degradado a un elemento, tenemos que utilizar la propiedad linear-gradient sobre un atributo background, o background-image. Todos los elementos que soportan imágenes de fondo permiten también colocar degradados de fondo. Además, tendremos que indicar una serie de parámetros variables para la creación del degradado, que son los que realmente tienen alguna dificultad de entender. Estos parámetros son los siguientes:

A) Origen-y/o-angulo del degradado:
El primer parámetro sería el origen desde donde comenzará el degradado y/o el ángulo de disposición del gradiente de color. Podemos decir que el degradado comience desde arriba, abajo o desde una esquina cualquiera. Por defecto los degradados serán distribuidos en un gradiente en línea recta, pero además podemos indicar un ángulo distinto con el que se vaya produciendo el gradiente de color.

B) lista-de-colores y opcionalmente, el lugar hasta donde se debe mostrar cada uno:
Luego colocaremos los colores, todos los que queramos, que deben utilizarse en el degradado, separados por comas. Además, si lo deseamos, podemos definir las paradas de color "color stops", que consiste en declarar el lugar desde donde debe empezar el gradiente del color.

Para poder entender mejor todo esto, lo más fácil es ver una una serie de ejemplos. Todos ellos los podemos visualizar en una página aparte.

Nota: Por favor, tener en cuenta que el ejemplo se debe ver por el momento en las versiones más modernas de los navegadores. De momento lo podremos ver en Opera, o los browsers basados en Webkit, como Google Chrome o Safari, o navegadores basados en Mozilla, como Firefox.

Esto hace un degradado desde el color naranja hacia el rosa. Todos los demás parámetros quedarían con sus valores predeterminados y el resultado sería que el degradado se realiza en toda la altura del elemento, de arriba a abajo, en un gradiente vertical, comenzando el naranja en la parte de arriba y acabando en rosa en la parte de abajo.

Nota: En realidad, tal como se explicó en el post anterior, para que los ejemplos funcionen en esto momento, tenemos que escribir las etiquetas de estilos propietarias de cada navegador. Así que el estilo anterior, en realidad en nuestro ejemplo está escrito con los atributos de estilos propios de cada navegador, que son los que funcionan actualmente:

También conviene colocar el atributo original linear-gradient, que es el que funcionará cuando CSS 3 sea un estándar de implementación recomendada por el W3C.

Este degradado comienza en la esquita superior izquierda y se crea un gradiente que va hacia la esquina opuesta. Por tanto, el degradado formará un gradiente oblicuo, en diagonal desde la esquina superior izquierda, donde estaría el blanco (#fff), hasta la esquina inferior derecha, donde estaría el rosa (#f66).

Este degradado define su dirección por medio de un ángulo expresado en grados. 0 grados haría que el degradado comenzara en la parte de la izquierda y 180deg indica que el degradado empezaría justo por el lado contrario, es decir, por la derecha. De modo que en la parte de la derecha tendríamos el color morado y en la izquierda tendríamos el rosado.

Este degradado tiene lo que se llama un "color stop" es decir, una parada de color, que está asignada con el 50% en el primer color. Quiere decir que el primer color estaría homogéneo (sin degradado) hasta el 50% del tamaño del elemento y que luego comenzaría a degradarse hacia el segundo color.

Este degradado tiene una disposición en diagonal, por los 45 grados que se han definido. Además, podemos ver que hemos definido más de dos colores en el degradado. Podemos poner tantos como queramos, separados por comas. Como no hay "color stops" los tres colores se distribuyen de manera equitativa, desde la esquina inferior izquierda hasta la superior derecha.

Este degradado se hace también en diagonal, desde la esquina inferior izquierda, igual que el anterior, pero hemos definido una serie de paradas de color (color stops), con lo cual la distribución del gradiente no es homogénea. El primer color empezaría a degradarse hacia el segundo cuando se llega al 10% del tamaño del elemento. El degradado hacia el segundo color se completaría al llegar al 30% y a partir de ese punto empezaría a degradarse hacia el tercer color. El degradado entre el segundo y tercer color se realizaría desde el 30% al 60% del tamaño del elemento y se completaría cuando estamos en el 60%. A partir de ese último color stop (60%) tendríamos el último color de manera homogénea hasta el 100% del tamaño. Por tanto, el color predominante veremos que es el tercero, que tiene un 40% (100% del elemento - 60% del espacio donde veremos degradados) del espacio para mostrarse con su RGB tal cual fue definido.

Este es el mismo degradado que el anterior, pero con paradas de color distintas. Además, estamos definiendo esos "color stops" con medidas en píxeles en lugar de porcentajes.

Nota: se aconseja no mezclar unidades CSS distintas en las paradas de color, como podría ser:

Porque en ese caso, dependiendo del anchura del elemento, la segunda parada de color, con 50px, podría estar en un punto anterior al 60% de su tamaño, lo que podría provocar que la distribución del gradiente de color fuera imposible de realizar.

Este degradado, que empieza en la izquierda y con un gradiente recto hacia la derecha, tiene varios colores, los del arco iris.

Será muy útil ver estos degradados en marcha en una página aparte. Los veremos bien siempre que dispongamos de un navegador compatible con esta nueva característica de las CSS3. Para quien no disponga del navegador adecuado, puede ver la muestra en la siguiente imagen:

Paradas de color
Como hemos visto, las paradas de color, o "color stops" permiten alterar bastante los degradados incluso trabajando con los mismos colores. Para definirlas se debe tener en cuenta la línea imaginaria de distribución del gradiente de color. Al principio de esa línea tendríamos la distancia 0% y al final del elemento tendríamos la distancia 100%. El color inicial siempre comenzaría en el espacio del 0% y se completaría el degradado llegando al color final en el espacio del 100%.

Nota: Si estamos trabajando con otras unidades, por ejemplo píxeles, que son perfectamente posibles en las paradas de color (siempre que no mezclemos unidades, pues no es recomendable), al principio tendríamos 0px y al final tendríamos Xpx siendo X el tamaño de esa línea de degradado desde el principio hasta el fin.

Aunque el degradado comience de 0% a 100%, las paradas de color las podemos poner en cualquier punto, incluso puntos que estén fuera de ese intervalo. Por ejemplo, nada nos impide poner una parada de color en 120%, lo que significaría que el color al que asignamos esa parada no llegaría a verse degradado completamente en el espacio del elemento. Es decir, si la parada de color está fuera del intervalo, no llegaríamos a ver el RGB exacto al que tendería el degradado, porque estaría fuera del espacio del elemento.

Este es el cuarto post que estamos dedicando a los degradados con CSS3 y en esta ocasión vamos a ver los degradados radiales, que forman diseños circulares, con una distribución radial uniforme, o degradados en elipse, con una distribución radial variable.

Los degradados radiales, que incluyen tanto los que tiene forma circular en general, como los que tienen forma de elipse, se consiguen a través del atributo radial-gradient, de CSS3. De modo que, mediante la aplicación de distintos parámetros, conseguiremos todas las posibilidades. Como veremos a continuación, tienen una forma de definirse muy parecida a la que vimos con los degradados lineares, aunque en este caso tendremos algunos otros parámetros a tener en cuenta, lo que puede dificultar un poquito más su entendimiento.

La sintaxis resumida será la siguiente:

O bien:

Los parámetros que podemos indicar en la declaración radial-gradient() es donde realmente radica la dificultad y a la vez la potencia de este tipo de degradados. No obstante, la mayoría de los parámetros son opcionales, por lo que podemos hacer degradados radiales bastante simples, que tomarán parámetros por defecto. En realidad, como veremos, lo único que necesitaremos siempre es definir dos o más colores para realizar el gradiente de color.

El listado de parámetros que podremos indicar es el siguiente:

A) Posición inicial del gradiente circular:
Los degradados radiales comienzan en un punto cualquiera del fondo de un elemento y se extienden hacia fuera de ese punto con formas circulares o de elipse. Luego, para definirlos, necesitaremos una forma de especificar dicho punto de inicio del degradado. El punto se especifica con una o dos coordenadas, que pueden tener distintas unidades CSS. Si se omite, se entiende que el degradado tiene que comenzar en el punto central del fondo del elemento.

B) Forma y/o dimensión:
La forma puede ser circular o elipse, para lo cual especificamos las palabras "circle" o "ellipse". El tamaño lo expresamos con otra serie de palabras clave, que indican hasta donde debe crecer el círculo o elipse: closest-side | closest-corner | farthest-side | farthest-corner | contain | cover. Por ejemplo, closest-side indica que el círculo o elipse debe crecer hasta el lado más cercano. La palabra farthest-corner indicaría que debe crecer hasta la esquina más lejana. Contain sería lo mismo que decir closest-side y cover sinónimo de farthest-corner.

Alternativa a Tamaño:
De manera alternativa a especificar la forma y dimensión del degradado -punto anterior-, podemos indicar un par de medidas en cualquier unidad CSS o porcentajes. Esas medidas se utilizarían para generar un círculo o una elipse del tamaño deseado para nuestro gradiente. La primera medida sería para la anchura de la elipse y la segunda sería para la altura (si ambas son iguales se mostraría una forma circular en el degradado. Si son distintas, sería una elipse. El tamaño debe ser siempre positivo.

Nota: esta forma alternativa de especificar la forma no está implementada en ningún navegador totalmente. En el momento de escribir estas líneas, Firefox no la contempla, Chrome solo representa formas circulares y ni Opera ni Explorer soportan degradados radiales.

C) Colores del degradado:
Para acabar, se deben indicar cuantos colores se deseen, separados por comas, con la posibilidad de indicar las paradas de color que se deseen.
Ahora, veamos una serie de ejemplos que esperamos aclaren las ideas con respecto a la declaración de fondos radiales.

Nota: Los fondos radiales son soportados en poca medida en estos momentos en los navegadores. Todos tienen al menos algún detalle que todavía tienen que pulir. De momento ni Opera ni IE9 los muestran en ningún caso. Chrome no tiene posibilidad de hacer degradados con forma de elipse y Firefox todavía no implementa la alternativa B), comentada anteriormente, para la definición del tamaño del gradiente por medio de los valores de anchura y altura.

En los ejemplos que se mostrarán a continuación se presenta únicamente el código con el atributo de estilo definitivo, que estará disponible cuando las CSS3 sean un estándar.

Cuando en realidad, en estos momentos, para que funcione en Firefox y Chrome hay que colocar sus atributos con los nombres propietarios de cada navegador.

La marca -webkit-radial-gradient sirve para navegadores basados en Webkit, como Chorme, y -moz-radial-gradient sirve para navegadores basados en Mozilla, como Firefox.

Esto hace un degradado desde el verde al azul turquesa, con todos los otros parámetros perdeterminados. Haría un gradiente de forma circular, con su punto de inicio en el centro del elemento, en verde, haciendo que se llegase al azul turquesa en los bordes del elemento.

En este caso hemos definido el punto de inicio del gradiente con "top left". Se trata de la esquina superior izquierda, donde aparecerá el blanco y el degradado tendría forma circular tendiendo hacia rosa, ocupando el 100% del elemento.

Este degradado también declara la posición inicial del gradiente, pero lo hace mediante las coordenadas definidas con medidas en píxeles. Es circular y ocupa el 100% del espacio disponible en el elemento.

En este declaramos la posición inicial con center, el comportamiento predeterminado, que coloca el inicio del degradado en centro, tanto vertical como horizontal. El detalle es que el degradado se realiza desde el centro hasta el 50% del tamaño del elemento, ya que le hemos puesto una parada de color ("color stop") de 50% en el último color.

Nota: las paradas de color, o "color stop", se explicaron cuando se trataron los degradados lineares.

Este es el primero de los ejemplos en el que definimos la forma del degradado, aunque solo indicamos "circle". Por tanto, el degradado comenzará en el centro y ocupará el 100% del espacio disponible en el elemento, aunque siempre con el mismo radio.

Este degradado es exactamente igual que el anterior, pero en vez de circular es de elipse, cubriendo el 100% del espacio disponible, y comenzando en el centro. Este es el comportamiento predeterminado del estilo.

Nota: Sin embargo, en el momento de escribir este artículo la forma de elipse solo la implementa Firefox. Por lo que el comportamiento predeterminado en Chrome continua siendo el circular.

Este ejemplo tiene definida la posición del degradado y la forma. Es el primero que especifica esos dos valores al mismo tiempo. En este coso, sobre la posición solo se declara 10%, así que aparecerá centrado en la vertical y en la horizontal aparecerá en el 10% del espacio del contenedor por la parte de la izquierda. Es de forma de elipse y closest-side significa que se expande en forma de elipse hasta completarse en el lado más cercano.

Este degradado es igual que el anterior, en la misma posición y de forma de elipse, pero el tamaño se ha definido con farthest-corner, con lo que el degradado será mucho mayor, expandiéndose hasta la esquina más lejana.

En este caso hemos definido la posición inicial con las coordenadas en píxeles y, lo que resulta novedad, hemos definido tanto la forma como el tamaño del degradado en porcentaje. La anchura será el 30% del elemento y la altura el 80%.

Nota: Esta alternativa de definir la forma y dimensiones del degradado, que vemos en este ejemplo y los tres siguientes, no funciona en Firefox en el momento de escribir el artículo, por lo que solo chrome mostrará un degradado en el elemento. Sin embargo, Chrome es incapaz por ahora de producir elipses, por lo que el degradado tendrá forma circular, a pesar de haber definido dimensiones menores en la anchura que para al altura. No obstante, lo más seguro es que pronto se mejore la compatibilidad de los navegadores con este tipo de definición del degradado.

Hemos definido la posición inicial por medio de los valores top y left y el tamaño por medio de unidades en píxeles.

La posición del centro del degradado está con porcentaje, así como el tamaño de la elipse, también con porcentajes.

En este hemos definido el tamaño de la anchura y altura con dos valores en píxeles, pero como son iguales, en lugar de una elipse veríamos una forma circular, cuyo radio es siempre igual.

Recuerda que puedes ver el ejemplo en marcha, aunque solo en navegadores que soporten los degradados radiales. Los otros usuarios pueden ver los degradados producidos en los ejemplos en la siguiente imagen:

En adelante hablaremos del último tipo de degradados CSS3 que nos queda por ver, los degradados radiales de repetición.