Mario Bros nos muestra el uso de la propiedad Overflow en CSS

Hoy vamos a hablar un poco de una propiedad muy poderosa en CSS, se llama “overflow”, y les digo que es muy poderosa por la cantidad de cosas que podemos hacer con ella.

La propiedad overflow nos permite definir lo que pasa a un elemento cuando sale, o se desborda de su contenedor, o de un elemento caja, como una capa. Entonces, no se pierdan la explicación para que aprendan a usar porque voy a usar a Mario Bros para el post.

¿Qué es la propiedad overflow?

Como les decía al principio, es una propiedad CSS que nos permite definir qué es lo que pasará cuando un objeto contenido se desborde de su contenedor; dicho en otras palabras, es definir si queremos que un objeto que está contenido nunca se salga de su contenedor o queremos que salga.

Hay tres posibles valores que podemos definir:

• visible: está opción es por defecto y nos permite que el objeto contenido se desborde siempre.
• hidden: es lo contrario, oculta el contenido que se esté desbordando del contenedor
• scroll: no permite el desbordamiento, pero a diferencia de “hidden” crea un scroll para poder ver la parte que se ha ocultado. El scroll por defecto aparece no importando si se cumple el desborde o no.
• auto: el desborde se activa sólo cuando existe, así como el scroll.
• inherit: un poco difícil de entender para principiantes, pero hereda la propiedad de su padre.

Entonces, para definirlo, por ejemplo con el valor de oculto sería así:

Una explicación más visual

Mario Bros nos puede dan una explicación mucho más sencilla de la propiedad overflow. Tomando en cuenta el primer juego de Mario, podemos decir que:

1. El escenario es el contenedor principal al cuál se le va a aplicar la propiedad CSS

2. Mario es el objeto que está contenido en el escenario.

Teniendo estas referencias procedemos a explicar gráficamente cada valor posible.

Por si queda alguna duda podemos ver que hay un scroll a pesar de que Mario no ha salido de la pantalla, el scroll aparece y se queda ahí sin importar si hay desborde o no.

En este caso el desborde ocasiona que el scroll aparezca, pero si el desborde no existe el scroll tampoco.

Algunas de las aplicaciones de esta propiedad son los sliders de noticias o de imágenes, ya que nos permiten ocultar los slides en una capa con overflow para que tan sólo con jQuery las movamos, así no se verán por fuera, pero por dentro pareciera que si hay movimiento oculto.

También es usado en cualquier efecto que requiera ocultar información para algún sentido, arriba, abajo, derecha, o izquierda, para que el efecto de la sensación de que la capa desaparece pero no fuera del objeto contenedor.