Väljendades IT

Miks ma tahan sellest aru?? ... Humm!!

Enamik CSS kirjanikud nõus, et CSS Clip vara on ilmselt üks kõige un kasutatud CSS omadused. See oli nii õige minu jaoks liiga ja oli väga õnnelik, et unustada seda, kuni ma hakkasin muutmise Mootools KAKS Knob (Pin) Slider Component (koos Range Indicator) .

Oli hea ettepanek ühe komponendi kasutajatel muuta Slider Component kasutades kärbitud backgroud pilte (võrreldes muutuva laiusega Division), mis näitab liugurit vahemikus. Seega tuli minu kord siseneda lõbus, kuid ÜRO prahitud (minu jaoks loomulikult) vetes CSS Clip vara.

Hästi! kui raske see võib olla? Mitte palju üldse ... Jah ja ei. Süntaksit kasutada CSS Clip vara on päris püsti, kuid tähendus / usuage on natuke croocked. Mis mälu nagu minul, everytime ma istun ümber tegema mu Slider Script ... Mul on tokeep viidates tagasi kasutamine käesoleva CLIP vara meelde mina loogikast, et olen loonud oma script .... HENCE! Arvatakse, et pen ta maha, lootuses, et mäletan seda tulevikus (ja ka kasuks, kes tunduvad boggled poolt CSS Clip Property)

Mida CSS Clip teha?

Clip on osa visuaalseid efekte moodul CSS 2,1. Lihtsamalt öeldes, tema töö on panna nähtav akna peal objekt, mis on lõigatud, seega lõikamine pilte ning luua pisipildid, ilma et luua täiendavaid faile (olen juba panna see funktsioon paremini kasutada Slider Component )

Kasutades CSS Clip vara, saate luua lõikamine, kasutades rect kuju. Nagu paljud teised CSS omadused (näiteks margin, padding jms), kasutades rect nõuab 4 koordinaadid Top, Right, All, Vasakul (TRBL). Croocked iseloomu vara kajastatakse siis, kui lähemalt vaadata, kuidas clip arvutab lõikamine piirkonnas, kasutades neid 4 koordinaadid (saadab aju Toss mõnda aega). Nüüd segadusse teid alt alustatakse ülevalt ja õigus algab vasakult. . Sa näed, mida ma ütlesin? .... Seega see post ...

See väike segadus lihtsalt kaob, selle visuaalne selgitus CSS Clip / rect vara alla!!

CSS Clip nõuded

Ülesande oleme hakanud on klipp järgmised Thumbnail pildi ruudukujulisemaks otsin pilti (ja ka lainurk-pilt)

Original Thumbnal / Image	Clip Nõuded sqaure Thumbmail

CSS Clip Results

Vaata Demo | Lae sourcefiles

See postitus võiks olla hea eeskuju fraasi "Teaching vanaema imeda munad" ... Sest see on lihtsalt BASIC CSS Stuff. Aga neile, nagu hajameelne mind, see võib olla õnn. Olen alati arvanud (I võib kaotada oma tööd ütlen seda), siis oli võimalik ainult hoida mingi osa HTML-lehekülje sisu staatiline (tähendus, tema positsioon jääb AS on Window Leidke), kasutades mõned smart scripts, tehes kõigi nende teadusliku arvutused leida dünaamiline positsioon, püünisjahi Window.scroll sündmuste ja milles ajalõppe jne

Kunagi arvasin, et see oleks nii lihtne see .... Siin CSS / HTML alla, mul on 4 staatiline plokki, 1 kinnitatud iga extrimities äärde, TOP, paremal ja all ja vasakule ... muidugi ... saad valida ühe või rohkem, kui vaja on ...

CSS
. Static {kuva: block; z-index: 10; color: # FFFFFF; overflow-x: hidden; overflow-y: hidden; asukoht: ixed;
}
# Sisu {margin: 100px 150px 0px 160px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66; laius: 100%, kõrgus: 55px;}

# Wrap-l {top: 80px; background: # FF9966; kõrgus: 300px; laius: 150px; border: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px; background: # 3333CC; laius: 100%, kõrgus: 55px;}

# Wrap-r {top: 80px; background: # 6666FF; kõrgus: 300px; laius: 140px; border: 2px solid # e6e6e6; õigus: 0;}

HTML
<div id="contents"> Sa avalehele sisu </ div>
<div id="wrap-b" class="static">
Staatiline sisu kohta Page alt
</ Div>
<div id="wrap-t" class="static">
Staatiline sisu kohta Page Top
</ Div>

<div id="wrap-l" class="static">
Staatiline sisu kohta Page lahkus
</ Div>
<div id="wrap-r" class="static">
Staatiline sisu kohta Page õigus
</ Div>

Vaata wroking proovi siin

Kui ma loen seda artiklit List Apart " Faux absoluutne positsioneerimine
Eric Sol ", olin midagi vähemat kui muljet. Ma olin ka masendunud majorly põhjustada, ausalt ma mõtlesin, miks cant ma tulla midagi vapustav, kui see.

Tavaliselt, kui me loome CSS paigutust, mida me kasutame "asendis" või "KLAPID" või väga halb kombinatsioon. Eric Sol ja tema meeskond määratleda kõrval täiuslik tehnika uut tüüpi CSS paigutust tehnikat, mille nad on ristitud kui "Faux absoluutne positsioneerimine" pärast faux veergude tehnikat, mis simuleerib olemasolu veerus.

Sa tead, et probleem meie kõigi CSS arendajad on koos lagunemas paigutusega (ootamatu sisu muutused, mis põhjustavad kogu veergude wrap, kui me kasutame paisati paigutusega) ... Noh! Tundub ajalugu!!
See kujundus tehnika on veel väga noor ja peab prügikasti välja kõik need CSS spetsialistidele seal, enne kui see muutub un kirjutatud standard. Ma olen õnnelik, et kasutada seda KOHE! ... Ja olen juba arvesse keskel ümber minu varasem problemaatiline / ujuv ÜRO tingimata paigutusega sisse FAP paigutus juba ... ja olen hea meel öelda "me juba kasutate Faux absoluutne positsioneerimine selle Päevik ka" ... minge proovige seda, KOHE!

Kiitus Eric!