CSS3 Segunda Parte

Continuacion de Lo Nuevo del CSS3

.:Programacion Web:.

Sombras en CSS3 {box-shadow}

Lo que nos permite hace esta propiedad es agregarle al contenedor una sombra. Se puede no colocar o colocar una o mas sombras en donde cada una se compondria de [longitud (2,4) && color?] && inset.

Los valores que puede tener las longitudes van desde 2 a 4 valores lo que significa:

• El valor inicial sera para la separacion horizontal de la sombra, los valores ques on positivos dibujaran una sombra con separacion por el borde derecho de la caja una negativas sera por el borde contrario, si colocar cero entonces la sombra coincidiria con la misma caja.

• El segundo valor se considera para la separacion vertical, comenzando la separacion desde abajo para los valores positivos y de arriba para los valores negativos y de nuevo si el valor es cero concide con la caja.

• El tercer valor es para darle un radio del difuminado, aca no se permite ningun valor negativo, y si el valor fuese cero no habria difuminado.

• El cuarto y ultimo valor es para la propagacion del difuminado, los valores que son positivos haran una propagacion del difuminado en todas las direcciones, mientras que los valores que son negativos lo contraen

la propiedad del color es una propiedad opcional y si no se le colocara entonces el navegador lo elegiria, es muy probable que lo eliga de la propiedad {color} establecida para algun elemento.

Si se colocara la palabra inset entonces se dibujaria la sombra en el interior de la caja.

Ejemplo:

 <div id="ejemplo-box-shadow" style="-webkit-box-shadow: 20px 15px 10px 5px rgba(0,0,255,0.5); 
background-color: red; 
border: black solid 1px; 
box-shadow: 20px 15px 10px 5px rgba(0,0,255,0.5); 
height: 75px; 
width: 200px;"></div>

Hay que tener en cuenta que se le puede hacer a la caja los bordes redondeados con solo agregarle la propiedad {border-radius} antes comentada.
Compatibilidad con Firefox, Opera, Google Chrome, con Safari para que funcione necesita -webkit-


Colores

Comenzaremos diciendo que los que hemos trabajado con el CSS conocemos que normalmente se utiliza para darle color a los elementos la propiedad RGB ( que no es otra cosa que los valores que se le coloca a los colores rojo, verde y azul, para que nos de otra gama de colores), y que lo normal es que se coloquen los colores en valores hexadecimales esto quiere decir por ejemplo para el color blanco sera #FFFFFF y en valor de RGB sera (255,255,255), con el CSS2 se podia usar cualquiera de estas dos formas, hoy con el CSS3 tambien se le puede agregar un cuarto valor que seria el de opacidad, entonces esta seria RGBA siendo A el alfa el cual vas de 0 a 1 siendo 1 totalmente opaco y 0 totalmente transparente.


Ejemplo

Color Normal

div { 
   background: rgb(0, 0, 0); 
   width: 50px;
   height: 50px;
}

Resultado un cuadrado negro

Color con Transparencia

div { 
   background:  rgba(0, 0, 0, 0.5); 
   width: 50px;
   height: 50px;
}

El Resultado final sera un cuadrado con 50% de transparencia: