Pseudoelementos CSS

En este artículo vamos a explicar qué son los pseudoelementos CSS, para qué se utilizan y cómo funcionan en el diseño de páginas HTML. En un articulo anterior hemos visto que los selectores CSS se utilizan para seleccionar elementos HTML en función de su tipo, clase, ID, jerarquía y atributos. Ahora veremos que los pseudoelementos … Leer más

Pseudoclases CSS

En este artículo vamos a explicar qué son las pseudoclases CSS, para qué se utilizan y cómo funcionan en el diseño de páginas HTML. Este artículo está relacionado con los selectores CSS publicado anteriormente. Las pseudoclases CSS son selectores especiales que permiten seleccionar y aplicar estilos a elementos HTML en función de su estado o … Leer más

Selectores CSS

En este artículo vamos a explicar qué son los selectores CSS, para qué se utilizan y cómo funcionan en el diseño de páginas HTML. Los selectores permiten a los diseñadores y desarrolladores personalizar la apariencia de elementos individuales o conjuntos de elementos HTML en una página. Podemos emplear diversos tipos de selectores CSS para elegir … Leer más

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