Propiedades del olvido 2: clip
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.
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 (view source para saber cómo).
Sobre el Autor: Jorge Epuñan
Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.
