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,--
 


   → 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 + + + IN KÜRZE erhältlich.... + + +

Nr. 20  VÖ: in Kürze   Anschauen NATURE STUDIO / Technik: Responsive Webdesign




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 ( Dreieck, Yin-Yang ) nur mit CSS erstellt .
  • 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. 03  VÖ: 20.02.17   Anschauen BRÜCKEN-PONTS-BRIDGES / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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. 09  VÖ: 23.10.16   Anschauen SUCCESSFUL BUSINESS PRESENTATION / Technik: Responsive Webdesign




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. 05  VÖ: 10.10.16   Anschauen DRIVE MY CAR / Technik: Responsive Webdesign




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! / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign









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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign




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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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 / Technik: Responsive Webdesign



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. 24  VÖ: 04.01.16   Anschauen Documents & Files / Technik: Responsive Webdesign



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