Hacer un grid con CSS

En este artículo vamos a explicar cómo hacer un sistema de cuadrícula grid con CSS y aplicarlo a cualquier elemento HTML. El sistema de cuadrícula grid en CSS es una herramienta que permite crear diseños de página complejos y estructurados con facilidad. Un típico error que suele cometerse al definir estructuras de rejillas es utilizar … Leer más

Crear un globo de texto o tooltip

En este artículo vamos a ver cómo crear un globo de texto o tooltip. Normalmente esta técnica se utiliza para añadir información adicional al pasar el ratón sobre una palabra o elemento HTML. En HTML existe el atributo global «title» que pemite mostrar un tooltip con un texto descriptivo si se lo añadimos a elementos … Leer más

Imagen a pantalla completa

En este artículo voy a enseñar dos formas de mostrar una imagen a pantalla completa: Con un pop-up y Fullscreen, pros y contras. El código es el siguiente: En esta sencilla página HTML he colocado la misma imagen en dos enlaces <a> diferentes. Cada enlace tiene su evento onclick que llama a una de las … Leer más

Voltear una imagen con CSS

En este artículo voy a explicar cómo voltear, girar o invertir una imagen, o cualquier otro elemento HTML, solo con CSS y sin necesidad de utilizar un editor de imágenes. Se trata de una técnica estándar de CSS que se puede aplicar a cualquier tipo de imagen o elemento HTML, utilizando únicamente CSS. Muchos de … Leer más

Utilizar variables con CSS

En este artículo vamos a explicar cómo utilizar variables en nuestras hojas de estilo CSS, sus posibilidades y ventajas que nos ofrecen. Hoy en día se suelen crear las hojas CSS con términos semánticos como en el framework de bootstrap. Estos frameworks utilizan clases con palabras como success, info, warning, danger, que significan éxito, información, … Leer más

Actualizar hoja de estilos CSS

Hoy vamos a enseñar un pequeño truco o tip para forzar al navegador de Internet a actualizar nuestra hoja de estilos CSS. Muchas veces aplicamos cambios a nuestra hoja de estilos CSS, pero al subirla a Internet no se ven reflejados los cambios, porqué? Los navegadores suelen guardar en su cache (pequeña memoria interna) elementos … Leer más