Tutoriales

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; } read more

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; } read more