CSS
Básico
CSS HomeCSS Introducción
CSS Sintaxis
CSS Su uso
CSS Fondo
CSS Texto
CSS Fuente
CSS Bordes
CSS Contorno
CSS Margen
CSS Padding
CSS Lista
CSS Tablas
Avanzado
CSS DimensionesCSS Efectos Visuales
CSS Ubicación
CSS Contenido/Numerac.
CSS Pseudo Class
CSS Pseudo Element
CSS Tipos de Medios
Ejemplos y Examen
CSS EjemplosCSS Examen
Guías de referencia
CSS Guía de ReferenciaCSS Colores
CSS Código de Colores
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.
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>
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)
img {
position:absolute;
clip:rect (0px 50px 100px 0px)
}
<img border="0" src="foto3.jpg" width="100px" height="150px">
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.
p{
display:inline
}
<p>En este ejemplo</p>
<p>la propiedad display une dos párrafos en una misma línea.</p>
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.
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>
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 |  |
| 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 |
|
| 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, 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 | |
||
| visibility | Visibilidad de las cajas. | visible | Visible | |
| hidden | Oculto | |
||
| collapse | Ocultar una parte No funciona en IE 5, 6, 7 y 8 |
|
¿No encuentras lo que buscas?
<<< Dimensiones en CSS Ubicación en CSS >>>
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.
Mapa del sitio
