Understandng klip CSS vlastnosť
Prečo chcem to pochopiť?? Humm ...!!
Väčšina spisovateľov CSS by sa zhodujú, že CSS vlastnosť Clip je pravdepodobne jedným z najviac un-používané vlastnosti CSS. Bolo to tak aj môj prípad a bol najviac šťastný, že zanedbávať to, kým som začal úpravou MooTools TWO Knob (PIN) Slider komponenty (s prechádzajúcom Indicator) .
Tam bol dobrý návrh od jedného z čiastkových užívateľov upraviť pomocou komponenty Slider pripnutý zázemie obrázkov (proti premennú šírku divízie), čo znamená posuvník rozsah. Tak prišiel môj čas vstúpiť na zábavu, ale nie-znalca (Samozrejme pre mňa) vody z majetku Galéria CSS.
No! aké ťažké to môže byť? Nič moc ... áno aj nie. Syntax clip CSS vlastnosť je dosť vzpriamené, ale význam / usuage je trochu croocked. S pamäťou ako ja, zakaždým sedím prepracovať na mojom Slider Script ... Mám tokeep odkazuje späť na použitie tohto majetku CLIP, pripomenul sám sebe logiku, ktoré som vytvoril vo svojom skripte .... Preto! myšlienka pera dole, s nádejou, ako si pamätať, že budúcnosť (a tiež v prospech tých, ktorí sa zdajú boggled v majetku Galéria CSS)
Čo CSS klip robiť?
Klip je súčasťou vizuálnych efektov modulu CSS 2.1. Jednoducho povedané, jeho úlohou je umiestniť viditeľné okno v hornej časti objektu, ktorý je pripnutý, teda orezanie snímok a vytváranie náhľadov bez nutnosti vytvárať ďalšie súbory v už som dal túto funkciu k lepšiemu využitiu v komponente Slider 
)
Pomocou vlastnosti Clip CSS, môžete vytvoriť výstrižok pomocou tvar rect. Ako mnoho iných vlastností CSS (ako okraj, zateplenie atď), za použitia rect vyžaduje štyri súradnice hore, vpravo, dole, vľavo (TRBL). Croocked povaha tohto majetku zodpovedá, keď sa bližšie pozrieť na to, ako klip vypočítava orezovú oblasť, používať tieto štyri súradnice (vysiela mozog do hoďte na chvíľu). Teraz sa zmiasť dole začína od hornej a pravý začína zľava. . Vidíš, čo som povedal? .... Preto tento príspevok ...
Tento malý zmätok môže ľahko zmiznúť, s týmto vysvetlením vizuálne CSS Galéria / rect majetku, ktorý je nižšie!!
CSS Clip Požiadavky
Úloha sme začali, je klip na nasledujúce miniatúry do hranatejšie hľadá obrazu (a tiež širokouhlý obraz)
 |  |
| Pôvodný Thumbnal / Image | Clip Požiadavky na radové Thumbmail |
CSS Clip Výsledky
Zobraziť Demo záložky | Stiahnuť sourcefiles
