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.

Select Code
.clip {

position: relative;

height: 130px;

width: 200px;

border: solid 1px #ccc;

}


Select Code
.clip img {

position: absolute;

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

}


Ver demostración

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.

Select Code
.con_minheight {

min-height: 500px;

}


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

Select Code
.con_minheight {

min-height:500px;

height:auto !important;

height:500px;

}

Ver demostración

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.

Select Code
em {

white-space: nowrap;

}

Ver demostración

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.

Select Code
cursor: default;

}

.busy {

cursor: wait;

}

.clickable:hover {

cursor: pointer;

}

Ver demostración

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>:

Select Code
.bloque em {

display: block;

}

.inline h3, .inline p {

display: inline;

}

Ver demostración

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!