Uttrycka det

Varför vill jag förstå detta?? ... Humm!!

De flesta av CSS författare håller med om att CSS Clip egendomen är förmodligen en av de mest oanvända CSS-egenskaper. Det var så sant för mig också och var mest glad att försumma det, tills jag började ändra MooTools TWO Vred (Pin) Slider-komponenten (med Range Indicator) .

Det var ett bra förslag från en av de ingående användarna att ändra Slider-komponenten med klippta bakgrunden, bilder (mot en variabel bredd division) för att indikera reglaget området. Således kom min tid för att skriva det roliga, men un-chartrade (för mig självklart) vatten i CSS Clip fastigheten.

Tja! hur svårt det kan vara? Inte mycket alls ... Ja och nej. Syntaxen att använda CSS Clip fastigheten är ganska upprätt, men innebörden / usuage är lite croocked. Med ett minne som mitt, varje gång jag sitter att omarbeta på min Slider Script ... Jag har tokeep hänvisar till användning av detta klipp egendom, för att påminna mig själv den logik som jag har skapat i mitt manus .... BORT! ansåg att pennan ner med en förhoppning att komma ihåg det i framtiden (och även till förmån för dem som verkar boggled av CSS Clip Property)

Vad gör CSS Clip?

Clip är en del av visuella effekter modul CSS 2,1. Enkelt uttryckt, är dess uppgift att placera ett synligt fönster ovanpå ett objekt som är klippt, varför klippning bilder och skapa thumbnails utan att behöva skapa ytterligare filer (jag har redan lagt den här funktionen användas bättre i Slider-komponenten )

Använda CSS Clip egendom, kan du skapa en klippning med rect formen. Liksom många andra CSS-egenskaper (som marginal, padding etc), med hjälp av rect kräver fyra koordinater Top, höger och undre, vänster (FEL). Den croocked naturen av fastigheten speglar när man tar en närmare titt på hur klipp beräknar klippning regionen med hjälp av dessa fyra koordinater (skickar hjärnan i en kasta ett tag). Nu till förvirra dig ner startar från toppen, och den högra börjar från vänster. . Du ser vad jag sa? .... Därför detta inlägg ...

Denna lilla förvirring kan lätt försvinna med denna visuella förklaring av CSS klipp / rect egendom som nedan!!

CSS Clip Krav

Den uppgift vi har igång är att klippa följande Miniatyrbild bilden i rektangulär ser bild (och även en vidvinkel bild)

Original Thumbnal / bild	Clip Krav Sqaure Thumbmail

CSS Clip Resultat

Visa Demo | Ladda ner sourcefiles

Detta inlägg kan vara ett bra exempel på frasen "Teaching mormor att suga ägg" ... Orsak här är bara grundläggande CSS Stuff. Men för dem, liksom omedvetna jag, kan det här vara en välsignelse i förklädnad. Jag har alltid trott (jag kan förlora mitt jobb för att säga detta), var det bara möjligt att hålla någon del av HTML-sidans innehåll statiska (mening, är dess position som IS på Fönster Scroll), med hjälp av några smarta manus, gör alla de vetenskapliga beräkningar för att hitta dynamiskt läge, fånga Window.scroll händelser och sätta timeout etc.

Trodde aldrig att det kunde så enkelt som det .... Här i CSS / HTML-koden nedan, jag har fyra statiska block, en fast till varje extrimities av sidan, upp, höger, botten och vänster ... onödigt att säga ... kan du välja en eller flera om så behövs ...

CSS
Statiska {display: block; z-index: 10; color: # FFFFFF; overflow-x: hidden; overflow-y: hidden; position: ixed;
}
# Innehållet {margin: 100px 150px 0px 160px; kant: 1px solid # e6e6e6}

# Wrap-t {top: 0px; Bakgrund: # 33CC66, bredd: 100%, höjd: 55 bildpunkter;}

# Wrap-l {top: 80px; Bakgrund: # FF9966, höjd: 300px; width: 150px; kant: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px; Bakgrund: # 3333CC, bredd: 100%, höjd: 55 bildpunkter;}

# Wrap-r {top: 80px; Bakgrund: # 6666FF, höjd: 300px; width: 140px; kant: 2px solid # e6e6e6, höger: 0;}

HTML
<div id="contents"> Du startsidan innehållet </ div>
<div id="wrap-b" class="static">
Statiskt innehåll på sidan längst ner
</ Div>
<div id="wrap-t" class="static">
Statiskt innehåll på sidan Överst
</ Div>

<div id="wrap-l" class="static">
Statiskt innehåll på sidan till vänster
</ Div>
<div id="wrap-r" class="static">
Statiskt innehåll på sidan till höger
</ Div>

Visa en wroking prov här

När jag läste den här artikeln på A List Apart " Faux Absolut positionering
av Eric Sol ", jag var inget mindre än imponerad. Jag var också deprimerad majorly, orsaka, ärligt jag undrar, varför skränande jag kommer på något fantastisk som denna.

Vanligtvis när vi skapar CSS-layouter, använder vi "position" eller "flyter", eller en mycket dålig kombination av båda. Eric Sol och hans team definierar en intill perfekt teknik för en ny typ av CSS layout teknik som de har döpt som "Faux Absolut positionering" efter faux kolumner teknik som simulerar närvaron av en kolumn.

Du vet att problemet vi alla CSS utvecklare har med sönderfallande layouter (De oväntade innehållet förändringar som orsakar hela kolumner wrap, när vi använder flottades layouter) ... Tja! Verkar historia!!
Denna layout teknik är fortfarande mycket ung, och måste slängas ut av alla dessa CSS gurus där ute, innan det blir en un skriven standard. Jag är glad att använda den NU! ... Och är redan i mitten av konvertering mina tidigare problematiska / floating FN-nödvändigtvis layouter i FAP layout redan ... och jag är glad att säga "vi redan använder Faux Absolut positionering för denna blogg också" ... GO prova, NU!

Kudos Eric!