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

CSS3 texto con sombra

Ya que cada día se ve vas cercano el uso masivo de CSS3 y HTML5 por lo que he visto por conveniente publicar algunos tutoriales al respecto, desde ya voy diciendo no me pregunten como se hace eso en Internet Explorer ya que o no existen hacks o hay que usar javascripts que hacen algo similar pero más lento o de menos calidad.


Es muy sencillo añadir sombra a un texto en los modernos navegadores (se sobreentiende que IE no es moderno) basta con una simple línea de codigo como esta:

Los 2 primeros valores me dan la distancia de la sombra respecto del texto en función de “X” “Y” respectivamente, el tercer valor indica el desenfoque de la sombra (blur) y finalmente el último valor es el color de la sombra.

El ejemplo quedaría así:

Este es un texto de prueba que sólo funciona en Safari 3, Opera 9.5, Firefox 3.1a, Konqueror y otros basados en Webkit

Buscadores de Iconos

Los íconos son muy útiles para darle algo de vida a nuestra página web y sobre todo señalar acciones para el usuario, ya lo dice el refrán una imagen vale por mil palabras, aqui les paso el link a dos buscadores de íconos tanto en formato ICO como PNG.

Uno es Mr. Icons
Y este otro que es más completo llamado FindIcons

Este último sobre todo tiene más opciones para hacer una búsqueda más precisa, pudiendo filtrar por color, por tamaño, estilo entre otras más.