Design mit CSS Info

Obwohl Webworker viel Zeit damit verbringen, Browserprobleme zu lösen und sich die neuesten Tricks anzueignen, sollten wir nicht vergessen, dass wir in erster Linie Designer sind. Stylesheets helfen Ihnen dabei, Ihre Designideen Realität werden zu lassen. Gutes Design kann Sie dabei unterstützen, die Aufmerksamkeit der Benutzer Ihrer Website zu gewinnen und zu halten...

Rollover-Effekte ohne Bilder erzeugen mit :hover

Sie möchten Ihre Webseiten mit Rollover-Effekte versehen, ohne hierfür JavaScript einsetzen zu müssen. Verwenden Sie die Pseudoklasse :hover, um beim Überfahren eines Elements seine Darstellung zu ändern. Am häufigsten werden Rollover-Effekte für Links definiert. Hier haben wir zunächst die standardmäßige Lenkunterstreichung entfernt. Damit die Links trotzdem vom...

Ein Farbschema für eine Website erstellen

Sie möchten Ihre Website mit einem durchgängigen Farbschema versehen. Verwenden Sie eines der vielen Onlinewerkzeuge für die Auswahl eines passenden Farbschemas für Ihre Website. In den meisten Fällen wählen Sie zunächst eine Grundfarbe. Darauf basierend werden dann mehr oder weniger automatisch dazu passende Farben ausgewählt. Das Auswahlprinzip lässt sich...

Ausreichenden Farbkontrast auf der Website

Ihre Website soll auch für Benutzer zugänglich sein, die bestimmte Farben nicht oder nur schwer wahrnehmen können. Versehen Sie die inhaltlich wichtigen Dinge mit ausreichendem Kontrast. Verwenden Sie für Text immer die Eigenschaften color (Vordergrundfarbe, Schrift und Tabellen) und background-color (Hintergrundfarbe) gemeinsam. Das Kontrastverhältnis...

Farbverläufe mit CSS3 für die Website definieren

Sie möchten Farbverläufe für das Design Ihrer Website einsetzen. Dabei soll nach Möglichkeit auf die Verwendung von Grafiken verzichtet werden. Definieren Sie den Wert der Eigenschaft background-image anhand der neuen Farbverlaufsfunktionen aus dem CSS3-Modul Image Values and Replaced Content. Um den in Abbildung gezeigten vertikalen Farbverlauf zu erzeugen, haben wir...

Transparenzen erzeugen mit opacity

Sie möchten bestimmte Elemente mit Transparenzen versehen. Nach Möglichkeit soll auf den Einsatz von Grafiken verzichtet werden. Verwenden Sie die CSS3-Eigenschaft opacity, um zu steuern, wie durchscheinend ein Element sein soll. Zunächst werden Navigationslinks halb durchscheinend angezeigt. Sobald sich aber der Mauszeiger darüber befindet, wird die Transparenz...

Abgerundete Ecken mit border-radius in CSS3

Sie möchten ein Element mit abgerundeten Ecken versehen, ohne hierfür mit Grafiken oder zusätzlichen nicht semantischen HTML-Elementen arbeiten zu müssen. Verwenden Sie die CSS3-Eigenschaft border-radius:. Dies ist die einfachste Form. Die oben stehende Deklaration erzeugt für alle Ecken des Elements eine gleichmäßige Rundung mit einem Radius von 0.5em. Vergessen....

Schattenwürfe mit CSS3 erzeugen mit box-shadow

Sie möchten ein Element mit einem Schattenwurf versehen. Verwenden Sie die CSS3-Eigenschaft box-shadow bzw. die passende Präfixschreibweise. In dieser Regel legen die ersten beiden Teilwerte (0.2em 0.2em) die horizontale und vertikale Verschiebung des Schattens fest. Der dritte Wert (0.5em) definiert den Radius für die Weichzeichnung des Schattens, und der vierte Wert gibt die...

Elemente umformen und erzeugen mit transform

Sie möchten die Elemente einer Seite verschieben, drehen, verzerren oder strecken. Verwenden Sie die CSS3-Eigenschaft transform in der Präfixschreibweise. Um ein Element zu verändern, stehen verschiedene Funktionen zur Verfügung. Soll das Element ausgehend von seiner ursprünglichen Position verschoben werden, verwenden Sie die Funktionen translateX()...

Einfache Animationen erstellen mit transition

Sie möchten den Wechsel von Eigenschaftswerten zum Beispiel mit den Pseudoklassen :focus oder :hover animieren. Verwenden Sie die CSS3-Eigenschaft transition bzw. die entsprechenden Einzeleigenschaften in der Präfixschreibweise. Das folgende Beispiel verwendet ein div-Element mit der ID #transit. Wie Sie sehen, haben wir für das Pseudoelement :hover...