5 Propiedades CSS3 fácil aplicación

En este tutorial veremos 5 muy simples propiedades CSS3 ejemplificadas que puedes implementar ahora mismo en tu pagina web.
Nota: Todos los navegadores soportan casi todas las propiedades CSS3 explicadas en este tutorial, siempre y cuando esten actualizados a su ultima versión, incluyendo IE9.

Markup HTML para usar de ejemplo

Para ejemplificar cada una de las propiedades CSS3, vamos a usar el siguiente HTML de ejemplo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<style> #hola { background-color:#F1F1F1; color:#454545; font-size:22px; height:auto; margin:30px auto 0; padding:20px; text-align:center; width:321px; } </style> <div id="hola"> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </div>

Las propiedades CSS3 se llaman de manera distinta en cada navegador:

1 2 3

propiedad-css3 /* Oficial */ -moz-propiedad-css3 /* Mozilla Firefox */ -webkit-propiedad-css3 /* Chrome, Safari */

1. Box Shadow

Lo que box shadow hace, es añadir una sombra a un elemento del tipo caja (display: box), su sintaxis es la siguiente:

1	box-shadow:  opcional: inset | desplazamiento-x | desplazamiento-y | desenfoque | expansion | color de sombra

Le podemos definir un valor opcional llamado “inset” lo que hara es poner la sombra dentro de la caja en vez de afuera.
Ejemplo:

1 2 3 4 5

#hola { box-shadow: 1px 1px 20px 5px #D6D6D6; moz-box-shadow: 1px 1px 20px 5px #D6D6D6; webkit-box-shadow: 1px 1px 20px 5px #D6D6D6; }

El resultado:

2. Border Radius

Border-radius añade bordes redondeados en las esquinas, su sintaxis es:

1	border-radius: radio top | radio right | radio bottom | radio left

Ejemplo:

1 2 3 4 5

#hola { border-radius:10px 10px 10px 10px; -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; }

El resultado:

3. Columns

Esta propiedad/propiedades son bastante útiles para cuando se quiere separar en columnas un texto o un grupo de elementos:

1 2 3 4

column-count: define el numero de columnas. column-rule: añade un separador entre las columnas, mismo sintaxis que un borde. column-gap: la distancia que hay entra las columnas. column-width: define el ancho de cada columna, por defecto es auto.

Ejemplo:

1 2 3 4 5 6 7 8 9

#hola{ column-count:2; column-rule:2px dashed #FFFFFF; -moz-column-count:2; -moz-column-rule:2px dashed #FFFFFF; -webkit-column-count:2; -webkit-column-rule:2px dashed #FFFFFF;

Resultado:

4. Text Shadow

Esta propiedad añade una sombra paralela al texto, usa la misma sintaxis que box-shadow obviando el valor opcional de inset y el valor de expansion:

1	text-shadow: desplazamiento-x | desplazamiento-y | desenfoque | color de sombra;

A diferencia de las otras propiedades, esta es la misma en todos los navegadores.
Ejemplo:

1 2 3

#hola{ text-shadow:-2px 1px 2px #C4BFBF; }

El resultado:

5. Transitions

La propiedad transition es una animación hecha únicamente con CSS, su sintaxis consiste en seleccionar una propiedad a animar y definir el tiempo de animación:
Sintaxis:

1 2 3 4 5 6 7 8

/* Firefox */ -moz-transition: propiedad a animar | duración de la animación; /* para Safari y Chrome */ -webkit-transition: propiedad a animar | duración de la animación; /* para Opera */ -o-transition: propiedad a animar | duración de la animación; /* Se pueden agrupar transiciones usando comas. */

Cabe notar que para que esta propiedad funcione tiene que existir un cambio de estado sobre el elemento, en el siguiente ejemplo voy a definir:hover como activador, cuando el cursor pase por encima del elemento se ejecutara la animación.
Ejemplo:

1 2 3 4 5 6 7 8

#hola {       -webkit-transition: background-color 1s, color 1s;      -o-transition: background-color 1s, color 1s; } #hola:hover {       background-color:black;       color:white; }