Partición CSS: word break, word wrap y hyphens

Solución CSS para partir las líneas de texto en web. El método corta las palabras y les añade un guión tras las sílaba de corte, usando graceful degradation para mantener la compatibilidad con todos los navegadores.

Continue leyendo →

Menú responsive – Tutorial CSS

En este tutorial vamos a ver un pequeño componente CSS muy útil: un menú responsive de dos niveles compatible con mobile y tablet, sensible a la resolución de las pantallas pero también a su orientación (vertical u horizontal).

Continue leyendo →

Tabla responsive paso a paso

Para esta tabla responsive me inspiré en la tabla de Chris Coyiers, sobre la que añadí la idea de mantener visible 1, 2 ó 3 columnas y ocultar las otras añadiendo un un símbolo + para volver a mostrarlas. Posteriormente encontré el ejemplo de FooTable que podéis encontrar en mi artículo «Responsive table Best Practices» que se basa en el mismo concepto. Sin embargo en nuestro ejemplo veremos algunas diferencias en el CSS que aportarán valor a este artículo.

Continue leyendo →

Problema float css

Muchos de vosotros conoceréis este problema y las viejas soluciones, como añadir un elemento con clear: both o aplicar un attributo overflow, y habréis sufrido la contrariedad del primero y las inconsistencias del segundo.
Repasaremos algunas soluciones al problema de los float que desbordan su contenedor e indagaremos en la raiz del problema para poder evitarlo en lugar de corregirlo.

Continue leyendo →

Columnas CSS

Actualización: este artículo es anterior al lanzamiento de IE8 pero explica la técnica de «réplica de una tabla» que sigue siendo un método válido y efectivo para montar una estructura table-free de columnas mediante CSS.

Continue leyendo →

Estructura html

Seguramente muchos ya habréis oído hablar de estos términos, pero si habéis llegado hasta aquí quizás estéis buscando respuestas a cómo construir una buena estructura HTML, o lo que es lo mismo, escribir código estructural.

Continue leyendo →