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?

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;
}
ejemplo overflow css 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;
}
Overflow css scroll
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;
}
overflow-y css
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;
}
overflow css auto

驴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.

Publicada en css

6 respuestas a 芦css overflow禄

  1. May I simply just say what a relief to find someone who truly understands what they are discussing on the web. You definitely understand how to bring a problem to light and make it important. More and more people ought to check this out and understand this side of your story. Its surprising you arent more popular because you definitely have the gift.

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada.