Das Ziel sollte sein, eine Website überall benutzbar zu machen. Sieht sie darüber hinaus auch noch gut aus, ist praktisch bedienbar und visuell ansprechend, wird jeder Besucher das zu schätzen wissen. CSS trägt einen grossen Teil dazu bei.
Vorlagen
Ich zeige auf dieser Seite einige in der letzten Zeit verfasste Vorlagen. Diese sind als Ausgangspunkt für mögliche Webprojekte zu verstehen und nur zur Ansicht gedacht. Die Detailansichten werden über die verlinkten Projekttitel und Vorschaubilder erreicht. Alle Links innerhalb dieser Ansichten sind nur Beispiellinks und daher auch nicht verknüpft. Die Headergrafiken, Schriftgrössen, Hintergrund- und Linienfarben, und viele weitere Details sind veränder- und anpassbar.
Ich freue mich über von aussen eingebracht Ideen und Vorstellungen neuer Webprojekte. Kontaktiere mich einfach ! Unter dem Link "Kontakt" findest du Telefonnummer, Emailadresse und ein Kontaktformular.
Eine Vorlage in herbstlichen Farben namens "Autumn Leaves". Die Farbgebung in satten Grün- und Orangetönen wird auf der ganzen Seite konsequent beibehalten und erzeugt herbstliche Stimmung.
Der Inhaltsbereich ist als Ringbuch gestaltet und mit kaum sichtbarer Papierstruktur hinterlegt. Das darüberliegende Menü ist grafisch verziert und bringt einen weichen MouseOver Effekt.
Ziergrafiken neben der linken und rechten Seite des Inhaltsberichs wie auch links von den angeführten Aufzählungspunkten runden dieses Template ab.
Ein fixes Layout mit 940 Pixel Breite das für viele Möglichkeiten von Veränderungen offen ist.
Ein Tabellenfreies in warmen Farben gehaltenes CSS Design. Bilder, Linktexte und Headergrafik können natürlich Themenbezogen angepasst werden. Mit einer fixen Breite von 946 Pixel bedient dieses Layout auch kleinere Bildschirme, stellt aber genügend Raum für Inhalte zur Verfügung.
Der "Hingucker" ist das schräg gehaltene horizontale Hauptmenü nach einer Idee von Stu Nicholls das sich der Wortbreite anpasst. Werden Untermenüpunkte benötigt, sind diese immer sichtbar auf der linken Seite angeordnet.
Weiche, dem Kopfteil angepasste Verzierungen, abgesetzte Untermenüpunkte und der harmonische MouseOver Effekt passen das linke Menü dem Seitendesign an.
Grafiken sind mit einer dünnen Doppellinie versehen und können im Text links oder rechts aber auch frei platziert werden. Den letzten Akzent setzt der farbig vergrösserte erste Buchstabe jedes Absatzes.
Dandelion ist eine klare, in einer Farbe gehaltene Vorlage, die sich universell einsetzten lässt. Die hier gewählte Farbe, in diesem Fall grün, ist je nach Wahl des Headerthemas auf der gesamten Seite anpassbar.
Die Topmenüführung passt sich der Wortlänge an und wird durch die rechts ausgelegten Seitenmenüs ergänzt.
Leichter, beidseitiger Schattenwurf im oberen Bereich, eine farblich zurückgenommene Wiederholung der Headergrafik und ein unaufdringlicher Abschluss am Fuss dieser Seite lassen den Inhalten den Vortritt.
Dieses ausschliesslich auf CSS basierende Design ist ein Beispiel, wie aus ungewöhnlichen Formen eine besondere aber durchaus verwendbare Seite entstehen kann.
Die Kreisförmige Hauptgrafik wird von der transparenten Textebene überlagert und läuft nach unten hin in zartem Orange des Hintergrunds aus.
Das aus dem gleichen Symbolbild erzeugte Menü bringt als Hover (MouseOver) Effekt ein kontrastreiches Gelb mit roter Schriftfarbe die sich auch am Anfang jedes Absatzes wiederfindet
Schmale Hintergrundlinien die sich nach unten in Orange auflösen, die genau auf der Textebene platzierte Pflanze und eine Themenbezogene Überschrift komplettiern dieses Template. Yin-Yang ist ein, zugegebenermassen nicht häufig einsetzbares Design das aus Testarbeiten hervorging, aber eindrücklich zeigt, was für Möglichkeiten CSS für die Webseitengestaltung bietet.
Dieses in sommerlichen Farben gehaltene CSS Design bietet genügend Platz für verschiedene Inhalte.
Getrennt durch grafische Trennlinien und unterschiedliche Schriftgrössen wird eine aufgelockerte Seitengestaltung erreicht. Die Menüpunkte werden auf der rechten Seite für eine kurze Übersicht angeführt und sind über die Menüleiste oben zu erreichen. Abgesetzte Rahmenlinien, Ziergrafiken neben den Aufzählungspunkten und vergrösserte Anfangsbuchstaben runden den Gesamteindruck harmonisch ab.
Hier ein Design das ich selbst im Moment für meine Domain http://css-webdesign.info in Verwendung habe. Es bietet viel offenen Raum der 80% der Bildschirmbreite ausfüllt. Eingefasst nur durch einen Pixel - Doppelrahmen. Transparente Flächen lassen die Hintergrundgrafiken bei jeder Bildschirmgrösse durchscheinen. Der farbige Text über der Ziergrafik könnte das Wichtigste von jeder Seite kurz zusammenfassen oder die Hauptaussage des gesamten Webauftritts gleichbleibend beibehalten. Das von Stu Nicholls entwickelte Menü ist bis zu 5 Unterebenen ausklappbar und das, ohne jegliche Javascript Unterstützung.
