Schiebetürtechnik in CSS

Eine oft diskutierte Weiterentwicklung von CSS ist die Möglichkeit, Hintergrundbilder zu stapeln, sodass sie übereinander gleiten können, um Spezialeffekte zu erzeugen. Nach den aktuellen Regeln von CSS 2.0 benötigt jedes Hintergrundbild ein eigenes HTML-Element. In vielen Fällen stellt das typische Markup bereits eine Vielzahl von Elementen bereit, die wir als allgemeine Schnittstellenkomponenten verwenden können.

Mit einfachem Design können wir es schaffen.

Woher kommt die Innovation?

Viele CSS-basierte Navigations-Tags, die ich gesehen habe, haben größtenteils die gleichen Eigenschaften: einen rechteckigen Farbblock, vielleicht nur eine Umrisslinie, keinen Rahmen für das aktuell ausgewählte Tag, und das Tag ändert seine Farbe, wenn der Mauszeiger darüber bewegt wird. Ist das alles, was uns CSS bieten kann? Eine Reihe kleiner Kästchen und trister Farben?

Bevor CSS weit verbreitet wurde, gab es viele Innovationen im Tab-Navigationsdesign. Originalform, fachmännische Farbmischung und Nachahmung vieler physischer Schnittstellen in der realen Welt. Diese Designs basieren jedoch häufig zu sehr auf komplex gestalteten Bildern mit Text oder sind in verschachtelte Tabellen verpackt. Das Ändern von Text oder die Reihenfolge von Beschriftungen erfordert einen komplexen Prozess. Es ist sogar unmöglich, den Text zu strecken, da dies sonst das Layout der Seite stark beeinträchtigt.

Nur-Text-Navigationsleisten sind langlebiger und werden schneller geladen als Navigationsleisten mit Text als Bild. Ebenso können wir jedem Bild Alt-Attribute hinzufügen. Für Menschen mit Sehbehinderung kann die Größe des einfachen Texts frei geändert werden. Es überrascht nicht, dass mit CSS gestaltete, auf reinem Text basierende Navigationsleisten wieder im Webdesign Einzug halten. Allerdings sind die meisten CSS-basierten Navigationsleisten-Designs bisher noch bedeutungslos. Eine kürzlich eingeführte Technologie (wie CSS) kann es uns ermöglichen, bessere Ergebnisse zu erzielen, ohne die Wirkung der zuvor erwähnten Tabellen- und Bild-Tags zu verlieren.

Schiebetürtechnik

Wunderschöne Handwerkskunst, wirklich flexible Schnittstellenkomponenten und adaptive Größenanpassung basierend auf dem Text. Wir können es mit zwei unabhängigen Hintergrundbildern erstellen. Einer links und einer rechts. Stellen Sie sich diese beiden Bilder als zwei Schiebetüren vor, die zusammengeschoben und überlappt werden, um einen engeren Raum einzunehmen, oder die auseinandergeschoben werden, um einen größeren Raum einzunehmen, wie im folgenden Bild gezeigt:

In diesem Modell maskiert ein Bild einen Teil eines anderen Bildes. Angenommen, wir platzieren um jedes Bild herum einzigartige Inhalte, beispielsweise abgerundete Ecken für Beschriftungen. Wir möchten nicht, dass das obere Bild das untere Bild vollständig verdeckt. Um dies zu verhindern, können wir das Bild oben (in diesem Beispiel das linke Bild) so schmal wie möglich machen. Achten Sie aber dennoch auf eine gewisse Breite, um die Einzigartigkeit einer Seite des Etiketts hervorzuheben. Wenn die äußeren Ecken abgerundet sind, sollten wir das obige Bild so einstellen, dass es die gleiche Breite wie sein Bogenteil hat.

Wenn das Ziel größer wird und die oben gezeigte Breite überschreitet, wird das Bild aufgrund von Änderungen in der Textgröße und Schriftart auseinandergestreckt, wodurch unschöne Lücken entstehen. Was wir beurteilen müssen, ist vorherzusagen, wie groß diese Skalierbarkeit sein wird. Wird das Ziel größer, wenn ich die Schriftgröße im Browser ändere? Praktisch gesehen sollten wir die Schriftgröße zumindest auf 300 % erhöhen. Auch Hintergrundbilder müssen diesem Wachstum Rechnung tragen. Für das obige Beispiel stellen wir das untere (rechte) Bild auf 400*150 Pixel und das obere Bild auf 9*150 Pixel ein.

Wenn das Etikett gedehnt wird, gleitet das Bild weg, die Tür wird breiter und mehr vom Bild kommt zum Vorschein:

In diesem Beispiel habe ich in Photoshop zwei glatte, dünne 3D-Etikettenbilder erstellt, wie am Anfang des Artikels gezeigt. Zum einen ist der Innenraum hell und der Rand dunkler, um die aktuell ausgewählte Beschriftung darzustellen. Um dieses Trickmodell auf das linke und rechte Bild anzuwenden, müssen wir den vom Etikettenbild abgedeckten Bereich erweitern und ihn in zwei Teile zuschneiden:

Der gleiche Ansatz gilt für die Bezeichnung „aktuell“. Sobald wir diese vier Bilder (1, 2, 3, 4) haben, können wir mit der Erstellung unserer Etiketten mit Markup und CSS beginnen.

Erstellung von Etiketten

Wenn Sie sich mit der Verwendung von CSS zum Erstellen horizontaler Listen befassen, werden Sie feststellen, dass es mindestens zwei Möglichkeiten gibt, Listenelemente in derselben Zeile anzuordnen. Beide Methoden haben ihre eigenen Vorzüge, aber beide erfordern CSS, um die durch das Layout verursachte Verwirrung zu beseitigen. Eine Methode verwendet Inline-Boxen, die andere verwendet Floats.

Methode eins, die möglicherweise häufiger vorkommt, besteht darin, alle Listenelemente inline anzuzeigen. Das Schöne am Inline-Ansatz liegt in seiner Einfachheit. Bei der Schiebetürtechnologie, über die wir gleich sprechen, weist die Inline-Methode jedoch einige Interpretationsprobleme in bestimmten Browsern auf. Methode zwei, auf die wir uns konzentrieren werden, besteht darin, Floats zu verwenden, um Listenelemente in derselben Zeile anzuordnen. Frustrierend ist, dass das scheinbar widersprüchliche Verhalten von Floats der natürlichen Logik entgeht. Dennoch lohnt es sich, das grundlegende Verständnis darüber zu diskutieren, wie man mit mehreren Floating-Elementen umgeht und was zuverlässiges Floating bedeutet.

Wir werden einen anderen Typ von schwebenden Elementen verwenden, um das Problem der Anordnung schwebender Elemente zu lösen. Auf diese Weise umschließt das übergeordnete Element das untergeordnete Element vollständig. Daher können wir dem Etikett eine Hintergrundfarbe und ein Hintergrundbild hinzufügen. Es ist sehr wichtig, sich daran zu erinnern, dass Textelemente, die direkt auf die Beschriftung folgen, die Clear-Funktion in CSS verwenden, um schwebende Objekte zu löschen. Dadurch wird verhindert, dass schwebende Beschriftungen die Position anderer Elemente auf der Seite beeinflussen.

Wir beginnen mit dem folgenden Markup:

<div id="header">
<ul>
<li><a href="#">Startseite</a></li>
<li id="current"><a href="#">Neuigkeiten</a></li>
<li><a href="#">Produkte</a></li>
<li><a href="#">Über</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>

Tatsächlich kann das #header-div auch das Logo und das Suchfeld enthalten. In unserem Beispiel möchten wir den Wert jedes Hyperlinks in der Ankerkette kürzen. Offensichtlich sollten diese Werte den Speicherort der Datei oder des Verzeichnisses korrekt enthalten.

Wir beginnen mit der Gestaltung der Liste, indem wir den #header-Container positionieren. Dadurch wird sichergestellt, dass der Container tatsächlich als Container fungiert und die darin schwebenden Listenelemente enthält. Da das Element schwebend ist, müssen wir auch seine Breite mit 100 % deklarieren. Fügen Sie einen temporären gelben Hintergrund hinzu, um sicherzustellen, dass der übergeordnete Container den gesamten Bereich hinter dem Etikett vollständig ausfüllt. Legen Sie ebenfalls die Standardtexteigenschaften fest, um einen einheitlichen Stil zu gewährleisten:

#header {
float:left;
Breite: 100 %;
Hintergrund:gelb;
Schriftgröße:93%;
Zeilenhöhe:normal;
}

Jetzt müssen wir auch den Standardwert für Rand/Auffüllung für die ungeordnete Liste auf 0 setzen und die Markierung vor dem Listenelement entfernen. Jedes Listenelement schwebt nach links:

#header ul {
Rand:0;
Polsterung:0;
Listenstil:none;
}
#header li {
float:left;
Rand:0;
Polsterung:0;
}Stellen Sie die Ankerkette so ein, dass das Rendern als Blockobjekt erzwungen wird, und wir können alle Stile ohne Bedenken steuern:

#header a {
Anzeige:Block;
}

Als nächstes fügen wir das Hintergrundbild rechts zum Listenelement hinzu (Änderungen werden fett dargestellt):

Jetzt können wir das linke Bild links von der Ankerkette (dem Element innerhalb des Containers) positionieren. Wir fügen auch eine Polsterung hinzu, die das Etikett vergrößert und den Text von den Rändern des Etiketts wegschiebt:

#header a {
Anzeige:Block;
Hintergrund:url("norm_left.gif")
keine Wiederholung links oben;
Polsterung: 5px 15px;
}

Auf diese Weise erhalten wir Effekt 2. Beachten Sie, wie unser Etikett geformt ist. Hier werden IE5/Mac-Benutzer sofort überrascht sein: „Oh mein Gott, meine Tabs sind vertikal gestapelt und erstrecken sich über den gesamten Bildschirm!“ Keine Sorge, wir helfen Ihnen sofort bei der Lösung. Versuchen Sie zunächst, die folgenden Schritte auszuführen, oder wechseln Sie bei Bedarf vorübergehend zu einem anderen Browser. Das Problem mit der IE5/Mac-Version wird dann sofort behoben.

Nachdem das Hintergrundbild für die allgemeine Beschriftung nun fertig ist, müssen wir das Bild für die „aktuelle“ Beschriftung ersetzen. Dies erreichen wir, indem wir id="current" und eine Ankerkette zum Ziellistenelement hinzufügen. Da außer dem Bild keine Notwendigkeit besteht, das Erscheinungsbild des Hintergrunds zu ändern, verwenden wir die Funktion „Hintergrundbild“:

Wir platzieren das Bild im Hintergrund des #header-Containers (anstelle des ursprünglichen gelben Hintergrunds), verschieben das Hintergrundbild nach unten und fügen die entsprechende Hintergrundfarbe in den leeren Bereich über dem Bild ein. Entfernen Sie gleichzeitig die vom Körper geerbte Polsterung und fügen Sie oben, links und rechts von ul 10 Pixel Polsterung hinzu:

#header {
float:left;
Breite: 100 %;
Hintergrund:#DAE0D2 URL("bg.gif")
wiederholen-x unten;
Schriftgröße:93%;
Zeilenhöhe:normal;
}
#header ul {
Rand:0;
Polsterung:10px 10px 0;
Listenstil:none;
}

Wir tun dies, indem wir den unteren Füllwert der normalen Ankerkette um 1 Pixel (5px-1px=4px) reduzieren und dann den subtrahierten Füllwert zur „aktuellen“ Ankerkette hinzufügen.

der letzte Schliff

Aufmerksamen Beobachtern sind im vorherigen Beispiel vielleicht die White-Label-Ecken aufgefallen. Diese undurchsichtigen Ecken werden verwendet, um zu verhindern, dass das Bild unten auf das Bild oben durchscheint. Theoretisch könnten wir versuchen, einen Teil des Hintergrundbilds zu verwenden, um es an den Hintergrund des Etiketts anzupassen. Aber unser Etikett wird größer, wenn wir versuchen, die Hintergrundfarbe zu verschieben, wird das Hintergrundbild kürzer. Ändern Sie stattdessen das Bild so, dass die Ecken des Etiketts transparent sind. Wenn der Bogen geglättet ist, verwenden wir an seinen Rändern eine gleichmäßigere Hintergrundfarbe.

Da die Ecken nun transparent geworden sind, wird das Bild auf der linken Seite durch die Ecken des Bildes auf der rechten Seite hindurch sichtbar. Zum Ausgleich fügen wir dem Formularelement einen Abstand (9 Pixel) hinzu, der der Breite des Bildes auf der linken Seite entspricht. Nachdem wir nun den Abstand zum Formularelement hinzugefügt haben, müssen wir die gleiche Breite entfernen, um den Text zu zentrieren (15px-9px=6px):

#header li {
float:left;
Hintergrund:url("right.gif")
keine Wiederholung rechts oben;
Rand:0;
Polsterung:0 0 0 9px;
}
#header a {
Anzeige:Block;
Hintergrund:url("left.gif")
keine Wiederholung links oben;
Polsterung: 5px 15px 4px 6px;
}

Es ist noch nicht vorbei, denn durch das Hinzufügen von 9 Pixeln Abstand entsteht eine Lücke zwischen dem linken Bild und der linken Seite des Etiketts. Da nun die linken und rechten Kanten der sichtbaren „Tür“ verbunden sind, müssen wir das linke Bild nicht mehr oben belassen. Vertauschen Sie also die Reihenfolge der beiden Hintergrundbilder und kehren Sie sie um. Tauschen Sie auch die beiden im „current“-Tag verwendeten Bilder aus:

#header li {
float:left;
Hintergrund:url("left.gif")
keine Wiederholung links oben;
Rand:0;
Polsterung:0 0 0 9px;
}
#header a, #header strong, #header span {
Anzeige:Block;
Hintergrund:url("right.gif")
keine Wiederholung rechts oben;
Polsterung: 5px 15px 4px 6px;
}
#header #aktuell {
Hintergrundbild:url("left_on.gif");
}
#header #aktuell a {
Hintergrundbild:url("right_on.gif");
padding-bottom:5px;
}

Nachdem wir dies abgeschlossen haben, kommen wir zu Effekt 4. Beachten Sie, dass die transparenten Ecken einen nicht anklickbaren Bereich auf der linken Seite des Etiketts erzeugen. Dieser Bereich liegt außerhalb des Textes, ist aber dennoch erkennbar. Es ist nicht erforderlich, auf beiden Seiten des Etiketts transparente Bilder zu verwenden. Wenn wir diesen ungültigen Bereich nicht erzeugen möchten, müssen wir eine Farbe hinter dem Etikett verwenden und dann das transparente Bild in den Ecken des Etiketts durch diese Farbe ersetzen. Jetzt behalten wir einfach diese transparente Ecke.

Für den Rest des Problems nehmen wir alle Änderungen auf einmal vor: Machen Sie den Etikettentext schwerer, ändern Sie den Text im normalen Etikett in Braun, ändern Sie den „aktuellen“ Etikettentext in Dunkelgrau und entfernen Sie die Unterstreichung des Links , und ändern Sie schließlich die Farbe des Hover-Textes in die gleiche dunkelgraue Farbe. Nach einer Reihe von Änderungen schauen wir uns den bisherigen Effekt an 5.

Konsequente Lösung
Nach Effect 2 haben wir ein Problem festgestellt: Im Browsermodus von IE5/Mac erstreckt sich jede Registerkarte über die gesamte Breite des Browsers und nimmt sie ein, sodass die Registerkarten vertikal übereinander gestapelt sind. Das ist nicht das, was wir wollen.

In den meisten Browsern wird ein schwebendes Element auf die minimale Größe seines enthaltenen Inhalts verkleinert. Wenn ein schwebendes Element ein Bild enthält oder ein Bild ist, wird es auf die Breite des Bildes verkleinert. Wenn es nur Text enthält, wird es auf die Breite des längsten, nicht überschriebenen Textes verkleinert.

Bei Bildern in IE5/Mac tritt ein Problem auf, wenn ein Blockobjektelement mit automatischer Breite in ein schwebendes Element eingefügt wird. Andere Browser minimieren immer noch Floats und ignorieren Blockelemente innerhalb des Containers. Aber IE5/Mac folgt diesem Verhalten nicht, sondern erweitert stattdessen Float- und Blockobjektelemente so weit wie möglich. Um dieses Problem zu lösen, werden wir gleichzeitig die Ankerkette schweben lassen, jedoch nur für IE5/Mac, um andere Browser nicht aufzugeben. Zuerst legen wir die Floating-Regeln für die Ankerkette fest. Dann verwenden wir die Backslash-Kommentarmethode, um diese Regel auszublenden, sodass sie nur für IE5/Mac wirksam wird und andere Browser ignoriert:

Ziehen Sie Schlussfolgerungen aus einem Beispiel. Wir haben gerade die Schiebetürtechnik geübt, indem wir einfachen Text und eine ungeordnete Liste verwendet haben, um Navigationsbeschriftungen zu erstellen, mit ein wenig Stil. Es lädt schnell, ist wartbar und die Textgröße kann erheblich erweitert werden, ohne das Erscheinungsbild zu beeinträchtigen. Wir müssen die Flexibilität der Schiebetürtechnologie bei der Erstellung komplexer Navigationsleistenstile nicht wiederholen.

Es gibt nichts, woran Sie nicht denken und was Sie nicht tun können. Der Endeffekt zeigt uns ein Beispiel, aber unser Design kann dadurch nicht eingeschränkt werden.

In manchen Fällen sind Beschriftungen nicht unbedingt symmetrisch. Ich habe schnell eine zweite Version dieses Etiketts erstellt, ebenfalls mit einem schattierten 3D-Stil, eckigen Kanten und einem markanten linken Teil. Gemäß der zweiten Version können wir sogar die Positionen des linken und rechten Bildes vertauschen. Mit diesem detaillierten Layout und der intelligenten Bildsteuerung können wir den unteren Rand der Schaltfläche entfernen, sodass das Etikettenbild besser in den Hintergrund passt, wie in der dritten Version gezeigt. Wenn Ihr Browser das Wechseln zwischen mehreren Stylesheets unterstützt, können Sie damit sogar frei zwischen mehreren Versionen der Navigationsleiste wechseln.

Es gibt viele andere Effekte, die wir nicht erwähnt haben. Eine kurze Anmerkung: Ich habe die Farbe des Texts beim Mouseover geändert, aber das gesamte Bild könnte ersetzt werden, um einen interessanteren Transformationseffekt zu erzielen. Selbst wenn das Markup zwei verschachtelte HTML-Elemente enthält, können mit CSS einige Effekte erzielt werden, an die wir noch nicht gedacht haben. Was wir in diesem Beispiel erstellt haben, ist lediglich eine horizontale Tab-Leiste, aber Schiebetüren können in vielen anderen Situationen verwendet werden. Was denken Sie?