PDF de programación - Manual de CSS3

Manual de CSS3 – DesarrolloWeb.com

1 / 106

Manual de CSS3

Nuevas características de las especificaciones de Hojas de Estilo en Cascada CSS3
para definir el aspecto de las páginas web.
Las CSS han recibido una actualización importante que incluye características
avanzadas tanto para aplicar aspecto avanzado en elementos de una página como
para ayudarnos a realizar una maquetación más precisa.
En este manual vamos conociendo diversas características de las CSS aparecidas
recientemente, con artículos cortos en los que podrás encontrar explicaciones y
ejemplos de cada una por separado.

Autores del manual

Jhon Nadie
(1 capítulo)

Sara Alvarez
Equipo DesarrolloWeb.com
http://www.desarrolloweb.com
(10 capítulos)

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Álvarez
Miguel es fundador de DesarrolloWeb.com y
la plataforma de formación online
EscuelaIT. Comenzó en el mundo del
desarrollo web en el año 1997,
transformando su hobby en su trabajo.
http://www.desarrolloweb.com
(19 capítulos)
David Rousset
Desarrollador Evangelista de Microsoft,
especialista en HTML5 y desarrollo Web.
http://blogs.msdn.com/b/davrous/
(1 capítulo)
Jaime Peña Tresancos
Escritor. Colaborador habitual de revistas
de tecnología y experto en nuevas
tecnologías y programas Microsoft
(1 capítulo)

Jorge Vargas Vega
Diseñador y Desarrollador Web
(1 capítulo)

Juan R. Castro Lurita
Thinker, Engineer especialista en web.
(1 capítulo)

OldMith
Desarrollador Web. jQuery. Responsive
Design. Wordpress. Friki por naturaleza.
http://www.lacasadelmago.es
(1 capítulo)

http://www.desarrolloweb.com/manuales/css3.html

Manual de CSS3 – DesarrolloWeb.com

2 / 106

Parte 1:
CSS 3 qué ¿hay de
nuevo?

La especificación de CSS3 viene con interesantes novedades que permitirán hacer webs
más elaboradas y más dinámicas, con mayor separación entre estilos y contenidos. Dará
soporte a muchas necesidades de las webs actuales, sin tener que recurrir a trucos de
diseñadores o lenguajes de programación.

1.1.- Introducción a CSS 3
CSS 3 trae grandes novedades para el diseño de webs y algunos navegadores comienzan a implementar
CSS 3.

Desde que CSS comenzó han pasado muchos años y ya vamos por la especificación de CSS3,
que incorpora una serie de novedades que vamos a tratar de resumir en este artículo.

1.1.1.- Qué es CSS
Si no sabes lo que es CSS probablemente te interesaría comenzar leyendo nuestro manual de
CSS o la sección de CSS a fondo. No obstante, cabría decir que CSS es un lenguaje para
definir el estilo o la apariencia de las páginas web, escritas con HTML o de los documentos
XML. CSS se creó para separar el contenido de la forma, a la vez que permite a los
diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas.

1.1.2.- 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 aun 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

http://www.desarrolloweb.com/manuales/css3.html

Manual de CSS3 – DesarrolloWeb.com

3 / 106

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.

1.1.3.- 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

http://www.desarrolloweb.com/manuales/css3.html

Manual de CSS3 – DesarrolloWeb.com

4 / 106

•

text-overflow

• Rotura de palabras largas

• Web Fonts

Interfaz

• box-sizing

•

resize

• 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

• media queries

• creación de múltiples columnas de texto

• propiedades orientadas a discurso o lectura automática de páginas web

• animaciones CSS3

Parte de este listado de nuevas propiedades de CSS 3 lo he sacado de:
http://www.css3.info/preview/. Es un sitio en inglés, pero puede estar bien visitar para ir
conociendo más detalles sobre CSS 3. Sin embargo, en ese sitio faltaban algunas cosas como
los degradados o las animaciones, por lo menos cuando lo visitamos, por lo que hemos
completado para la realización de este índice.
En futuros artículos ofreceremos algunas claves y explicaciones sobre varias de estas
propiedades, al menos las más interesantes, así como ejemplos que sirvan para ir conociendo

http://www.desarrolloweb.com/manuales/css3.html

Manual de CSS3 – DesarrolloWeb.com

5 / 106

esta nueva especificación de CSS. Todo ello lo iremos colocando en el Manual de CSS 3.

Artículo por Miguel Angel Álvarez

Parte 2:
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.

2.1.- Atributo gradiente de colores en borde con CSS y Firefox
Posibilidad de definir el un gradiente de color en el borde de los elementos con CSS, en un atributo no
estándar de Firefox.

Investigando un poco con algunas de las propiedades nuevas que va a traer CSS 3, para
completar la información del artículo Introducción a CSS 3 , he dado con un atributo para
cambiar el color del borde de los elementos de la página, que nos permite definir el color con
una sucesión de distintos valores de colores. En la actualidad, con CSS podemos definir por
separado los colores del borde de un elemento, de arriba, derecha, abajo e izquierda. Pero no
nos referimos a poder dar un color por separado para cada parte del borde, sino aplicar varios
colores distintos a una parte, por ejemplo a la parte de arriba del borde.

Esta propiedad la he visto comentada en algún lugar como de CSS 3, pero según veo en el
borrador de la especificación de CSS 3 para bordes y fondos, publicado por el W3C, no
aparece esta nueva característica como parte del nuevo estándar.

Por ello, habría que matizar que esta propiedad no es de CSS 3, sino que se trata de un
atributo no estándar de CSS, creado por Mozilla y que, por tanto, se puede ver en su
navegador más conocido: Firefox. Dicho de otra forma, es una extensión de CSS realizada por

http://www.desarrolloweb.com/manuales/css3.html

Manual de CSS3 – DesarrolloWeb.com

6 / 106

Mozilla. En la página de Mozilla podemos encontrar más información sobre esta extensión de
CSS: https://developer.mozilla.org/en/CSS/-moz-border-bottom-colors

Los atributos a los que nos referimos, que permiten definir varios colores para cada una de las
partes del borde, son los siguientes:
-moz-border-top-colors
-moz-border-right-colors
-moz-border-bottom-colors
-moz-border-left-colors

En cada uno de los atributos se define el color, pudiendo especificar una lista de colores,
separados por espacios, que se aplicarán a cada una de las partes del borde, de dentro hacia
fuera. Claro que el borde tiene que tener una anchura mayor que 1 para que se vean los
distintos colores. Con una anchura de 2 pixel se podrán ver 2 colores distintos, con una
anchura de 3 podremos definir 3 colores y así sucesivamente.

Para ver una de las posibilidades que daría el uso de este atributo podemos ver un ejemplo en
una página aparte. (Pero tener en cuenta que sólo lo veréis correctamente en Firefox).

El código para crear ese gradiente de colores sería el siguiente:
<style type="text/css">
.coloresborde{
border-style: solid;
border-width: 10px;
-moz-border-top-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411
#ff3300;
-moz-border-right-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411
#ff3300;
-moz-border-bottom-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522
#ff4411 #ff3300;
-moz-border-left-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411
#ff3300;
}
</style>

Es una pena que sea un atributo únicamente desarrollado por Mozilla, au