Programacion CSS3

Curso de CSS3
El objetivo de este tutorial es conocer y practicar con las nuevas propiedades que nos
presenta el css3. Disponemos de un concepto teórico, un ejercicio resuelto y la vista en
ejecución de la página con su hoja de estilo.

Bordes redondeados (border-radius)
La propiedad border-radius permite crear esquinas redondeadas. Especificamos en
píxeles u otra medida el radio deredondeo de la o las esquinas.
Podemos indicar un único valor que se asignará a los cuatro vértices:
#recuadro1{
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}

También podemos indicar el redondeo de cada vértice en forma independiente (el
orden de los valores son la esquina superior izquierda, la esquina superior derecha,
la esquina inferior derecha y por último laesquina inferior izquierda):
#recuadro2{
border-radius: 20px 40px 60px 80px;
background-color:#aa0;
width:200px;
padding:10px;
margin-top:10px;
}

Bordes redondeados de alguno de los vértices
(border-top-left-radius etc.)
Si tenemos que redondear solo alguno de los cuatro vértices podemos utilizar
alguna de las siguientes propiedades:
border-top-left-radius
border-top-right-radiusborder-bottom-right-radius
border-bottom-left-radius

Con esta definición de la propiedades border-top-left-radius y border-bottom-rightradius deben aparecer redondeados los vértices superior izquierdo e inferior
derecho:
#recuadro1{
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}

El segundo ejemplo muestraredondeado solo el vértice superior derecho:
#recuadro2{
border-top-right-radius: 40px;
background-color:#aa0;
width:200px;
padding:10px;
margin-top:10px;
}

Sombras (box-shadow)
La propiedad box-shadow permite definir una sombra a un objeto de la página.
Debemos definir tres valores y un color, por ejemplo:
#recuadro1{
box-shadow: 30px 10px 20px #aaa;
border-radius: 20px;background-color:#ddd;
width:200px;
padding:10px;
}

La propiedad tiene 3 valores y un color, los valores son los siguientes:
- El desplazamiento horizontal (x) de la sombra, positivo significa que la sombra se
encuentra a la derecha del objeto, un desplazamiento negativo pondrá la sombra a la
izquierda.
- El desplazamiento vertical (y), uno negativo la sombra será en la parte superior
del objeto, unopositivo la sombra estará por debajo.
El tercer parámetro es el radio de desenfoque, si se pone a 0 la sombra será fuerte y
con color liso, más grande el número, más borrosa será.
El último valor es el color a aplicar a la sombra.

Sombras múltiples (box-shadow)
Con la propiedad box-shadow podemos aplicar múltiples sombras a un objeto. Para
esto debemos aplicar la siguiente sintaxis:box-shadow: [desplazamiento en x] [desplazamiento en y] [desenfoque] [color] ,
[desplazamiento en x] [desplazamiento en y] [desenfoque] [color] etc.

Por ejemplo si queremos que aparezca una sombra de color rojo en la parte superior
izquierda y una sombra verde en la parte inferior derecha podemos aplicar lo
siguiente:
#recuadro1{
box-shadow: -30px -30px 20px #f00,
30px 30px 20px #0f0;border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}

Sombras interiores (box-shadow)
Otra posibilidad de la propiedad box-shadow es la de implementar la sombra
interior al objeto, para esto debemos anteceder a los valores la palabra inset. Por
ejemplo si queremos un recuadro con sombra interior de color rojo y sombra
exterior de color amarilla podemos aplicar los siguientesvalores:
#recuadro1{
box-shadow: inset 0px 0px 40px #f00,
0px 0px 40px #ff0;
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}

Sombras con transparencias (box-shadow)
Otra posibilidad que podemos aplicar a la propiedad box-shadow es definir un valor
de transparencia de la sombra. Para esto debemos utilizar la función rgba, ejemplo:
box-shadow: 30px 30px 30px...