CSS einfach erklärt

Das Designen einer Website und das Einfügen von Content (Inhalt) sind im Regelfall zwei unabhängige Prozesse. Das ist problematisch, da die Wirkung des Designs erst vollständig beurteilt werden kann, wenn insbesondere Textinhalte vorhanden ist. Webdesigner behelfen sich deshalb mit fiktiven Texten, die als Blindtext bezeichnet werden. Ausdenken braucht man sich einen solchen Text nicht selbst, zahlreiche Websites bieten sogenannte Blindtextgeneratoren an. Grundsätzlich gibt es zwei Gattungen: In der einfachen Variante wird reiner Fließtext angeboten, komfortablere Varianten bieten zusätzliche (X)HTML-Elemente wie Listen oder Tabellen.

Mehr lesen … »

Listen sind zum Strukturieren von Informationen ein unverzichtbares Stilmittel beim Webdesign. Bei einer nummerierten Liste wird jedem Listeneintrag aufsteigend eine Nummer vorangestellt, bei einer Aufzählungsliste jedem Listeneintrag ein Aufzählungssymbol. Möchten Sie die vorgegebenen (HTML) Nummerierung oder das Symbol verändern gibt es zwei Möglichkeiten:

1. für die Symbole Werte verwenden, die die CSS-Eigenschaft list-style-type anbietet
2. mithilfe der CSS-Eingenschaft list-style-image eine eigene (ggf. animierte) Grafik als Symbol verwenden
3. Liste und /  oder Listeneintrag mit CSS-Eigenschaften designen

1. Möglichkeit: Die Eigenschaft list-style-type

Das W3C sieht insgesamt 16 mögliche Werte für die Eigenschaft list-style-type vor. Da insbesondere der Internet Explorer bei den meisten Werten nur eine notdürftige Unterstützung gewährleistet, benutzen die meisten Webdesigner lediglich folgende Werte, die dafür allerdings in allen gängigen Browsern funktionieren:

• disc = gefüllter Kreis
• circle = leerer Kreis
• square = gefülltes Quadrat
• none = kein Listensymbol

Wenn Sie sich trotzdem an die anderen Werte heranwagen möchten, schauen Sie sich zunächst auf quirksmode.org die Kompatibilitätsliste an.

2. Möglichkeit: Die Eigenschaft list-style-image

Diese Eigenschaft ersetzt das standardmäßige Aufzählungszeichen. Für den Fall, dass das definierte Bild aus irgendeinem Grund nicht anzeigbar ist, kann zusätzlich eine Alternative mit list-style-type angegeben werden, ansonsten wird auf das Standardaufzählungszeichen zurückgegriffen. Beispiel:

1
2
3
4

ul {
  list-style-type: disc;
  list-style-image: url(http://www.css-einfach.de/downloads/pfeil5.gif);
}

Zusätzliche Effekte lassen sich hierbei durch den Einsatz animierter GIF-Grafiken erzielen.

3. Möglichkeit: Rein mit CSS-Eigenschaften designen

Hierzu kann einfach munter auf die CSS-Eigenschaften zurückgegriffen, die zur Schriftformatierung zur Verfügung stehen. Bei einer nummerierten Liste kann sowohl die Durchnummerierung wie der Listeneintrag formatiert werden, bei Aufzählungslisten freilich nur der Listeneintrag. Nachfolgend ein Beispiel für eine nummerierten Liste:

1
2
3
4
5
6
7
8
9
10

ol {
font-style: italic;
font-size: xx-large;
font-family: fantasy;
}
ol p {
font-style: normal;
font-size: medium;
font-family: sans-serif;
}

Seit einiger Zeit ist es auf der Homepage von Mozilla möglich, Sammlungen seiner Firefox-Erweiterungen anzulegen und zu veröffentlichen. Im Kontext des CSS-Buches habe ich eine solche Zusammenfassung erstellt. Mehr lesen … »

Häufig werden auf Websites Hintergrundbilder und Farbverläufe als Gestaltungsmittel eingesetzt. Grundlage für diese Techniken ist die CSS-Eigenschaft background-image, mit der einem HTML-Element ein Hintergrundbild zugewiesen wird. Im Buch hatte ich u. a. die Anwendung in Verbindung mit background-repeat und background-color erläutert.

Hintergrundbilder werden gewöhnlich in Bildbearbeitungsprogrammen erstellt, deren Bedienung Anfängern oftmals Probleme bereitet. Eine erstaunlich einfach zu bedienende Alternative zur Erstellung solcher Hintergrund-Pattern bietet der Onlinegenerator BgPatterns.

Maximal vier Schritte sind notwendig:

1. Über die Registerkarte “Images” wählen Sie ein grundsätzliches Motiv inklusive Größe, Anordnung und Deckkraft aus.
2. Über die Registerkarte “Canvas” fügen Sie ggf. eine Oberflächentextur hinzu.
3. Über die Registerkarte “Colors” können Sie Vorder- und Hintergrundfarbe verändern.
4. Über die Registerkarte “Rotate” können Sie das Motiv rotieren lassen.

Alle Veränderungen werden in dem rechten Vorschaufenster in Echtzeit berücksichtigt. Mit einem Klick auf “Apply background” wird das Bildmotiv auf den Hintergrund angewandt, wodurch ein konkreter Eindruck vermittelt wird. Über “Download image” lässt sich das Bild als JPEG-Bild herunterladen. Über “Save to My patterns” kann man seinen Entwurf auch online abspeichern, allerdings ist zunächst eine Registrierung notwendig.

Interessant ist ferner noch die Möglichkeit, dass im unteren Bereich der Website die von anderen Usern erstellten Kacheln als Inspirationsquelle angesehen und modifiziert werden können.

Getrübt wird der positive Gesamteindruck lediglich durch die fehlende Möglichkeit eigene Motive hochzuladen, und das Bilder lediglich als JPEG-File abgespeichert werden können, was je nach Motiv Qualitätseinbußen zur Folge haben kann.

Wer gar nicht selbst Hand anlegen möchte, findet eine kleine aber feine Auswahl bei Pattern Wall. Eine riesige Auswahl bietet hingegen DinPatterns, und hier werden auch verschiedene Bildformate angeboten (neben JPG auch GIF, und PNG.). Empfehlenswert ist schließlich noch patterrific. Allerdings ist hier - im Gegensatz zu allen anderen bisher vorgestellten Diensten - die Nutzung der Vorlagen nur bei privaten Websites kostenfrei, bei kommerziellen Projekten fällt eine (geringe) Lizenzgebühr an.

Fortschritte beim Erlernen von CSS lassen sich vor allem beim Analysieren fremder Designs erzielen. Dass dies sowohl für abschreckende wie auch nachahmenswerte Beispiele gilt, hatte ich bereits in einem früheren Beitrag angemerkt.

Wer Inspirationsquellen speziell für Tabellen benötigt, sollte mal die Sammlung CSS Table Gallery anschauen. Einfach auf den “Design Name” klicken, und schon wird die jeweilige Formatierung angeigt. Über den Link “Download” wird der CSS-Code übersichtlich angezeigt.