Usando CSS3

C

on la reciente aparición de los primeros códigos en HTML5 han aparecido también los primeros en CSS3, y es que esta vez, ambas tecnologías van de la mano. Si antes era recomendable utilizarlas conjuntamente, ahora es casi obligado, ya que es el objetivo del desarrollo de dichas tecnologías.

Al igual que ocurre con HTML5, CSS3 incluye una serie de mejoras y nuevas funcionalidades que nos harán la vida más fácil a la hora de dar estilo a nuestras páginas. Alguna de estas mejoras las iremos viendo a continuación.

Para facilitar la tarea y no tener que escribir código HTML de nuevo, usaremos el que hemos creado en el mini tutoria de HTML5.

El código CSS es el siguiente:

/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
display: block;
}

body {
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}

h2 {
font-size: 28px;
line-height: 44px;
padding: 22px 0;
}

h3 {
font-size: 18px;
line-height: 22px;
padding: 11px 0;
}

p {
padding-bottom: 22px;
}

nav {
position: absolute;
left: 0;
width: 100%;
background: url("nav_background");
}

nav ul li {
float: left;
}

nav ul li a {
display: block;
margin-right: 20px;
width: 140px;
font-size: 14px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #777;
}

nav ul li a:hover {
color: #fff;
}

nav ul li.selected a {
color: #fff;
}

nav ul li.subscribe a {
margin-left: 22px;
padding-left: 33px;
text-align: left;
background: url("rss.png") left center no-repeat;
}

Hasta aquí utilizamos las mismas propiedades que las que se utilizaban en CSS2. Las nuevas propiedades las mostramos a continuación:

#intro {
margin-top: 66px;
padding: 44px;
background: #467612 url("intro_background.png") repeat-x;
background-size: 100%;
border-radius: 22px;

/* Background-size not implemented yet */
-webkit-background-size: 100%;
-o-background-size: 100%;
-khtml-background-size: 100%;

/* Border-radius not implemented yet */
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
}

Para esta etiqueta podemos observar dos nuevas propiedades:

- background-size: que nos permite definir el fondo de tamaño dinámico y en caso de que el contenido o el tamaño de la página veríe, la imagen también lo hará, adaptandose a ésta.

- border-radius: redondea el borde con un radio igual al indicado.

La mayoría de los navegadores aún no soportan estas propiedades, por lo que especificamos a continuación de éstas las propiedades nativas de cada navegador que sustituyen a las especificadas por CCS3.

A la propiedad background le podemos indicar dos imágenes a utilizar (no estoy seguro si este aspecto ya se podía en CSS2, pero yo no lo conocía):

background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
url("intro_flower.png") top right (653px 100%) no-repeat;

Una nueva propiedad muy interesante es poder indicar que dentro de una etiqueta se va a mostrar una tabla, y definer las propiedades de la misma. En el siguiente código vemos un ejemplo:

.blogPost div {
column-count: 2;
column-gap: 22px;
}

.blogPost {
column-count: 2;
column-gap: 22px;
}

.blogPost header {
column-span: all;
}

En este caso indicamos que se van a mostrar dos columnas con una separación entre cada una de 22px;

Como CSS3 solo está soportado por algunas versiones de los navegadores, damos las propiedades propias de cada navegador para suplir esta carencia:

.blogPost div {
/* Column-count not implemented yet */
-moz-column-count: 2;
-webkit-column-count: 2;

/* Column-gap not implemented yet */
-moz-column-gap: 22px;
-webkit-column-gap: 22px;
}

Otra funcionalidad nueva es la de dar sombra a una etiqueta. En este caso, la vamos a dar a la imagen de la etiqueta blog:

.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}

El primer atributo de la propiedad box-shadow indica en dónde queremos que pare la sombra en sentido horizontal, el segundo en sentido vertical, en el tercero indicamos cómo de transparente será la sombra y por último, indicamos el color base de la sombra.

De momento, esta propiedad solo funciona en Safari, por lo que indicamos las propiedades supletorias para el resto de navegadores:

.blogPost img {
margin: 22px 0;
-webkit-box-shadow: 3px 3px 7px #777;
}

La última propiedad que vamos a mostrar en este artículo es la de alternar el fondo los comentarios que se muestran, de forma que se muestren en forma de cebra los comentarios. Para ello, antes no nos quedaba más remedio que utilizar JavaScript, pero ahora con CSS3 será muy sencillo, simplemente utilizando la pseudo-clase “nth-child”:

section#comments article:nth-child(2n+1) {
padding: 21px;
background: #E3E3E3;
border: 1px solid #d7d7d7;

/* Border-radius not implemented yet */
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}

El elemento 2n indica que se aplicará al segundo comentario, 3n al tercero, y así sucesivamente.

El +1 indica que se comienza a contar por el primer elemento.

Como los vectores comienzan por el elemento 0, esto indica que comenzará por el segundo del vector.

Con esto finalizamos nuestro pequeño tutorial de inciación a CSS3. A medida que vayamos descubriendo nuevas funcionalidades os las iremos mostrando. Mientras tanto.. a practicar un poco.

Recordad que podéis ver también nuestro tutorial de introducción a HTML5