CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

En esta entrada hablaré de 5 propiedades para CSS2 muy sencillas de utilizar, y que os sorprenderán de lo útiles que pueden llegar a ser. Estas propiedades son perfectamente compatible con la gran mayoría de los navegadores. Las propiedades que analizaré son clip, min-height, white-space, cursor y display. Allá vamos:

1. CSS Clip

Esta propiedad es como una máscara, que te permitirá recortar un área del elemento. Puedes especificar la posición del elemento a absolute. Después, especifica los valores relativos top, right, bottom, y left del elemento.

Ejemplo de Image Clip

El siguiente ejemplo te muestra como recortar una imagen usando la propiedad clip. Primero, especifica el elemento <div> a position: relative. Después, especifica el elemento <img> a position: absolute y los valores rect que quieras.

.clip {

position: relative;

height: 130px;

width: 200px;

border: solid 1px #ccc;

}

.clip img {

position: absolute;

clip: rect(30px 165px 100px 30px);

}

Cambiar el tamaño y recortar imágenes

En este ejemplo os enseñaré como cambiar el tamaño y recortar imágenes. Cogemos por ejemplo una imagen con formato rectángulo. Si deseamos escalarla al 50% para crear una galería de miniaturas en formato cuadrado, usaremos la propiedad width y height para cambiar el tamaño de las imágenes y recortarlas con la propiedad clip. Después, usaremos la propiedad left para mover 15 píxeles la imagen a la izquierda.

2. Min-height

La propiedad min-height te ayuda a especificar la altura mínima de un elemento, muy útil cuando estás ajustando el tamaño del diseño. He hablado anteriormente de ella para que sea compatible con IE.

.con_minheight {

min-height: 500px;

}

Aunque os he mostrado anteriormente el enlace para que funcione en IE, aquí os muestro el hack:

.con_minheight {

min-height:500px;

height:auto !important;

height:500px;

}

3. White-space

La propiedad white-space nos ayuda a controlar los espacios en los elementos. Por ejemplo, si especificas white-space: nowrap, el texto se ubicará en la línea siguiente.

em {

white-space: nowrap;

}

4. Cursor

Puedes cambiar el tipo de cursor que deseas mostrar. Por ejemplo, cuando un botón esté desactivado, el culsor será cambiado al de defecto para indicar que no es un botón funcional. Así que la propiedad cursor es muy útil para desarrollar aplicaciones web.

cursor: default;

}

.busy {

cursor: wait;

}

.clickable:hover {

cursor: pointer;

}

5. Display inline/block

Con la propiedad display: inline o display: block, podrás alinear 2 bloques de elementos en una sola línea, aunque sean distintos. las etiquetas <h1><div> y <p> son ejemplos de bloques de elementos. Ejemplos de etiquetas en línea son <span>, <em> y <strong>:

.bloque em {

display: block;

}

.inline h3, .inline p {

display: inline;

}