Udtrykke det

Hvorfor jeg ønsker at forstå dette?? ... Humm!!

De fleste af CSS forfattere enige om, at CSS Clip ejendom er nok en af ​​de fleste ikke-anvendte CSS egenskaber. Det var så sandt for mig og var mest glad for at forsømme det, indtil jeg begyndte at ændre den Mootools TO Knob (Pin) Slider Komponent (med Range indikator) .

Der var et godt forslag fra en af ​​de komponenter brugere at ændre Slider Component ved hjælp af klippede baggrundsrapporten billeder (mod en variabel bredde division) for at indikere skyderen rækkevidde. Således kom min tid at komme ind i sjov, men FN-chartret (for mig selvfølgelig) farvande CSS Clip ejendom.

Nå! hvor svært det kan være? Ikke meget på alle ... ja og nej. Den syntaks at bruge CSS Clip ejendommen er temmelig oprejst men betydningen / usuage er en smule croocked. Med en hukommelse som mit, jeg hver gang sidder til omarbejde på min Slider Script ... Jeg har tokeep henviser tilbage til brugen af ​​denne CLIP ejendom, for at minde mig selv om den logik, som jeg har skabt i mit script .... DERMED! menes at pen det ned, med et håb om at huske det i fremtiden (og også til gavn for dem, der synes imponeret af CSS Clip Property)

Hvad betyder CSS Clip gøre?

Clip er en del af den visuelle effekter modulet af CSS 2,1. Simply put, dens opgave er at placere et synligt vindue oven på et objekt, der bliver klippet, og derfor klippe billeder og skabe thumbnails uden at skulle oprette flere filer (jeg har allerede sat denne funktion til bedre udnyttelse i Slider Component )

Brug af CSS Clip ejendom, kan du oprette en klipning ved hjælp af rekte form. Ligesom mange andre CSS egenskaber (såsom margin, padding osv.), ved hjælp af rect kræver fire koordinater Top, Højre, Bund, Venstre (TRBL). Den croocked karakteren af ​​denne ejendom afspejler, når du tager et nærmere kig på, hvordan klip beregner klipning regionen ved hjælp af disse fire koordinater (sender hjernen i et kast i et stykke tid). Nu at forvirre dig bunden starter fra toppen, og den højre starter fra venstre. . Du kan se hvad jeg sagde? .... Derfor dette indlæg ...

Dette lidt forvirring kan nemt forsvinde, med denne visuelle forklaring af CSS Klip / rect ejendom som nedenfor!!

CSS Clip Krav

Den opgave, vi er begyndt, er at klippe følgende miniaturebillede til et firkantede se billede (og også en vidvinkel billede)

Original Thumbnal / Billede	Clip Krav til Sqaure Thumbmail

CSS Clip Resultater

Se demo | Hent sourcefiles