CSS/Tutorials/Gestaltungstipps

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

CSS-basierte Layouts und die Möglichkeiten der neuen CSS3-Eigenschaften können dazu verleiten, jede Box mit einem durchgehenden, gestrichelten oder gar gepunkteten Rahmen abzugrenzen. Dies ist bei den hier aufgeführten Beispielen nur zu Demonstrationszwecken der Fall.

Empfehlung:
  • Seien Sie kreativ und nutzen Sie die CSS-Eigenschaft border für Rahmen sinnvoll und sparsam.
  • Wenn Sie Bereiche mit Rahmen, Schatten, einfachen Linien oder über eine Hintergrundfarbe abgrenzen, setzen Sie für den enthaltenen Text auch einen passenden Innenabstand.


Bringen Sie Farbe in Ihre Seiten - aber übertreiben Sie es nicht.

Empfehlung:
  • Wählen Sie zueinander passende, ähnliche Farbtöne. Darüber hinaus können Sie Akzente in Komplementärfarben setzen. Achten Sie aber bitte auf einen ausreichenden Farb- und Helligkeitskontrast, damit Ihre Texte auch ohne Anstrengung gelesen werden können. Hierzu eignet sich dunkle Schrift vor hellem Hintergrund am besten.
  • Setzen Sie bitte auch nicht voraus, dass in jedem Browser Schwarz als Schriftfarbe und Weiß als Hintergrundfarbe voreingestellt ist. Wenn Sie den Hintergrund definieren, vergessen Sie auf keinen Fall, die Vordergrundfarben und Schriftfarben anzugeben, da Sie hier nicht immer mit einheitlichen Voreinstellungen rechnen können.
  • Es ist für Ihre Besucher hilfreich, wenn besuchte Links von unbesuchten farblich zu unterscheiden sind.


Nutzen Sie die erweiterten Möglichkeiten, die ein CSS-basiertes Layout bietet und denken Sie nicht in Spalten, sondern lassen Sie ein Umfließen von Elementen zu.

Empfehlung:
  • Lassen Sie floatende Elemente bei zu schmalen Fenstern mittels media queries untereinander anordnen - das ist benutzerfreundlicher, als einen Text horizontal zu scrollen.