css overflow

#QuedateEnCasa Prodiedad Overflow css ¿Qué es? ¿Cómo se usa? ¿Cuándo usarlo? Ejemplos, Características, hidden, visible, scroll, todo eso y más bien explicado 100% GRATIS.

• ¿Qué es?
• ¿Para qué sirve overflow css ?
• Sintaxis
• ¿Cómo usar Overflow css ?
  • Overflow visible
  • Overflow hidden
  • Overflow scroll
  • Overflow-x y Overflow-y
  • Overflow auto
• ¿Con qué navegadores tiene compatibilidad?
• Ejemplos de OverFlow

¿Qué es?

Overflow es una propiedad CSS3, muy usada en el desarrollo web, quizás alguna vez tuviste la necesidad de ocultar algún contenido o darle un efecto de scroll, bien, para las animaciones es fundamental y de gran ayuda.

¿Para qué sirve overflow?

En pocas palabra oculta el contenido que se desborda del contenedor padre. Todas las propiedades tienen un único propósito y es estilizar las etiquetas HTML, para el caso de overflow más allá de cambiar, deformar, o pintar, es una propiedad que trabaja bien en conjunto, es decir, acompañar su gran funcionalidad con otras propiedades css.

Sintaxis

Sintaxis formal: [ visible | hidden | clip | scroll | auto ]

• overflow: visible
• overflow: hidden
• overflow: scroll
• overflow: auto

¿Cómo usar Overflow css ?

Esta propiedad tiene cuatro posibles valores o por lo menos estas son las más usadas. Dependerá mucho de tu necesidad cada una de ellas.

Overflow visible

El valor visible es el que traen todos los elementos por defecto en cada navegador web, cuando creas un <div> por ejemplo siempre el valor de overflow será visible hasta que lo modifiques.

Overflow hidden css

Este valor sin duda alguna es el más usado, sirve para ocultar o cortar todo aquel contenido que sobresalga de un contenedor. Por ejemplo, digamos que tenemos un <div></div> y dentro de ese elemento hay una imagen <img/>, pero esta imagen es más grande que el elemento que la contiene, si le aplicamos overflow: hidden a el <div> todo el contenido de la imagen que sobresalga será ocultado o recortado. Miremos un ejemplo.

div {
  width: 11rem;
  height: 10rem;
  background-color: yellow;
  overflow: hidden;
}

• El 1 es un div de color amarillo sin imagen.
• El 2 es una imagen notablemente más grande que el div.
• El 3 muestra la imagen dentro del div, como se evidencia el div se pierde, no se ve, pero en realidad lo que pasa es que la imagen por ser más grande que el contenedor se desborda.
• En 4 vemos que aplicando la propiedad overflow: hidden a el div la imagen automaticamente se corta o se oculta dependiendo de las dimensiones del contenedor en este caso el div.

Overflow scroll

Esta se usa mucho para lo que tiene que ver con textos o grupos de elementos metidos en un contenedor, por ejemplo digamos que tenemos un párrafo <p> dentro de un div pero se desborda como ocurría con la imagen, así:

div {
  width: 11rem;
  height: 10rem;
  background-color: yellow;
  overflow: scroll;
}

En esencia crea o dibuja unas barras de desplazamiento para que el contenido se mire en forma de scroll vertical u scroll horizontal.

¿Para qué sirve Overflow-x y Overflow-y entonces?

Overflow-x y Overflow-y son dos variaciones de Overflow, hay contenido que se desborda en ambas direcciones como lo vimos en el ejemplo de la imagen, tanto para la derecha (eje x) y como para abajo (eje y). Para estos dos casos puntuales existen estas dos propiedades.

div {
  width: 11rem;
  height: 10rem;
  background-color: yellow;
  overflow-y: scroll;
}

aquí lo que se hace es no asignar overflow: scroll directamente si no overflow-y: scroll. Repito esto depende mucho de tus necesidades.

Overflow auto

El valor auto creo que ya te has dado cuenta para que sirve, verifica si el contenido se desborda y le agrega el valor scroll en los dos ejes x y y, es una forma fácil de solucionar el problema del desbordamiento pero tenemos que saberla usar. Quizás no querramos es efecto de scroll por lo que debemos escoger mejor hidden.

div {
  width: 11rem;
  height: 10rem;
  background-color: yellow;
  overflow-y: scroll;
}

¿Con qué navegadores tiene compatibilidad?

Ejemplos de OverFlow

Bueno ya explicamos como evitar ese desbordamiento, en la imagen de abajo vemos que cuando hacemos hover sobre la imagen hace un zoom in o se escala. Esta es una manera correcta de animar elementos con un toque profesional.

Aquí nos despedimos, te mando un saludo desde la distancia, cuidate y se feliz.