Te drukken

Waarom wil ik dit begrijpen??? Humm ...!!

De meeste van CSS schrijvers zijn het erover eens dat CSS Clip eigendom is waarschijnlijk een van de meest niet-gebruikte CSS-eigenschappen. Het was zo waar ook voor mij en was het meest blij om het te negeren, totdat ik begonnen met het wijzigen van de MooTools TWEE knop (pen) Slider Component (met Range Indicator) .

Er was een goede suggestie van een van de component gebruikers om de component Slider met geschoren backgroud beelden (tegen een variabele breedte divisie) naar de slider range aangeven te wijzigen. Zo kwam mijn tijd aan de pret, maar niet-registeraccountant (voor mij natuurlijk) water van de CSS Clip eigendom in te voeren.

Nou! hoe moeilijk het kan zijn? Niet veel op alle ... JA en NEE. De syntax van de CSS Clip eigendom te gebruiken is vrij rechtop maar de betekenis / usuage is een beetje croocked. Met een geheugen als de mijne, iedere keer zit ik bewerken om mijn Slider Script ... Ik heb tokeep verwijzen naar het gebruik van deze CLIP eigendom, herinner ik mezelf eraan de logica die ik heb gemaakt in mijn script .... DUS! dacht pen neer, met een hoop om te onthouden dat de toekomst (en ook ten behoeve van degenen die lijken boggled door de CSS Clip Eigendom)

Wat doet CSS Clip doen?

Clip is een onderdeel van de visuele effecten module van CSS 2.1. Simpel gezegd, de taak om een ​​zichtbaar venster boven op een object dat wordt geknipt, dus het knippen van foto's en het maken van miniaturen, zonder dat u extra bestanden (ik heb deze functie al beter benut in de component Slider maken )

Met behulp van de CSS Clip woning, kunt u een knipsel met behulp van de rect vorm. Net als veel andere CSS-eigenschappen (zoals marge, padding, enz.), met behulp van rect zijn vier coördinaten Boven, Rechts, Onder, Links (TRBL). De croocked aard van deze woning aan wanneer je een kijkje op hoe clip berekent de clipping regio, met behulp van deze vier coördinaten (stuurt hersenen in een worp voor een tijdje). Nu te verwarren je de onderkant begint vanaf de top, en de rechter gaat uit van de links. . Zie je wat ik zei? .... Vandaar dat dit bericht ...

Deze kleine verwarring kan gemakkelijk, verdwijnen met deze visuele uitleg van de CSS Clip / eigenschap rect, zoals hieronder!!

CSS Clip Eisen

De taak die we zijn begonnen is aan de volgende Thumbnail image clip in een rechthoek is op zoek afbeelding (en ook een groothoek afbeelding)

Originele Thumbnal / Image	Clip Eisen aan Sqaure Thumbmail

CSS Clip resultaten

Bekijk de demo | Download bronbestanden