Mon Coiffeur - Mein Friseur
Wir laden Sie herzlich ein in unseren Salon...

Index ••• Die Startseite Home

Information

Wenn Sie die Beispiel-Links index bis index5 (ganz oben im Seiten-Menü) durchklicken, sehen Sie das wir auf jeder Seite das Foto im Bilderrahmen wechseln. Übrigens varieren wir auch die Zitat-Sprüche oder die kleinen Bilder unterhalb der letzten Seitenbox in der linken Spalte. Nachdem der Text-Link geklickt ist, tauscht dieser den Platz von links nach rechts und rastet dort ein, mit einem kleinen Pfeil versehen. Somit weiß man immer auf welcher Seite man sich gerade befindet.

Klicken Sie auf index5.html für mehr Info zu den Menüs bzw. Verlinkungen, denn wir haben z.b. auch Bilder verlinkt. Dort erfahren Sie auch mehr zur Halbtransparenz der Felder, welche ja die Hintergrundgrafik zu einem gewissen Anteil durscheinen lassen.

Einführung Technik

Technik

Diese Vorlage setzt die CSS3-Technik ein.

Hinweis

Mit CSS3 kann man jetzt nur per einfachem CSS3-Quellcode Dinge wie Rundungen (border-radius), Schatten-Aussen (box-shadow) sowie auch Schatten-Innen (box-shadow inset), genauso wie Textschatten (text-shadow), Schrägstellungen (transform:rotate) erstellen, die vorher nur über den Umweg übers Grafikprogramm möglich waren. Sogar Animationen sind möglich. (Hier haben wir "Spinnig Icons" eingebaut. Bewegen Sie dazu die Maus über die kleinen "Social-Network-Icons" im Fussbereich. Diese werden dann animiert, sprich sie drehen sich (Drehrichtung und Geschwindigkeit einstellbar). Eine weitere Animation finden bei den kleinen Fotos auf der Startseite "(Leucht-Rahmen)", welche sich unterhalb des Menüs befinden.

Alles funktioniert in modernen Browsern nur per CSS und ohne Javascript.

So sehen die Befehle aus

Wir erklären Ihnen box-shadow hier auf der Seite index2.html, text-shadow auf index3.html und border-radius auf index4.html

Name der Homepage

Dieses Layout heißt "Mon Coiffeur - Mein Friseur". Die Stärke der Transparenz lässt sich einstellen, die Hintergrundgrafik kann also mehr oder weninger durscheinen.

Aufzählungen - Liste Numerisch

Nachfolgend als Beispiel eine Liste ohne Verlinkung sowie mit Standard-Aufzählungszeichen Numerisch-Römisch. Die Ziffern sind automatisch fortlaufend. Damit wir dem Aufzählungszeichen und dem Listentext jeweils eine andere Farbe zuweisen konnten, wurde der Listentext mit einem span umschlossen.

  1. Terra
  2. Universum
  3. Profundis
  4. Magna

Weiter und Info

Beispiel-Verlinkungen

Sie befinden sich auf der Seite index.html.
Hier geht es weiter zu den Seiten index2.html, index3.html, index4.html und index5.html.
Michael Muster-Meierschnitt
In der Scheerengasse 45
60459 Föhnfurt am Main