Imágenes background en diseño responsive CSS

Existen diferentes técnicas para optimizar la entrega de imágenes en diseño responsive. En el caso de imágenes de fondo la mejor solución es utilizar un set de propiedades background y media queries. Si la imagen nos lo permite, podemos optar al uso de imágenes vectoriales, e incluso web fonts, y aprovechar las ventajas que ofrecen.

Leer

Prevenir que una palabra se salga de su contenedor CSS

Pequeño tutorial sobre el uso de la propiedad CSS hyphens: auto que permite truncar una palabra en dos líneas con un guión separador de acuerdo con las reglas ortográficas del idioma del texto. Es útil para palabras largas que puedan superar la anchura de su contenedor o para truncar palabras en puntos correctos para justificar el texto.

Leer

Animaciones básicas con CSS transition CSS

Con la propiedad transition de CSS3 se pueden conseguir animaciones que, aunque básicas, son muy interesantes sin la necesidad de javascript. Por ejemplo, se puede conseguir un cambio de color, efecto fade in o cambio de posición animado.

Leer

Utilizando la regla @import CSS

La regla @import de CSS se utiliza para cargar unos archivos CSS dentro de otros. Su principal utilidad actual es poder dividir los archivos CSS en varios para facilitar el trabajo de los desarrolladores. En este post explicamos también su implicación en la velocidad de carga de la web.

Leer

Centrar un div sin anchura (width) fija CSS

Aprende a centrar horizontalmente un div o cualquier otro elemento tipo block cuándo no tiene una anchura fija o no ha sido definida. Se explican varios métodos y diversos ejemplos, incluyendo el centrado de un menú horizontal construido con listas.

Leer