Homepage Vorlagen

¹= Transparenz/Farbfilter | Beim 'CSS-rgba-Wert' können Sie Transparenz-Farbe und Deckungsgrad individuell einstellen. Der Wert setzt sich zusammen aus dem RGB-Farbwert (die ersten drei Stellen) sowie der Deckkraft (die vierte Stelle). Einige Beispiele wie folgt, hier auf 'CSS-background' gesetzt::
- background:rgba(0,0,0,0.4) = Farbe Schwarz, Transparenz 60%.
- background:rgba(255,255,255,0.7) = Farbe Weiß, Transparenz 30%.
- background:rgba(255,0,0,0.5) = Farbe Rot, Transparenz 50%.
Mit Werten von 0.1 bis 0.9 (wobei gilt: 0=volltransparent und 1= gar keine Transparenz), stellen Sie also mit der vierten Stelle die Deckkraft ein.

¹ = Beach-CSS-Animation | Strand-Animation per CSS-Keyframes mit Font-Icons: Die Animation beginnn mit einer Verzögerung (delay) von 12 Sekunden für den Schwimmer und 14 Sekunden für den Hund sowie den Ball. Diese Werte sind genauso veränderbar, wie die Anzahl der Durchläufe für die versch. genannten Objekte, welche wir auf eine Anzahl von unter 10 begrenzt haben. Gerne ändern Sie z.B.die Werte mit weitaus mehr oder weitaus weniger Durchläufen oder Sie setzen für einen unendlichen Durchlauf das Schlüsselwort 'infinite'. Übrigens landet der Hund nach dem 'in die Höhe springen' auf ganz realistischer Weise erst auf den Vorderpfoten und danach auf den Hinterpfoten.

²= One Pager | Dies ist ein responsive One-Pager. Auch bezeichnet als Single-Page-Website. Im Prinzip bedeutet es, das die Webseite nur aus einem einzigen Webdokument, also nur einer HTML-Seite besteht. Klicken Sie die Links im Menü und sehen Sie, wie mittels nur einzigen HTML-Seite die verschiedenen Links als Boxfenster innerhalb der eigenen Seite aufgerufen werden.

³ = Full-Screen-Only-Site | Volle Bildschirm-Ansicht: Während die Gesamtkonstruktion hier bei allen Auflösungen nicht mitscrollt und immer jeweils responsive das Display ausfüllt, lassen sich die öffnenden Inhalts-Fenster (Box-Fenster) sehr wohl scrollen.

¹= One Pager | Dies ist ein responsive One-Pager. Auch bezeichnet als Single-Page-Website. Im Prinzip bedeutet es, das die Webseite nur aus einem einzigen Webdokument, also nur einer HTML-Seite besteht. Klicken Sie die Links im Menü und sehen Sie, wie mittels nur einzigen HTML-Seite die verschiedenen Links als Boxfenster innerhalb der eigenen Seite aufgerufen werden.

² = CSS-Animation KREISEN AUF RUNDEN HAARLINIEN | Objekte (Font-Icons) kreisen mit versch. Geschwindigkeiten und Richtungen um einen Mittelpunkt - und zwar spektakulär, weil nicht irgendwo im freien Raum, sondern exakt dünnen kreisförmigen Haarlinien folgend.

1. Äußerer Kreis: Ein Rakete-Icon.
2. Mittlerer Kreis: Ein Satellit-Icon.
3. Innerer Kreis: 8 x Icons, aufgeteilt wie folgt:
1. ) Vier Stück Social Media Icons = verlinkt zum jeweiligen Social-Media-Anbieter.
2. ) Vier Stück diverse Icons = öffnen Boxfenster innerhalb der eigenen Seite.

Diese CSS-Animaton ist ganz ohne Grafiken erstellt. Noch eine Besonderheit: Die 8 Font-Icons des inneren Rings bleiben beim Kreisen immer in waagerechter Position. Das ist nicht selbstverständlich, denn bei einem einfachen Kreisen per CSS-Animation um einen Mittelpunkt herum würde ja das oberste Icon, wenn es sich an unterer Position befindet, auf dem Kopf stehen.
Unsere Lösung dafür ist es, alle 8 Icons mit gleicher Geschwindigkeit per Block rechts herum und jedes einzelne Icon mit einer zweiten Animation links herum drehen zu lassen.
Man kann es also physikalisch vergleichen mit einem Riesenrad, welches ja auch technisch dafür sorgt, das die einzelnen Gondeln mitsamt der Menschen darin trotz des Kreisens niemals Kopf stehen müssen.

³ = Full-Screen-Only-Site | Volle Bildschirm-Ansicht: Während die Gesamtkonstruktion hier bei allen Auflösungen nicht mitscrollt und immer jeweils responsive das Display ausfüllt, lassen sich die öffnenden Inhalts-Fenster (Box-Fenster) sehr wohl scrollen.