Firebug: videotutorial modificando html css

Suelo hablar bastante de firebug, y que me parece una de las mejores herramientas para los diseñadores de páginas web, anteriormente hice una breve guia de como funciona, pero me encontré con un videotutorial muy interesante que explica como podemos usarlo para modificar los estilos de nuestra página web, teniendo la vista previa de los cambios en Firebug y luego se graban en Dreamweaver o nuestro editor favorito.

Multiples bordes con CSS

Este es un truco interesante que me encontré AQUI , como sabemos usando la propiedad border se puede crear un borde simple pero si queremos más de un borde hasta donde sabía era imposible, salvo colocando un div dentro de otro pero ahora me doy cuenta que no hace falta.

El código HTML

Vamos a probar con un sólo DIV, el código sería:

Hasta ahí nada de raro, ahora veamos el código CSS

La hoja de estilos

El truco está en el uso de las pseudo-clases : before y after, al darles formato podemos aplicar un borde adicional, de hecho podríamos ponerle lo que deseemos para lograr un efecto más elaborado.

El demo pueden verlo AQUI

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.