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 ?
- 驴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.
鉂わ笍 Alice want to meet you! 鉂わ笍
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.
Good article. I definitely appreciate this website. Stick with it!
It铆s nearly impossible to find educated people about this subject, however, you seem like you know what you铆re talking about! Thanks
Gracias por su comentario 馃А
Greetings! Very useful advice in this particular post! It is the little changes that make the largest changes. Many thanks for sharing!