2009 17 februarie 2009

Understandng proprietate Clip CSS

De ce nu vreau să înţeleagă acest lucru??? Humm ...!!

Cele mai multe dintre scriitori CSS ar fi de acord că proprietatea CSS clipului este, probabil, unul dintre cele mai ne-utilizate proprietăţi CSS. A fost atât de adevărat pentru mine şi a fost cel mai fericit să-l neglijeze, până când am început modificarea mootools DOUA butonul (PIN) Componenta Slider (cu indicator de Range) .

Nu a fost o sugestie buna de la unul din utilizatorii de componente de a modifica componenta Slider folosind imagini tăiate o cercetare (faţă de o divizie de lăţime variabilă) pentru a indica gama slider. Astfel, a venit timpul meu pentru a intra distracţie, dar ne-Chartered (pentru mine, desigur), apele de proprietate Clip CSS.

Ei bine! cât de greu poate fi? Nu de mult la toate ... da şi nu. Sintaxa de a folosi proprietatea CSS clipului este destul de drept, dar sensul / usuage este un pic croocked. Cu o memorie ca a mea, de fiecare data cand stau de a prelucra pe Script Slider mea ... am tokeep de trimitere înapoi la utilizarea de această proprietate CLIP, pentru a reaminti mă logica pe care am creat în script-ul meu .... Prin urmare! gândit să-l stilou, cu o speranţă să-şi amintească că în viitor (şi, de asemenea, pentru beneficiul celor care par boggled de proprietate clipului CSS)

Ce face clipului CSS face?

Clipul este parte din modulul de efecte vizuale de CSS 2.1. Pur şi simplu pune, treaba lui este de a plasa o fereastră vizibil pe partea de sus a unui obiect care se tunde, tăiere, prin urmare, crearea de imagini şi miniaturi fără a crea fişiere suplimentare (am pus deja această funcţie pentru o mai bună utilizare în componenta Slider :) )

Utilizarea proprietăţii clipului CSS, se poate crea o decupare folosind forma de rect. Ca multe alte proprietăţi CSS (cum ar fi marja, etc padding), folosind rect nevoie de patru coordonate Sus, dreapta, jos, stânga (TRBL). Natura croocked a reflecta această proprietate, atunci când ia o privire mai atentă la modul în care calculează un clip regiunea de tăiere, utilizarea acestor patru coordonate (creierul trimite într-o aruncare pentru un timp). Acum, pentru a vă confunda partea de jos porneşte de la partea de sus, şi începe de la dreapta la stânga. :) . Puteţi vedea ce am spus? .... Prin urmare, acest post ...

Aceasta confuzie mica poate dispărea cu uşurinţă, cu această explicaţie vizuală a CSS Clip / rect proprietate de mai jos!!

CSS Clip Cerinţe

Sarcina am început este de a decupa imaginea în miniatură urmator intr-o imagine ovala caută (şi, de asemenea, o imagine cu unghi larg)

original_image clip_demo
Thumbnal original / imagine Cerinţe Clip pentru Sqaure Thumbmail

CSS Clip Rezultate

clip_results

Vezi Demo | Descarca fişierelor sursă


NDK acasă | Exprimarea IT | Gust Exprimarea | Penmenship Exprimarea | Awe Exprimarea | a mă exprima