Home de Virtualnauta.com
Se protagonista de la Web

Virtualnauta > Tutorial CSS > Efectos Visuales

CSS

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.

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

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



¿No encuentras lo que buscas?



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

Artículos

Los mejores 10 hostings

Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo...



    Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.

Copyright 2007 - 2011 by Martín Solomiak. Todos los derechos reservados.


webmaster@virtualnauta.com

Mapa del sitio Valid XHTML 1.0 Transitional Valid CSS!