Ausdruck ihrer IT-

Warum will ich das zu verstehen??? Humm ...!!

Die meisten CSS-Autoren würden zustimmen, dass CSS-Clip-Eigenschaft ist wahrscheinlich eines der am meisten unbenutzte CSS-Eigenschaften. Es war so richtig für mich und war sehr glücklich, es zu vernachlässigen, bis ich begann Modifizierung der MooTools ZWEI Knob (Pin) Slider-Komponente (mit Range Indicator) .

Es war ein guter Vorschlag von einem der Komponente Benutzern, die Slider-Komponente mit Hilfe abgeschnitten backgroud Bilder (gegen eine variable Breite Teilung), um den Schieber Sortiment zeigen zu modifizieren. So kam meine Zeit, um den Spaß, aber un-Wirtschaftsprüfer (für mich natürlich) Wasser des CSS-Clip-Eigenschaft eingeben.

Na ja! wie schwierig es sein kann? Nicht viel überhaupt ... YES und NO. Die Syntax, um die CSS-Clip-Eigenschaft verwenden, ist ziemlich aufrecht, aber der Sinn / usuage ist ein bisschen croocked. Mit einem Speicher wie meine, immer wenn ich sitzen auf Nachbesserung auf meinem Slider Script ... Ich habe tokeep Rückbezug auf Nutzung dieses Clip-Eigenschaft, um mich daran erinnern, die Logik, die ich in meinem Skript erstellt .... DAMIT! gedacht, um Stift it down, mit einer Hoffnung zu erinnern, das die Zukunft (und auch zum Nutzen derer, die scheinen hilflos vor einem CSS-Clip-Eigenschaft)

Was bedeutet CSS Clip tun?

Clip ist Teil der visuellen Effekte-Modul von CSS 2.1. Einfach ausgedrückt, ist seine Aufgabe, ein sichtbares Fenster oben auf ein Objekt, das nicht abgeschnitten wird, zu platzieren, damit Clipping Bilder und Thumbnails ohne zusätzliche Dateien (I haben bereits diese Funktion, um eine bessere Nutzung der Slider-Komponente erstellen )

Mit dem CSS-Clip-Eigenschaft können Sie einen Ausschnitt mit dem rect Form. Wie viele andere CSS-Eigenschaften (wie margin, padding etc), mit rect erfordert vier Koordinaten Oben, Rechts, Unten, Links (TRBL). Die croocked Natur dieser Eigenschaft entspricht, wenn man einen genaueren Blick auf, wie Clip berechnet die Clipping-Region zu nehmen, mit diesen vier Koordinaten (sendet Gehirn in einen für eine Weile zu werfen). Nun, Sie zu verwirren beginnt der Boden von oben und die rechte von der linken Seite beginnt. . Du siehst, was ich gesagt habe? .... Damit dieser Beitrag ...

Dieses kleine Verwirrung kann leicht verschwinden, die mit diesem visuellen Erläuterung der CSS-Clip / rect Eigenschaft als unten!!

CSS Clip Bedarf

Die Aufgabe, die wir begonnen haben, ist es, die folgende Thumbnail-Bild in ein quadratischer suchen Bild-Clip (und auch ein Weitwinkel-Bild)

Ursprüngliche Thumbnal / Image	Clip Anforderungen für Sqaure Thumbmail

CSS Clip Ergebnisse

Demo ansehen | herunterladen Quelldateien

Dieser Beitrag könnte ein gutes Beispiel für die Formulierung "Teaching Oma, Eier zu saugen" zu sein ... Denn dies ist nur grundlegende CSS-Stuff. Aber für diejenigen, die blind wie ich, könnte dies ein Segen sein. Ich dachte immer, (ich könnte meinen Job verlieren, das zu sagen), war es nur möglich, einen Teil der HTML-Seite Inhalte STATIC halten (was bedeutet, bleibt seine Position, wie sie am Fenster zu scrollen), mit einigen intelligenten Skripte, mache ich all jene wissenschaftlichen Berechnungen zu finden, dynamische Position, Trapping Window.scroll Veranstaltungen und Einstellung Timeouts usw.

Hätte nie gedacht, es könnte so einfach wie diese .... Hier in der CSS / HTML unten, ich vier statischen Blöcken, ein aneinander befestigt extrimities der Seite zu haben, oben, rechts, unten und links ... Unnötig zu sagen ... Sie können eines oder mehrere auswählen, wenn es sein muss ...

CSS
. Static {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; Position: ixed;
}
# Inhalt {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}

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

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

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

# Wrap-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; border: 2px solid # e6e6e6, rechts: 0;}

HTML
<div id="contents"> Sie Hauptseite Inhalt </ div>
<div id="wrap-b" class="static">
Static Content auf der Seite unten
</ Div>
<div id="wrap-t" class="static">
Static Content auf Seitenanfang
</ Div>

<div id="wrap-l" class="static">
Static Content auf der Seite links
</ Div>
<div id="wrap-r" class="static">
Static Content auf der Seite rechts
</ Div>

Sehen Sie sich eine Probe hier wroking

Als ich diesen Artikel zu lesen auf A List Apart " Faux Absolute Positioning
von Eric Sol ", ich war nichts weniger als beeindruckt. Ich war auch majorly, deprimiert verursachen, ehrlich, ich habe mich gefragt, Warum kann ich etwas einfallen lassen, da dies fabelhaft.

Normalerweise, wenn wir CSS-Layouts zu erstellen, verwenden wir "Position" oder "schwebt", oder eine sehr schlechte Kombination aus beidem. Eric Sol und sein Team definieren ein neben perfekter Technik von einer neuen Art von CSS-Layout-Technik, die sie als "Faux Absolute Positioning" nach dem Faux Columns Technik, die das Vorhandensein einer Spalte simuliert wurden getauft.

Du weißt, dieses Problem uns alle CSS-Entwickler haben mit zerfallenden Layouts (Die unerwarteten Veränderungen, die Inhalte ganzer Spalten führen zu wickeln, wenn wir schwebte Layouts verwenden) ... Naja! Scheint Geschichte!!
Dieses Layout-Technik ist noch sehr jung, und muss von all den CSS-Gurus da draußen im Papierkorb, bevor es ein UN-Standard geschrieben wird. Ich bin froh, es jetzt zu nutzen! ... Und bin schon mitten in der Umstellung meiner früheren problematischen / Floating unnötigerweise Layouts in FAP Layout schon ... und ich bin froh zu sagen, das "Wir arbeiten bereits mit Faux Absolute Positioning für dieses Blog-Site als auch" ... Gehen Sie versuchen es, JETZT!

Kudos Eric!