Archivo de la categoría: Css

Diseño web con CSS.

09.02.10
por

Contenido autoajustable – Css

Muchas veces queremos que un div se adapte a la cantidad de contenido que tenemos que mostrar. La solución para eso está en la propiedad overflow.

Veamos un ejemplo sin la propiedad overflow con altura de 20px:

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Ahora veamos un ejemplo con la propiedad overflow aplicada:

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Para lograr esto aplicamos height:auto; overflow:hidden; en el div que posee el contenido.
Como verán, el div se reajusta al contenido – a diferencia del primer caso -.
06.30.09
por

Css algunas propiedades destacables.

Transparencia:  «Opacity:valor«. Sirve para dar transparencia a un objeto (valores= 0 a 1).

En internet explorer filter:alpha(opacity=valor) – Valores entre 0 y 100-.

ejemplo opacity 0.6, alpha: 60 (para iexplorer) – Cristina a cara lavada jaja -:

Float: Debe tener un ancho y largo determinado, de lo contrario no funcionará como un elemento flotante.
left: se alínea a la izquierda. Right: a la derecha. Ejemplo:

Izquierda left
Derecha Right

Clip: Sirve para recortar una imagen. clip:rect(‘top’, ‘right’, ‘bottom’, ‘left’) – los valores se toman en sentido horario: arriba, derecha, abajo y derecha en valores de pixel clip:rect(2px , 100px , 100px ,0px))

Uno de los usos que se le puede dar es obtener imágenes específicas generadas en un archivo.  ejemplo: http://www.google.com.ar/images/nav_logo4.png. Esta imagen contiene las imágenes que se van a utilizar en dicha página, ahorrando el peso de generar cada una de manera individual. Las obtienen con la propiedad clip. hay que asignar al elemento propiedades display:block; y position:absolute;

Border: Bordes, se puede asignar border:1px (grosor) solid (tipo) #ffffff (color);

Valores de border:  solid: sólido, dashed: guiones, double: doble, ridge:con relieve.
ejemplo:
solid:

Solid
dashed
double

Padding-posición(left,right,top y bottom): Sirve para marcar un márgen de distancia entre los elementos que se encuentran dentro del div y el borde de la caja. ejemplo (que contiene padding-top:10px; y padding-left:10px; border:1px dashed #000000):

Contenid