Ilmaista sitä

Miksi haluan ymmärtää tämän??? ... Humm!!

Useimmat CSS kirjoittajat samaa mieltä siitä, että CSS Clip omaisuus on luultavasti yksi kaikkein un käytettyjä CSS-ominaisuuksia. Se oli niin totta minullekin ja oli erittäin iloinen jättää huomiotta sitä, kunnes aloitin muokkaamalla MooTools KAKSI Knob (Pin) Slider Komponentti (Alueen Indicator) .

Oli hyvä ehdotus yhdestä komponentin käyttäjät voivat muokata Slider Component käyttäen leikattu taka kuvia (vasten muuttuja leveys jako) osoittamaan liukusäädintä alue. Näin tuli minun aikani tulla hauska, mutta un-charter (minulle tietysti) vedet CSS Clip omaisuutta.

No! kuinka vaikeaa voi olla? Ei paljon ollenkaan ... Kyllä ja ei. Syntaksi käyttää CSS Clip omaisuus on melko pystyssä, mutta merkitys / usuage on vähän croocked. Kun muisti kuin minun, Everytime I istua muokata minun Slider Script ... Minulla tokeep viittaa takaisin käyttöön tämän CLIP omaisuuden muistuttaa itseäni logiikkaa, että olen luonut minun script .... Näin! ajattelin kynä alas ja toivoa muistaa se tulevaisuudessa (ja myös Niille, jotka näyttävät boggled jota CSS Clip Property)

Mitä CSS Clip tekee?

Clip on osa visuaalisia tehosteita moduulin CSS 2.1. Yksinkertaisesti sanottuna, sen tehtävänä on asettaa näkyvän ikkunan päälle esine, joka on leikattu, joten syväyspolku kuvia ja luoda pikkukuvia ilman luoda uusia tiedostoja (Olen jo laittaa tämän ominaisuuden käyttää paremmin Slider Component )

Käyttämällä CSS Clip ominaisuuden avulla voit luoda rajaavan käyttäen rect muodon. Kuten monet muutkin CSS-ominaisuudet (kuten margin, padding jne.) käyttäen rect vaatii neljä koordinaatit Top, Oikea, Ala, Vasen (HÄIRIÖ). Croocked luonne ominaisuus heijastaa kun otat tarkemmin miten clip laskee rajaavan alueen käyttäen nämä neljä koordinaatit (lähettää aivot heittää hetkeksi). Nyt hämmentää teitä pohja alkaa ylhäältä ja oikealla alkaa vasemmalta. . Näet mitä sanoin? .... Siksi tämä viesti ...

Tämä pieni sekaannus voi helposti kadota, tämä visuaalinen kuvaus CSS Clip / rect omaisuuden alla!!

CSS Clip Vaatimukset

Tehtävä olemme alkaneet on leikata seuraavat Pienoiskuva kuvan squarer näköinen kuva (ja myös laajakulma kuva)

Alkuperäinen Thumbnal / Image	Clip vaatimukset Sqaure Thumbmail

CSS Clip Tulokset

Katso esittely | Lataa sourcefiles

Tämä viesti voisi olla hyvä esimerkki lause "Opettaminen mummolle imeä munaa" ... Koska tämä on vain perus CSS jutut. Mutta niille, kuten huomaa minua, tämä voi olla siunaus valepuvussa. Ajattelin aina (voisin menettää työni sanoessani tämän), se oli vain mahdollista säilyttää osaan HTML-sivun sisällön STATIC (merkityksen, sen asema säilyy vieraslajien Window Scroll), käyttäen joitakin älykkäitä skriptejä, Doing kaikki tieteelliset laskelmien löytää dynaamista asentoon, ansastusta Window.scroll tapahtumia ja aikakatkaisut jne.

Uskonut, että voisi yhtä yksinkertaista kuin tämä .... Täällä CSS / HTML alla, minulla on neljä staattista korttelin, yksi kiinteä jokaiseen extrimities sivun, TOP, RIGHT, BOTTOM ja jäljellä ... turha sanoa ... voit valita yhden tai useamman tarvittaessa ...

CSS
. Staattinen {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; sijainti: ixed;
}
# Sisältö {margin: 100px 150px 0px 160px; reunusta: 1px solid # e6e6e6}

# Wrap-t {top: 0px background: # 33CC66, leveys: 100%; height: 55px;}

# Wrap-l {top: 80px; background: # FF9966; height: 300px; width: 150px; reunusta: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px background: # 3333CC, leveys: 100%; height: 55px;}

# Wrap-r {top: 80px; background: # 6666FF, korkeus: 300px; width: 140px; reunusta: 2px solid # e6e6e6, oikea: 0;}

HTML
<div id="contents"> Sinä etusivu sisältö </ div>
<div id="wrap-b" class="static">
Staattinen sisältö sivulla alhaalla
</ Div>
<div id="wrap-t" class="static">
Staattinen sisältöä Sivun alkuun
</ Div>

<div id="wrap-l" class="static">
Staattinen sisältö sivulla vasemmalle
</ Div>
<div id="wrap-r" class="static">
Staattinen sisältö sivulla oikealla
</ Div>

Näytä wroking näyte täällä

Kun luin tämän artikkelin List Apart " Faux Absolute Positioning
Eric Sol ", olin suorastaan ​​kuin hämmästellä. Olin myös masentunut aikuinen, aiheuttaa, rehellisesti ihmettelin, miksi cant olen keksiä jotain upea kuin tämä.

Yleensä, kun luomme CSS asettelujen, käytämme "POSITION" tai "KOHOJEN" tai erittäin huono yhdistelmä. Eric Sol ryhmineen määrittää vieressä täydellinen tekniikkaa uudentyyppinen CSS asettelu tekniikkaa, jossa ne ovat kastettiin nimellä "Faux absoluuttisen sijoittamisen" jälkeen faux sarakkeet tekniikka, joka simuloi läsnäolo sarake.

Te tiedätte, että ongelma meidän kaikkien CSS kehittäjien kanssa hajoamassa ulkoasuja (odottamattomia muutoksia sisällössä aiheuttavat koko sarakkeet wrap, kun käytämme uittaa taitot) ... No! Näyttää historiaa!!
Tämä asettelu tekniikka on vielä hyvin nuori, ja on roskakorissa pois kaikki ne CSS gurut siellä, ennen kuin siitä tulee un kirjalliset. Olen iloinen voidessani käyttää sitä NYT! ... Ja olen jo osaksi keskelle muutettuani aikaisemmin ongelmallinen / uiva un-välttämättä asettelujen osaksi FAP layout jo ... ja ilokseni sanoa "olemme jo käytössä Faux absoluuttinen sijoitus tämän blogipalvelun sekä" ... GO kokeilla, NYT!

Kudos Eric!