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

Traducción del original Top 10 CSS3 commands de Webcredible.

1. Bordes radiales

Hasta la aparición de CSS3 para crear esquinas curvadas, teníamos que remitirnos al truco de las cuatro imágenes, cada una para cada esquina. Con CSS3 es tan simple como lo siguiente:

box1 {
border: 1px solid #699;
/* para Mozilla Firefox */
-moz-border-radius: 20px;
/* para Safari & Google Chrome */
-webkit-border-radius: 20px;
}

2. Sombra cuadrada

Una sombra puede ser aplicada a los elementos cuadrados utilizando una sola instrucción. Se necesitan tres números para definir cómo será:

1. Distancia del desplazamiento horizontal: positivo significa a la derecha, negativo a la izquierda
2. Distancia del desplazamiento vertical: positivo significa hacia abajo, negativo hacia arriba
3. Cómo de emborronada quieres la sombra

Este comando no se visualiza, todavía, en Internet Explorer.

#box2 {
/* para Mozilla Firefox */
-moz-box-shadow: 5px 5px 5px #b6ebf7;
/* para Safari & Google Chrome */
-webkit-box-shadow: 5x 5px 5px #b6ebf7;
}

3. Transparencia o RGBA

Los niveles de transparencia siempre han sido un problema para los navegadores, algunos directamente no los aplicaban y los demás los mostraban de una forma diferente para un mismo valor. Para solucionarlo, CSS3 plantea un nuevo estándar basado en tres números del 0 al 255, los RGB de siempre; y un cuarto, cuyo dominio abarca del 0 al 1 y que indica el canal alfa, es decir, la transparencia.

Por ejemplo:

#box3 {
background-color: rgba(110, 142, 185, .5);
}

Sin embargo, Internet Explorer no entenderá el comando y deberemos duplicar la instrucción para una óptima visualización en diferentes navegadores. El pseudo-selector :last-child hará que Internet Explorer obvie la segunda instrucción.

#box3 {
/* Para Internet Explorer */
background-color: #6e8eb9;
}

body:last-child #box3 {
/* Para el resto de navegadores */
background-color: rgba(110, 142, 185, .5)!important;
}

4. Columnas

Para evitar los problemas que pueden surgir elementos flotantes, CSS3 incluye la opción de crear columnas directamente desde el estilo. Una vez creadas las columnas en una etiqueta DIV, puedes usar etiquetas como P para rellenarlas de contenido, sin tener que poner DIV a izquierda y otro a derecha, por ejemplo.

El uso para dos columnas sería el siguiente:

#box4 {
/* para Mozilla Firefox */
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #6e8eb9;

/* para Safari & Google Chrome */
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #6e8eb9;
}

5. Múltiples imágenes de fondo

A partir de ahora, podemos definir más de una imagen de fondo, separando por comas las imágenes. Veamos un ejemplo:

#box5 blockquote{
background:url(/i/comilla_izquierda.gif) no-repeat 0 0, url(/i/comilla_derecha.gif) no-repeat 100% 0;
border:1px solid #699;

padding:0 20px;
}

Como Internet Explorer no procesará la orden al encontrar las dos imágenes, deberemos volver a valernos del hack o truco de usar el elemento :last-child, veamos:

#box5 blockquote {
/* Compatible con todos los navegadores */
background: url(/i/quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

body:last-child #box5 blockquote{
/* Excluye a Internet Explorer por utilizar :last-child */
/* Ahora sí podemos poner dos imágenes */
background: url(/i/comilla_izquierda.gif) no-repeat 0 0, url(/i/comilla_derecha.gif) no-repeat 100% 0;
}

En breve, pondremos la segunda parte con otros cinco nuevos comandos de mucha utilidad.