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á:
- Distancia del desplazamiento horizontal: positivo significa a la derecha, negativo a la izquierda
- Distancia del desplazamiento vertical: positivo significa hacia abajo, negativo hacia arriba
- 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; }
