Understandng la propriété Clip CSS
Pourquoi dois-je veux comprendre cela?? Humm ...!!
La plupart des écrivains CSS serait d'accord que la propriété CSS clip est probablement l'un de la plupart des propriétés CSS non utilisés. C'était si vrai pour moi aussi et j'ai été très heureux de le négliger, jusqu'à ce que j'ai commencé à modifier le MooTools DEUX composant Slider Bouton (Pin) (avec Range Indicator) .
Il y avait une bonne suggestion de l'un des utilisateurs de composants pour modifier le composant Slider à l'aide d'images taillées backgroud (contre une division de largeur variable) pour indiquer le domaine du slider. Ainsi vint mon temps pour entrer dans le plaisir, mais affrété par l'ONU (pour moi ofcourse) les eaux de la propriété Clip CSS.
Eh bien! comment il peut être difficile? Pas grand-chose du tout ... OUI et NON. La syntaxe à utiliser la propriété Clip CSS est assez verticale, mais la signification / usuage est un peu croocked. Avec une mémoire comme la mienne, chaque fois que je suis assis à retravailler sur mon script curseur ... J'ai tokeep renvoyant à l'usage de cette propriété CLIP, à me rappeler la logique que j'ai créé dans mon script .... DONC! pensé à l'stylo, avec un espoir de se rappeler qu'il l'avenir (et aussi pour le bénéfice de ceux qui semblent boggled par la propriété Clip CSS)
Qu'est-ce que CSS clip faire?
Clip est une partie du module d'effets visuels de CSS 2.1. Autrement dit, son travail consiste à placer une fenêtre visible sur le dessus d'un objet qui est coupé, donc détourage d'images et de création de vignettes sans avoir à créer des fichiers supplémentaires (j'ai déjà mis cette fonction pour une meilleure utilisation dans le composant Slider 
)
Utilisation de la propriété Clip CSS, vous pouvez créer une coupure en utilisant la forme rect. Comme beaucoup d'autres propriétés CSS (comme rembourrage, etc marge,), en utilisant rect nécessite quatre coordonnées Haut, Droite, Bas, Gauche (DEFT). La nature croocked de cette propriété reflète quand vous prenez un peu plus près comment calcule clip de la zone de découpage, l'utilisation de ces quatre coordonnées (envoie des cerveaux en un tirage au sort pendant un certain temps). Maintenant, pour vous confondre le fond commence à partir du haut, et le droit commence à partir de la gauche. . Vous voyez ce que j'ai dit? .... Ainsi ce post ...
Ce peu de confusion peut facilement disparaître, avec cette explication visuelle de la CSS Clip / rect propriété comme ci-dessous!!
Exigences clip CSS
La tâche que nous avons commencé est de couper l'image Vignette suivant dans une image plus carrée à la recherche (et aussi une image grand-angle)
 |  |
| Thumbnal origine / Image | Exigences clip pour Sqaure Thumbmail |
Résultats clip CSS
