2009 Február 17, 2009

A CSS Understandng Clip Property

Miért akarom érteni ezt?? Humm ...!!

A legtöbb CSS írók egyetértenek abban, hogy a CSS Clip tulajdonság talán az egyik legtöbbet használt un CSS tulajdonságok. Ez annyira igaz, nekem is volt a legboldogabb, hogy elhanyagolja azt, amíg elkezdtem módosításával MooTools két gomb (Pin) Csúszik Component (a tartomány indikátor) .

Volt egy jó javaslat az egyik komponens felhasználóknak, hogy módosítsák a csúszka komponens segítségével kivágott képek hátteréül (szemben egy változó szélességű Division), hogy jelezze a csúszkát tartományban. Így eljött az időm, hogy belépjen a móka, de az ENSZ-Chartered (számomra persze), víz a CSS Clip ingatlan.

Nos! milyen nehéz lehet? Nem sok minden ... Igen és nem. A szintaxis a CSS Clip ingatlan szép, de egyenesen a szó / usuage egy kicsit croocked. A memória, mint az enyém, mindig, ülök átdolgozni én Slider Script ... Van tokeep hivatkozva vissza használják ezt a CLIP tulajdonság, hogy emlékeztessem magam a logikát, hogy én hoztam létre az én script .... Ezért! gondolják, hogy tolltartó le, azzal a reménnyel, hogy emlékezzen, hogy a jövő (és számára is, akik úgy tűnik, visszarettent a CSS Clip Property)

Mit jelent a CSS Clip csinálni?

Clip része a vizuális effektek modulja CSS 2.1. Egyszerűen fogalmazva, a feladata, hogy tegyen egy ablak tetején látható egy tárgy, amelynek a nyírni, így nyírás képek és bélyegképek létrehozása anélkül, hogy további fájlokat (már be ezt a funkciót, hogy jobban használják a csúszka komponens :) )

A Clip CSS tulajdonságot, akkor létrehozhat egy clipping segítségével rect alakja. Mint sok más CSS tulajdonságok (mint margin, padding, stb), a len szükséges koordinátákat 4 Top, Right, Bottom, Left (TRBL). A croocked természetét tükrözi ezt a tulajdonságot, ha közelebbről szemügyre, hogyan számítja ki a klip vágási régió segítségével a négy koordináta (az agy küld egy lök egy ideig). Most, hogy megzavarja azt az alsó felülről indul, és a jobb kezdődik balra. :) . Látod, mit mondtam? .... Ezért ezt a hozzászólást ...

Ez a kis zűrzavar könnyen eltűnik, ezzel a vizuális magyarázat CSS Clip / rect ingatlan alatt!!

CSS Clip követelmények

A feladat kezdtük, hogy a következő klip Thumbnail image egy szögletesebb látszó képet (és egy nagylátószögű kép)

original_image clip_demo
Eredeti Thumbnal / kép Clip követelmények Sqaure Thumbmail

CSS Clip Eredmények

clip_results

Demo megtekintése | Letöltés sourcefiles


NDK home | Kifejezése IT | kifejezése szájpadlás | kifejezése Penmenship | kifejezése Awe | kifejezése Myself