CSS Efectos visuales

Corte, unión, visibilidad e invisibilidad de los elementos.


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.

Ejemplo

Vamos a ver el comportamiento de la propiedad overflow.

Código
<head>
<style type="text/css">
p{
background-color: #FFFFD9;
width: 100px;
height: 100 px;
overflow: scroll
}
</style>
</head>

<body>
<p>Utilice overflow para controlar la disposición de los elementos dentro de la caja.</p> </body>
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)

Ejemplo

Acá vemos como podemos cortar una imagen a nuestro gusto.

Código
<head>
<style type="text/css">
img.recortada {
position:absolute;
clip: rect(0px 50px 100px 0px)
}
</style>
</head>

<body>
<img class="recortada" src="/foto3.jpg" style="border:0; width: 100px; height: 150px">
<img src="/foto3.jpg" style="border:0; width: 100px; height: 150px">
</body>
Resultado
foto3

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.

Ejemplo

Veamos un ejemplo de como manipular textos.

Código
<head>
<style type="text/css">
p{display:inline}
</style>
</head>

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

En este ejemplo

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


La propiedad visibility

Visibility nos define si un elemento será visible o invisible.

Ejemplo

Vamos a comparar entre las 2 propiedades.

Código
<head>
<style type="text/css">
h3.se_ve{visibility:visible}
h3.no_se_ve{visibility:hidden}
</style>
</head>

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


Propiedades de los efectos visuales

PropiedadDescripciónValoresDetallesEj.
overflow Comportamiento del contenido si se desborda en la caja. visible Visible Ejemplo que muestra el contenido incluso si se desborda de la caja
hidden Oculto Ejemplo que oculta el contenido que se desborda de los límites de la caja
scroll Barra de desplazamiento Ejemplo que agrega una barra de desplazamiento para poder ver todo el contenido de la caja
auto Automático Ejemplo que agrega una barra de desplazamiento en caso que sea necesario para poder ver todo el contenido de la caja
clip Especifica la región visible del elemento. rect Longitud superior
Longitud derecha
Longitud inferior
Longitud izquierda
Ejemplo de como especificar los bordes de una región visible
auto Automático Ejemplo del uso de la propiedad clip y el valor auto
display Comportamiento del contenedor. inline Se muestra en la misma línea. Ejemplo que muestra como unir dos párrafos en una misma línea
block Se muestra tal cual es. Ejemplo que muestra los elementos en block
list-item Convierte diferentes elementos en Ítems de una lista Ejemplo de una lista formada con los elementos p, span, y div
run-in Palabra insertada
No funciona en IE 5, 6, 7 y 8 - Firefox
inline-block Límite del bloque
Está incompleto para IE 5, 6, 7 y 8 - No funciona en Firefox
table Tabla
No funciona en IE 5, 6, 7 y 8
inline-table Límite de la tabla
No funciona en IE 5, 6, 7 y 8
none No se visualiza Ejemplo que 'no' muestra el contenido de un párrafo
visibility Visibilidad de las cajas. visible Visible Ejemplo de como visualizar un título
hidden Oculto Ejemplo de como ocultar un título
collapse Ocultar una parte
No funciona en IE 5, 6, 7 y 8
Ejemplo de como ocultar una fila de una tabla


<<< Dimensiones en CSS Ubicación en CSS >>>

En la Web