Efectos visuales

Introducción

Existen propiedades que permiten aplicar algunos efectos visuales en la página: recortar una parte de la caja de un elemento, especificar el comportamiento para los casos en que el contenido de un elemento es mayor que su tamaño y provocar que un elemento sea invisible.

Volver

Desbordamiento: la propiedad 'overflow'

Generalmente el contenido de una caja de bloque se mantiene dentro de los límites de la caja, pero puede suceder que el contenido desborde esos límites y quede parcial o totalmente fuera de la caja.

Esto puede suceder si especificamos un tamaño determinado para un elemento (con las propiedades 'width' y 'height', por ejemplo) y su contenido resulta demasiado grande para las medidas adjudicadas. También puede darse al utilizar márgenes negativos o posiciones absolutas para el elemento.

Cuando se produce un desbordamiento, la propiedad 'overflow' especifica si la caja es recortada y (en caso afirmativo) cómo será recortada. La propiedad 'clip' especifica el tamaño y la forma de la zona de recorte.

'overflow'
Valores:	visible \| hidden \| scroll \| auto \| inherit
Valor inicial:	visible
Se aplica a:	los elementos a nivel de bloque y reemplazados
Se hereda?:	no
Porcentajes:	no admitidos

Esta propiedad especifica si el contenido de un elemento a nivel de bloque es recortado cuando desborda la caja del elemento. Los valores tienen los siguientes significados:

visible: Este valor indica que el contenido no es recortado, es decir, puede ser procesado fuera de la caja de bloque.
hidden: Este valor indica que el contenido es recortado y los usuarios no tendrán acceso al contenido recortado. El tamaño y forma de la zona de recorte son especificados por la propiedad 'clip'.
scroll: Este valor indica que el contenido es recortado y el navegador debe proporcionar un mecanismo de desplazamiento que permanecerá siempre visible (aunque la caja no tenga parte de su contenido recortado).
auto: El comportamiento del valor 'auto' depende del navegador, pero significa que éste debe proporcionar un mecanismo de desplazamiento para las cajas desbordadas.

Ver

DIV { overflow: scroll }

Volver

Recorte: la propiedad 'clip'

'clip'
Valores:	<forma> \| auto \| inherit
Valor inicial:	auto
Se aplica a:	los elementos a nivel de bloque y reemplazados
Se hereda?:	no
Porcentajes:	no admitidos

Una zona de recorte define qué porción del contenido de un elemento es visible. De manera predeterminada, la zona de recorte tiene el mismo tamaño y forma que la caja del elemento. Sin embargo, la zona de recorte puede ser modificada por la propiedad 'clip'.

La propiedad 'clip' se aplica a elementos que tienen una propiedad 'overflow' con un valor diferente a 'visible'. Los valores tienen los siguientes significados:

auto: La zona de recorte tiene el mismo tamaño y ubicación que la(s) caja(s) del elemento.
<forma>: En CSS2, el único valor permitido para es: rect (<arriba>,<derecha>,<abajo>,<izquierda>).; Los valores para <arriba><derecha><abajo> e <izquierda>pueden ser una <medida> o 'auto'. Las medidas negativas están permitidas y 'auto' significa lo mismo que '0' (cero).

Ver

Las zonas de recorte son todas rectangulares. En futuras versiones de CSS es probable que se agreguen otras formas.

Volver

Visibilidad: la propiedad 'visibility'

'visibility'
Valores:	visible \| hidden \| collapse \| inherit
Valor inicial:	inherit
Se aplica a:	todos menos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

Esta propiedad especifica si las cajas generadas por un elemento son procesadas. Aunque el elemento sea invisible sigue afectando la composición de la página, es decir, continúa ocupando su espacio. Los valores tienen los siguientes significados:

visible: El elemento es visible.
hidden: El elemento es invisible (totalmente transparente), pero sigue afectando la composición.
collapse: Si se usa en otros elementos que no sean filas o columnas de una tabla, 'collapse' tiene el mismo significado que 'hidden'.

Esta propiedad puede ser usada conjuntamente con scripts para crear efectos dinámicos.

Ver

Volver

5.1 Efectos visuales
	Anterior		Siguiente