CSS3: transformations rotar, escalar, trasladar

En este post vamos a ver las CSS transformations que por si solas no hacen mucho, excepto tal vez la de rotar pueda ser interesante sin embargo su verdadera utilidad se ve en las CSS animations de las que hablaré en un próximo post, aunque desde ya les digo que esas sólo funcionan en Webkit y aún más interesantes son las 3D CSS animations que hacen cosas que sólo he visto en flash pero lamentablemente únicamente soportadas por un webkit night build (es decir una versión tan pero tan reciente que nisiquiera es alpha y sujeta a mil errores).

Vamos al grano, no sin antes advertir que sólo funcionan estos ejemplos en navegadores modernos

Trasladar con CSS3

Para mover el div de su ubicación actual usamos la siguiente propiedad para desplazarlo a la derecha(el segundo valor desplaza hacia abajo):
-moz-transform: translate(3em, 0pt);
-webkit-transform: translate(3em,0);

Rotar usando CSS3

Este ejemplo rotará nuestro div 30 grados
-moz-transform:rotate(30deg);
-webkit-transform: rotate(30deg);

Escalar usando CSS3

Veamos este ejemplo para agrandar un div al doble de su tamaño original
-moz-transform:scale(2);
-webkit-transform: scale(2);

Espero les sean útiles estas propiedades aunque por ahora sean sólo para experimentar

CSS3: Esquinas redondeadas

En un post anterior expliqué como hacer esquinas redondeadas sin muchos líos usando imágenes sin embargo usando CSS3 es mucho más sencillo y funciona en todos los navegadores modernos, esta demás decir que Internet Explorer no es moderno y por lo tanto sólo soporta este atributo en su versión 9.

Todas las esquinas iguales

Si queremos todas las esquinas redondeadas con el mismo efecto, nuestro código quedaría así para navegadores basados en Webkit(Safari, Chrome), Mozilla, Opera y también Internet Explorer 9:

Bordes con distinta redondez

Podemos hacer que sólo algunos bordes sean redondeados o que tengan distinto tamaño
En navegadores basados en Webkit sería:

Para firefox sería muy similar:

CSS3: Usando múltiples columnas

Esta es una de la propiedades más interesantes, usualmente lo que hacía era utilizar un DIV flotante por cada columna con un margen a la derecha y así generaba unas columnas pero si se quiere que el texto se acomode automáticamente el truco simplemente no funciona.


En CSS3 tenemos 4 propiedades para las columnas:

Estableciendo el ancho de las columnas

Cómo indicar la separación entre columnas

Y si quiero una línea entre cada columna

El uso de esta propiedad es similar al actual border, así fijamos el ancho, tipo(sólido, punteado,…) y el color.

¿Se puede fijar un ancho automático?

Si, también es posible indicar el número de columnas y hacer que el ancho se fije automáticamente.

En ese ejemplo establecemos el uso de 3 columnas.

Este ejemplo sólo funciona en navegadores modernos, no hay hack para IE. Mauris ac risus et justo fringilla semper. Duis quis nisl nisl, sed euismod nisi. Aenean ultricies ultricies sagittis. Nunc in aliquam nibh. Pellentesque id ipsum nunc, sit amet tempus leo. Nunc sit amet diam neque, sit amet rhoncus magna. Quisque in mi tortor, non congue felis. Quisque non elit felis, sed porttitor risus. Aliquam vehicula ligula non enim tempus a tristique velit condimentum. Nulla interdum fermentum sem, ac euismod dui iaculis ut. Vivamus a justo metus. Etiam sit amet ligula dui; id iaculis justo. Pellentesque fermentum sapien fermentum augue feugiat viverra.

CSS3: Agregando sombras a las cajas

Antes había indicado como agregar sombra a nuestro texto, ahora veamos como agregar sombra a nuestros DIV o a cualquier elemento de nuestra página web, también funciona con elementos de esquinas redondeadas aunque allí el efecto pueda no quedar tan logrado como sería en Photoshop pero no esta nada mal.


En CSS3 se agrega la sombra con una sóla línea de código aunque esta varía según el navegador que estemos utilizando

Y quedaría algo como esto

Los dos primeros parámetros indican la distancia en cuanto X, Y respectivamente y el último valor nos da el color de la sombra.

CSS3 como crear un degrado de color

Otra interesante opcion que nos da CSS3 es de crear degradados de forma muy sencilla para ya no tener que recurrir a imágenes de fondo como usualmente se hace.


Veamos primero la forma más simple:

Este ejemplo crea un degradado que empieza arriba partiendo del color #65b6cf hasta terminar en #2c2c2c

Veamos algo un poco más complicado esta vez vamos a definir la longitud del degradado

También es posible usar varios colores en nuestro degradado

Existe otra opción muy parecida para crear degrados radiales

Todo eso funciona en firefox, para hacerlo funcionar en Webkit la forma es un poco distinta