Propiedades del olvido 2: clip

6/jul/2007 9

La propiedad clip determina el área de un elemento. Tal cual, con esta propiedad muy poco utilizada puedes cortar, por ejemplo, una imagen que sea mayor que su contenedor sin tener que recurrir a cambiar su width o height (deformarla) o abrir tu editor gráfico favorito y aplicar el corte a mano. Si prefieren, pueden imaginarla como una máscara, con la que puedes determinar los límites y cubrir sólo lo que quieres que se vea a través de pixeles.

Modo de uso de la propiedad clip

Uso: rect(top right bottom left);

No funciona precisamente como margin y padding, creo que por eso se complica su uso. En la siguiente imagen, una demostración gráfica de cómo se utiliza sus parámetros de posicionamiento.

Puedes ocuparla para, por ejemplo, crear una galería de imágenes donde utilizas la misma imagen grande, pero cortada en un espacio determinado (como un thumbnail). Así, no necesitas cargar 2 imagenes: una imagen principal y otra reducida.

Ver ejemplo aplicado

Comentarios

  1. CSSLab Admin [#]

    Antes de que se lo pregunten… si, si funciona en IE6 😀

  2. Rauto [#]

    No hice la prueba, pero que pasa con el espacio a su alrededor?
    Se puede rodear de texto o a pesar de mostrar solo una parte de la imagen sigue usando el espacio de su tamaño normal?

  3. Buzu [#]

    muy bueno, y si aplicáramos javascript para mover la imagen dinamicamente, se movería también el clip?

    nunca lo eh probado.. a pesar de que ya savia de la existencia de la propiedad clip.

  4. CSSLab Admin [#]

    Rauto: como clip necesita de un posicionamiento absoluto, no podras rodearlo con txt como cuando usabas float, por ejemplo. hice la prueba y el txt pasa debajo de la imagen. Buzu: el clip se va junto con la imagen, ya q esta posicionada sobre ella (o dentro, como prefieras).
    Salu2.

  5. Buzu [#]

    malas noticias…. pero igual siempre se puede usar la image como bg y mover ese bg, asi se logra el efecto…

  6. CSSLab Admin [#]

    Asi es, recuerda q puedes tb posicionarlo con top, left, right, bottom (aprovechando el absolute).

  7. fearlex [#]

    Pues te comento que me ha servido de mucho esta explicaxión, sobre todo lo que tratar el bottom y el right que es distinto a como se comportan las demas propiedas, como margin, padding, etc.

    Muy bueno.

  8. Arcadio [#]

    Interesante la verdad no conocia con exactitud que hacia clip en css…

  9. walvaRo [#]

    Esto, la verdad es que no es muy práctico que digamos para crear galerías de imagenes…

    1º-Por que no tienes demasiado control sobre lo que quieres enseñar de la imagen ni donde.

    2º-Por que la imagen se carga entera aunque tu solo hayas dejado que se vea un trozo pequeño de la misma…
    Imaginad una página con 20 imagenes, todas de 800×600 y recortadas con el metodo “clip”…

    Sinceramente es un buen metodo para determinadas cosas, pero nada mas…

    Saludos!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab