Sign up with your email address to be the first to know about new products, VIP offers, blog features & more.

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:

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:

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:

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):

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:

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:

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):

Cuánto durará la transición:

Y qué tipo de transición utilizar: ease, linear, ease-in, ease-out, entre otras, en nuestro caso hemos escogido 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.

Leer entrada anterior
[Breve] Vídeo chat disponible en Gmail para Linux

Si hace ya tiempo Google anunció a través del blog oficial de Gmail que incorporaba vídeochat en su plataforma para...

Cerrar