css3-trucos

Ya anunciamos hace poco otra lista de trucos con CSS3 en donde se aprendía a crear degradados, aplicar sombra cualquier texto, bordes redondeados…, pero en esta entrada se aplican algunos más.

Aquí aprenderemos a redimensionar elementos, aplicar sombra y cambiar la transparencia con CSS3.


Dicho esto, allá vamos:

Cambiar la transparencia con CSS3

Para cambiar la transparencia con CSS3, debemos aplicar dicho código CSS y aplicarlo a la clase correspondiente:

#opacity {background-color: #000;opacity: 0.3;}

La transparencia puede tener los valores desde 0.0 hasta 1.0 (En el ejemplo se usa 0.3, es decir, un 30% de opacidad).

Sombra en las cajas con CSS3

Podemos aplicar sombra en las cajas para darle un efecto en 3D. Para ello debemos aplicar este código CSS a nuestro documento:

#shadow {background-color: #fff;border: 1px solid #000;-webkit-box-shadow: 3px 5px 10px #ccc;}

Los 3px determinan la distancia horizontal que existe entre la sombra y el elemento div. Los 5px determinan la distancia vertical que existe entre la sombra y el elemento div. 10px es el radio de la sombra y el último valor determina el color de la sombra (por defecto está “#ccc”).

Redimensionar cajas con CSS3

Con la versión más reciente de CSS es posible redimensionar elementos (por ahora solo funciona en Safari). Podemos redimensionar cualquier div de una forma fácil, con unas líneas de código.

#resize {background-color: #fff;border: 1px solid #000;resize: both;overflow: auto;}

La propiedad overflow debe estar con el valor auto para que el redimensionamiento funcione. La propiedad y su valor “resize: both;” significa que el elemento div podrá ser redimensionado verticalmente y horizontalmente.

Como ya hemos dicho tenemos más trucos para CSS3 a vuestra disposición.

Vía | Nettuts