Das Layout

Information

CSS 3D-Perspektive im Kopfbereich: Ein Foto ist in drei Teile geschnitten, welche jeweils perpektivisch unterschiedlich ausgerichtet sind und wieder ein Gesamtfoto ergeben. Gern verwenden Sie auch ihr Foto, Sie müssen es nur in drei gleich grosse Teile schneiden) oder Sie verwenden unterschiedliche Fotos, siehe hier im Beispiel bei Sextus. Der gestreifte Hintergrund per CSS-Background (linear-gradient) gibt dem Ganzen noch den letzten Schliff. Zugabe: Auf jeder Seite gibt es ein anderes dreigeteiltes Bild, das macht doch richtig Laune und gibt jeder einzelnen Seite einen individuellen Touch!

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. Bilder sagen mehr als Worte. Eine größere Foto-Gallerie finden Sie hier bei Quintus. Die Anzahl der Fotos ist frei wählbar, fügen Sie gerne mehr Fotos hinzu. 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. Viel Spaß damit!

Mehr Lesen

Natum forensibus

Drei unterschiedliche Fotos im Kopfbereich, lieber Kunde, nur falls Sie es bevorzugen, sehen als gesondertes Beispiel auf der Seite Sextus. Ex eos tale dolor, volumus theophrastus ea ius. Qui animal expetenda no, natum forensibus pri in. Ne mei justo lorem nonumy, eripuit oportere adversarium et pri, putent disputando ne vim. Virtute appetere in eam, pro dicit timeam impetus ut. Vim ea vide tota mundi, fugit nemore iisque ad sed. Veniam officiis assueverit per id, facilisis disputando id eam, vim justo iuvaret atomorum te. Ne qui probo iriure argumentum, elaboraret scribentur et eos, est munere aperiam repudiare an. Est eu aliquip consequuntur, antiopam patrioque mel et, cum ex impetus nominavi. Eam ne augue sonet oportere. Et option Secundus vim, ius at facilis sensibus. Ea commune perpetua pro, eros laudem est in. Vim ea vide tota mundi, fugit nemore iisque ad sed.

Veniam officiis assueverit per id, facilisis disputando id eam, vim justo iuvaret atomorum te. No aeque fabulas epicuri mei. In pertinax patrioque vel, eum everti detracto no, partem delectus eum in. Mea primis fuisset instructior an, mel quaestio abhorreant cu, ea esse velit ius. Dictas persius cu vix, error nominati platonem ea has, te ius appareat vivendum pertinacia. Cu malis definitionem per, unum definitiones ad sit. Veniam officiis assueverit per id, facilisis disputando id eam, vim justo iuvaret atomorum te. Ne qui probo iriure argumentum, elaboraret scribentur et eos, est munere aperiam repudiare an.

Mehr Lesen .

Responsive Slider

Dieser Bildwechsler ist mit einem Jquery-Script getätigt und responsive. Je nach Auflösung des Bildschirms werden hier 2, 3 oder 4 Fotos angezeigt. Diese Fotos werden dann automatisch und je nach responsive Auflösung in 2er, 3er oder 4-er Gruppen getauscht.
An den kleinen Punkten unterhalb der Fotos können Sie erkennen, wieviele Gruppen noch folgen.


Weitere Hinweise: Befinden Sie sich mit der Maus im Bereich der Fotos des Sliders, so stoppt der Slider automatisch. Ach übrigens, diese Punkte für den Bildanzeiger funktionieren auch als Links zum Wechel der Fotos, d.h. sie lassen sich auch direkt klicken. Fügen Sie gerne weitere Fotos hinzu bzw. entfernen einige.

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. Zum Testen benötigen Sie nur Ihren Internet-Browser. Also los geht es.

Mehr Lesen

Domumenta Profundis

Soleat albucius appellantur

Veniam officiis assueverit per id, facilisis disputando id eam, vim justo iuvaret atomorum te. Ne qui probo iriure argumentum, elaboraret scribentur et eos, est munere aperiam repudiare an. Est eu aliquip consequuntur, antiopam patrioque mel et, cum ex impetus nominavi. Eam ne augue sonet oportere. Et option necessitatibus vim, ius at facilis sensibus. Ea commune perpetua pro, eros laudem est in.

An nisl diam vix

Ea eros sapientem vulputate vim, in odio inani vix. Sea ea vidit iuvaret luptatum. Te vix autem nullam eleifend, in labitur albucius definitiones quo. Minim oportere principes vel ad, cum ut augue eligendi, qui ad minimum cotidieque. Pro novum solet no, mel no appareat suavitate, prima forensibus temporibus cu sit.

Mehr Lesen