Neu.

Diese Webseiten sind neu bei uns.

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 nur Euro 29,-.



HomeVorlagen(c) NutzungKontakt
ImpressumBestellungWiderrufDatenschutz



+ + +   Neue Vorlagen.     
 
 
 07 DICERE DIGITUS
vom 18.10.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

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.
Webseiten-Konstruktion ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Menüleiste. Mit Farbverlauf ( CSS-linear-gradient ), Buttons an linker u. rechter Kante abgerundet.
  • Seitentitel. 1 Auf jeder Seite ein anderes Font-Icon.
  • CSS-Halbkreise 2 vertikal. ( Zwei vertikale Halbkreise werden zu einem Kreis zusammengesetzt ).
  • CSS-Halbkreise 2 horizontal. ( Zwei horizontale Halbkreise werden zu einem Kreis zusammengefügt ).
  • Strukturierte Abschnitte 3 ( mit CSS-Strukturpseudoklassen ) . Tutorial anbei.
  • Mit Toggle-Menü 4 - Menü-Button-Schalter: An/Aus.
  • Mit 'Lightbox Picture Gallery'.5 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'OPEN SANS LIGHT' bereits installiert ).
  • CSS-Animation: Toggle-Menü wird sanft eingeblendet und ist horizontal und vertikal mittig angeordnet
  • CSS-Animation: DREHEN bei Icons im Fuss-Bereich.

1= Seitentitel:
Auf jeder Seite ein anderes Font-Icon als Seitentitel, dekorativ innerhalb eines CSS-Halbkreises angeordnet sorgt für Ordnung und nimmt die Farbe des Inhaltsbereichs auf.

2= CSS-Halbkreise:
Ein Halbkreis enthält Text und der andere Halbkreis enthält ein Font-Icon, beide werden zu einem Kreis geschlossen und es ergibt sich somit ein modernes Element, das grafisch wirkt, jedoch komplett ohne Grafik auskommt.

3= Strukturierte Abschnitte:
Auf der Startseite sehen Sie bei diesem Template im Inhaltsbereich einige Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen in diesem Template in einem kleinen Tutorial zum Thema 'CSS-nth-child'.

4= 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. Hier wurde das Toggle-Menü für alles Auflösungen und damit für ein spannendes Design eingesetzt.

5= Lightbox Picture Gallery: So funktioniert diese Foto-Schau:
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 111 Booking Travel Ltd.
vom 09.10.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

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.
Webseiten-Konstruktion ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Doppel-Transparenz mit 2 transparenten Ebenen (beim Hauptmenü) mit 'CSS-rgba'.
  • Toggle-Schalter mit Doppelfunktion.1 Klick auf Schalter wechselt zwischen Menü und Infofenster.
  • CSS-Animation: SLIDE-TOP plus DREHEN (bei Mausberührung).
  • CSS-Animation: DREHEN (automatisch startend), drehend links-und rechtsherum.
  • CSS-Animation: SLIDE-RIGHT (bei Mausberührung) auf den Buttons im Hauptmenü.
  • Strukturierte Abschnitte 2 ( mit CSS-Strukturpseudoklassen ) . Tutorial anbei.
  • Mit 'Lightbox Picture Gallery'.3 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'ROBOTO LIGHT' und 'OPEN SANS LIGHT' bereits installiert ).

1= Toggle-Schalter mit Doppelfunktion:
Normalerweise hat ein Toogle-Schalter ja nur die Option AN und AUS (also z.B. bei Klick wird ein Menü eingeblendet, bei erneutem Klick ausgeblendet). Hier gibt es jedoch eine Doppelfunktion, d.h. bei Klick wird ein Infofenster eingeblendet und gleichzeitig das Menü ausgeblendet sowie bei erneutem Klick wird das Menü wieder eingeblendet und gleichzeitig das Infofenster ausgeblendet.

2= Strukturierte Abschnitte:
Auf der Startseite sehen Sie bei diesem Template im Inhaltsbereich einige Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen in diesem Template in einem kleinen Tutorial zum Thema 'CSS-nth-child'.

3= Lightbox Picture Gallery: So funktioniert diese Foto-Schau:
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 11 ON THE SUNNY SIDE OF LIFE
vom 22.09.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

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.
Webseiten-Konstruktion ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Abgewinkelte Buttons (Schräge Kanten)1 Mit CSS-transform:skew.
  • Strukturierte Abschnitte 2 ( mit CSS-Strukturpseudoklassen ) . Tutorial anbei.
  • Mit Toggle-Menü 3 - Menü-Button-Schalter: An/Aus.
  • Mit 'Lightbox Picture Gallery'.4 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'OPEN SANS LIGHT' bereits installiert ).
  • CSS-Animation: Toggle-Menü wird sanft eingeblendet und ist horizontal und vertikal mittig angeordnet
  • CSS-Animation: DREHEN bei Icons im Fusstop-Bereich.
  • CSS-Animation: VERZERREN bei Icons im Fuss-Bereich.

1= Abgewinkelte Buttons:
Wir haben hier eine Schrägstellung der Buttons um 15 Grad. Da die Schrift aber auf dem Ojekt damit auch schräg gestellt wird, geben wir der Schrift eine Schrägstellung von 15 Grad in die andere Richtung, mit dem Ergebnis das die Schrift jetzt gerade angezeigt wird.

2= Strukturierte Abschnitte:
Auf der Startseite sehen Sie bei diesem Template im Inhaltsbereich einige Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen in diesem Template in einem kleinen Tutorial zum Thema 'CSS-nth-child'.

3= 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. Hier wurde das Toggle-Menü für alles Auflösungen und damit für ein spannendes Design eingesetzt.

4= Lightbox Picture Gallery: So funktioniert diese Foto-Schau:
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 52 Technical Solutions
vom 14.09.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]
Aufklapp-Menü
bestehend aus:
+ CSS-ONLY
+ RESPONSIVE
+ TOUCH-FRIENDLY
+ KEIN JAVASCRIPT

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.
Aufklapp-Menü CSS-Only.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Geometrische Form. CSS-Dreiecke verstärken optisch die Trennung der Abschnitte, Highlight ist hier, das die Dreiecke dabei jeweils die Farbe des vorstehenden Abschnitts übernehmen.
  • Mit AUFKLAPP-MENÜ 1 ( + Responsive + CSS-Only + Touch-Friendly ) - Komplett ohne Javascript.
  • Strukturierte Abschnitte 2 ( mit CSS-Strukturpseudoklassen ) . Tutorial sowie weiterführende Links anbei.
  • Akkordeon-Menü 3 ( Bei mobilen Auflösungen wandelt sich das Menü ins sog. Akkordeon-Menü und schiebt sich platzsparend zusammen. )
  • Toggle-Schalter. 4 Menü-Button-Schalter: An/Aus.
  • Mit 'Lightbox Picture Gallery'. 5 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'OLD STANDARD' und 'Open Sans' bereits installiert ).
  • CSS-Animation: Menü gleitet von RECHTS nach LINKS hinein
  • CSS-Animation: Der Toggle-Schalter hat ebenfalls eine Slider-Funkion, nach Klick schiebt er sich hinaus und gibt den darunter liegenden Schließen-Button frei.
  • CSS-Animation: Wenden. ( Icons im Fussbereich )

1= Aufklapp-Menü:
Das Menü ist responsive und nur mit CSS erstellt. Es funkioniert ohne Javascript - und das auch auf mobilen Geräten.
Hinweis dazu: Normalerweise wird die Aufklapp-Funktion ja per Mausberührung (hover) getätigt. Aber mobile Geräte kennen eben keine Maus sondern nur Touch. Unsere Lösung beruht auf der sog. 'Toggle-Funktion per Checkbox-Hack'. "Getoggled" werden also nicht nur der Menü-Schalter sondern insbesondere auch die Top-Level-Links, welche die Untermenüs öffen.

2= Strukturierte Abschnitte:
Auf der Startseite sehen Sie bei diesem Template im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen können, erklären wir Ihnen in diesem Template in einem kleinen Tutorial zum Thema 'CSS-nth-child'.

3= Akkordion-Menü:
Unter einem Akkordeon versteht man einen Aufklappmechanismus (hier auf das Menü bei mobilen Auflösungen angewandt), der nur einen Teilbereich eines Objektes zeigt und erst durch click oder touch weitere Teilbereiche aufschiebt.

4= Toggle Schalter:
Eine Javascript-freie Lösung, welche auf mobilen Geräten eine Funktion per Schalter (an/aus) ermöglicht.

5= Lightbox Picture Gallery: So funktioniert diese Foto-Schau:
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 32 ZEN
Vom 01.09.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]
Aufklapp-Menü
bestehend aus:
+ CSS-ONLY
+ RESPONSIVE
+ TOUCH-FRIENDLY
+ KEIN JAVASCRIPT

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.
Webseiten-Konstruktion ohne Javascript.
Aufklapp-Menü CSS-Only.
  • Mit AUFKLAPP-MENÜ 1 ( + Responsive + CSS-Only + Touch-Friendly ) - Komplett ohne Javascript.
  • Strukturierte Abschnitte ( mit CSS-Strukturpseudoklassen ) 2. Tutorial sowie weiterführende Links anbei.
  • 3 Fotos im Kopfbereich. Auf jeder Seite 3 andere Fotos möglich, so schafft jede Seite einen besonderen Erinnerungswert.
  • Text-Effekt ( Erhabener Text-Effekt beim Zitat sowie eingestanzter Text-Effekt beim Seitentitel ).
  • Zitate auf jeder Seite. Und zwar immer ein anderes Zitat im Kopfbereich macht jeden Link/Seite einzigartig.
  • Akkordeon-Menü 3 ( Bei mobilen Auflösungen wandelt sich das Menü ins sog. Akkordeon-Menü und schiebt sich platzsparend zusammen. )
  • Toggle-Schalter. 4 Menü-Button-Schalter: An/Aus.
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'OLD STANDARD' und 'JOSEFIN Sans' bereits installiert ).
  • CSS-Animation: Menü gleitet von RECHTS nach LINKS hinein
  • CSS-Animation: Der Toggle-Schalter hat ebenfalls eine Slider-Funkion, nach Klick schiebt er sich hinaus und gibt den darunter liegenden Schließen-Button frei.
  • CSS-Animation: Die Icon-Quadrate (leicht abgerundetet) wandeln sich zu Kreisen + wechseln die Textfarbe und Hintergrundfarbe.

1= Aufklapp-Menü:
Das Menü ist responsive und nur mit CSS erstellt. Es funkioniert ohne Javascript - und das auch auf mobilen Geräten.
Hinweis dazu: Normalerweise wird die Aufklapp-Funktion ja per Mausberührung (hover) getätigt. Aber mobile Geräte kennen eben keine Maus sondern nur Touch. Unsere Lösung beruht auf der sog. 'Toggle-Funktion per Checkbox-Hack'. "Getoggled" werden also nicht nur der Menü-Schalter sondern insbesondere auch die Top-Level-Links, welche die Untermenüs öffen.

2= Strukturierte Abschnitte:
Auf der Startseite sehen Sie bei diesem Template im Inhaltsbereich mehrere Abschnitte, die farbig bzw. per gekachelter Hintergrundgrafik getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen können, erklären wir Ihnen in diesem Template in einem kleinen Tutorial zum Thema 'CSS-nth-child'.

3= Akkordion-Menü:
Unter einem Akkordeon versteht man einen Aufklappmechanismus (hier auf das Menü bei mobilen Auflösungen angewandt), der nur einen Teilbereich eines Objektes zeigt und erst durch click oder touch weitere Teilbereiche aufschiebt.

4= Toggle Schalter:
Eine Javascript-freie Lösung, welche auf mobilen Geräten eine Funktion per Schalter (an/aus) ermöglicht.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 40 IN THE OFFICE
Vom 16.08.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

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.
Webseiten-Konstruktion ohne Javascript.
  • Auf jeder Seite ein anderes Foto - Das schafft Struktur und macht jeden Link sozusagen unverwechselbar .
  • Menü zeigt schliessende + öffnende Ordner-Icons - passend zum Thema 'Office' .
  • H2-Überschrift zeigt oberhalb ein Büroklammer-Icon plus Linie1 - passend zum Thema 'Office' .
  • Mit Toggle-Menü 2 - Menü-Button-Schalter: An/Aus.
  • Transparenz.3 Transparenter Farbfilter mit CSS-rgba.
    ( Ermöglicht, das die Schrift auf jedem Hintergrundfoto gut zu lesen ist ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'ROBOTO LIGHT' und 'OPEN SANS LIGHT' bereits installiert ).
  • CSS-Animation: Toggle-Menü gleitet sanft von OBEN nach UNTEN hinein

1= Überschrift mit Font-Icon plus Linie links + rechts davon:
Oberhalb jeder H2-Überschrift sehen sie eine Linie mit einem Font-Icon, hier eine Büroklammer. Dies wurde angelegt mit dem CSS-Pseudoelement ':after bzw. :before' .
Dieses Font-Icon können Sie auch durch ein beliebig anderes Font-Icon ersetzen, denn die Font-Icon-Schrift 'Font Awesome' ist ja bereits installiert. Dies geschieht alleine über die CSS-Datei format.css und die Änderungen dort gelten dann automatisch für alle HTML-Seiten.

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. Hier wurde das Toggle-Menü für alles Auflösungen und damit für ein spannendes Design eingesetzt.

3= Transparenz/Farbfilter:
Beim 'rgba-Befehl' können Sie Farbe und Deckungsgrad auch anders einstellen (mit Werten von 0 bis 1, wobei gilt: 0=volltransparent und 1= gar keine Transparenz). Dazwischen gelten die eigentlich interessanten Werte von 0.1 bis 0.9.
Ein Beispiel für die Deckungskraft von 70% ist der Wert 0.7, d.h. das ein Objekt zu 30% transparent ist.
Ein Beispiel für die Deckungskraft von 20% ist der Wert 0.2, d.h. das ein Objekt zu 80% transparent ist.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 05 START A NEW CREATIVE PROJECT
Vom 02.08.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]
Aufklapp-Menü
bestehend aus:
+ CSS-ONLY
+ RESPONSIVE
+ TOUCH-FRIENDLY
+ KEIN JAVASCRIPT

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.
Webseiten-Konstruktion ohne Javascript.
  • Mit AUFKLAPP-MENÜ 1 ( + Responsive + CSS-Only + Touch-Friendly ) - Komplett ohne Javascript.
  • Akkordeon-Menü 2 ( Bei mobilen Auflösungen wandelt sich das Menü ins sog. Akkordeon-Menü und schiebt sich platzsparend zusammen. )
  • Toggle-Schalter. 3 Menü-Button-Schalter: An/Aus.
  • Transparenz.4 Transparenter Farbfilter mit CSS-rgba. ( Hier beim Homepagenamen-Feld )
    ( Ermöglicht, das die Schrift auf jedem Hintergrundfoto gut zu lesen ist ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Roboto' und 'Open Sans' bereits installiert ). Schriftschnitt:Light.
  • CSS-Animation: Menü gleitet von RECHTS nach LINKS hinein
  • CSS-Animation: Der Toggle-Schalter hat ebenfalls eine Slider-Funkion, nach Klick schiebt er sich hinaus und gibt den darunter liegenden Schließen-Button frei.

1= Aufklapp-Menü:
Das Menü ist responsive und nur mit CSS erstellt. Es funkioniert ohne Javascript - und das auch auf mobilen Geräten.
Hinweis dazu: Normalerweise wird die Aufklapp-Funktion ja per Mausberührung (hover) getätigt. Aber mobile Geräte kennen eben keine Maus sondern nur Touch. Unsere Lösung beruht auf der sog. 'Toggle-Funktion per Checkbox-Hack'. "Getoggled" werden also nicht nur der Menü-Schalter sondern insbesondere auch die Top-Level-Links, welche die Untermenüs öffen.

2= Akkordion-Menü:
Unter einem Akkordeon versteht man einen Aufklappmechanismus (hier auf das Menü bei mobilen Auflösungen angewandt), der nur einen Teilbereich eines Objektes zeigt und erst durch click oder touch weitere Teilbereiche aufschiebt.

3= Toggle Schalter:
Eine Javascript-freie Lösung, welche auf mobilen Geräten eine Funktion per Schalter (an/aus) ermöglicht.

4= Transparenz/Farbfilter:
Beim 'rgba-Befehl' können Sie Farbe und Deckungsgrad auch anders einstellen (mit Werten von 0 bis 1, wobei gilt: 0=volltransparent und 1= gar keine Transparenz). Dazwischen gelten die eigentlich interessanten Werte von 0.1 bis 0.9.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 30 KANZLEI RA LAWYER & PARTNER
Vom 24.07.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


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.
Webseiten-Konstruktion ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Mit Toggle-Menü 1 ( Bei allen Geräten von Handy bis Desktop-PC ) - Menü-Button-Schalter: An/Aus.
  • Mit 'Lightbox Picture Gallery'.2 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Transparenz.3 Transparenter Farbfilter mit CSS-rgba.
    ( Ermöglicht, das die Schrift auf jedem Hintergrundfoto gut zu lesen ist ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Roboto' und 'Open Sans' bereits installiert ). Schriftschnitt:Light.
  • CSS-Animation: Toggle-Menü gleitet sanft von UNTEN nach OBEN hinein

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.

2= Lightbox Picture Gallery: So funktioniert diese Foto-Schau:
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten

3= Transparenz/Farbfilter:
Beim 'rgba-Befehl' können Sie Farbe und Deckungsgrad auch anders einstellen (mit Werten von 0 bis 1, wobei gilt: 0=volltransparent und 1= gar keine Transparenz). Dazwischen gelten die eigentlich interessanten Werte von 0.1 bis 0.9.
Ein Beispiel für die Deckungskraft von 70% ist der Wert 0.7, d.h. das ein Objekt zu 30% transparent ist.
Ein Beispiel für die Deckungskraft von 20% ist der Wert 0.2, d.h. das ein Objekt zu 80% transparent ist.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 24 TRENDSETTER COMPANY
Vom 12.07.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


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.
Webseiten-Konstruktion ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Geometrische Form ( KREIS, nur mit CSS erstellt ), immer horizontal und vertikal mittig platziert 1.
  • Umwandlung von Kreis in Halbkreis ( Bei kleinen Auflösungen wird aus dem Kreis ein Halbkreis, um Platz zu sparen ) 2 .
  • Strukturelle Abschnitte ( mit CSS-Strukturpseudoklassen ) 3. Tutorial sowie weiterführende Links anbei.
  • Mit 'Lightbox Picture Gallery'.4 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Mit Toggle-Menü bei allen Geräten.5 ( erscheint hier bei allen Geräten von Handy bis Desktop-PC )
    - Menü-Button-Schalter: An/Aus.
  • 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)

1= CSS-Kreis:
Angelegt mit CSS-position: relative/absolute, um es über die anderen Felder zu legen.

2= Umwandlung von CSS-Kreis zu CSS-Halb-Kreis:
Mit der CSS-Technik 'linear-gradient' haben wir hier eine Zweiteilung des Kreises geschaffen und dabei sog. Farbstopps mit 50% gesetzt. So konnten wir den oberen Teil des Kreises einen transparenten Wert (statt einer Farbe) zuordnen, so daß die obere Hälfte des Kreises nicht mehr erscheint und somit zum Halbkreis wird.

3= Strukturierte Abschnitte:
Auf der Startseite sehen Sie bei diesem Template im Inhaltsbereich 5 Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen können, erklären wir Ihnen in diesem Template in einem kleinen Tutorial zum Thema 'CSS-nth-child'.

4= Lightbox Picture Gallery: So funktioniert diese Foto-Schau:
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten

5= 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.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 06 SONNENUNTERGANG - FLAT DESIGN
Vom 26.06.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


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.
Webseiten-Konstruktion ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • 100 % Flat-Design .1
  • Geometrische Form ( HALBKREIS, nur mit CSS erstellt ), steht für die untergehende Sonne.
  • Mit 'Lightbox Picture Gallery'.2 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Mit Toggle-Menü bei allen Geräten.3 ( erscheint hier bei allen Geräten von Handy bis Desktop-PC )
    - Menü-Button-Schalter: An/Aus.
  • 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)

1= Flat Design:
Flat-Design steht für eine Reduktion der Gestaltung auf das Wesentliche. Hierzu wird auf jegliche Tiefe verzichtet, d.h. es gibt keine Farbverläufe, Verzierungen, Schatten, Texturen oder Rahmen. Getreu dem Motto: "Weiniger ist mehr". Es gilt also eine Dreidimensionalität zu vermeiden. Auch das Stichwort 'Minimalismus' ist prägend.

2= Lightbox Picture Gallery: So funktioniert diese Foto-Schau:
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

3= Toggle Menü bei allen Geräten: Normal ist das Toogle-Menü eine Javascript-freie Lösung, welche auf mobilen Geräten ein Menü ermöglicht, welches sich per Schalter ein-und ausschalten läßt. Wir wenden es hier als besonderen Design-Effekt nicht nur auf mobile Geräte sondern auf alle Displays an, sprich von Handy bis Desktop-Pc.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
Nr.03 | Nr.25 | Nr.41 | 22.06.17 Lightbox Picture Gallery Neu eingebaut in

Nr. 03     Anschauen

Nr. 25     Anschauen

Nr. 41     Anschauen

[ ohne Abbildung ]

Besonderheiten

Lightbox Picture Gallery | So funktioniert diese Foto-Schau:
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

 
Nr.65  VÖ: 15.06.17   Anschauen MY FITNESS GIRL - THE VIOLET EDITION -

[ ohne Abbildung ]

Besonderheiten

Enthält eine tolle Pendel-Animation. Es werden 4 übereinanderliegende Objekte (3 Fotos und der Homepagename) per automatisch startender CSS-Keyframes-Animation bewegt. Spannend sind beim Design auch die CSS-Farbverläufe, u.a. auch auf den Icons angewandt.

 
 14 RESTAURANT - FRESH FOOD
Vom 03.06.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


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.
Webseiten-Konstruktion ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Mit 'Lightbox Picture Gallery'.1 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Geometrische Form ( DREIECK 2 nur mit CSS erstellt ) enthält Slogan-Spruch.
    Der Slogan-Spruch ist immer responsive unten rechts im oberen Bereich platziert.
    Mit CSS-position wird der Spruch relative/absolute angelegt und somit aus dem normalen Elementfluss herausgenommen.
  • Geometrische Form ( KREIS mit Umrahmung nur mit CSS erstellt ) enthält hier noch ein Font-Icon (Messer/Gabel).
  • Mit Toggle-Menü.3 ( Bei mobilen Geräten erscheint ein platzsparendes Menü ) - Menü-Button-Schalter: An/Aus.
  • Transparenz ( mit CSS-rgba ). Dieser Farbfilter4 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: Smooth-Menü (Toggle-Menü gleitet sanft von OBEN nach UNTEN hinein)

1= Lightbox Picture Gallery: So funktioniert diese Foto-Schau:
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

2= Dreieck mit Slogan: In Wirklichkeit ist es ein großes Rechteck, per CSS gestaltet und absolut platziert. Diese Rechteck wird um 45Grad gedreht (transform:rotate) und der überstehende Teil wird abgeschnitten (overflow:hidden) bzw. verdeckt.

3= 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.

4= 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 transparent gesetzt, sondern bleibt in voller Deckungskraft erhalten. Beim 'rgba-Befehl' können Sie übrigens Farbe und Deckungsgrad auch anders einstellen.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 21 ALL THE TIME OF THE WORLD
Vom 24.05.17
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 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).

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 58 MY FITNESS GIRL
Vom 10.05.17
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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

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.
  • Leichtes und luftiges Design mit drei Fotos im oberen Bereich übereinander liegend.
  • Menü im Foto, d.h. das Menü ist im mittleren, schräggestelltem Foto angelegt.
  • 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 rar 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 )
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
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

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

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. 116  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

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

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.
Webseiten-Konstruktion ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Mit 'Lightbox Picture Gallery'.1 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Spezial Design der Bilder-Gallerie:
    Doppelrahmen in unterschiedlichen Farben sowie 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= Lightbox Picture Gallery: So funktioniert diese Foto-Schau:
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

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

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

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

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

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 'Lightbox Picture Gallery'.1 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • 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

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

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

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

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

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

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

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. 94  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

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

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

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

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. 77  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

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

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

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

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

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!