Start Homepage

Information

Das Hintergrundbild wird per CSS halbkreisförmig in eine Farbe ausgeblendet (hier weiß) und verschwindet beim Scrollen dann vollständig damit die Schrift über dem Hintergrundbild gut lesbar ist. Deutlicher wird das, wenn Sie alle Seiten mit den jeweils unterschiedlichen Hintergrundbildern anklicken. In diesem Template wird also ausgiebig mit den CSS-background Eigenschaften gearbeitet. Seien es diesbezüglich Farbverläufe und Transparenzen bzw. Teil-Transparenzen sowie mögliche Kombinationen mittels der Befehle linear-gradient, radial-gradient, rgba, background-attachment oder transparent.





Bilder sagen mehr als Worte. Eine Foto-Gallerie finden Sie auf allen Seiten, indem Sie auf die Fotos im Inhaltsbereich klicken. Bei Klick auf einem Bild der Foto-Gallerie lassen sich dann sämtliche Fotos innerhalb dieser Kategorie per Klick auf Linkspfeil oder Rechtspfeil durchsehen. Es gibt dabei auch einen Bildtitel sowie eine Bildanzeige (Bild X von X). Hinweis: Diese Gallerie ist mit Hilfe eines Jquery-Scripts getätigt. Jquery ist die beliebteste Javascript Bibliothek, die das Arbeiten mit Javascript vereinfacht. Die 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.

Responsive Webdesign

CSS Media Queries

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 Primus (index1.html) 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.