Pagpapahayag ng IT

Bakit ko nais upang maunawaan ito?? ... Humm!!!!

Karamihan ng mga CSS manunulat ay sumang-ayon na ari-arian CSS Clip ay marahil isa sa pinaka un-ginamit na mga katangian ng CSS. Ito ay totoo para sa akin masyadong at ay pinaka-masaya sa kapabayaan ito, hanggang sa sinimulan ko ang pagbabago Knob MOOTOOLS DALAWANG (Pin) Slider Component (sa Saklaw tagapagpahiwatig) .

Nagkaroon ng isang magandang mungkahi mula sa isa ng mga bahagi ng mga gumagamit upang baguhin ang Slider ng Component na gamit ang clip mga backgroud imahe (laban sa isang variable na lapad ng division) upang ipahiwatig ang hanay ng slider. Kaya dumating ang aking oras upang ipasok ang saya ngunit un-chartered (para sa akin ofcourse) tubig ng ari-arian ng CSS Clip.

Na rin! kung paano mahirap ito? Hindi magkano sa lahat ... OO at HINDI. Ang syntax na gamitin ang CSS Clip ari-arian ay medyo tuwid ngunit ang kahulugan / usuage na bit ng isang croocked. Sa isang memory tulad ng minahan, everytime umupo ako sa rework sa aking Slider ng Script ... Mayroon akong tokeep nagre-refer na bumalik sa paggamit ng ari-arian clip na ito, upang ipaalala sa aking sarili ang lohika na aking nilikha sa aking script .... Kaya! naisip na panulat ito pababa, na may pag-asa tandaan ito sa hinaharap (at din para sa pakinabang ng mga na tila boggled ng CSS Clip Property)

Ano ang CSS Clip gawin?

Clip ay bahagi ng visual na mga epekto ng module ng CSS 2.1. Maglagay lamang, ang trabaho nito ay upang maglagay ng isang window na makikita sa tuktok ng isang bagay na clip, kaya mabilis sa paggalaw ng mga larawan at paglikha ng mga thumbnail nang hindi upang lumikha ng karagdagang mga file (na ako ilagay ang tampok na ito upang mas mahusay na paggamit sa Component Slider )

Paggamit ng CSS Clip ari-arian, maaari kang lumikha ng isang clipping gamit ang rect hugis. Tulad ng maraming iba pang mga Katangian ng CSS (tulad ng margin, padding etc), gamit rect nangangailangan ng apat na coordinate Top, Kanan, Ibaba, Kaliwa (TRBL). Ang croocked likas na katangian ng ari-arian na ito ay sumasalamin kapag magdadala sa iyo ng isang mas malapit tingnan kung paano clip kinakalkula ang clipping rehiyon, gamit ang mga apat na coordinate (nagpapadala ng utak ng isang siklutin para sa isang habang). Ngayon upang makalito mong ibaba ang pagsisimula mula sa tuktok, at ang karapatan ay nagsisimula mula sa kaliwa. . Makikita mo kung ano ang i sinabi? .... Samakatuwid ang post na ito ...

Ang maliit na pagkalito na ito ay maaaring madaling mawala, na may ang visual paliwanag na ito ng sa CSS Clip / rect ari-arian bilang sa ibaba!!!!

CSS Clip Pangangailangan

Ang gawain na Sinimulan na namin ay sa clip ang mga sumusunod na imahe ng Thumbnail sa isang imahe squarer na naghahanap (at din ng isang malawak na-anggulo imahe)

Orihinal na Thumbnal / Imahe	Pangangailangan ng clip para sa Sqaure Thumbmail

CSS Clip Resulta

Tingnan ang Demo | Download sourcefiles