Vyjadrenie IT

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

Tento príspevok by mohol byť dobrým príkladom pre výraz "Výučba babička sať vajcia" ... Pretože to je len základný CSS Stuff. Ale pre tých, ako nedbajúca ja, môže to byť šťastie v nešťastí. Vždy som si myslel (som mohol stratiť svoju prácu, že to hovorím), to bolo len možné, aby niektoré časti HTML obsah stránky statické (v zmysle, jeho pozícia zostáva IS na okno Scroll), s použitím niektoré chytré scenáre, robiť všetky tie vedecké Výpočty nájsť dynamické pozície, chytať Window.scroll udalostí a nastavení časových limitov atď

Nikdy by si myslel, že tak jednoduché, ako to .... Tu v CSS / HTML nižšie, mám štyri statické bloky, jeden pripevnený ku každej extrimities na stránke hore, vpravo, dolu a zľava ... netreba hovoriť ... môžete si vybrať jednu alebo viac, ak je potrebné byť ...

CSS
Statické {display: block; z-index: 10, farba: # FFFFFF; overflow-x: hidden; overflow-y: hidden; pozície: ixed;
}
Č obsah {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; pozadia: # 33CC66, šírka: 100%, výška: 55px;}

# Wrap-l {top: 80px; pozadia: # FF9966, výška: 300px; šírka: 150px; border: 2px solid # e6e6e6;}

# Wrap-b {dole: 0px; pozadia: # 3333CC, šírka: 100%, výška: 55px;}

# Wrap-r {top: 80px; pozadia: # 6666FF, výška: 300px; šírka: 140px; border: 2px solid # e6e6e6, vpravo: 0;}

HTML
<div id="contents"> Vy hlavný obsah stránok </ div>
<div id="wrap-b" class="static">
Statický obsah na stránke dole
</ Div>
<div id="wrap-t" class="static">
Statický obsah na stránky Na začiatok
</ Div>

<div id="wrap-l" class="static">
Statický obsah na stránke vľavo
</ Div>
<div id="wrap-r" class="static">
Statický obsah na stránke vpravo
</ Div>

Prezrite si wroking vzorku tu

Keď som čítal tento článok na A List Apart " Faux absolútnu umiestnenie
Eric Sol ", som nič iné než dojem. Tiež som bol v depresii majorly, pretože, úprimne som si hovoril, prečo nemôžem prísť s niečím, pretože to báječné.

Zvyčajne, keď sme sa vytvoriť rozvrhnutie CSS, používame "Position" alebo "pláva", alebo veľmi zlú kombináciu oboch. Eric Sol a jeho tím definovať vedľa dokonalé technike nového typu techniky rozvrhnutie CSS, ktoré boli pokrstil ako "Faux absolútnej polohy" po faux stĺpca techniku, ktorá simuluje prítomnosť stĺpca.

Viete, že problém nás všetkých CSS vývojári sa rozpadajúcich rozloženie (The neočakávané zmeny obsahu, ktoré spôsobujú celé stĺpce, ktoré so zábalom, kedy používame plávajúcich rozloženie) ... No! Zdá sa, že história!!
Toto usporiadanie technika je ešte veľmi mladý, a musí sa vyhodiť do koša všetky tie guru CSS tam, než sa stane nie písaný štandard. Som rád, že ju použiť NOW! ... A som už v polovici svojej konverzii skôr problematické / plávajúce un-nutne rozvrhnutie do dispozície FAP už ... a som rád, "sme sa už používajú Faux absolútnej polohy tohto blogu aj" ... GO vyskúšať, TERAZ!

Kudos Eric Sk!