Homepage-Vorlagen ( Templates ) zum Download

Webseiten 129 - 136  ( frei für privat, kostenpflichtig für kommerziell )

Bitte lesen Sie vor dem Download einer Homepagevorlage unbedingt unsere Nutzungsbedingungen.

Wie dürfen diese Templates eingesetzt werden?

Diese Homepage-Vorlagen können für den privaten Gebrauch umsonst heruntergeladen, und angepasst werden. Das Anbieten der Templates auf anderen Webseiten, der Weiterverkauf sowie auch die Verwendung als direkter Download ist nicht gestattet. Je nach dem Inhalt, welcher eingefügt wird, kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen.

Eine kommerzielle Nutzung ist erlaubt. Die kommerzielle Nutzung ist jedoch nur gegen Bezahlung gestattet. Für kommerziell gilt: Die Preise finden sie immer direkt neben dem Vorschaubild - als letzte Zeile vom Beschreibungstext.

Auch wenn Sie die Vorlagen anpassen, bleibt das Copyright für das Design beim Autor der Vorlagen. Für Ihren eingefügten Inhalt, sei es Text, spezielle Grafiken o.a., haben Sie dann selbstverständlich Ihr Copyright.

Bitte lesen Sie in der Rubrik (c)Nutzung die vollständigen Nutzungs- bzw. Copyrightbedingungen.



 
 


HomeVorlagenHP-HilfenKontakt HilfeTechnik
(c) Nutzung Impressum BestellungWiderrufPreiseDatenschutz


 129 Ferienhaus Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download    Homepage Vorlage, templates , Homepage-Vorlagen,  free download

Beschreibung

Besonderheiten

Übersicht/Anleitung für CSS3-Effekte anbei.
2x Halbkreis-Menü untereinander. Rundung, Schatten- und Leuchteffekte beim Menü nur per CSS und damit ohne Grafikprogramm erstellt.
Grafische Icons.

Technik

Flexibles Layout.
+ CSS-Effekte (Textschatten, Boxschatten, Abrundung = Schattenwurf und Abrundungsgrad individuell und flexibel einstellbar, da ohne Grafiken realisiert)
++ CSS Animation-Rotation (Spinning Icon hier auf dem "Nachoben/Nachunten-Pfeil" - dreht bei Mausberührung und Nicht-Mausberührung in jeweils entgegengesetzter Richtung).
+++ CSS Schrägstellung Objekte (Winkelgrade einstellbar.)

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
 130 Dark Always Seems Noble Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download    Homepage Vorlage, templates , Homepage-Vorlagen,  free download    Homepage Vorlage, templates , Homepage-Vorlagen,  free download    Homepage Vorlage, templates , Homepage-Vorlagen,  free download

Beschreibung

Besonderheiten

Registerreiter-Menü oben. Auf jeder Seite ein anderes Foto. 5 Beispielseiten dazu anbei. Horizontale 3D-Linie zwischen den Menüs auf der linken Seite.

Technik

Flexibles Layout.
+ CSS3-Effekte (Textschatten, Boxschatten, Abrundung = Schattenwurf und Abrundungsgrad individuell und flexibel einstellbar, da ohne Grafiken realisiert)

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
 131 Grenzenlos. Without Frontiers Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download    Homepage Vorlage, templates , Homepage-Vorlagen,  free download

Beschreibung

Besonderheiten

Der Hintergrund besteht aus zwei Grafiken (Halbkreis + Vogel), welche übereinander liegen, somit mehr Möglichkeiten beim evt. Tausch Ihrer eigenen Grafik, wobei hier die ganze transparente Konstruktion inklusive Halbkreis über den feststehenden Vogel scrollt. Es ist sozusagen ein Flügelschlag-Effekt.

Technik

Flexibles Layout.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
 132 MONO Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download

Beschreibung

Besonderheiten

Mauszeiger wird verändert (Farbige Hand bei Mouseover sowie schwarzer Pfeil auf weisser Fläche und weißer Pfeil auf schwarzer Fläche.

Technik

Flexibles Layout.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
 133 Dunes & Grass
Bestellen Downloaden Anschauen


Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von TABLET und SMARTPHONE im Portraitmodus sowie DESKTOP und LAPTOP.]

Beschreibung

Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 134 My Sweetest Painter Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download    Homepage Vorlage , templates , Homepage-Vorlagen,  free download

Beschreibung

Besonderheiten

Es ist eine speziell gestaltete Startseite mit anbei.

Technik

Flexibles Layout.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
 135 Neuschnee Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download    Homepage Vorlage, templates , Homepage-Vorlagen,  free download

Beschreibung

Besonderheiten

Die Menüs legen sich um das (gfls. auch ihr) Foto herum, sowohl horizontal als auch vertikal. Beide Menüs erhalten einen separaten Mouseover-Effekt. Auch Tipps zum Anpassen der Vorlage anbei.

Technik

Flexibles Layout.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
   → News  

Hinweis

Lieber Besucher, schon gesehen?

Wir fügen immer wieder neue Vorlagen hinzu, diese neue Vorlage kann, muss aber nicht zwingend am Ende unserer Seite platziert werden, sondern kann auch an anderer Position erfolgen.

Hier finden Sie also nachstehend immer an dieser Stelle neue VORLAGEN, nach Datum sortiert.

Alle von uns rausgenommene Vorlagen, also alle Vorlagen, welche Sie vormals heruntergeladen haben und jetzt nicht mehr auf unseren Seiten finden, sind nach wie vor zu bestellen und zu bezahlen, sofern diese kommerziell (gewerblich) genutzt werden. Der Preis für eine rausgenommene Vorlage (aus unserem Archiv) beträgt generell Euro 29,-.

 

   → Vorlagen Neu  
+ + + in Arbeit + + + Ganz NEU +++ Erhältlich SAMSTAG, den 03.06.17

Nr.14  VÖ: 03.06.17   Anschauen RESTAURANT - FRESH FOOD FOR YOU -

:::::::::::::::::::::::::::::::::::::::::::::::::::: HP 14 IN ARBEIT ::::::::::::::::::::::::::::::::::::::::::::::::::::



Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.

 
Nr.21  VÖ: 24.05.17   Anschauen ALL THE TIME OF THE WORLD





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Komplett-Transparenz-Layout. Mit CSS-rgba (Farbe und Deckungsgrad somit gfls. anders einstellbar).
    Nett: Auch die Bilderrahmen sind transparent und heben sich trotzdem (dank CSS-box-shadow) ab.
  • CSS-Animation: Klapp-Mechanismus beim Menü (Mausberührung: Von minus-45-Grad-Schräge zu 0-Grad).
  • Festgesetzte Hintergrund-Grafik, der Inhalt scrollt also darüber hinweg.
  • CSS-Animation: Dreh-Effekt plus Move-Effekt auf den Social Media Icons im Inhaltsbereich (Startet automatisch).
    - Jedes zweite1 Icon dreht sich dabei andersherum und bewegt sich in entgegengesetzter Richtung.
    - Jedes Icon innerhalb der Liste hat eine andere Farbe.2
  • CSS-Animation Wobble-Effekt (Auf den Fotos im Inhaltsbereich).
  • CSS-Animation: Drehen-Effekt (Auf den Icons im Kopfbereich).
  • Effektvolle CSS-Schräg-Stellung von Objekten: Mit 'transform:rotate'.
    Hier war es wichtig mit 'CSS-transform-origin' den richtigen Drehpunkt zu setzen sowie auch
    mit 'CSS-overflow:hidden' den Platz der Box zu beschränken (damit keine unschönen zusätzlichen Scroll-Balken erscheinen).

1= Ansprechen jedes geraden oder ungeraden Elements einer Liste.
Dies geschieht hier durch das Pseudoelement ':nth-child(even)' bzw. ':nth-child(odd)'.

2= Ansprechen jedes einzelnen Elements einer Liste.
Mit Pseudoelement ':nth-child(Zahl).
 
Nr.05  VÖ: 10.05.17   Anschauen MY FITNESS GIRL





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Leichtes und luftiges Design mit drei Fotos im oberen Bereich übereinander liegend.
  • CSS-Animation: Pop-Up-Effekt (Auf den Fotos im Inhaltsbereich).
  • CSS-Animation: Buzz-Effekt. (Auf den Links im Hauptmenü)
  • CSS-Animation Wobble-Effekt (Beim 'Nach-Oben-Pfeil' im Fussbereich).
  • CSS-Animation: Drehen-als-Flipp-Effekt (Auf den Icons im Inhaltsbereich).
  • Geometrische Formen: Rechteck plus Halbkreis. (Im Fussbereich beim 'Nach-Oben-Pfeil')
  • Spezieller Logo-Bereich wie folgt:
    Im oberen Bereich sehen Sie drei Fotos, welche übereinander gelegt sind. Innerhalb eines dieser Fotos haben wir das Menü platziert, die Links dort erhalten als optische Unterstützung noch eine dekorativen Pfeil als Font-Icon. Per CSS (transform:rotate) sind diese Fotos in verschiedenen Winkeln gedreht und reponsive angelegt, d.h. man sieht bei kleinen Auflösungen gewollt überwiegend das Foto mit dem Menü, denn der Platz ist ja -mal ausgehehend von der kleinsten Handy-Auflösungen mit einer Breite von 320 Pixel schon sehr knapp und es gilt ja diesen wenigen Platz gut auszunutzen.
  • Google-Webfonts (Schrift 'Roboto' und 'Open Sans' bereits installiert). Schriftschnitt:Light.
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar )
 
Nr.26  VÖ: 26.04.17   Anschauen WE TAKE CARE





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Geometrische Formen: Das Menü besteht aus einem Rechteck, einem Kreis, zwei Halbkreisen und einem Dreieck.
  • CSS-Animation: Pendel-Effekt1, startet automatisch und schwingt meditativ wie eine Glocken-Schwing-Bewegung.
  • CSS-Animation: Menü dreht bei Mausberührung von vertikal in die horizontale Lage.
  • CSS-Animation Dreh-Effekt plus Move-Effekt auf den Social Media Icons (Startet automatisch).
    - Jedes zweite2 Icon dreht sich dabei andersherum und bewegt sich in entgegengesetzter Richtung.
    - Jedes Icon innerhalb der Liste hat eine andere Farbe.3
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar )
  • Anordnung der Bilder im Inhaltsbereich wie folgt:
    - Bild ist links platziert und der Text fließt rechts herum.
    - Bild ist rechts platziert und der Text fließt links herum.
    - Bild ist zentriert und ohne Textfluß arrangiert.
  • Google-Webfonts (Schrift 'Roboto' und 'Open Sans' bereits installiert). Schriftschnitt:Light.

1= Pendel-Effekt (CSS-Animation).
Der Effekt läuft innerhalb (CSS-overflow:hidden) einer halbransparenten Box (CSS-rgba) ab und ist hier auf den Slogan-Spruch gelegt. Auf jeder Seite haben wir einen anderen Slogan-Text platziert. Optisch unterstützt wird der Effekt noch durch einen kleinen, farbigen und mitschwingendem Kreis, welcher an den Text-Beginn des Slogans gelegt ist.

2= Ansprechen jedes geraden oder ungeraden Elements einer Liste.
Dies geschieht hier durch das Pseudoelement ':nth-child(even)' bzw. ':nth-child(odd)'.

3= Ansprechen jedes einzelnen Elements einer Liste.
Mit Pseudoelement ':nth-child(Zahl).
 
Nr.09  VÖ: 21.04.17   Anschauen SUISSE COLOR STYLE





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Schweiz Design (Weißes Kreuz auf Rot)
  • CSS-Animation: Wobble-Effekt (Bei Mausberührung der Links im Hauptmenü sowie auf den Fotos).
  • Flaggen-SPEZIAL (Alle Flaggen nur mit CSS gestaltet).
    Beispiele mit 8 Flaggen anbei plus Code-Schnipsel.
    Viele weitere Flaggen1 nach diesem Prinzip möglich.
  • CSS-Animation: Flaggen-Kugel (hier das Schweiz-Motiv) rollt nach links und wieder zurück
    - Diese Animation ist automatisch startend.
    - Die Drehung des Schweizer Kreuzes in der Kugel schaut bei Geschwindigkeitsaufnahme spannend aus.
  • Festgesetzer Hintergrund. (Inhalt scrollt über die Hintergrund-Grafik).
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar )
  • Anordnung der Bilder im Inhaltsbereich wie folgt:
    - Bild ist links platziert und der Text fließt rechts herum.
    - Bild ist rechts platziert und der Text fließt links herum.
    - Bild ist zentriert und ohne Textfluß arrangiert.
  • Google-Webfonts (Schrift 'Roboto' und 'Open Sans' bereits installiert). Schriftschnitt:Light.
  • CSS-Animation: Multi-Farbänderung-Effekt (Bei Mausberührung auf der Schweizer Flagge oben links).
  • CSS-Animation: Move-Effekt, Verschiebung nach unten (Bei Mausberührung auf der Schweizer Flagge oben links).

1= Weitere Flaggen.
Nach diesem Prinzip lassen sich andere Flaggen erstellen, z.B. Niederlande, Belgien, Luxemburg, Ungarn, Finnland, Rumänien, Lettland, Bulgarien, Russland, Littauen, Monaco, Ukraine, Irland, Estland, Armenien, Bolivien, Costa Rica, Elfenbeinküste, Gabun, Gambia, Guinea, Indonesien, Jemen, Kolumbien, Mali, Mauritius, Nigeria, Peru, Sierra Leone, Thailand, Tschad. Eine Übersicht von National-Flaggen finden sie hier.
 
Nr. 24  VÖ: 10.04.17   Anschauen GERMANY COLOR STYLE





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Germany Design ( Schwarz, Rot, Gold )
  • Kreisförmige Anpassung der Links im Hauptmenü. Jeder Link muss anders eingerückt und damit innerhalb der Liste separat 1 angesprochen werden.
  • Anordnung der Bilder im Inhaltsbereich wie folgt:
    - Bild ist links platziert und der Text fließt rechts herum.
    - Bild ist rechts platziert und der Text fließt links herum.
    - Bild ist zentriert und ohne Textfluß arrangiert.
  • CSS-Animation: Drehen (Automatisch startend): Rechtsdrehung bei den Social Media Icons, wobei jedes zweite Icon (also jedes ungerade Element 2) davon links herum dreht.
  • Flaggen-SPEZIAL (Alle Flaggen nur mit CSS gestaltet, einfacher Code, hier in der Regel mit CSS-linear-gradient).
    Beispiele mit 8 Flaggen anbei plus Code-Schnipsel.
    Viele weitere Flaggen3 nach diesem Prinzip möglich.
  • CSS-Animation: Flaggen-Kugel rollt nach links und wieder zurück (Automatisch startend).
  • Google-Webfonts (Schrift 'Roboto' und 'Open Sans' bereits installiert). Schriftschnitt:Light.
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar )

1= Ansprechen jedes einzelnen Elements einer Liste.
Mit Pseudoelement ':nth-child(Zahl).

2= Ansprechen jedes ungeraden Elements einer Liste
Dies geschieht hier durch das Pseudoelement ':nth-child(odd)'.

3= Weitere Flaggen.
Nach diesem Prinzip lassen sich andere Flaggen erstellen, z.B. Niederlande, Belgien, Luxemburg, Ungarn, Finnland, Rumänien, Lettland, Bulgarien, Russland, Littauen, Monaco, Ukraine, Irland, Estland, Armenien, Bolivien, Costa Rica, Elfenbeinküste, Gabun, Gambia, Guinea, Indonesien, Jemen, Kolumbien, Mali, Mauritius, Nigeria, Peru, Sierra Leone, Thailand, Tschad. Eine Übersicht von National-Flaggen finden sie hier.
 
Nr. 25  VÖ: 03.04.17   Anschauen CLASSIC STYLE TREND





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Bilder-Gallerie ( Responsive angelegt ).1
  • Spezial Design der Bilder-Gallerie:
    Doppelrahmen in unterschiedlichen Farben sowie zusätzlich eine weitere nur 1Pixel-grosse-Trennlinie zwischen den Bildern.
  • Hauptmenü mit Icon-Wechsel:
    Bei Mausberührung wird das jeweilige Font-Icon durch ein anderes getauscht.
  • Transparenz ( mit CSS-rgba ). Dieser Farbfilter2 macht möglich, das die Schrift auf jedem Foto gut lesbar ist.
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Roboto' und 'Open Sans' bereits installiert ). Schriftschnitt:Light.
  • CSS-Animation: Drehen

1= Bilder-Gallerie: Im Inhaltsbereich sehen Sie auf den jeweiligen HTMl-Seiten eine unterschiedliche Anzahl von Bildern, welche in einem Block zusammengefasst sind. Auf der Startseite sehen Sie z.B. einen großen Bilder-12er-Block). Das jeweilige Foto ist verlinkt und bei Klick auf selbiges öffnet sich eine größere Version des Fotos.

Hinweis: Auch wenn das Ausgangsfoto dort per CSS mittels Prozent-Angaben kleiner definiert ist: Das sich nach Klick öffnende Foto ist immer exakt so groß wie die Abmessungen des Originalfotos. Voraussetzung ist natürlich, das die jeweilige aktuelle Bildschirmauflösung gleich oder größer als die Abmessung des Originalfotos ist. Die Größe der Fotos im Inhaltsbereich ist übrigens 800x530 Pixel. Gerne können Sie natürlich auch andere Größen wählen.

Fazit: Wir haben hier bei der Bilder-Gallerie eine schöne und unkomplizierte Lösung geschaffen, die jeweils nur mit ein-und denselben Foto (für das kleinere Ausgangsfoto sowie das grösseres Foto nach Klick) auskommt. Ein Foto gilt also gleich für 2 verschiedene Zustände, das Handling ist somit einfacher.


2= Transparenz/Farbfilter: Im Gegensatz zum etwas leichter zu handhabenen CSS-Befehl 'opacity', welcher auch eine Transparenz ermöglicht, wird beim CSS-Befehl 'rgba' die Schrift auf dem Objekt nicht auch gleichzeitig mit einer Transparenzstufe versehen. Je nach Foto ( falls Sie Ihres einfügen wollen ) oder Geschmack lassen sich beim 'rgba-Befehl' Farbe und Deckungsgrad ggfls. anders einstellen.
 
Nr. 38  VÖ: 24.03.17   Anschauen THE LITTLE LADYBIRD





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download

 




[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • CSS-Animation: Kleiner Käfer krabbelt über die Webseite.
  • Natur-Farben1 Das Ausgangsfoto mit dem roten Käfer auf dem satten Blattgrün schaut so klasse aus, da konnten wir als Farbharmonie nur sehr viel Grün mit ein wenig Rot für das Design auswählen.
  • Transparenz ( mit CSS-rgba ). Dieser Farbfilter2 macht möglich, das die Schrift auf jedem Foto gut lesbar ist.
  • Farbverläufe ohne Grafik ( mit CSS-linear-gradient ) .
  • Abrundungen ohne Grafik ( mit CSS-border-radius ) .
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Josefin Sans' und 'Snippet' bereits installiert - funktioniert damit auch ohne Internet ).
  • CSS-Animation: Drehen.

1= Natur-Farben: Die Farben wirken auch natürlich, weil der grüne Farbton direkt aus dem Ausgangsfoto ausgewählt wurde. Hinweis: Um eine beliebige Farbe innerhalb eines Fotos zu bestimmen, gibt es ja kleine Freeware-Tools, welche z.B. Color Picker oder ähnlich heißen.

2= Transparenz/Farbfilter: Im Gegensatz zum etwas leichter zu handhabenen CSS-Befehl 'opacity', welcher auch eine Transparenz ermöglicht, wird beim CSS-Befehl 'rgba' die Schrift auf dem Objekt nicht auch gleichzeitig mit einer Transparenzstufe versehen. Beim 'rgba-Befehl' können Sie Farbe und Deckungsgrad einstellen. Je nach Foto ( falls Sie Ihres einfügen wollen ) oder Geschmack kommt man somit mit einer Schwarz-Transparenz (wie hier in diesem Template) oder einer Weiß-Transparenz bestens aus. Die Schrift, egal mit welcher Schriftfarbe hebt sich somit immer von den Farben des Fotos ab. Wer es noch individueller oder perfekter mag, wählt gar eine ganz andere Farbe.
 
Nr. 73  VÖ: 14.03.17   Anschauen FERIENWOHNUNG HAUS MIT SEEBLICK





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Geometrische Form ( Kleines Dreieck, als Pfeil fungierend ) auf Fotos gelegt1 und nur mit CSS erstellt .
  • Mit Toggle-Menü.2 ( Bei mobilen Geräten erscheint ein platzsparendes Menü ) - Menü-Button-Schalter: An/Aus.
  • Transparenz ( mit CSS-rgba ) .
  • Farbverläufe ohne Grafik 3 - Linear und Kreisförmig ( mit CSS-linear-gradient und radial-gradient ) .
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Roboto' und 'Open Sans' bereits installiert ). Schriftschnitt:Light.
  • CSS-Animation: Smooth-Menü (Toggle-Menü gleitet sanft von OBEN nach UNTEN hinein)
  • CSS-Animation: DREHEN.

1= Das kleine Dreieck: Es ist nach oben gerichtet wie eine Art Pfeil, dabei am Fuße der jeweiligen Fotos im Inhaltsbereich platziert, auch responsive angelegt und stellt deshalb insbeondere bei Smartphone Auflösungen (wenn alle Fotos wegen des geringen zur Verfügung stehendes Platzes untereinander angeordnet werden) sicher, das Bild und der jeweilige Bildtext leichter als zusammenhängend erkannt werden. | Der Clou: Bei höheren Auflösungen wird dieses Dreieck nicht mehr benötigt und abgeschaltet (display:none).

2= Toggle Menü: Eine Javascript-freie Lösung, welche auf mobilen Geräten ein Menü ermöglicht, welches sich per Schalter ein-und ausschalten läßt.

3= CSS-Farbverläufe: In diesem Template imitieren die Farbverläufe auf den Textboxen das Seewasser bzw. verschiedene Wassertiefen.
Unabhängig von diesem Beispiel bieten sich Farberläufe natürlich immer zur Auflockerung eines Layouts oder zu allen möglichen Design-Zwecken an. Achten Sie doch mal im Fernsehen auf die Studios der großen Nachrichten-Sendungen oder die Dekorationen der Samstag-Abend Shows, welche kaum noch ohne solche Veräufe auskommen.
 
Nr. 20  VÖ: 26.02.17   Anschauen NATURE STUDIO





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Geometrische Form ( Yin-Yang-Zeichen ) nur mit CSS erstellt .
  • Geometrische Form ( Kleines Dreieck, als Pfeil fungierend ) auf Fotos gelegt1 und nur mit CSS erstellt .
  • Mit Toggle-Menü.2 ( Bei mobilen Geräten erscheint ein platzsparendes Menü ) - Menü-Button-Schalter: An/Aus.
  • Transparenz ( mit CSS-rgba ) .
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Roboto' und 'Open Sans' bereits installiert ). Schriftschnitt:Light.
  • CSS-Animation: Smooth-Menü (Toggle-Menü gleitet sanft DIAGONAL von links OBEN nach rechts UNTEN hinein)
  • CSS-Animation: DREHEN.

1= Das kleine Dreieck: Es ist nach oben gerichtet wie eine Art Pfeil, dabei am Fuße der jeweiligen Fotos im Inhaltsbereich platziert, auch responsive angelegt und stellt deshalb insbeondere bei Smartphone Auflösungen (wenn alle Fotos untereinander angeordnet werden) sicher, das Bild und der jeweilige Bildtext leichter als zusammenhängend erkannt werden

2= Toggle Menü: Eine Javascript-freie Lösung, welche auf mobilen Geräten ein Menü ermöglicht, welches sich per Schalter ein-und ausschalten läßt.
 
Nr. 03  VÖ: 20.02.17   Anschauen BRÜCKEN-PONTS-BRIDGES





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Mit Toggle-Menü.1 ( Bei mobilen Geräten erscheint ein platzsparendes Menü ) - Menü-Button-Schalter: An/Aus.
  • Transparenz ( mit CSS-rgba ) .
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Roboto' und 'Open Sans' bereits installiert ). Schriftschnitt:Light.
  • CSS-Animation: Smooth-Menü (Toggle-Menü gleitet sanft DIAGONAL von links OBEN nach rechts UNTEN hinein)
  • CSS-Animation: DREHEN.

1= Toggle Menü: Eine Javascript-freie Lösung, welche auf mobilen Geräten ein Menü ermöglicht, welches sich per Schalter ein-und ausschalten läßt.
 
Nr. 41  VÖ: 09.02.17   Anschauen DER KLEINE LEUCHTTURM





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Geometrische Formen ( Kreis und Quadrat nur mit CSS erstellt - Platziert per POSITION: relative/absolute ).
  • Beim Hauptmenü ist der jeweils aktuelle Link - entgegen den Ausgangslinks - immer rechtsbündig angeordnet.
  • Pseudoelement '::nth-child(odd)' Selektiert das jedes zweite Kind eines Elternelements.
  • Farbfilter in Blau (Halbtransparent): Mit CSS-rgba ( Farbe und Deckungsgrad ggfls. anders einstellbar ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Roboto' und 'Open Sans' bereits installiert ). Schriftschnitt:Light.
  • CSS-Animation: DREHEN.
 
Nr. 02  VÖ: 01.02.17   Anschauen PIER WITH A LIGHTHOUSE





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Mit Toggle-Menü.1 ( Bei mobilen Geräten erscheint ein platzsparendes Menü ) - Menü-Button-Schalter: An/Aus.
  • Farbfilter in Blau (Halbtransparent): Mit CSS-rgba ( Farbe und Deckungsgrad ggfls. anders einstellbar ).
  • Farverlauf: Mit CSS-linear-gradient.
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts (Schrift 'Roboto' und 'Open Sans' bereits installiert). Schriftschnitt:Light.
  • CSS-Animation: DREHEN.
  • CSS-Animation: EINBLENDEN. ( Menü wird bei mobilen Geräten nach Klick per Toggle-Schalter sanft eingeblendet. )

1= Toggle Menü: Eine Javascript-freie Lösung, welche auf mobilen Geräten ein Menü ermöglicht, welches sich per Schalter ein-und ausschalten läßt.
 
Nr. 31  VÖ: 27.01.17   Anschauen BOY MEETS GIRL





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Triangle: Dreieck ohne Grafik erstellt ( per CSS) verbindet hier geschickt die Farben Blue and Pink.
  • Navigation: Girl-Symbol ('venus') wird durch das Boy-Symbol ('mars') getauscht
  • Gegensätze: Mischt man die Farben Blue und Pink ergibt sich ein Lila-Ton als Verbindung.
  • (W/M) Klischee löst sich auf bzw. verbindet sich grafisch durch Farbmischung: (Mädchen/Frau trifft Junge/Mann)
  • Flat-Design: Flach, minimal und edel.
  • Rundungen ( mit CSS-border-radius ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar .
  • Google-Webfonts (Schrift 'Snippet' und 'Josefin Sans' bereits installiert).
  • CSS-Animation: DREHEN.
 
Nr. 10  VÖ: 19.01.17   Anschauen DAS BLAUE HAUS





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Pattern-Hintergrund: Streifen-Background - ohne Graifk ( mit CSS-linear-gradient )
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar .
  • Google-Webfonts (Schrift bereits installiert - hier die Schriften 'ROBOTO' u. 'OPEN SANS').
  • CSS-Animation: DREHEN.
 
Nr. 01  VÖ: 14.01.17   Anschauen THE ART OF LIGHT





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Navigation: Kreis-Symbol ('dot-circle-o') wird durch das Häkchen-Symbol ('check') getauscht
  • Automatisch generiertes Textzeichen (hier der Pfeil bei H3-Überschrift im Inhaltsbereich) per Pseudoelement.1
  • Farbverlauf Linear - ohne Grafik ( mit CSS-linear-gradient ).
  • Farbverlauf Kreisförmig - ohne Graifk ( mit CSS-radial-gradient ).
  • Rundungen ( mit CSS-border-radius ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts (Schrift bereits installiert, hier die Schrift 'Josefin Sans').
  • CSS-Animation: DREHEN.
1= Autom. generiertes Textzeichen: Per Pseudoelement ":after" und ":before" können Textzeichen nach (after) oder vor (before) einem HTML-Element platziert werden. Der Vorteil: Eine Änderung oder Wechsel des Textzeichens oder dessen Formatierung (Farbe, Größe, Schriftart o.ä) brauchen nur einmal in der CSS-Datei geändert werden und wirken sich dann auf alle HTML-Seiten aus.
 
Nr. 18  VÖ: 06.01.17   Anschauen THE COFFEE LOUNGE





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Automatisch generiertes Textzeichen (hier der Pfeil im Haupt-Menü) per Pseudoelement.1
  • Google-Webfonts (Schrift bereits installiert). Hier schicker Italic-Schriftschnitt2.
  • Transparenz ( mit CSS-rgba ).
  • Rundungen ( mit CSS-border-radius ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ).
  • CSS-Animation: DREHEN.
1= Autom. generiertes Textzeichen: Per Pseudoelement ":after" und ":before" können Textzeichen nach (after) oder vor (before) einem HTML-Element platziert werden. Der Vorteil: Eine Änderung oder Wechsel des Textzeichens (hier der Pfeil im Menü) oder dessen Formatierung (Farbe, Größe, Schriftart o.ä) brauchen nur einmal in der CSS-Datei geändert werden und wirken sich dann auf alle HTML-Seiten aus.

2= Fonts/Spezielle Schriftschnitte: Bei einem Italic-Schnitt hat der Schriftdesigner die einzelnen Zeichen aufeinander und auf die Schrägstellung abgestimmt. Wenn aber dieser Italic-Schnitt nicht vorhanden ist (sondern nur der reguläre Schnitt), stellt der Browser auch bei der Anweisung 'font-style: italic' die Schrift einfach nur programmatisch schräg. Schauen Sie sich hier einmal die wunderschönen geschwungenen Linien bei der Schrift an, dann wird der Unterschied vielleicht deutlicher und was wir damit meinen.
 


Nr. 23  VÖ: 02.01.17   Anschauen DESIGN TECHNOLOGY





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download








[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Logo-und Fussbereich: Auf jeder Seite unterschiedliche Fotos.
  • Automatisch generiertes Textzeichen (hier der rote Punkt) auf jeder Seite nach der H1-Überschrift.1
  • Google-Webfonts (Schrift bereits installiert). Hier stylischer extra breiter und dicker Schriftschnitt.
  • Transparenz ( mit CSS-rgba).
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • CSS-Animation: DREHEN.
1= Autom. generiertes Textzeichen: Per Pseudoelement ":after" und ":before" können Textzeichen nach (after) oder vor (before) einem HTML-Element platziert werden. Der Vorteil: Eine Änderung des Textzeichens (hier der Punkt) oder dessen Formatierung (Farbe, Größe, Schriftart o.ä) brauchen nur einmal in der CSS-Datei geändert werden und wirken sich dann auf alle HTML-Seiten aus. Also sowohl die responsive Konstruktion sowie alle CSS-Effekte ohne Javascript!

 


Nr. 52  VÖ: 22.12.16   Anschauen TRAVEL ON HIGHWAY





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • CSS-Bildwechsler (tauscht auf jeder Seite 4 verschiedene Bilder, also bei 6 Seiten sind das 24 untersch. Tauschbilder).
  • Plus CSS-Animation 'Kamerafahrt' beim Bildwechsler.
  • Spezieller Bild-Anzahl-Anzeiger beim Bildwechsler 1
  • Google-Webfonts (Schrift bereits installiert). Hier schicker Italic-Schriftschnitt2.
  • Transparenz ( mit CSS-rgba).
  • Mit Toggle-Menü. ( Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus).
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
  • Verschiedene ANIMATIONEN per CSS gestaltet.
1= Bild-Anzahl-Anzeiger: Bei einem Bildwechsler gibt es oft einen Anzeiger für die Bildanzahl der zu wechselnden Bilder. Man erkennt dann z.B. : Jetzt gerade ist Bild 2 von insgesamt 4 Bilder zu sehen. Dies sind häufig kleine Kreise, wobei der Kreis für das aktuelle Bild dann farblich anders formatiert wird. Wir haben diesen Bildanzeiger hier mal anders gestaltet. Es gibt ein Batterie-Symbol, das sich mit jedem angezeigten Bild der Slideshow weiter füllt. Sozusagen bis die Batterie voll geladen ist.

2= Fonts/Spezielle Schriftschnitte: Bei einem Italic-Schnitt hat der Schriftdesigner die einzelnen Zeichen aufeinander und auf die Schrägstellung abgestimmt. Wenn aber dieser Italic-Schnitt nicht vorhanden ist (sondern nur der reguläre Schnitt), stellt der Browser auch bei der Anweisung 'font-style: italic' die Schrift einfach nur programmatisch schräg. Schauen Sie sich hier einmal die wunderschönen geschwungenen Linien bei der Schrift an, dann wird der Unterschied vielleicht deutlicher und was wir damit meinen.
 


Nr. 68  VÖ: 06.12.16   Anschauen ON THE ROAD AGAIN





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • CSS-Autobahn-Animation (Zweispurig, entgegenkommender Verkehr).1
  • CSS-Bildwechsler (Im Inhaltsbereich)
  • Multipler CSS-Background.
  • Transparenz ( mit CSS-rgba.)
  • Mit Toggle-Menü. ( Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus).
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Google-Webfonts (Schrift bereits installiert).
  • Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
  • Verschiedene ANIMATIONEN per CSS gestaltet.
1= Autobahn-Animation: Auf einer von Wäldern begrenzten Autobahnstrecke fahren Autos von rechts nach links, ihnen kommen auf der Gegenfahrbahn andere Autos entgegen, die natürlich von links nach rechts fahren.
 


Nr. 35  VÖ: 01.12.16   Anschauen ÜBER DEN DÄCHERN DER STADT





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • CSS-Bildwechsler A - Tauscht Fotos und enthält zweiten Bildwechsler (B)1.
  • CSS-Bildwechsler B - Tauscht Fotos und ist zusätzlich animiert
  • Vogelschwarm-Animation ( gleichzeitig fliegend von li + re sowie horizontal und vertikal die Richtungen ändernd)
  • Multipler Background ( Schrägen/Transparenz/Bild alles in einer Anweisung)
  • Transparenz ( mit CSS-opacity)
  • Text-Schatten-Effekte (mit CSS-text-shadow)
  • Mit Toggle-Menü. ( Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus)
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Pseudoelement ":first-line". Erste Zeile anders formatiert.
  • Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
  • Verschiedene ANIMATIONEN per CSS gestaltet.
1= Die Bildwechsler: Oben im Kopfbereich gibt es einen Bildwechsler 'A'. Darin befindet sich ein weiterer Bildwechsler 'B' (mit den 4 kleinen Kreisen als Anzeiger für die Anzahl der zu wechselnden Fotos), welcher die gleichen Bilder wechselt, aber zusätzlich noch animiert ist und jeweils einen Bildausschnitt zeigt, der in Bildwechsler 'A' nicht zu sehen ist. Hinweis: Für beide Bildwechsler lassen sich auch unterschiedliche Fotos hinterlegen, so das Sie dann 8 verschiedene Fotos sehen können.
 


Nr. 13  VÖ: 22.11.16   Anschauen ÜBER DEN WOLKEN AM MEER





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download






[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Vogelflug I - Hinter 3 transparenten animierten Bildboxen läuft eine weitere Animation (Vogelflug) ab
  • Vogelflug II -Mehrere Vögel, fliegend mit untersch. Geschwindigkeiten und Wolken-Animation
  • Multipler Background ( Schrägen/Transparenz/Bild/Farben alles in einer Anweisung)
  • Transparenz ( mit CSS-opacity)
  • Text-Schatten-Effekte (mit CSS-text-shadow)
  • Mit Toggle-Menü. ( Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus)
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Pseudoelement ":first-letter". Erster Buchstabe anders formatiert.
  • Pseudoelement ":first-line". Erste Zeile anders formatiert.
  • Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
  • Alle folgenden ANIMATIONEN per CSS gestaltet.
  • Animation KAMERA-FAHRT - POSITIONSÄNDERUNG HINTERGRUNDBILD | startet automatisch )
  • Animation VOGEL-FLUG | startet automatisch )
  • Animation SMOOTH-MENÜ, Toggle-Menü gleitet von links nach rechts hinein
  • Animation ZOOM-IN + ROTATION, Reinzoom-Effekt weil Vergrösserung + Rotation innerhalb der Box abläuft
  • Animation PERSPEKTIVISCHES WENDEN auf X und Y-Ebene
  • Animation SLIDE-RIGHT + FARBÄNDERUNG ICON
  • Animation DREHEN, schnell
  • Animation DREHEN, langsam
 


Nr. 30  VÖ: 09.11.16   Anschauen SUMMER IN ICELAND





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Multipler Background ( Schrägen/Transparenz/Bild/Farben alles in einer Anweisung)
  • Transparenz ( mit CSS-rgba)
  • Text-Schatten-Effekte (mit CSS-text-shadow)
  • Mit Toggle-Menü. ( Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus)
  • Schrägen ohne Grafik: (mit CSS-linear-gradient).
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Pseudoelement ":first-letter". Erster Buchstabe anders formatiert.
  • Pseudoelement ":first-line". Erste Zeile anders formatiert.
  • Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
  • Alle folgenden ANIMATIONEN per CSS gestaltet.
  • Animation HEARTBEAT, Herzschlag | startet automatisch
  • Animation KAMERA-FAHRT - POSITIONSÄNDERUNG HINTERGRUNDBILD | startet automatisch )
  • Animation SMOOTH-MENÜ, Toggle-Menü gleitet von links nach rechts hinein
  • Animation ROTATION + VERKLEINERN BIS UNSICHTBAR
  • Animation ZOOM-IN + ROTATION, Reinzoom-Effekt weil Vergrösserung + Rotation innerhalb der Box abläuft
  • Animation PERSPEKTIVISCHES WENDEN auf X und Y-Ebene
  • Animation SLIDE-RIGHT + FARBÄNDERUNG ICON
  • Animation GUMMIBAND
  • Animation DREHEN, schnell
  • Animation DREHEN, langsam
  • Animation DREHEN + VERKLEINERN
 


Nr. 19  VÖ: 02.11.16   Anschauen MODEL AGENCY





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Buchdruck (Emboss) - Text-Erhaben-Effekt beim Homepagenamen (mit CSS-textshadow)
  • Mit Toggle-Menü. ( Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus)
  • Perspektivische Rotation , hier Schrägstellung (mit CSS-perspective/rotate)
  • Schrägen ohne Grafik: (mit CSS-linear-gradient).
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Pseudoelement ":first-letter". Erster Buchstabe anders formatiert.
  • Pseudoelement ":first-line". Erste Zeile anders formatiert.
  • Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
  • Alle folgenden ANIMATIONEN per CSS gestaltet.
  • Animation HEARTBEAT, Herzschlag | startet automatisch
  • Animation POSITIONSÄNDERUNG HINTERGRUNDBILD | startet automatisch )
  • Animation BLITZEN | startet automatisch )
  • Animation SMOOTH-MENÜ; Toggle-Menü gleitet von links nach rechts hinein
  • Animation ROTATION + VERKLEINERN BIS UNSICHTBAR
  • Animation ZOOM-IN + ROTATION, Reinzoom-Effekt weil Vergrösserung + Rotation innerhalb der Box abläuft
  • Animation SCALE, vergrössern
  • Animation PERSPEKTIVISCHES WENDEN auf X und Y-Ebene
  • Animation SLIDE-RIGHT + FARBÄNDERUNG ICON
  • Animation GUMMIBAND
  • Animation DREHEN, schnell
  • Animation DREHEN, langsam
  • Animation DREHEN + VERKLEINERN
 


Nr. 71  VÖ: 23.10.16   Anschauen SUCCESSFUL BUSINESS PRESENTATION





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Buchdruck (Inset) - Einstanz-Effekt beim Homepagenamen (mit CSS-textshadow)
  • Mit Toggle-Menü.( Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus)
  • PERSPEKTIVISCHE ROTATION , hier Schrägstellung (mit CSS-perspective/rotate)
  • Schrägen ohne Grafik: (mit CSS-linear-gradient).
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Pseudoelement ":first-letter". Erster Buchstabe anders formatiert.
  • Pseudoelement ":first-line". Erste Zeile anders formatiert.
  • Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
  • Alle folgenden ANIMATIONEN per CSS gestaltet.
  • Animation SMOOTH-MENÜ; Toggle-Menü gleitet von links nach rechts hinein
  • Animation GLEITEN, Foto von links nach rechts |startet automatisch
  • Animation SCALE, vergrössern
  • Animation SLIDE-RIGHT + FARBÄNDERUNG ICON
  • Animation GUMMIBAND
  • Animation ZOOM-IN, in Foto-Box hinein zoomen
  • Animation PERSPEKTIVISCHES WENDEN auf Y-Ebene
  • Animation PERSPEKTIVISCHES WENDEN auf X-Ebene
  • Animation PERSPEKTIVISCHES SCHRÄG VERGRÖSSERN
  • Animation DREHEN, schnell
  • Animation DREHEN, langsam
  • Animation DREHEN + VERKLEINERN
  • Animation WAEHLSCHEIBE
 


Nr. 39  VÖ: 10.10.16   Anschauen DRIVE MY CAR





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.

Alles komplett ohne Javascript.
  • Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (Menü-Button An/Aus)
  • Transparenz (mit CSS-rgba)
  • Schrägen ohne Grafik: (mit CSS-linear-gradient).
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Pseudoelement ":first-letter". Erster Buchstabe anders formatiert.
  • Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
  • Alle folgenden ANIMATIONEN per CSS gestaltet.
  • Animation FAHREN, kleines Auto fährt
  • Animation SCALE, vergrössern
  • Animation SLIDE-RIGHT + FARBÄNDERUNG ICON
  • Animation GUMMIBAND
  • Animation EINBLENDEN + TEXTÜBERLAGERUNG
  • Animation PERSPEKTIVISCHES WENDEN auf Y-Ebene |startet automatisch
  • Animation PERSPEKTIVISCHES WENDEN auf X-Ebene |startet automatisch
  • Animation DREHEN, schnell
  • Animation DREHEN, langsam
  • Animation DREHEN + VERKLEINERN
  • Animation WAEHLSCHEIBE
 


Nr. 37  VÖ: 26.09.16   Anschauen START-UP!





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Mobile-First-Technik.
    ~~~  Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (Menü-Button An/Aus)
    ~~~  Schrägen ohne Grafik: (mit CSS-linear-gradient).
    ~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
    ~~~  Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
    ~~~  CSS-Animation: Perspektivisches Wenden - startet automatisch - ( auf Fotos im Text)
    ~~~  CSS-Animation: Einblenden-Effekt + Textüberlagerung 1 (bei Mouseover auf den Fotos)
    ~~~  CSS-Animation: Gummiband-Effekt (bei Mouseover auf dem Homepage-Namen)
    ~~~  CSS-Animation: Scale-Vergrößern-Effekt (bei Mouseover auf einigen runden Fotos)
    ~~~  CSS-Animation: Slide-Right-Effekt + Farbänderung Font-Icon (bei Mouseover auf den Listen im Text)
    ~~~  CSS-Animation: Drehen, schnell (bei Mousover auf Icons )
    ~~~  CSS-Animation: Drehen, langsam (bei Mousover auf einigen runden Fotos )
    ~~~  CSS-Animation: Drehen + Verkleinern (bei Mousover auf Icons )
    ~~~  CSS-Animation: Wählscheibe-Effekt (bei Mousover auf Lupe-Icon und Schraubenschlüssel-Icon )


    1= Einblenden/Textüberlagerung: Es wird ein Textfeld über das Foto eingeblendet (für ergänzende Infos zum Foto)
    sowie auch ein Lupen-Symbol (für eine grössere Foto-Ansicht bei Klick). Das Lupen-Icon ist auch animiert.
    Bei "mouseout" (Verlassen des Bereiches mit der Maus) wird das Textfeld (mit Text und Font-Icon "Lupe") dann     ausgeblendet und das Bild dafür wieder eingeblendet.

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion sowie alle CSS-Effekte ohne Javascript!

 


Nr. 74  VÖ: 29.08.16   Anschauen BIG CITY WALK





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Transparenz (mit CSS-Opacity).
~~~  Transparenz (mit CSS-rgba).
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Linearer Farbverlauf ohne Grafik: (mit CSS-linear-gradient).
~~~  Pseudoelement ":after" und ":before". Angewandt bei Menü-Font-Icons und Listen-Font-Icons.
~~~  CSS-Animation: Bildwechsler / Fotoschau (im Kopfbereich, startet automatisch)
~~~  CSS-Animation: Reverse Bildwechsler / Fotoschau läuft rückwärts1 herum ab)
~~~  CSS-Animation: Einblenden-Effekt + Textüberlagerung 2 (bei Mouseover auf den Fotos)
~~~  CSS-Animation: Gummiband-Effekt (bei Mouseover auf den runden Fotos)
~~~  CSS-Animation: Wählscheibe-Effekt 3 (bei Mouseover auf den Icons im Kopfbereich)
~~~  CSS-Animation: Beben-Effekt (bei Mouseover auf dem Homepage-Namen)
~~~  CSS-Animation: Slide-Left-Effekt + Farbänderung von Schrift und Font-Icon (bei Mouseover im Haupt-Menü)
~~~  CSS-Animation: Schwingen-Effekt + Farbänderung Hintergrundfarbe (bei Mouseover auf den Zitat-Feldern)
~~~  CSS-Animation: Slide-Right-Effekt + Farbänderung Font-Icon (bei Mouseover auf den Listen im Text)
~~~  CSS-Animation: Perspektivisches Wenden -startet automatisch-( auf Foto im Text)
~~~  CSS-Animation: Drehen (bei Mousover auf Icons im Text)
~~~  CSS-Animation: Drehen + Verkleinern (bei Mousover auf Icons im Text)
~~~  CSS-Animation: Textrotation4 + diverse Effekte -startet automatisch- (auf Slogan am Textende)
~~~  Keine Lust auf Animationen? (Anbei eine Lösch-Anleitung).

    1= Reverse Bildwechsler: Wir lassen die Fotoschau auf jeder zweiten Seite rückwärts ablaufen.
    Das macht es noch spannnender. Bei uns sind das die Links namens Primus, Tertius und Quintus.

    2= Einblenden/Textüberlagerung: Es wird ein Textfeld über das Foto eingeblendet (für ergänzende Infos zum Foto)
    sowie auch ein Lupen-Symbol (für eine grössere Foto-Ansicht bei Klick). Das Lupen-Icon ist auch animiert.
    Bei "mouseout" (Verlassen des Bereiches mit der Maus) wird das Textfeld (mit Text und Font-Icon "Lupe") dann     ausgeblendet und das Bild dafür wieder eingeblendet.

    3= Wählscheibe: Viertel-Drehung nach rechts, dann Viertel-Drehung nach links bei schnellem Durchlauf /
    Dauer: 0.7sek / Ablauf 2x bei Mausberührung

    4= Textrotation: Auf jeder Seite gibt es eine andere Textrotation, gekoppelt mit einem zusätzlichen Effekt,
    wie Änderung von Schriftfarbe, Hintergrund, Schriftgrösse.
    Ach ja: Auch ein "Heartbeat-Effekt" (Schlagendes Herz) ist dabei. Schauen Sie mal, ob Sie dies entdecken.

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion sowie alle CSS-Effekte ohne Javascript!

 


Nr. 56  VÖ: 14.08.16   Anschauen DOCUMENT RESPONSIVE VERSION





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Special Edition. Responsive-Version unseres Templates Nr. 36/Document.
~~~  Hochgestelltes Textzeichen (Sup). Für eine ergänzende Texterklärung einzelner Begriffe am Ende der Seite.
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Linearer Farbverlauf ohne Grafik: (mit CSS-linear-gradient).
~~~  Kreisförmiger Farbverlauf ohne Grafik: (mit CSS-radial-gradient).
~~~  Pseudoelement ":after" und ":before" 1. Angewandt bei Menü-Font-Icons und Listen-Font-Icons.
~~~  CSS-Animation: Schwingen-Effekt + Farbänderung Rahmen/Schriftfarbe (bei Mouseover auf den Zitat-Feldern)
~~~  CSS-Animation: Verschiedene Slide (Verschieben) - Effekte 2 (bei Mouseover auf den Fotos)
~~~  Keine Lust auf Animationen? (Lösch-Anleitung für Sie anbei).

          1= Die Pseudoelemente ::before und ::after erzeugen ein beliebig formatierbares Element, das innerhalb des
          angesprochenen Elements vor bzw. nach dem tatsächlich vorhandenen Inhalt eingefügt wird.

            2= SLIDE-TOP, SLIDE-BOTTOM, SLIDE-LEFT, SLIDE-RIGHT, SLIDE-DIAGONAL, SLIDE-ZICKZACK.

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion sowie alle CSS-Effekte ohne Javascript!

 


Nr. 28  VÖ: 25.07.16   Anschauen LEGATUS DOMINUS





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Flat-Design (mit minimalen und sehr dezenten Schatteneinsatz bei einigen Objekten). Denn: Die Mischung macht´s !
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Pseudoelement "::before" 1. Angewandt bei Menü-Font-Icons und Listen-Font-Icons.
~~~  CSS-Animation: Bildwechsler (Slideshow) tauscht Fotos.
~~~  CSS-Animation: Der Bildwechsler tauscht dabei gleichzeitig auch Textfeld plus Weiterlesen-Button.

          1= Die Pseudoelemente ::before und ::after erzeugen ein beliebig formatierbares Element, das innerhalb des
          angesprochenen Elements vor bzw. nach dem tatsächlich vorhandenen Inhalt eingefügt wird.

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion sowie alle CSS-Effekte ohne Javascript!

 


Nr. 16  VÖ: 11.07.16   Anschauen LA BELLA VITA





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Halbkreis-Menü, mit Transparenz (per CSS-rgba) : Durchgehend in allen Auflösungen.
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Font-Icon-Tausch beim Menü: (Bei Mausberührung wechselt das Font-Icon "fa-toggle-off" (\f204)
          mit dem Font-Icon "fa-toggle-on" (\f205)).
~~~  Aktueller Link: (Abweichend vom Ausgangs-Link: Zeigt spezielle Linkfarbe plus Font-Icon "fa-toggle-on" an).
~~~  Pseudoelement "::after" 1. Angewandt bei Menü-Font-Icons und Listen-Font-Icons.
~~~  CSS-Animation: Bildwechsler (Slideshow auch hinter dem Halbkreis-Menü ablaufend/durchscheinend)
~~~  CSS-Animation: Drehen - Unendlich (Kleines Sonnen-Icon dreht dezent, automatisch startend)
~~~  CSS-Animation: Slide-Top (Bei Mausberührung auf HP-Namen,1 x Durchlauf)
~~~  CSS-Animation: Drehen - 3 Rotationen (Bei Mausberührung auf Nach-Oben-Icon, 1 x Durchlauf)

          1= Die Pseudoelemente ::before und ::after erzeugen ein beliebig formatierbares Element, das innerhalb des
          angesprochenen Elements vor bzw. nach dem tatsächlich vorhandenen Inhalt eingefügt wird.

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion sowie alle CSS-Effekte ohne Javascript!

 


Nr. 101  VÖ: 03.07.16   Anschauen TOP COMPANY RESPONSIVE



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Special Edition. Responsive-Version unseres Templates Nr. 27/Top Company.
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Halbkreis-Menü: Durchgehend in allen Auflösungen.
~~~  Pseudoelement ":after" 1. Angewandt bei Menü-Font-Icons und Listen-Font-Icons.

          1= Die Pseudoelemente ::before und ::after erzeugen ein beliebig formatierbares Element, das innerhalb des
          angesprochenen Elements vor bzw. nach dem tatsächlich vorhandenen Inhalt eingefügt wird.

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion sowie alle CSS-Effekte ohne Javascript!

 


Nr. 04  VÖ: 25.06.16   Anschauen CUP OF COFFEE




Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Mit Toggle-Menü. Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus)
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  CSS-Animation: Smooth-Menü (Toggle-Menü gleitet von links nach rechts hinein)

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch das Toggle-Menü sowie alle CSS-Effekte ohne Javascript!

 


Nr. 61  VÖ: 10.06.16   Anschauen CHILLWAVE STRUCTURES



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Einfärben der Logo-Grafik per CSS (hier in Blau).
~~~  Transparentes Dreieck per CSS.
~~~  Schrägstellung von Objekten per CSS..
~~~  Linien links und rechts neben den Überschriften.
~~~  Mit Toggle-Menü. (Button An/Aus)
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Kreisförmiger Farbverlauf ohne Grafik (mit CSS-radial-gradient).
~~~  CSS Pattern (hier: dezenter, blasser Streifen-Hintergrund ohne Grafik).
~~~  CSS-Animation: 45-Grad-Smooth-Menü (Menü gleitet im 45-Grad-Winkel hinein)
~~~  CSS-Animation: Versch. Drehungen (bei Mouseover auf verlinkten Icons und Pfeil-Icons)

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch das Toggle-Menü sowie alle CSS-Effekte ohne Javascript!

 


Nr. 94  VÖ: 27.05.16   Anschauen MEADOW WITH DANDELION



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Transparente CSS-Schrägen (zu einer Spitze geformt, eingefärbt und gestapelt).
~~~  Linien links und rechts neben den Überschriften.
~~~  Mit Toggle-Menü. (Button An/Aus)
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Linearer Farbverlauf ohne Grafik (mit CSS-linear-gradient).
~~~  CSS Pattern (hier: Streifen-Hintergrund ohne Grafik).
~~~  CSS-Animation: Smooth-Menü (Menü gleitet von oben hinein)
~~~  CSS-Animation: Versch. Drehungen (bei Mouseover auf verlinkten Icons und Pfeil-Icons)
~~~  CSS-Animation: Schiebe-Effekt mit Textüberlagerung + Bild-Effekt 1 (bei Mouseover auf den Fotos)
            1= je nach Bild: ZOOM-IN-Effekt, AUSBLENDEN-Effekt, FLIPP-Effekt, VERZERR-Effekt.

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch das Toggle-Menü sowie alle CSS-Effekte ohne Javascript!

 


Nr. 46  VÖ: 12.05.16   Anschauen LITTE RED RIDING HOOD



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  CSS-Schrägen (zu einer Spitze geformt).
~~~  CSS-Glossy Buttons im Hauptmenü (nur per CSS, ohne Grafik erstellt).
~~~  Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (Button An/Aus)
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Linearer Farbverlauf ohne Grafik (mit CSS-linear-gradient).
~~~  CSS Pattern (hier: Rote-Punkte-Hintergrund ohne Grafik).
~~~  Menü-Leiste (Name/Menü-Button) bei mobilen Auflösungen fest oben positioniert (scrollt dort also nicht mit).
~~~  CSS-Animation:Homepagename dreht und ändert dabei langsam die Farbe (bei Mouseover im oberen Bereich)
~~~  CSS-Animation: Langsame Änderung von Icon-Farbe und Icon-Hintergrund (bei Mouseover auf den Icons)
~~~  CSS-Animation: Schiebe-Effekt mit Textüberlagerung + Bild-Effekt 1 (bei Mouseover auf den Fotos im Inhaltsbereich)
            1= ZOOM-IN-Effekt, FLIPP-Effekt, SLIDE-OUT-RIGHT-Effekt, VERZERR-Effekt, ZOOM-OUT-Effekt

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch das Toggle-Menü sowie alle CSS-Effekte ohne Javascript!

 


Nr. 106  VÖ: 25.04.16   Anschauen SURFIN'GIRL 06:52 AM



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Linien links und rechts vom Namen/Seitentitel (kennt man aus Print-Medien - hier mal auf der Webseite umgesetzt).
~~~  CSS-Glossy Buttons im Hauptmenü (nur per CSS, ohne Grafik erstellt).
~~~  Diese Glossy Buttons sind transparent (läßt auch Ihre Hintergrundgrafik durscheinen).
~~~  Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (Button An/Aus)
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Fotos im 16:9-Format (bei den Fotos im Inhaltsbereich).
~~~  Linearer Farbverlauf ohne Grafik (mit CSS-linear-gradient).
~~~  CSS-Animation: Schwingen (bei Mouseover auf den Fotos im Inhaltsbereich)
~~~  CSS-Animation: Hoch-Schrauben (= Drehen + Slide-Top - bei Mouseover auf den Icons)




[ Fotos vorstehend zeigen Auflösungsansicht in Original-Größe vom Handy im Portrait-Modus ]

Foto 1: Zeigt Toggle-Menü AUS sowie Linien links u. rechts vom Namen/Seitentitel
Foto 2: Zeigt Toggle-Menü AN

Hinweis: Das Toggle-Menü wird per Klick auf den Button mit den drei Linien (der sogenannte Hamburger Button) eingeschaltet und es erscheint das Menü sowie das "X", bei Klick auf das "X" wird das Menü wieder ausgeschaltet und der "Hamburger Button" ist wieder da.

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch das Toggle-Menü sowie alle CSS3-Effekte ohne Javascript!

 


Nr. 90  VÖ: 11.04.16   Anschauen THIRTIETH OF MAY



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Eventuell gut für Responsive-Neulinge (denn hier mal ohne Animationen, Font-Icons und Transparenz).
~~~  CSS-Glossy Buttons im Hauptmenü (nur per CSS, ohne Grafik erstellt).
~~~  Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (Button An/Aus)
~~~  Fotos im 16:9-Format (bei den Fotos im Inhaltsbereich).
~~~  Linearer Farbverlauf ohne Grafik (mit CSS-linear-gradient).

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch das Toggle-Menü ohne Javascript!

 


Nr. 70  VÖ: 01.04.16   Anschauen SUCCESS IN JOB



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

~~~  CSS-Animation: Slideshow (Bildwechsler).
~~~  Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (Button An/Aus)
~~~  Runde Fotos. ( mit CSS-border-radius)
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  CSS-Animation: Drehen (bei Mouseover auf den Fotos im Inhaltsbereich)
~~~  CSS-Animation: Schweben (automatisch bei Seitenstart auf den Social-Median-Icons)
~~~  CSS-Animation: Slide-Left (bei Mouseover auf den Social-Median-Icons

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch das Toggle-Menü sowie alle CSS-Effekte ohne Javascript!

 


Nr. 85  VÖ: 16.03.16   Anschauen REFRESH YOURSELF



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Schräggestellte Objekte (mit CSS-transform:rotate).
~~~  Transparenz (mit CSS-rgba).
~~~  Fixierter Background (auch bei mobilen Geräten). Seite scrollt also über den feststehenden Hintergrund.
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  CSS Pattern (Gekachelter Hintergrund ohne Grafik).
~~~  Linearer Farbverlauf ohne Grafik (mit CSS-linear-gradient).
~~~  Radialer Farbverlauf ohne Grafik (CSS-radial-gradient).
~~~  CSS-Animationen: Schwingen (bei Mouseover auf den Fotos im Inhaltsbereich)
~~~  CSS-Animationen: Hoch-Schrauben (= Drehen + Slide-Top - bei Mouseover auf den Icons/Fotos)


Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch alle CSS3-Effekte ohne Javascript!

 


Nr. 69  VÖ: 04.03.16   Anschauen COOL WATER



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Transparenz (mit CSS-Opacity).
~~~  Transparenz (mit CSS-rgba).
~~~  Fixierter Background (auch bei mobilen Geräten). Seite scrollt also über den feststehenden Hintergrund.
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Linearer Farbverlauf ohne Grafik (mit CSS-linear-gradient).
~~~  Streifen-Hintergrund ohne Grafik (CSS-linear-gradient).
~~~  CSS-Animationen: Hoch-Schrauben (= Drehen + Slide-Top - bei Mouseover auf den Icons)

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch alle CSS3-Effekte ohne Javascript!

 


Nr. 22  VÖ: 27.02.16   Anschauen TAKE A RIDE



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Transparenz (mit CSS-Opacity).
~~~  Transparenz (mit CSS-rgba).
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Linearer Farbverlauf ohne Grafik.
~~~  CSS-Animationen: Schwingen, Hoch-Schrauben (= Drehen + Slide-Top - bei Mouseover auf den Fuss-Icons)

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch alle CSS3-Effekte ohne Javascript!

 


Nr. 12  VÖ: 22.02.16   Anschauen Style & Emotions



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Transparenz (mit CSS-rgba).
~~~  Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
~~~  Streifen-Hintergrund ohne Grafik (CSS-linear-gradient).
~~~  Fixierter Background (auch bei mobilen Geräten). Seite scrollt also über den Hintergrund.
~~~  CSS-Animationen: Schwingen, Hoch-Schrauben (= Drehen + Slide-Top - bei Mouseover auf den Fuss-Icons).
~~~   Auch ovale oder rechteckige Font-ICONS mit Rundung (mit CSS-border-radius + div-container).

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch alle CSS3-Effekte ohne Javascript!

 


Nr. 48  VÖ: 16.02.16   Anschauen WEB CARD



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Transparenz (mit CSS-rgba).
~~~  Fixierter Background (auch bei mobilen Geräten).
~~~  Runder ICON-Hintergrund auch bei ovalen oder rechteckigen Icons (mit CSS-border-radius + div-container).
~~~  HTML-Anker (Innerhalb der Unterseiten werden die Links per sog. Html-Anker angesprungen).
~~~  CSS-Animationen: Drehen, Schwingen, Slide-Top.

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch alle CSS3-Effekte ohne Javascript!

 


Nr. 64  VÖ: 02.02.16   Anschauen Der Grüne Weg



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Tooltip (Bei Mausberührung erscheint Link-Beschreibungstext per CSS).
~~~  Diagonale Schrägen nach oben und unten (mit CSS-linear-gradient).
~~~  Linare Farbverläufe (mit CSS-linear-gradient).
~~~  Kreisförmige Farbverläufe (mit CSS-radial-gradient).
~~~  Runde Fotos (mit CSS-border-radius).
~~~  Schatten-Effekte (CSS-Box-Shadow und Text-Shadow).
~~~  Menü-Leiste bei allen Auflösungen fest oben positioniert (scrollt dort also nicht mit).
~~~  CSS-Animationen:Gummiband, Drehen, Schwingen, Slide-Top, Slide-Left.
~~~  Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (mit Umschalt-Button An/Aus).

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch alle CSS-Effekte sowie auch das Toggle-Menü ohne Javascript!

 


Nr. 42  VÖ: 24.01.16   Anschauen Let the dogs out



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  FLAT-DESIGN (Flach, Minimalistisch, Modern).
~~~  Khaki-Farbtöne (Passend zur Hundewelt).
~~~  Runde Fotos mit CSS-border-radius.
~~~  Bei mobilen Geräten wird ein zusätzlicher "Seitentitel" (z.b. "home" für die Startseite) eingeblendet.
~~~  Bei mobilen Geräten: Fest am oberen Rand positionierte Menü-Leiste (Scrollt nicht mit).
~~~  CSS-Animationen: Drehen, Slide-Top, Slide-Left.
~~~  Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (mit Umschalt-Button An/Aus).

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch alle CSS-Effekte sowie auch das Toggle-Menü ohne Javascript!

 


Nr. 84  VÖ: 14.01.16.   Anschauen Blue And Green



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  FLAT-DESIGN.
~~~  Diagonale Schrägen nach oben und unten mit CSS-linear-gradient.
~~~  Runde Fotos mit CSS-border-radius.
~~~  Fest am oberen Rand positionierte Menü-Leiste (Scrollt nicht mit).
~~~  CSS-Animationen: Drehen, Slide-Top.
~~~  Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (mit Umschalt-Button An/Aus).

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch alle CSS-Effekte sowie auch das Toggle-Menü ohne Javascript!

 


Nr. 121  VÖ: 04.01.16   Anschauen Documents & Files



Homepage Vorlage , templates , Homepage-Vorlagen,  free download



[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


~~~  Akten-Ordner im Original-Maßstab zur Beschriftung mit Ihrem Homepagenamen.
~~~  Mehrere Fotos zum Beschriften der Aktenordner anbei - Bis zu 12 Buchstaben (=12 Ordner) sind möglich.
          Beschriftet man zudem die zweite Reihe der Etiketten, dann bis zu 24 Buchstaben (=12 Ordner).
          Zusätzlich kann der Hintergrund der Aktenordner geändert werden. (Beispiele u. Quellcode anbei)
~~~  Fade-In-Effekt: Jede Seite wird sanft eingeblendet.
~~~  Linearer Farbverlauf mit CSS-linear-gradient.
~~~  Radialer (kreisförmiger) Farbverlauf mit CSS-radial-gradient.
~~~  CSS-Gradient Farbverlauf in Verbindung mit transparenter Hintergrund-Grafik.
~~~  Fest am oberen Rand positionierte Menü-Leiste (Scrollt nicht mit).
~~~  CSS-Animationen: Schwingen, Drehen, Gummiband, Umkippen, Beben, Slide-Top, Slide-Right.
~~~  CSS-Animation: Smooth-Menü (Menü gleitet hinein)
~~~  CSS-Animation: Menü-Button gleitet nach rechts raus, Schliess-Button von oben hinein.
~~~  Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert ( mit Umschalt-Button An/Aus).

Alles komplett ohne Javascript:
Also sowohl die responsive Konstruktion als auch alle CSS-Effekte sowie auch das Toggle-Menü ohne Javascript!

 


Beliebte Vorlagen, die nicht responsive sind

Folgende Vorlagen sind bei unseren Kunden beliebt:

Nr. 29
Design: Quintessenz



Nr. 80
Design: June



Nr. 34
Design: Dünengras



Nr. 96
Design: Green Eyes



Nr. 36
Design: Document



Nr. 27
Design: Top Company




Nr. 47
Design: Friday





Nr. 51
Design: Impressions



 

Weitere spannende, aber einfachere Vorlagen von uns finden Sie auf unserer zweiten Seite

www.easy-vorlagen.de