Understandng a propiedade Clip CSS
Por que quero entender iso? Humm ...!
A maioría dos escritores CSS acordo que o CSS propiedade Clip é probablemente unha das propiedades non utilizados CSS. Era tan certo para min tamén e foi máis feliz para negligencia-lo, ata que empecei a modificar o MooTools DOUS Knob compoñente Slider (Pino) (con indicador de Range) .
Houbo unha boa suxestión dun dos usuarios de compoñentes para modificar o compoñente deslizante usando imaxes recortadas backgroud (contra unha división de ancho variable) para indicar a variedade deslizante. Así chegou a miña hora de entrar na diversión, pero un fretado (para min é claro) augas da propiedade Clip CSS.
Ben! quão difícil pode ser? Non moita cousa ... si e non. A sintaxe a empregar a propiedade Clip CSS é moi vertical, pero o significado / usuage é un pouco croocked. Cunha memoria como a miña, cada vez que eu sento para retocar a miña Script Slider ... Teño tokeep referíndose ao uso desta propiedade CLIP, para me lembrar a lóxica que eu creei no meu guión .... De aí! pensado para pen-lo para abaixo, cunha esperanza de lembrar que o futuro (e tamén para o beneficio dos que parecen boggled pola propiedade Clip CSS)
O que Clip CSS facer?
Clip é parte do módulo de efectos visuais do CSS 2,1. Simplificando, o seu traballo é poñer unha fiestra visible enriba dun obxecto que se está cortada, polo tanto, recorte de imaxes e creación de miniaturas sen ter que crear arquivos adicionais (Xa coloquei este recurso para mellorar o uso do compoñente Slider
)
Empregando a propiedade Clip CSS, pode crear un recorte usando a forma rect. Como moitas outras propiedades CSS (como marxe de recheo, etc,), utilizando rect require catro coordenadas superior, inferior, dereita, esquerda (TRBL). A natureza croocked desta propiedade reflicte cando un ollo no clip como calcula a rexión de corte, utilizando esas catro coordenadas (envía cerebro nun lance por un tempo). Agora, para confundir-lo do fondo comeza dende o principio, eo dereito comeza a partir da esquerda.
. Vostede ve o que eu dixen? .... Por iso este post ...
Esta pequena confusión pode facilmente desaparecer, con esta explicación visual da propiedade CSS Clip / rect como a continuación!
Clip Requisitos CSS
A tarefa que temos comezado é para cortar a imaxe en miniatura a seguir unha imaxe máis cadrada mirando (e tamén unha imaxe de gran-angular)
| |
| Thumbnal Orixinal / Imaxe | Requisitos clip para Sqaure Thumbmail |
Clip Resultados CSS












































