Understandng klip CSS vlastnost
Proč chci to pochopit?? Humm ...!!
Většina spisovatelů CSS by se shodují, že CSS vlastnost Clip je pravděpodobně jedním z nejvíce un-používané vlastnosti CSS. Bylo to tak i můj případ a byl nejvíce šťastný, že zanedbávat to, dokud jsem začal úpravou Mootools TWO Knob (PIN) Slider komponenty (s přecházejícím Indicator) .
Tam byl dobrý návrh od jednoho z dílčích uživatelů upravit pomocí komponenty Slider připnutý zázemí obrázků (proti proměnnou šířku divize), což znamená posuvník rozsah. Tak přišel můj čas vstoupit na zábavu, ale ne-znalce (Samozřejmě pro mě) vody z majetku Galerie CSS.
No! jak těžké to může být? Nic moc ... ano i ne. Syntaxe clip CSS vlastnost je dost vzpřímené, ale význam / usuage je trochu croocked. S pamětí jako já, pokaždé sedím přepracovat na mém Slider Script ... Mám tokeep odkazuje zpět na použití tohoto majetku CLIP, připomněl sám sobě logiku, které jsem vytvořil ve svém skriptu .... Proto! myšlenka pera dolů, s nadějí, jak si pamatovat, že budoucnost (a také ve prospěch těch, kteří se zdají boggled v majetku Galerie CSS)
Co CSS klip dělat?
Klip je součástí vizuálních efektů modulu CSS 2.1. Jednoduše řečeno, jeho úkolem je umístit viditelné okno v horní části objektu, který je připnutý, tedy oříznutí snímků a vytváření náhledů bez nutnosti vytvářet další soubory v již jsem dal tuto funkci k lepšímu využití v komponentě Slider
)
Pomocí vlastnosti Clip CSS, můžete vytvořit výstřižek pomocí tvar rect. Jako mnoho jiných vlastností CSS (jako okraj, zateplení atd.), za použití rect vyžaduje čtyři souřadnice nahoře, vpravo, dole, vlevo (TRBL). Croocked povaha tohoto majetku odpovídá, když se blíže podívat na to, jak klip vypočítává ořezovou oblast, používat tyto čtyři souřadnice (vysílá mozek do hoďte na chvíli). Nyní se zmást dole začíná od horní a pravý začíná zleva.
. Vidíš, co jsem řekl? .... Proto tento příspěvek ...
Tento malý zmatek může snadno zmizet, s tímto vysvětlením vizuální CSS Galerie / rect majetku, který je níže!!
CSS Clip Požadavky
Úkol jsme začali, je klip na následující miniatury do hranatější hledá obrazu (a také širokoúhlý obraz)
| |
| Původní Thumbnal / Image | Clip Požadavky na řadové Thumbmail |
CSS Clip Výsledky
Zobrazit Demo záložky | Stáhnout sourcefiles












































