Introducing Website

CSS-Bildwechsler

Der Slider ganz oben im Header ist nur per CSS erstellt und animiert, inklusive des Bildanzeigers mit den 5 kleinen Kreisen und enthält zusätzlich eine zweite CSS-Animation, nämlich eine 'Kamerafahrt', d.h. jedes Foto wird einmal von oben nach unten abgefahren und kehrt dann zurück zur Mitte bevor es wechselt.




Übrigens: Auf der Seite Sextus lasssen wir die Slideshow rückwärts ablaufen (animation-direction: reverse). Den Slider finden in der Datei 'animation.css'.

Weiterer CSS-Wechsler: Etwas weiter unten bei 'Einige Informationen' haben wir noch einen Wechsler für Sie eingebaut. Dieser funktioniert nach dem selben Prinzip wie der Bildwechsler, es werden dort aber Text bzw. Bild und Text getauscht.

About Us

Nature

Lorem ipsum dolor sit amet, meliore consectetuer definitiones in per. Eu suas vituperata ius, errem legendos cu pro. Vis dicant principes ei...

Weiter

Human

Ich bin ein längerer Text. Kein Problem. Die Boxen schließen trotzdem automatisch alle, wenn sie nebeneinander stehen, auf der gleichen Höhe ab. Scripta legimus cum ad, viris laboramus voluptaria eu nam. Has nostro diceret appareat ut, invidunt prodesset dissentiet sed ei, nostro eligendi sit...

Weiter

World

Ad mel laudem offendit, ei vis dignissim forensibus, mea et iuvaret labores scripserit. Iudico doctus sadipscing te vis, an natum atomorum honestatis...

Weiter

Die Technik

Einbau der Bilder /Boxen

Bei den Fotos und Boxen im Inhaltsbereich haben wir uns für die CSS-Technik mit 'display:inline-block' und 'display:table-cell' entschieden. Wir beschreiben es Ihnen hier in einem Tutorial auf der Seite Quartus (index4.html)

Lightbox Picture Gallery

Wir haben in diesem Template die bekannte, beliebte und bewährte 'Lightbox' Foto-Gallerie eingebaut. Klicken Sie bitte dazu auf die Fotos. Sie finden die Gallery auf gleich auf dieser Seite Home (index.html), sehen Sie dort die Serie mit den 6 Fotos sowie auf der Seite Primus (index1.html), dort mit 9 Fotos. Auf den anderen Seiten haben wir die Bilder als Beispiel ohne die Lightbox eingebaut.

Erweiterung der Lightbox mit Box-Slider-Animation

Wir haben die Lightbox weiter optimiert, indem wir eine CSS-Animation hinzugefügt haben. Auf der Startseite hier sehen Sie bei Mausberührung der Foto-Gallerie (6 Fotos, bis an den Rand gezogen) einen Box-Slider-Effekt. Es wird hierbei ein unterschiedlich farbiges (veränderbar) transparentes Feld, welches eine Aufschrift (Text natürlich veränderbar) enthält, aus verschiedenen Richtungen herein gefahren.

Einige Informationen

CSS-Objekt-Wechsler


Template

Dieses Template heißt ' What A Nice Location '. Die sechs Seiten 'Home' (diese Seite) bis Sextus, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind.

Dieser Slider ist CSS-Only und funktioniert per Keyframes-Animation, also ganz ohne Javascript. Es ist eine schicke Möglichkeit, prägnanten Inhalt möglichst platzsparend und übersichtlich einzubauen.

CSS-Wechsler

Die Zeit für den Ablauf des Tausches aller vier Boxen beträgt 60 Sekunden. Diesen Wert können Sie für Ihre Bedürfnisse anpassen, je nachdem wieviel Text zu lesen sein soll, bevor dieser wieder verschwindet, das Script finden Sie in der Datei "animation.css".

Strukturierte Abschnitte

Hier auf der Startseite sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Wie wir die Abschnitte angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen hier auf der Seite 'Quartus' (index4.html).

Im Wesentlichen geht es also um den Einsatz des CSS-Pseudo-Elementes 'nth-child(n)', welcher sehr hilfreich, wenn man gleiche Elemente innerhalb eines Elternelement verschieden aussehen lassen möchte. Insbesondere bei Wiederholungen ist dies effektiv.

Das Menü

Unser Menü ist responsive, CSS-Only und 'touch-friendly', d.h. es läuft auch auf mobilen Geräten. Bei mobilen Auflösungen erscheint der sog. Hamburger Menü-Button. Das Menü wird dann per Klick auf diesen mittels einer CSS-Animation (Fade-In) eingeblendet.

Kontaktieren Sie uns

Box 'Kontakt'. Ne mea partem voluptatibus, eam an iudico maiorum democritum. Ei cum alii percipit, an ludus dignissim eam. Ea quo lorem mazim contentiones. Pro eu eligendi delectus postulant. Odio dicta possit his ut, nec prima nulla vivendum eu.










  • Mustermann & Partner GmbH
  • Sample-Nowhere-Street 232 A
  • 12345 Big City Of Nowhere


Responsive Webdesign

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren. Außerdem wird beim Layout verstärkt mit Angaben in Prozent gearbeitet.

So testen Sie

Hier auf der Seite index1.html (Primus) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.