Cursor en CSS y otros trucos básicos: margin y padding abreviados, fuentes web, carga de imágenes y carrusel sin JavaScript

Para cambiar el cursor con CSS se usa la propiedad cursor. Con cursor: pointer; aparece la mano de los enlaces, con cursor: not-allowed; el símbolo de prohibido, y con cursor: url("mi-cursor.png"), auto; puedes poner una imagen propia. Funciona en todos los navegadores actuales y no necesita JavaScript. Abajo tienes los valores que más se usan y otros cuatro trucos de CSS que siguen saliendo en cualquier proyecto: los atajos de margin y padding, las fuentes web, la carga de imágenes grandes y un carrusel sin JavaScript.

Si estás empezando desde cero con CSS, antes de esto te conviene la guía para aprender CSS con recursos gratis y una chuleta básica, que explica selectores, modelo de caja, flexbox y grid.

Cambiar el cursor con CSS

La propiedad cursor se aplica a cualquier elemento y el cambio se ve al pasar el ratón por encima. Estos son los valores que más se usan:

Valor	Qué indica
auto	El navegador decide según el contexto (por ejemplo, la barra de texto sobre un párrafo).
default	El cursor normal del sistema, normalmente una flecha.
pointer	La mano de los enlaces: se puede pulsar.
text	Texto que se puede seleccionar.
help	Hay ayuda disponible.
wait y progress	El programa está ocupado. Con progress el usuario puede seguir usando la página.
not-allowed	La acción no se va a realizar.
grab y grabbing	Algo se puede arrastrar, y algo se está arrastrando.
move	Algo se puede mover.
zoom-in y zoom-out	Se puede ampliar o reducir.
none	No se muestra cursor.

Lo normal es ponerlo en el CSS y no en el HTML. Por ejemplo, para una tarjeta entera que responde al clic:

.tarjeta-clicable {
    cursor: pointer;
}

Para un cursor con imagen propia, la sintaxis obliga a terminar con una palabra clave de reserva, que es la que se usa si la imagen no carga. Los dos números opcionales marcan el punto exacto del clic dentro de la imagen:

.zona-dibujo {
    cursor: url("lapiz.png") 4 12, auto;
}

Firefox y los navegadores basados en Chromium limitan por defecto las imágenes de cursor a 128 x 128 píxeles, y MDN recomienda no pasar de 32 x 32. Mi consejo es usar pointer solo en lo que de verdad se pulsa. Y no confiar en el cursor como única pista, porque en una pantalla táctil no hay cursor que cambie.

Margin y padding abreviados: la regla del reloj

En vez de escribir margin-top, margin-right, margin-bottom y margin-left por separado, puedes ponerlo todo en una sola propiedad abreviada. El orden sigue las agujas del reloj empezando por arriba: arriba, derecha, abajo, izquierda. Y según cuántos valores escribas, cambia a qué lado va cada uno:

margin: 10px;                /* los cuatro lados */
margin: 10px 20px;           /* arriba y abajo | derecha e izquierda */
margin: 10px 20px 30px;      /* arriba | derecha e izquierda | abajo */
margin: 10px 20px 30px 40px; /* arriba | derecha | abajo | izquierda */

Con padding funciona exactamente igual. El caso de tres valores es el que más confunde. El segundo vale para los dos lados, derecha e izquierda. Si te lías, escribe los cuatro y sales de dudas.

Usar cualquier fuente en una web

Hace años había que recurrir a trucos con JavaScript, como typeface.js, para mostrar una tipografía que el visitante no tuviera instalada. Hoy lo resuelve CSS con la regla @font-face, que funciona en todos los navegadores desde 2015. Subes el fichero de la fuente a tu servidor, por ejemplo en formato WOFF2, y lo declaras así:

@font-face {
    font-family: "MiFuente";
    src: url("/fuentes/mifuente.woff2") format("woff2");
    font-display: swap;
}

body {
    font-family: "MiFuente", sans-serif;
}

El descriptor font-display: swap hace que el texto se vea enseguida con la fuente de reserva y cambie a la tuya cuando termine de descargarse, en lugar de dejar la página sin texto mientras tanto. La fuente genérica del final (sans-serif, serif) es la que se usa si la tuya falla.

La otra vía es Google Fonts. Todas sus fuentes son de código abierto y gratuitas, se pueden usar en proyectos comerciales, y basta con pegar en el <head> un enlace como este:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap">

Ojo con la privacidad. Si cargas las fuentes desde los servidores de Google, el navegador de cada visitante le envía a Google su dirección IP, la URL pedida y la página desde la que se pide. Google dice que no usa esos datos para crear perfiles ni publicidad, pero si prefieres que no salgan de tu web, su propia ayuda explica que puedes descargar las fuentes y alojarlas en tu servidor con @font-face, como en el ejemplo de arriba. Dónde encontrar más fuentes y qué licencia mirar en cada caso lo tienes en la guía de webs para descargar fuentes gratis.

Precarga de imágenes grandes

El truco que publiqué aquí en 2009 consistía en ponerle a la imagen de fondo un GIF animado de carga, con background: url(cargando.gif) no-repeat center center;, para que se viera algo mientras llegaba la imagen buena. Sigue funcionando, pero hoy hay herramientas mejores y casi todas son atributos de HTML:

• Pon siempre width y height en las etiquetas <img>. El navegador calcula la proporción y reserva el hueco antes de que llegue la imagen, así el texto no salta cuando aparece.
• Usa loading="lazy" en las imágenes que quedan más abajo en la página. El navegador no las descarga hasta que el visitante se acerca a ellas.
• Para la imagen principal, la que se ve nada más entrar, haz lo contrario: fetchpriority="high" le pide al navegador que la descargue con prioridad, y <link rel="preload" href="portada.webp" as="image"> en el <head> adelanta su descarga.
• Si quieres algo de fondo mientras carga, un background-color parecido al tono de la foto pesa cero y queda más limpio que un GIF.

Nada de esto sirve si la imagen pesa varios megas. Primero redúcela, como se explica en la guía para reducir el tamaño de una imagen y optimizarla para web.

Un carrusel de imágenes sin JavaScript

En 2011 los sliders hechos solo con CSS3 eran poco más que una demostración, y solo funcionaban en los navegadores con motor WebKit. Hoy se puede montar un carrusel sencillo con scroll-snap, que funciona en todos los navegadores desde 2022. Se desplaza con el dedo, con la rueda o con la barra, y cada imagen se queda encajada:

#galeria {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

#galeria img {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    scroll-snap-align: start;
}

En el HTML basta con un <div id="galeria"> con las imágenes dentro. scroll-snap-type: x mandatory en el contenedor obliga a que el desplazamiento horizontal termine siempre en un punto de encaje, y scroll-snap-align: start en cada imagen dice que ese punto es su borde inicial.

Si añades un pase automático con animaciones CSS, respeta la preferencia prefers-reduced-motion. Con ella el sistema le indica al navegador que el usuario ha pedido reducir el movimiento en pantalla, y en ese caso conviene parar la animación. Para algo más complejo, con flechas, puntos y pase automático accesible, yo ya tiraría de una librería JavaScript probada.

Revisado y actualizado en octubre de 2026.