Conocer el top 10 de comandos CSS3 [parte 1/2]

6. Box-sizing, al viejo estilo

El estándar de box model del W3C se ha convertido ahora en una propiedad de un elemento, gracias al comando de CSS3: box-sizing: content-box.

Veamos un ejemplo:

#box6 {
width: 200px;
padding: 10px;

/* para Mozilla Firefox */-moz-box-sizing: content-box;

/* para IE8 */box-sizing: content-box;

/* para Safari & Google Chrome */-webkit-box-sizing: content-box;
}

El comando box-sizing también acepta border-box que hace que el padding se enmarque dentro de la caja y no sumándolo a las dimensiones de ésta, tal como hacía en su día Internet Explorer 5. Un ejemplo de uso con padding y border-box sería el siguiente:

#box6b {
width: 200px;
padding: 10px;

/* for Mozilla Firefox */-moz-box-sizing: border-box;

/*for IE8 */box-sizing: border-box;

/* for Safari & Google Chrome */-webkit-box-sizing: border-box;
}

7. Contorno

Además de la propiedad border, CSS3 incluye outine que es básicamente lo mismo pero que se puede aplicar a la vez, con una propiedad de offset que nos asegura un visualizado correcto de los dos de forma simultánea:

#box7 {
border: 1px solid #000;
outline: 1px solid #699;
outline-offset: -9px;
}

8. Gradientes de fondo

Los gradientes en CSS3 son extremadamente potentes y la variedad de combinaciones que podemos realizar nos asegura posibilidades en todas las situaciones.

La familia Firefox y la familia Webkit los utilizan de una forma diferente, el primero con más variedad de propiedades pero menos posibilidades dentro de ésta, y el segundo lo contrario.

Veamos un ejemplo similar aplicado a cada familia de navegadores. Enb Webkit es más complejo pero a la vez más flexible (como suele ocurrir con tantas cosas en esto de la informática):

#box8 {
/* en la familia de Mozilla Firefox */background: -moz-linear-gradient(bottom, #b6ebf7, #fff 20%);
}

/*en la familia Webkit */#box8 {
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));
}

9. Rotación

La posibilidad de rotar elementos es directa en CSS3. Podremos utilizar unidades como los grados sexagesimales. Siempre se rotará en el sentido de las agujas del reloj para las cantidades positivas. Una rotación de dos grados en ese sentido sería:

#box9 {
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
}

10. Transiciones

Finalmente, os presentamos una de las posibilidades más esperadas de CSS3, las transiciones directamente desde los estilos. La familia Webkit soporta esta funcionalidad y Firefox lo soporta en las versiones beta.

El ejemplo que vamos a mostrar explica cómo hacer que el color de un enlace pase azul a verde cuando pasamos el ratón por encima, pero no de forma instantánea, sino pasando por valores intermedios.

Comenzamos definiendo el color inicial:

.box a {
color: #0f0;
}

Definimos qué tipo de transición vamos a usar, la de color, y cuándo lo vamos a usar, al pasar por encima el ratón (hover):

#box10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
}

Cuánto durará la transición:

#box10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}

Y qué tipo de transición utilizar: ease, linear, ease-in, ease-out, entre otras, en nuestro caso hemos escogido ease.

#box10 a:hover {
color:#31801f;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}

Por cierto, tenéis muchos de estos comandos explicados con una interfaz gráfica y preparados para explotarlos en una web llamada CSS 3.0 Maker que os recomiendo que visitéis ahora mismo.