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

a position: relative. Después, especifica el elemento 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

y

son ejemplos de bloques de elementos. Ejemplos de etiquetas en línea son , y :

.bloque em {

display: block;

}

.inline h3, .inline p {

display: inline;

}

Acerca del autor

Pedro CM Pedro CM

Pedro Corchero Murga es el creador de este blog, un blogger al que le encanta el marketing, el diseño y la programación web. Saber más sobre él. Seguir en Twitter o Facebook. Contactar.

Te recomiendo esto:

  • Muy utiles estos tips de Css . gracias saludos desde mexico

  • Gildo

    Muy interesante y muy bien explicado.
    Gracias.
    Saludos

  • José GDF

    Me resulta especialmente útil ahora mismo la primera, CSS clip. Resulta que tengo una imagen nueva para la cabecera del blog, y es más grande que el espacio que le tengo reservado. Espacio que he ajustado a base de widht y height, y colocado en su sitio mediante valores de position y de margin… En definitiva, que no sé ya ni lo que he hecho. En teoría, con esa propiedad lo arreglo todo en una sola linea. Luego hago back-up de lo que tengo y lo intentaré a ver si me sale.

    La propiedad display me ha quedado un poco más clara ahora. El resto… Ya irán surgiendo cosas y seguramente necesitaré, o no, algunas de ellas.

    Saludos.

  • Muy interesantes estas útiles y sencillas propiedades, es bueno que se den a conocer ya que mas de alguna vez estas nos facilitaran o ahorraran algunas lineas de código.

  • José, para cambiar el tamaño y hacer coincidir la imagen en el header es más sencillo utilizar photoshop a unA aplicación online parecida…ImageResizer, cualquiera que te deje tu imagen el tamaño que deseas. Después renombras esa nueva cabecera al nombre que tiene la antigua y la sobreescribes via FTP.

    Por supuesto el tu post genial Pedro, sobre todo para alguien que como yo esté en pañales en CSS (aprendiendo rápido eso si 🙂 )

  • Jaime Padilla

    muy corto de ejemplos explicativos… una pena