PDF de programación - Manual de CSS3

Manual de CSS3









MANUAL DE CSS3

1

Manual de CSS3

INDICE

¿Qué es CSS? ........................................................................................................................................ 3

Propiedades nuevas en CSS3 ............................................................................................................... 4

Gradiente de color en el borde de los elementos ............................................................................... 6

Bordes redondeados ............................................................................................................................ 8

Varias imágenes de fondo ................................................................................................................. 10

Colores RGBA ..................................................................................................................................... 13

Word-wrap ......................................................................................................................................... 16

Texto multi-columna .......................................................................................................................... 18

Imágenes como borde ....................................................................................................................... 20

Sombras ............................................................................................................................................. 22

Resplandor exterior ........................................................................................................................... 26

Background-origin ............................................................................................................................. 29

@font-face ......................................................................................................................................... 32

Degradados ........................................................................................................................................ 35

Degradado lineal ................................................................................................................................ 38

Degradado lineal repetitivo ............................................................................................................... 42

Degradado radial ............................................................................................................................... 45

Degradado radial repetitivo ............................................................................................................... 49

Animaciones ...................................................................................................................................... 51

Animación simple .............................................................................................................................. 54

Animación con texto .......................................................................................................................... 57

Animación con texto tipo Matrix ....................................................................................................... 60

Animación efecto nieve ..................................................................................................................... 64

Dibujo animado.................................................................................................................................. 67

Animación de galería de fotos ........................................................................................................... 76

Menú animado ................................................................................................................................... 79

2

Manual de CSS3

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.

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.

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

3

Manual de CSS3

Propiedades nuevas en CSS 3

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

• Bordes

o border-color

o border-image

o border-radius

o box-shadow

• Fondos

o background-origin

o background-clip

o background-size

o hacer capas con múltiples imágenes de fondo

• Color

o colores HSL

o colores HSLA

o colores RGBA

o Opacidad

• Texto

o text-shadow

o text-overflow

o Rotura de palabras largas

•

Interfaz

o box-sizing

o resize

o outline

o nav-top, nav-right, nav-bottom, nav-left

4

Manual de CSS3

• Selectores

o Selectores por atributos

o Modelo de caja básico

o overflow-x, overflow-y

• Otros

o media queries

o creación de múltiples columnas de texto

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

o Web Fonts

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.

5

Manual de CSS3

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