Webseiten programmieren und gestalten

# Was sonst noch wichtig ist

Fluchen ist die einzige Sprache, die alle Programmierer wirklich beherrschen.

In diesem Kapitel werden Sie weitere interessante Möglichkeiten von CSS kennen lernen, die Sie aber nicht zwangsläufig beherrschen müssen, da sie stellenweise auf bestimmte Browser beschränkt oder mit gewissen Voraussetzungen verknüpft sind.

# Cursor

Seit der CSS-Version 2.0 können Sie die Form bzw. das Aussehen des Mauszeigers verändern. Einen solchen Effekt kennen Sie von den Hyperlinks. Wenn Sie den Mauszeiger über einem Hyperlink positionieren, verändert dieser seine Form. In der Regel wird dann eine stilisierte Hand dargestellt. Mit der CSS-Eigenschaft cursor können Sie nun eine Form festlegen, in die der Mauszeiger geändert wird, wenn der Benutzer mit der Maus über ein entsprechendes Element fährt. Als Wert für cursor können Sie einen der Werte aus der Tabelle 6.1 angeben.

Wert Erklärung
auto Automatisch
default Standard-Cursor
crosshair Fadenkreuz
e-resize Pfeil nach rechts
help Fragezeichen
move Kreuz, mit Pfeilen in alle Richtungen
n-resize Pfeil nach oben
ne-resize Pfeil nach oben-rechts
nw-resize Pfeil nach oben-links
pointer Zeiger bzw. Hand (wie bei Hyperlinks)
s-resize Pfeil nach unten
se-resize Pfeil nach unten-rechts
sw-resize Pfeil nach unten-links
text Zeiger für Texte
url(bild) Bild
w-resize Pfeil nach links
wait Sanduhr

Tabelle 6.1: Mögliche Werte für die Eigenschaft cursor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Cursor //-->
<html>
  <head>
    <title>Listing 6.1</title>
    <style type="text/css">
      <!--
        h1, p, a { cursor:help; }
      //-->
    </style>
  </head>
  <body>
    <h1>Cursor</h1>
    <p>Bewegen Sie den Mauszeiger mal auf eines der Elemente.</p>
    <a href="http://www.galileo-press.de/">Galileo Press</a>
  </body>
</html>

Listing 6.1: Beispiel für die Eigenschaft cursor

Achten Sie aber darauf, dass Cursor nicht zweckentfremdet werden sollten. Wenn Sie das Tabelle 6.1 einmal in Ihrem Browser betrachten, werden Sie schnell feststellen, dass man hinter den einzelnen Elementen anhand der Cursor-Form etwas anderes oder mehr erwarten würde. Außerdem unterstützt Netscape erst seit der Version 6 diese CSS-Eigenschaft, der Internet Explorer hingegen seit der Version 4.

Eine Besonderheit ist der Wert url(bild) für die Eigenschaft cursor. Damit können Sie ein Bild als Mauszeiger verwenden. Diese Angabe wird jedoch nur vom Opera interpretiert, nicht von Netscape oder dem Internet Explorer.

# Scrollbar

Microsoft hat seinem Internet Explorer ein paar spezielle Eigenschaften beigefügt, die von keinem anderen Browser interpretiert werden und auch nicht CSS-Standard sind. So können Sie für den Internet Browser, passend zum Design Ihrer Webseite, die Farben aller Bildlaufleisten verändern, die beim Darstellen eines HTML-Dokuments sichtbar werden, z. B. von Textfeldern, von Bereichen mit der Eigenschaft hidden:overflow oder des gesamten Anzeigebereichs.

Folgende Eigenschaften stellt Microsoft dabei zur Verfügung:

Eigenschaft Erklärung
scrollbar-base-color Grundfarbe der Scrollbar
scrollbar-arrow-color Farbe der Pfeile
scrollbar-darkshadow-color Farbe für den Schatten
scrollbar-face-color Farbe der Oberfläche
scrollbar-highlight-color Farbe für den linken und oberen Rand
scrollbar-shadow-color Farbe für den rechten und unteren Rand
scrollbar-track-color Farbe für die Trackbar
scrollbar-3dlight-color Farbe für einen 3-D-Effekt

Tabelle 6.2: Eigenschaften zum Verändern der Scrollbar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Scrollbar //-->
<html>
  <head>
    <title>Listing 6.2</title>
    <style type="text/css">
      <!--
        * { scrollbar-base-color:green;
            scrollbar-arrow-color:yellow;
            scrollbar-darkshadow-color:black;
            scrollbar-face-color:blue;
            scrollbar-highlight-color:lightblue;
            scrollbar-shadow-color:darkblue;
            scrollbar-track-color:gray;
            scrollbar-3dlight-color:black; }
      //-->
    </style>
  </head>
  <body>
    <textarea rows="100" cols="50"></textarea>
  </body>
</html>

Listing 6.2: Beispiel für die farbliche Anpassung der Scrollbars

Zwar eröffnen sich damit viele neue Gestaltungsmöglichkeiten, achten Sie aber darauf, nicht allen Eigenschaften die gleiche Farbe zuzuweisen oder Farben wie Rot und Blau zu kombinieren. Für den Benutzer wäre eine vernünftige Verwendung Ihrer Seite ansonsten fast ausgeschlossen.

# Special Effects

Seit der Version 4 des Internet Explorers hat Microsoft spezielle Filter in den Browser eingebunden, mit denen sich Elemente transparent oder spiegelverkehrt darstellen lassen. Jedoch funktionieren diese Filter nur mit dem IE. Verwenden Sie diese Filter also nur dann, wenn Sie sichergehen können, dass die Benutzer den IE auch verwenden.

Diese Filter stammen aus der Bildbearbeitung. Als Eigenschaft wird dabei filter verwendet und als Wert der Name des Filters mit den entsprechenden Parametern, z. B.:

filter:Alpha(opacity=0, finishopacity=100, style=2)

Einige dieser Filter lassen sich auf eine Auswahl von Elementen anwenden, andere nur auf Grafiken. Entsprechende Beispiele finden Sie auf der beiliegenden CD‑ROM unter x:\misc\css-filter.htm.

# Alpha

Mit dem Alpha-Filter können Sie den Vordergrund mit dem Hintergrund verschmelzen lassen, z. B. eine Grafik mit dem Dokument-Hintergrund. Dabei müssen Sie sich für einen von vier Stilen entscheiden, den Sie mit dem Parameter style übergeben.

  • Stil 0
    Der Vorder- und Hintergrund werden farblich addiert. Es reicht die Angabe filter:alpha(style=0).
  • Stil 1
    Linearer Farbverlauf von Punkt A nach Punkt B. Punkt A wird mit den Parametern startx und starty festgelegt und der Punkt B mit den Parametern finishx und finishy. Der Parameter opacity (dt. Deckkraft) gibt den Startwert und finishopacity den Endwert an. Dabei bedeutet 0 transparent und 100 volle Deckkraft.
    filter:alpha(style=1, startx=0, starty=0, finishx=50, finishy=75,  
opacity=100, finishopacity=0)
  • Stil 2
    Radialer Farbverlauf von innen nach außen. Eine mögliche Angabe könnte filter:alpha(style=2, opacity=100, finishopacity=0) lauten.
  • Stil 3
    Rechteckiger Farbverlauf von innen nach außen. Eine mögliche Angabe könnte filter:alpha(style=3, opacity=100, finishopacity=0) lauten.

# Blur

Mit dem Blur-Filter können Sie ein Element verwischen, z. B. einen Text oder eine Grafik. Das entsprechende Element wirkt dann, als wäre es von einem Punkt zum anderen gezogen worden. Dieser Filter kennt die folgenden Parameter:

  • direction
    Dieser Parameter bestimmt die Richtung des Verwischeffekts. Als Wert dürfen Sie einen der folgenden Winkel angeben: 0, 45, 90, 135, 180, 225, 270 und 315 Grad.
  • strength
    Bestimmt die Länge der Verwischspur in Pixel, wobei 0 für keinen Verwischeffekt steht. Je höher der Wert, desto stärker der Effekt.

Eine vollständige Angabe könnte filter:blur(direction=90, strength=50) lauten.

# Chroma

Mit diesem Filter können Sie einer Grafik eine transparente Farbe zuweisen, zusätzlich zu der möglicherweise bereits vorhandenen. Die entsprechende Farbe müssen Sie mit dem color-Parameter übergeben. Dabei ist zwar jede Farbangabe möglich, aber ich möchte Ihnen empfehlen, Hex-Tripel-Werte zu verwenden.

Eine vollständige Angabe könnte filter:chroma(color=#336699) lauten.

# DropShadow

Der DropShadow-Filter ermöglicht das Erzeugen eines Schattens zu einem Element, z. B. von einem Text oder einer Grafik. Dabei erwartet der Filter folgende Parameter:

  • color
    Die Farbe des Schattens. Jede Farbangabe ist erlaubt.
  • offx
    Bestimmt die relative Position des Schattens vom Quellelement auf der x-Achse (horizontal) in Pixel. Positive Angaben verschieben den Schatten nach rechts und negative nach links.
  • offy
    Bestimmt die relative Position des Schattens vom Quellelement auf der y-Achse (vertikal) in Pixel. Positive Angaben verschieben den Schatten nach unten und negative nach oben.

Eine vollständige Angabe könnte filter:DropShadow(color:black, offx=5, offy=5) lauten.

# FlipH

Mit dem FlipH-Filter können Sie eine Grafik horizontal spiegeln und entsprechend im Browser darstellen lassen. Dieser Filter erwartet keine Parameter, daher lautet die Angabe filter:FlipH().

# FlipV

Mit dem FlipV-Filter können Sie eine Grafik vertikal spiegeln und entsprechend im Browser darstellen lassen. Dieser Filter erwartet keine Parameter, daher lautet die Angabe filter:FlipV().

Auch eine Kombination dieser beiden Filter (wie auch aller anderen Filter) ist möglich. Schreiben Sie die einzelnen Filter durch ein Leerzeichen getrennt hintereinander. Das folgende Beispiel spiegelt eine Grafik sowohl horizontal als auch vertikal:

filter:flipH() flipV();

# Glow

Dieser Filter erzeugt einen »glühenden Rand« um ein Element. Dabei ist die Anwendung auf ein Textelement oder eine Grafik möglich. Der Filter erwartet die folgenden Parameter:

  • color
    Legt die Farbe für den Glüheffekt fest. Es sind alle Farbangaben erlaubt.
  • strength
    Definiert die Stärke des Glüheffekts. Erlaubt sind Angaben zwischen 0 und 255, wobei 0 für keinen und 255 für den stärksten Effekt steht.

Eine vollständige Angabe könnte filter:Glow(color:green, strength=15) lauten.

# Gray

Mit dem Gray-Filter können Sie ein Farbbild in Graustufen im Browser ausgeben. Dabei stehen 256 Graustufen zur Verfügung, auf die Sie jedoch keinen weiteren Einfluss haben. Deshalb erwartet dieser Filter auch keine Parameter, und die Angabe lautet filter:gray().

# Invert

Der Invert-Filter invertiert die Farben einer Grafik und stellt sie entsprechend im Browser dar. Beim Invertieren werden die aktuellen Farben des Bilds in Ihre Komplementärfarben umgewandelt. Da dieser Filter keine Parameter erwartet, lautet die Notation filter:invert().

# Mask

Mit dem Mask-Filter konvertieren Sie eine GIF-Grafik insofern, als dass der sichtbare und der transparente Bereich vertauscht werden. Der vorher transparente Bereich wird mit der Farbe dargestellt, die im color-Parameter angegeben wurde, und die vorher sichtbaren Pixel werden transparent dargestellt. Eine Angabe könnte wie folgt lauten: filter:mask(color=black).

# Shadow

Der Shadow-Filter funktioniert ähnlich wie DropShadow. Jedoch wird bei dem Shadow-Filter ein verlaufender Schatten erzeugt. Der Filter erwartet die folgenden Parameter:

  • color
    Die Farbe des Verlaufsschattens. Erlaubt ist jede beliebige Farbangabe.
  • direction
    Bestimmt den Winkel des Verlaufsschattens. Erlaubt sind die Winkel 0, 45, 90, 135, 180, 225, 270 und 315 Grad.

Eine typische Angabe ist filter:Shadow(color:darkgray, direction=135).

# Wave

Dieser Filter erzeugt einen Verzerrungseffekt ähnlich wie bei Wärmeschlieren und kann sowohl auf Text- als auch auf Grafikelemente angewendet werden. Die folgenden Parameter bestimmen das Ergebnis:

  • freq
    Legt die Wellenfrequenz fest. Je höher der Wert, desto stärker ist die Verzerrung; je niedriger der Wert, desto geringer ist die Verzerrung.
  • light
    Legt die Beleuchtungsstärke für die Verzerrung in Prozent fest. Erlaubt sind Werte zwischen 0 und 100.
  • phase
    Legt den Beginn der Sinuswelle in Prozent fest. 0 bedeutet 0, 25 = 90, 50 = 180 und 75 = 270.
  • strength
    Legt die Stärke des Effekts fest. Je höher der Wert ist, desto stärker ist der Effekt.

Ein vollständiges Beispiel könnte wie folgt aussehen:

filter:wave(freq=25, light=75, phase=25, strength=15);

# XRay

Dieser Filter konvertiert eine Farbgrafik in Graustufen und erzeugt davon ein Negativ. Da dieser Filter keine Parameter erwartet, lautet die Notation filter:xray().

# Weitere Informationen

Unter der Internetadresse http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/filters.asp können Sie im Microsoft Developer Network weitere Informationen zum Thema IE-Filter finden. Auch die Verwendung der DirectX-Schnittstelle durch Filter wird dort eingehender erläutert.

# Printmedien

Je nachdem, welche Informationen Sie auf einer Webseite zur Verfügung stellen möchten, könnte es für den Benutzer interessant sein, diese in ausgedruckter Form zu erhalten. Gerade bei längeren Beiträgen ist das Lesen auf dem Papier wesentlich einfacher als an einem Bildschirm. Genau für diesen Zweck bietet Ihnen CSS 2.0 die Möglichkeit, spezielle Eigenschaften zu verwenden, die eine Druckausgabe optimieren.

Leider verweigern noch viele Browser die Unterstützung dieser speziellen CSS-Eigenschaften. Da sie aber in kommenden Versionen hoffentlich implementiert werden, werde ich Ihnen diese Eigenschaften im Folgenden kurz vorstellen.

# Medientyp festlegen

Um für die Druckausgabe ein Seitenlayout zu definieren, müssen Sie im zentralen Stylesheet-Bereich den Selektor @page notieren. In geschweiften Klammern dahinter folgen dann die Eigenschaften.

<style type="text/css">  
<!--  
    @page { Eigenschaft:Wert; }  
//-->  
</style>

Für die Ausgabe auf dem Bildschirm ignoriert der Browser diese Angaben, da der Monitor kein seitenbezogenes Ausgabemedium ist.

# Seitengröße und -ränder

Mit den Eigenschaften size (dt. Größe) und margin (dt. Abstand) können Sie die Abmessungen der Seite und die Außenränder bestimmen. Für size können Sie entweder eines der Schlüsselwörter auto (Einstellung wird vom Drucker übernommen), landscape (Querformat) oder portrait (Hochformat) verwenden oder zwei numerische Angaben machen. Bei der letzten Variante steht der erste Wert für die Breite und der zweite Wert für die Höhe.

@page { size:landscape; }   /* Querformat */  
@page { size:21cm 29.7cm; } /* DIN-A4 Hochformat */

Die Seitenränder werden entweder einzeln über margin-top, margin-bottom, margin-left und margin-right oder zusammen über margin festgelegt. Dabei ist jeweils eine numerische Angabe erlaubt.

@page { size:portrait;  
        margin-top:2.5cm;  
        margin-bottom:2.5cm;  
        margin-left:3cm;  
        margin-right:2cm; }

# Seitenumbruch

An bestimmten Stellen können Sie einen Seitenumbruch erzwingen oder unterdrücken, sodass z. B. explizit vor oder nach einem Element ein Seitenumbruch erfolgt oder nicht erfolgt. Dafür stehen die Eigenschaften page-break-before (dt. Seitenumbruch vor Element) und page-break-after (dt. Seitenumbruch nach einem Element) zur Verfügung. Beide Eigenschaften können einen der folgenden Werte erhalten:

  • always
    Immer ein Seitenumbruch vor dem Element.
  • avoid
    Nie ein Seitenumbruch vor dem Element.
  • inherit
    Die Seitenumbruchangabe vom Elternelement übernehmen.
  • auto
    Der Seitenumbruch wird durch den Browser bestimmt.

Beide Eigenschaften sollten bei dem entsprechenden Element entweder im zentralen Stylesheet-Bereich oder mit dem Attribut style an die Elemente übergeben werden.

h1 { page-break-before:always; }

Beachten Sie, dass der Internet Explorer bereits seit der Version 4 diese beiden Eigenschaften vollständig unterstützt.

# Allein stehende Zeilen

Es kann vorkommen, dass eine Zeile eines Textabsatzes (p-Element) allein auf einer Seite steht, z. B. als erste oder letzte Zeile. Dies können Sie verhindern, indem Sie festlegen, wie viele Zeilen eines Textabsatzes mindestens auf einer Seite stehen sollen. Der zu notierende Wert entspricht dann der Mindestzahl an Zeilen.

Für Zeilen am Seitenende wird die Eigenschaft orphans und für Zeilen am Seitenanfang die Eigenschaft widows verwendet.

@page { orphans:4;   /* mind. die ersten vier Zeilen */  
        widows:6; }  /* mind. die letzten sechs Zeilen */

# Schnittmarken

Wenn Sie eine Seitengröße definieren, die kleiner ist als das Papier, auf dem gedruckt wird, können Sie mit der Eigenschaft marks Markierungen setzen bzw. drucken, damit Ihre festgelegte Seitengröße auf dem größeren Papier auch erkennbar wird und an den entsprechenden Stellen geschnitten werden kann. Auch Markierungen für die Belichtung mit dem Satzspiegel (Passermarken) können hinzugefügt werden.

  • none – Keine Markierungen
  • crop – Schnittmarken setzen
  • cross – Passermarken setzen

Wenn Sie sowohl Schnitt- als auch Passermarken setzen möchten, notieren Sie beide Werte getrennt durch ein Leerzeichen:

@page { size:10cm 10cm;  
        marks:crop none; }  
@page { size:12cm 12cm;  
        marks:crop; }

# Linke, rechte und erste Seite

Sie können für die erste Seite eines Drucks und für die linken und rechten Seiten unterschiedliche Einstellungen festlegen, um bei doppelseitigem Druck z. B. die korrekten Seitenränder zum Lochen einzuhalten. Dafür werden die Pseudoformate :first, :left und :right für den @page-Selektor notiert.

@page       { size:portrait;  
              margin-top:2cm;  
              margin-bottom:4cm; }  
@page:left  { margin-left:2cm;  
              margin-right:3cm; }  
@page:right { margin-left:3cm;  
              margin-right:2cm; }

# Zusammenfassung

  • Mit der Eigenschaft cursor können Sie den Mauszeiger verändern, wenn der Benutzer die Maus über ein bestimmtes Element bewegt.
  • Mit acht verschiedenen Eigenschaften können Sie im Internet Explorer das Aussehen der Bildlaufleisten farblich beeinflussen.
  • Der Internet Explorer kennt so genannte Filter, die – ähnlich wie in Bildbearbeitungsprogrammen – Effekte über einen Text oder eine Grafik legen können.
  • Für die Druckausgabe können Sie mit dem Selektor @page die Seite für einen Ausdruck in der Größe, den Seitenabständen usw. verändern.

# Fragen und Übungen

  1. Was müsssen Sie notieren, wenn sich der Mauszeiger in den Typ wait umwandeln soll, sobald ein Benutzer seine Maus über ein beliebiges h1-Element bewegt?
  2. Verändern Sie die Farbe der Bildlaufleisten nach Ihren eigenen Wünschen (natürlich nur für Leser, die den IE auf ihrem System installiert haben).
  3. Mit welcher Anweisung können Sie eine Grafik gleichzeitig horizontal und vertikal spiegeln?
  4. Welche Eigenschaften zum Formatieren einer Druckseite interpretiert der Internet Explorer? Testen Sie es notfalls aus.

← Grundlagen →