Cómo utilizar z-index y los contextos de apilamiento CSS

La propiedad z-index de CSS se utiliza para apilar los elementos unos sobre otros en el eje espacial z, que sería la tercera dimensión, la que da profundidad a la representación visual de un documento. En este post explicamos como se utiliza y su relación con los contextos de apilamiento.

Leer

Introducción a las variables CSS CSS

En este post aprenderemos a utilizar las variables CSS, también llamadas propiedades CSS personalizadas, sus características más importantes y como trabajar con ellas en JavaScript.

Leer

El caso del colapso de márgenes en CSS CSS

Los márgenes verticales de elementos bloque adyacentes se combinan y colapsan entre sí quedando el mayor de los dos. En este post repasamos los diferentes casos que nos podemos encontrar y como pueden influir al flujo de contenido.

Leer

Como utilizar em y rem en CSS CSS

Las unidades em y rem son dos tipos de unidades relativas utilizadas en CSS principalmente para la propiedad font-size y para propiedades que necesiten mantener la proporcionalidad con el font-size, por ejemplo margin y padding. Vamos a aprender las características de cada una, como utilizarlas y como se pueden combinar.

Leer

Cómo cambiar el cursor por una imagen personalizada CSS

Personalizar el cursor con CSS es muy fácil a través de la propiedad cursor. Esta propiedad nos permite especificar el tipo de cursor que queremos utilizar y también admite la notación funcional url() con la que podemos especificar una imagen personalizada.

Leer

Cambiar el color del texto seleccionado con CSS CSS

El selector CSS ::selection permite definir el aspecto del texto seleccionado, por ejemplo podemos cambiar el color del texto o del fondo de la selección. En este post veremos algunos ejemplos prácticos sobre su uso.

Leer

Cómo hacer un iframe responsive CSS

Los elementos iframe son los más utilizados para insertar contenido externo, sobre todo contenido multimedia, como YouTube o SoundCloud. En este tutorial veremos como hacer que el iframe sea responsive manteniendo el aspect ratio en distintos tamaños de pantalla.

Leer

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