Expresando TI

¿Por qué quiero entender esto?? Humm ...!!

La mayoría de los escritores CSS de acuerdo en que la propiedad CSS clip es probablemente uno de la mayoría de los productos no utilizados de las propiedades CSS. Era tan real para mí también, y era el más feliz de olvidar, hasta que empecé a modificar el MooTools DOS Perilla (Pin) de componente Slider (con indicador de la gama) .

Hubo una buena sugerencia de uno de los usuarios de los componentes para modificar el componente Slider utilizando imágenes recortadas backgroud (contra una división de ancho variable) para indicar el rango deslizador. Así llegó el tiempo para entrar en la diversión, pero inexplorado de (para mi por supuesto) a las aguas de la propiedad Clip CSS.

Bueno! lo difícil que puede ser? No mucho ... SI y NO. La sintaxis para usar la propiedad CSS clip es bastante vertical, pero el significado / usuage es un poco croocked. Con una memoria como la mía, cada vez que me siento a trabajar en el guión de mi deslizante ... tengo tokeep refiriéndose al uso de esta propiedad CLIP, para recordarme a mí mismo la lógica que he creado en mi guión .... POR LO TANTO! cree que la pluma hacia abajo, con la esperanza de recordar que el futuro (y también para el beneficio de aquellos que parecen aturdida por la propiedad CSS clip)

¿Qué Clip CSS hacer?

Clip es parte del módulo de efectos visuales de CSS 2.1. En pocas palabras, su trabajo consiste en colocar una ventana visible en la parte superior de un objeto que está siendo cortado, por lo tanto, recortar imágenes y crear miniaturas sin tener que crear archivos adicionales (ya he puesto esta función para un mejor aprovechamiento en el componente Slider )

Uso de la propiedad Clip de CSS, puede crear un recorte con la forma rect. Al igual que muchas otras propiedades CSS (como el relleno, etc margen), utilizando rect requiere cuatro coordenadas Superior, Inferior Derecha, Izquierda (FALLO). La naturaleza croocked de esta propiedad refleja el momento en que eche un vistazo más de cerca cómo se calcula clip de la región de recorte, el uso de estos cuatro coordenadas (envía el cerebro en un sorteo por un tiempo). Ahora, para confundir a la parte inferior se inicia desde la parte superior, y el derecho se inicia desde la izquierda. . ¿Ves lo que te dije? .... Por lo tanto este post ...

Este poco de confusión pueden desaparecer fácilmente, con esta explicación visual de la CSS Clip / rect propiedad como de abajo!!

CSS Requisitos Clip

La tarea que hemos comenzado es para recortar la imagen en miniatura siguiente en una imagen más cuadrada buscando (y también una imagen de gran angular)

Thumbnal original / imagen	Requisitos para el clip Sqaure Thumbmail

CSS Resultados Clip

Ver demo | Descargar SourceFiles