Understandng la proprietà Clip CSS
Perché voglio capire questo?? Humm ...!!
La maggior parte degli scrittori CSS sarebbe d'accordo che la proprietà Clip CSS è probabilmente una delle più inutilizzato proprietà CSS. E 'stato così vero anche per me ed è stato più felice di trascurare, fino a quando ho iniziato a modificare il MooTools due pomelli (Pin) Component Slider (con indicatore Range) .
C'era un buon suggerimento da uno degli utenti componente per modificare il componente Slider utilizzando immagini ritagliate da sfondo (contro una divisione larghezza variabile) per indicare l'intervallo cursore. Così è venuto il mio tempo per entrare nel divertimento, ma un-a noleggio (per me ovviamente) le acque della proprietà Clip CSS.
Bene! quanto possa essere difficile? Non più di tanto ... SI e NO. La sintassi per utilizzare la proprietà Clip CSS è abbastanza eretta, ma il significato / usuage è un po 'croocked. Con una memoria come la mia, ogni volta che mi siedo a rielaborare il mio script Slider ... ho tokeep rinviando all'uso di questa proprietà CLIP, per ricordare a me stesso la logica che ho creato nel mio script .... QUINDI! pensato di penna giù, con una speranza per ricordare che il futuro (e anche per il beneficio di coloro che sembrano ho provato con la proprietà Clip CSS)
Cosa fa clip CSS fare?
Clip è parte del modulo di effetti visivi di CSS 2.1. In poche parole, il suo compito è quello di posizionare una finestra visibile sulla parte superiore di un oggetto che viene tagliato, quindi ritaglio immagini e la creazione di miniature senza dover creare ulteriori file (ho già messo questa funzionalità per un migliore utilizzo nel componente Slider 
)
Utilizzando la proprietà Clip CSS, è possibile creare un ritaglio utilizzando la forma rect. Come molte altre proprietà CSS (come margin, padding, ecc), utilizzando rect richiede quattro coordinate Top, Right, Bottom, Left (GUASTO). La natura di questa proprietà croocked riflette quando si dà un'occhiata più da vicino come fermaglio calcola l'area di visualizzazione, utilizzando queste quattro coordinate (manda il cervello in un lancio per un po '). Ora, per confondere il fondo inizia dalla parte superiore, e la destra inizia da sinistra. . Vedete quello che ho detto? .... Quindi questo post ...
Questa confusione poco può facilmente scomparire, con questa spiegazione visiva del Clip / rect proprietà CSS, come qui sotto!!
CSS clip Requisiti
Il compito che abbiamo iniziato è quella di ritagliare l'immagine seguente Miniatura in un immagine più squadrata cercando (e anche un grandangolo immagine)
 |  |
| Thumbnal Original / Image | Requisiti clip per Sqaure Thumbmail |
CSS risultati di clip
