Workshop CSS

1. Workshop CSS
2. Teil 2: Workshop CSS
3. Teil 3: Workshop CSS

© Archiv

Dieser Workshop stellt Ihnen eine Reihe interessanter CSS-Tipps und -Tricks vor, welche Sie per Copy & Paste in Ihre Webseite integrieren können oder die als Ausgangslage für Erweiterungen dienen.

Der magische Hintergrund

Ein Schattendasein fristet die CSS-Eigenschaft background-attachment, mit der Sie jedoch ohne großen Aufwand erstaunliche Effekte erzielen können. background-attachment erlaubt drei Werte:

scroll: Bei dieser Einstellung scrollt die Hintergrundgrafik mit dem Element mit. fixed: Die Hintergrundgrafik bleibt innerhalb des Anzeigebereichs einer Seite fest an einer Stelle und ist nur dort sichtbar. inherit: Es findet eine Vererbung des Werts vom Elternelement statt.

Im Beispiel wird dem Body-Bereich eine Höhe von 1500px versehen, sodass Scrollen notwendig ist und der Effekt zum Tragen kommt. Gleichzeitig wird dem Hintergrund ein Bild zugewiesen - (pic1.png) - welches die Eigenschaft fixed hat, also sich nicht von der Stelle bewegt. Die Positionsangaben des Bilds - (50px und 20px ) - beziehen sich auf die linke Ecke des Anzeigenbereichs.

Das Verstecken des Bilds im div-Container erreichen Sie durch den Wert no-repeat. Dieser bewirkt, dass die Grafik erst dann sichtbar wird, wenn der div-Container in den Bereich kommt, in dem das Bild positioniert ist. Auf die gleiche Art und Weise verschwindet das erste Bild auf dem weißen Hintergrund.

body {
height: 1500px;
background: url(pic1.png) no-repeat
fixed 50px 20px; }
div {
height: 1500px;
margin-top: 200px;
background: #ccc url(pic1_gray.png)
no-repeat fixed 50px 20px; }

Jetzt müssen Sie nur noch durch die Seite scrollen und sehen, wie die erste Grafik verschwindet und die zweite erscheint.

Zentrierte Navigationselemente

Zur Definition von Menüs gibt es eine Reihe unterschiedlicher Optionen. Mit HTML5 kam beispielsweise das <nav>-Tag, das die einzelnen Menüpunkte umschließt. So können Sie mit recht einfachen Mitteln ein Menü erzeugen. Oft wird jedoch immer noch mit ungeordneten Listen gearbeitet.

© Archiv

Bereits mit einfachen CSS-Attributen bekommen Sie die horizontale Anordnung hin: Entweder versehen Sie die unterschiedlichen List-Elemente mit dem Attribut inline, sodass diese nicht mehr als Block ausgerichtet werden, oder Sie verwenden die float-Eigenschaft der Listenelemente und richten diese darüber aus.

Das folgende Beispiel nutzt die inline-Eigenschaft und fügt noch weitere interessante Funktionen hinzu: Die Navigation wird zentriert und erhält einen ansprechenden horizontalen Hintergrundbalken.

Der HTML-Code zum Beispiel wird von zwei <div>-Tags umrandet:

<div id="menu_back"><div class="tabelle"><ul id="liste"><li><img src="pic2_button1.png"
alt="button 1" /></li><li><img src="pic2_button2.png"
alt="button 2" /></li><li><img src="pic2_button3.png"
alt="button 3" /></li><li><img src="pic2_button4.png"
alt="button 4" /></li></ul></div></div>

Das erste Element dient zur Darstellung eines Hintergrundstreifens, welcher mit der bereits beschriebenen Technik erzeugt wurde:

#menu_back {
height: 84px;
background: url(pic2_background.
jpg) repeat-x;
margin-bottom: 10px; }

Das zweite Element nutzt die display- Eigenschaft und deren Attribut table, sodass alle Elemente in Tabellenform angeordnet werden.

.tabelle {
display: table;
margin: 0 auto; }

Zusätzlich dazu werden die List-Elemente über die inline-Eigenschaft horizontal angeordnet:

ul#liste li {
display: inline; }

Ein wenig aufgepeppt wird das Menü anstelle einfacher Texte durch Grafiken - im Beispiel pic2_button1.png bis pic2_ button4.png. Die Auswahl der Grafiken bleibt Ihrem persönlichen Geschmack überlassen. Die Anordnung der Listenelemente wird über die minimale Breite und den Abstand zwischen der oberen Kante des Inhalts und dem oberen Rand festgelegt.

ul#liste {
min-width: 696px;
list-style: none;
padding-top: 20px; }

Somit bekommen Sie eine ansprechende horizontal angeordnete Liste mit einem farbigen Hintergrundstreifen.

HTML-Elemente aufgepeppt

Besitzt Ihre Website eine andere Grundfarbe als Weiß, sollten Sie auch die verwendeten HTML-Elemente an die Gegebenheiten anpassen. CSS unterstützt Sie dabei.

Wie gewohnt können Sie den Elementen der <select>-Box Schriftart, -größe und -formatierung zuweisen. Für die Farbwahl der Schrift steht Ihnen die Eigenschaft color zur Verfügung, der Hintergrund wird über background formatiert:

select {
font-family: monospace;
font-size: 14px;
font-weight: bold;
color: white;
background: red; }

Möchten Sie einzelnen Elementen vom Standard abweichende Werte zuweisen, so können Sie diese entweder direkt über die style-Eigenschaft übersteuern oder den einzelnen option-Tags eine eigene ID geben und alle Formatierungen zentralisieren. Im Beispiel wird der einfache Weg über die Zuweisung innerhalb des HTML-Tags gegangen:

<select name="select"><option value="1">Eintrag 1</option><option value="2" style=
"background: green">Eintrag 2</option><option value="3">Eintrag 3</option></select>

Damit erhält der zweite Listeneintrag eine grüne Hintergrundfarbe.

Noch nicht den Weg in die Standard-CSS-Beschreibungen haben die Optionen zur Formatierung der Scrollbars innerhalb des Browsers gefunden. Diese Tags sind nur für den Internet Explorer gültig und werden von allen anderen Browsern ignoriert. Folgende Parameter können Sie einsetzen:

scrollbar-3dlight-color definiert die 3D-Farbe der Scrollbar. scrollbar-arrow-color stellt die Farbe des Pfeils dar. scrollbar-arrow-color stellt die Farbe des Pfeils dar. scrollbar-darkshadow-color steht für die Farbe des dunklen Schattens. scrollbar-face-color definiert die Hauptfarbe der Scrollbar. scrollbar-highlight-color legt die Farbe der aktiven Scrollbar fest. scrollbar-shadow-color steht für die Schattenfarbe der Scrollbar.

Grafiken schneller laden

Wenn Sie Webseiten mit vielen Grafiken besitzen, sollten Sie sich den folgenden Tipp genauer anschauen.

Der Einsatz von CSS-Sprites kann Ladezeiten optimieren. Dabei verknüpfen Sie ein hover-Ereignis nicht mit einem neuen Bild, sondern mit einem Bildabschnitt. Im folgenden Beispiel gibt es zwei Schaltflächen, die beide zu Beginn rot sind und bei Berührung der Grafik oder des zugehörigen Links gelb werden.

Das Ganze wird durch vier Grafiken - zwei rote und zwei gelbe - realisiert, die alle zusammen untereinander in einer Datei untergebracht sind. Auf Basis der Offset-Adressen der einzelnen Quadrate können Sie diese zielgenau ansteuern und darstellen. Dabei wird jeweils die linke obere Ecke als Koordinate herangezogen.

Der HTML-Code entspricht somit einer normalen Aufzählung mit Listenelementen:

<ul id="nav"><li><a class="punkt1" href="#"
title="Link 1">Link 1</a></li><li><a class="punkt2" href="#"
title="Link 2">Link 2</a></li></ul>

Die Effekte erzielen Sie in diesem Fall durch den richtigen Einsatz von CSS:

#nav li a {
background-image:url('pic4.jpg');
background-repeat:no-repeat;
padding:50px 150px;
line-height:150px; }

Das Listenelement wird über die Eigenschaft background-image mit der Grafik verknüpft, und mit padding wird für den richtigen Abstand gesorgt:

#nav li a.punkt1
{background-position:0px 0px;}
#nav li a:hover.punkt1
{background-position:0px -150px;}

Die Aufzählung sorgt anschließend dafür, dass zu Beginn das richtige Image angezeigt wird und auch beim Berühren des Links die Anzeige wechselt.