Understandng a propriedade Clip CSS
Por que eu quero entender isso?? Humm ...!!
A maioria dos escritores CSS concordaria que o CSS propriedade Clip é provavelmente uma das propriedades não-utilizados CSS. Era tão verdadeiro para mim também e foi mais feliz para negligenciá-lo, até que comecei a modificar o MooTools DOIS Knob componente Slider (pino) (com indicador de Range) .
Houve uma boa sugestão de um dos utilizadores de componentes para modificar o componente deslizante utilizando imagens recortadas backgroud (contra uma divisão de largura variável) para indicar a gama deslizante. Assim chegou a minha hora de entrar na diversão, mas un fretado (para mim é claro) águas da propriedade Clip CSS.
Bem! quão difícil pode ser? Não muita coisa ... SIM e NÃO. A sintaxe a utilizar a propriedade Clip CSS é muito vertical, mas o significado / usuage é um pouco croocked. Com uma memória como a minha, toda vez que eu sento para retocar a minha Script Slider ... Tenho tokeep referindo-se ao uso desta propriedade CLIP, para me lembrar a lógica que eu criei no meu script .... DAÍ! pensado para pen-lo para baixo, com uma esperança de lembrar que o futuro (e também para o benefício daqueles que parecem boggled pela propriedade Clip CSS)
O que Clipe CSS fazer?
Clipe é parte do módulo de efeitos visuais do CSS 2,1. Simplificando, seu trabalho é colocar uma janela visível em cima de um objeto que está sendo cortada, portanto, recorte de imagens e criação de miniaturas sem ter que criar arquivos adicionais (Já coloquei este recurso para melhorar o uso do componente Slider 
)
Usando a propriedade Clip CSS, você pode criar um recorte usando a forma rect. Como muitas outras propriedades CSS (como margem de preenchimento etc,), utilizando rect requer quatro coordenadas superior, inferior, direita, esquerda (TRBL). A natureza croocked desta propriedade reflete quando você dar uma olhada no clipe como calcula a região de corte, usando essas quatro coordenadas (envia cérebro em um lance por um tempo). Agora, para confundi-lo do fundo começa a partir do topo, eo direito começa a partir da esquerda. . Você vê o que eu disse? .... Por isso este post ...
Esta pequena confusão pode facilmente desaparecer, com esta explicação visual da propriedade CSS Clip / rect como abaixo!!
Clipe Requisitos CSS
A tarefa que temos começado é para cortar a imagem em miniatura a seguir em uma imagem mais quadrada olhando (e também uma imagem de grande-angular)
 |  |
| Thumbnal Original / Imagem | Requisitos Clipe para Sqaure Thumbmail |
Clipe Resultados CSS
