«Introducción a CSS3»

Desde el anuncio en 2005 de las hojas de estilo de nivel 3, mejor conocidas como CSS3, cada día son más los diseñadores y desarrolladores web que utilizan la potencia de CSS3 para maximizar el rendimiento de sus diseños. Para que no te quedes atrás, aquí tienes una guía de introducción a CSS3 para principiantes en la que descubrirás todo lo que debes saber sobre CSS3, como por ejemplo crear sombras, gradientes y esquinas redondeadas. A pesar que CSS3 no es todavía un estándar de la W3c, cada día encontramos mayor soporte por parte de los navegadores, por lo que vale la pena utilizar CSS3 para mejorar la experiencia visual de las personas que utilizan navegadores modernos y actualizados.

CSS3 para Principiantes
Prefijos del navegador
Una de las primeras cosas que veremos es que para especificar las propiedades de CSS3, como norma general hacen falta los vendor prefixes o prefijos del navegador. El motivo es que los navegadores web van implementando las diferentes propiedades de manera gradual, por lo que hay que especificar cada una de las propiedades para los distintos navegadores.
El principal inconveniente del uso de prefijos del navegador es que nuestro código CSS puede parecer un tanto caótico y que hemos de especificar varias veces los parámetros de una misma propiedad. La ventaja de esto es que podemos dar un toque diferente a la misma página web para que se vea de manera diferenciada en los distintos navegadores.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


Las extensiones más comunes son las basadas en navegadores que utilizan Webkit(por ejemplo, Chrome y Safari), que empiezan con -webkit-, y los navegadores basados en Gecko (por ejemplo, Firefox), que empiezan con -moz-. Opera (-o-) e Internet Explorer (-ms-) tienen sus propias extensiones.

Propiedades básicas de CSS3
Esquinas redondeadas con border-radius
La regla número uno de la Web 2.0 es: si tiene esquinas redondeadas, es moderno. Gracias a la propiedad border-radius de CSS3 ya no hace falta que utilices imágenes ni JavaScript para conseguir esquinas redondeadas.
Veamos un ejemplo:


Código HTML:

<div class="rounded">Ejemplo de esquinas redondeadas con CSS3</div>
Para conseguir que las esquinas se vean redondeadas, sólo necesitas este código CSS:
div.rounded {
    background-color: DimGray;
    line-height: 20px;
    text-align:center;
    padding: 20px;
    border-radius:15px;
    -moz-border-radius: 15px;
}


En el caso de border-radius hemos de utilizar también -moz-border-radius para Mozilla.
Esto lo que hace es que todas las esquinas sean redondeadas. Pero supongamos que no queremos que lo sean todas, entonces aplicamos esta regla:
4 valores:
border-radius: ArribaIzquierda ArribaDerecha AbajoDerecha AbajoIzquierda;
3 valores:
border-radius: ArribaIzquierda AbajoIzquierda+ArribaDerecha AbajoDerecha;
2 valores:
border-radius: ArribaIzquierda+AbajoIzquierda ArribaDerecha+AbajoDerecha;
1 sólo valor:
border-radius: Todos;

En el caso que el navegador no de soporte a la propiedad border-radius, en lugar de verse las esquinas redondeadas se verán esquinas en ángulo recto, al igual que un rectángulo.

Crear sombras con box-shadow

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


La propiedad box-shadow permite a los diseñadores web el implementar fácilmente sombras tanto dentro como fuera de elementos de caja, especificando valores como el color, tamaño, borrosidad (blur) y offset.

El soporte de los navegadores está aumentando con Mozilla (Firefox), Webkit (Safari y Chrome), Opera e IE9. Aún así, Mozilla y Webkit necesitan todavía sus prefijos -moz- y -webkit- respectivamente (nota: Mozilla Firefox 4.0+ ya no requiere el prefijo -moz-).

Veamos un ejemplo:
Firefox, Safari/Chrome, Opera y IE9 muestra una sombra AzulOscuro.
Código HTML del ejemplo:

Código CSS:
div.boxshadow {
    background-color: silver;
    -moz-box-shadow: 10px 10px 5px darkblue;
    -webkit-box-shadow: 10px 10px 5px darkblue;
    box-shadow: 10px 10px 5px darkblue;
    text-align: center;
   width: 600px;
}