2009 17 februar 2009

Understandng CSS Clip Eiendom

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

De fleste av CSS forfattere vil være enige om at CSS Clip eiendom er trolig en av de un-brukte CSS egenskaper. Det var så sant for meg også, og var mest glad for å overse det, før jeg begynte å endre MooTools TO Knob (Pin) Slider Komponent (med Range Indicator) .

Det var et godt forslag fra en av komponenten brukerne til å endre Slider Component hjelp klippede backgroud bilder (mot en variabel bredde divisjon) for å indikere glideren serien. Dermed kom min tid til å gå inn i moroa, men FN-chartret (for meg selvsagt) farvann av CSS Clip eiendommen.

Vel! hvor vanskelig det kan være? Ikke mye i det hele tatt ... ja og nei. Syntaksen for å bruke CSS Clip eiendommen er ganske oppreist, men meningen / usuage er litt croocked. Med et minne som min, hver gang jeg sitter å omarbeide på min Slider Script ... har jeg tokeep henvise tilbake til bruken av dette klippet eiendom, for å minne meg selv den logikken som jeg har skapt i manuset mitt .... Derfor! tenkte å pennen ned, med et håp om å huske det i fremtiden (og også til fordel for dem som synes boggled av CSS Clip Eiendom)

Hva gjør CSS Clip?

Clip er en del av den visuelle effekter modulen av CSS 2.1. Enkelt sagt, er dens jobb å plassere et synlig vindu på toppen av et objekt som blir klippet, derav klipping bilder og lage miniatyrbilder uten å måtte opprette flere filer (jeg har allerede lagt denne funksjonen til bedre bruk i Slider Component :) )

Bruke CSS Clip eiendommen, kan du opprette en klipping med rect form. Som mange andre CSS-egenskaper (som margin, padding etc), ved hjelp rect krever fire koordinater Topp, Høyre, Bunn, Venstre (FEIL). Den croocked natur denne eiendommen reflekterer når du tar en nærmere titt på hvordan klippet beregner klipping regionen, ved hjelp av disse fire koordinater (sender hjernen til en kaste for en stund). Nå å forvirre deg bunnen starter fra toppen, og retten starter fra venstre. :) . Du ser hva jeg sa? .... Derfor dette innlegget ...

Denne lille forvirring kan lett forsvinne, med denne visuelle forklaring av CSS Clip / rect eiendom som under!!

CSS Clip Krav

Oppgaven vi har begynt å klippe følgende miniatyrbilde til et rettvinklet ser bilde (og også en vidvinkel bilde)

original_image clip_demo
Original Thumbnal / Bilde Clip Krav til sqaure Thumbmail

CSS Clip Resultater

clip_results

Se demo | Last ned sourcefiles


NDK hjem | Uttrykke IT | Uttrykke Palate | Uttrykke Penmenship | Uttrykke Awe | uttrykke meg