Väljendades IT

Miks ma tahan sellest aru?? ... Humm!!

Enamik CSS kirjanikud nõus, et CSS Clip vara on ilmselt üks kõige un kasutatud CSS omadused. See oli nii õige minu jaoks liiga ja oli väga õnnelik, et unustada seda, kuni ma hakkasin muutmise Mootools KAKS Knob (Pin) Slider Component (koos Range Indicator) .

Oli hea ettepanek ühe komponendi kasutajatel muuta Slider Component kasutades kärbitud backgroud pilte (võrreldes muutuva laiusega Division), mis näitab liugurit vahemikus. Seega tuli minu kord siseneda lõbus, kuid ÜRO prahitud (minu jaoks loomulikult) vetes CSS Clip vara.

Hästi! kui raske see võib olla? Mitte palju üldse ... Jah ja ei. Süntaksit kasutada CSS Clip vara on päris püsti, kuid tähendus / usuage on natuke croocked. Mis mälu nagu minul, everytime ma istun ümber tegema mu Slider Script ... Mul on tokeep viidates tagasi kasutamine käesoleva CLIP vara meelde mina loogikast, et olen loonud oma script .... HENCE! Arvatakse, et pen ta maha, lootuses, et mäletan seda tulevikus (ja ka kasuks, kes tunduvad boggled poolt CSS Clip Property)

Mida CSS Clip teha?

Clip on osa visuaalseid efekte moodul CSS 2,1. Lihtsamalt öeldes, tema töö on panna nähtav akna peal objekt, mis on lõigatud, seega lõikamine pilte ning luua pisipildid, ilma et luua täiendavaid faile (olen juba panna see funktsioon paremini kasutada Slider Component )

Kasutades CSS Clip vara, saate luua lõikamine, kasutades rect kuju. Nagu paljud teised CSS omadused (näiteks margin, padding jms), kasutades rect nõuab 4 koordinaadid Top, Right, All, Vasakul (TRBL). Croocked iseloomu vara kajastatakse siis, kui lähemalt vaadata, kuidas clip arvutab lõikamine piirkonnas, kasutades neid 4 koordinaadid (saadab aju Toss mõnda aega). Nüüd segadusse teid alt alustatakse ülevalt ja õigus algab vasakult. . Sa näed, mida ma ütlesin? .... Seega see post ...

See väike segadus lihtsalt kaob, selle visuaalne selgitus CSS Clip / rect vara alla!!

CSS Clip nõuded

Ülesande oleme hakanud on klipp järgmised Thumbnail pildi ruudukujulisemaks otsin pilti (ja ka lainurk-pilt)

Original Thumbnal / Image	Clip Nõuded sqaure Thumbmail

CSS Clip Results

Vaata Demo | Lae sourcefiles