CSS Efectos visuales

Efectos visuales con CSS

Los efectos visuales se utilizan entre otras cosas para definir la visibilidad de los elementos y también para establecer el comportamiento del contenedor de los mismos.

La propiedad overflow

Overflow nos permite controlar el comportamiento de una caja en caso que su contenido la desborde.

Código

p{
background-color: #FFFFD9;
width: 100px;
height: 100 px;
overflow: scroll
}

<p>Utilice overflow para controlar la disposición de los elementos dentro de la caja.</p>

Resultado

Utilice overflow para controlar la disposición de los elementos dentro de la caja.

En este ejemplo, definimos el tamaño de la caja en 100x100 píxeles y le agregamos una barra de desplazamiento.
Nota: el valor por defecto de la propiedad overflow es "visible".

La propiedad clip

Usamos clip cuando queremos recortar una imagen a una medida determinada.
Los valores de rect son en este orden (superior derecha inferior izquierda)

Código

img {
position:absolute;
clip:rect (0px 50px 100px 0px)
}

<img border="0" src="foto3.jpg" width="100px" height="150px">

Resultado

foto3
Imagen completa

En el ejemplo, el tamaño real de la imagen es de 100x150 píxeles y con la propiedad clip la cortamos a la medida deseada.

La propiedad display

Con display se puede definir el comportamiento del elemento.

Código

p{
display:inline
}

<p>En este ejemplo</p>
<p>la propiedad display une dos párrafos en una misma línea.</p>

Resultado

En este ejemplo

la propiedad display une dos párrafos en una misma línea.

La propiedad visibility

Define si un elemento será visible o invisible.

Código

h3.se_ve{visibility:visible}
h3.no_se_ve{visibility:hidden}

<h3 class="se_ve">Este texto es visible.</h3>
<h3 class="no_se_ve">Este texto es invisible.</h3>

Resultado

Este texto es visible.

Este texto es invisible.

En este caso tenemos un texto visible y otro invisible.

Propiedades de los efectos visuales

Propiedad	Descripción	Valores	Detalles
overflow	Comportamiento del contenido si se desborda en la caja.	visible	Visible
		hidden	Oculto
		scroll	Barra de desplazamiento
		auto	Automático
clip	Especifica la región visible del elemento.	rect	Longitud superior Longitud derecha Longitud inferior Longitud izquierda
clip	Especifica la región visible del elemento.	auto	Automático
display	Comportamiento del contenedor.	inline	Se muestra en la misma línea.
		block	Se muestra tal cual es.
		list-item	Convierte diferentes elementos en Ítems de una lista
		run-in	Palabra insertada No funciona en IE 5, 6 y 7 - Firefox
		inline-block	Límite del bloque Está incompleto para IE 5, 6 y 7 - No funciona en Firefox
		table	Tabla No funciona en IE 5, 6 y 7
		inline-table	Límite de la tabla No funciona en IE 5, 6 y 7
		none	No se visualiza
visibility	Visibilidad de las cajas.	visible	Visible
		hidden	Oculto
		collapse	Ventana desplegable No funciona en IE 5, 6 y 7 - Firefox