Maestro CSS, destripando estilos. Cap. 10: Propiedades de visualización (overflow, visibility,clip)
Escrito por Arzet el 12 - 02 - 2009 • Diseño web , Tutoriales

Overflow
Por medio de este estilo especificaremos al navegador el trato que tiene que darle a una capa cuyo contenido no cabe dentro del espacio que le hemos especificado. Por regla general se suele aplicar a capas que tienen una limitación en ancho o alto y el contenido excede estas medidas.
Los valores posibles para esta propiedad son:
- overflow: visible;
Si el contenido de la capa excede sus dimensiones será mostrado igualmente. Esta propiedad fuerza a que se muestre el contenido aunque exceda las medidas de la capa de forma que aparentemente el contenido “flotaría” por encima. Cabe recordar que el comportamiento de este varía según cada navegador por los que conviene probarlo si no queremos alguna que otra sorpresa. - overflow: hidden;
La capa muestra únicamente el contenido que no excede los límites. Todo aquel que los sobrepase queda oculto tras la capa como si de una ventana se tratara. - overflow: auto;
El valor más utilizado para esta propiedad. Solo muestra el contenido de la capa que entra dentro del tamaño de la misma, pero si hay contenido que excede este tamaño muestra automáticamente las barras de scroll para poder acceder a toda la información, como si de una ventana nueva se tratara.
En modo auto, solo mostraría las barras de scroll en caso de necesitarlas, es decir, que sólo si el contenido excede las medidas en alto o ancho que nosotros hemos forzado para la capa, mostraría las barras. En las versiones más actuales de los navegadores podemos incluso ver sólo barras horizontales o verticales según la necesidad de la capa. - overflow: scroll;
Mientras que el valor auto solo muestra las barras si son necesarias para poder visualizar todo el contenido, el valor scroll fuerza siempre la aparición de estas barras aunque estén deshabilitadas cuando el contenido no excede las medidas de la capa.
Visibility
Esta propiedad guarda cierta similitud con la propiedad display y los valores block o none. Con esta propiedad podemos mostrar u ocultar una capa de nuestra web, pero con la gran diferencia respecto al display, que en este caso lo que hacemos es hacer la capa invisible pero sigue estando allí, es decir, que sigue ocupando el espacio dentro de la página aunque no veamos nada allí.
Los posibles valores son:
- visibility: visible;
Valor por defecto de todas las capas, y que es el de mostrar la capa y todo su contenido. Evidentemente este valor solo se utiliza para hacer visibles capas que han sido ocultadas dinámicamente (por ejemplo con jQuery). - visibility:hidden;
Valor con el que convertiremos una capa y todo su contenido en invisibles, recordando eso sí, que simplemente hacemos la capa transparente, pero que sigue estando allí ocupando sitio.
Clip
Diría que clip es una de esas propiedades que está bien tener pero que en rarísimas ocasiones se utiliza.
Su función consiste en definir el área que se visualizará de una capa, nos permite enmarcar sólo una zona de toda la capa para mostrarla.
Su único valor permitido es rect y se especifica así:
- clip: rect(top, right, bottom,left);
Esto nos permite definir del total del área siempre rectangular, que debe visualizarse siguiendo la siguiente estructura:

Como ya he comentado se trata de una propiedad muy poco utilizada pero que puede venirnos muy bien para por ejemplo con una sola imagen poder tener los diferentes estados (hover, visited,…) e irnos moviendo sobre ella y solo mostrando la parte que nos interesa en cada caso (modo similar al que trabajan los CSS Sprites).







Una pregunta, que paso con los números 6 y 7, hay alguna explicación por la que no esten.
Si ya fue explicado el motivo pido disculpas, pero me lo perdí.
Muy buenos los posts.
Gracias.
Pues en principio y si no me he descontado estar estan. Puedes usar el buscador para localizarlos o los enlaces:
- http://www.ateneupopular.com/tutoriales/maestro-css-destripando-estilos-cap-6-propiedades-de-la-a-a-la-z/
- http://www.ateneupopular.com/tutoriales/maestro-css-destripando-estilos-cap-7-propiedades-de-posicionamiento-position-top-bottom-left-right-float/
Un saludo.