| 17 |
ESCAPE PLUS ZERO
|
|
[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]
ONE-PAGER
Alle Inhalte innerhalb einer HTML-Seite.
+ Smooth-Scrolling-To-Sections
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.
One-Pager.
Jquery Smooth Scroll To Sections
Jquery Smooth Scroll To Top
- One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
- Jquery Smooth Scroll To Sections: 2
- Jquery Smooth Scroll To Top: 3
- CSS-Animation: Box-Slider: 4 Halbtransparente Felder plus Text aus verschiedenen Richtungen kommend.
- Toggle-Schalter. 5 Button-Schalter: An/Aus (Öffnen/Schließen).
- CSS-Animation: Fade-In + Delay.
Alle Menü-Links werden bei mobilen Geräten nacheinander mit kurzer Verzögerung (Delay) eingeblendet.
- Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
- Google-Webfonts ( Schrift 'Open Sans' bereits installiert ). Schriftschnitt:Light.
1= One Pager:
Dies ist ein responsive One-Pager. Auch bezeichnet als Single-Page-Website. Im Prinzip bedeutet es, das die Webseite nur aus einem einzigen Webdokument, also nur einer HTML-Seite besteht. Klicken Sie die Links im Menü und sehen Sie wie innerhalb einer Seite die verschiedenen Sektionen aufgerufen werden. Wichtiger Bestandteil eines One-Pagers ist das Smooth-Scroll-To-Sections.
2= Smooth Scroll To Sections:
Die Sprungziele, sprich die einzelnen Sektionen (Abschnitte) werden übrigens animiert sanft und sichtbar angesteuert. Gemeint ist das sogenannte 'Smooth Scrolling', welches der Übersichtlichkeit und besseren Orientierung dient. Man registriert also auch optisch, wohin man gelangt und springt nicht so abrupt wie sonst beim üblichen HTML-Anker.
3= Smooth Scroll To Top:
Bei Bedarf scrollen Sie hier von jedem Abschnitt bzw. jedem beliebigen Puntk der Webseite wieder sanft animiert nach oben zum Menü zurück.
4= Box-Slider:
Wir haben die Lightbox erweitert bzw. optimiert, indem wir eine CSS-Animation hinzugefügt haben. Bei der Gallery (Quartus) sehen Sie bei Mausberührung der Fotos einen Box-Slider-Effekt. Es wird ein farbiges, halbtransparentes Feld, welches eine Text-Aufschrift enthält, aus verschiedenen Richtungen herein gefahren. Transparenz-Farbe, Schriftfarbe und Schrift-Text lassen sich natürlich verändern.
5= Toggle Schalter:
Eine Javascript-freie Lösung, welche insbesondere auf mobilen Geräten eine Funktion per Schalter (an/aus) ermöglicht. Hier öffnen und schließen sich ein Info-Fenster bei allen Auflösungen sowie das Haupt-Menü bei mobilen Geräten.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 18 |
Into The Blue
|
|
[ 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.
Jquery:Retro-Flip-Clock
Jquery:Smooth-Scroll-To-Top
Jquery:Lightbox-Foto-Gallerie
- Neue Version 0 der Icons-Font (Font Awesome) - diese erschien gerade erst im Dezember 2017 - bei uns jetzt schon in dieser Vorlage installiert + Beschreibung für die wichtigsten Änderungen!
- Jquery: Retro-Flip-Clock.1
- Jquery: Smooth-Scrolling-To-Top.2
- Jquery:Lightbox Picture Gallery.3
- CSS-Textschatten 4 nicht nur als Schatten sondern auch als Einstanz-Effekt oder Glüh-Effekt nutzen.
- Mit Toggle-Menü 5 - Menü-Button-Schalter: An/Aus.
- Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
- Google-Webfonts ( Schrift 'OPEN SANS LIGHT' bereits installiert ).
- CSS-Animation: Toggle-Menü schiebt sich von links nach rechts in die Seite hinein.
- CSS-Animation: Vergrösserung ( Scale ) bei Mausberührung auf einigen Icons.
0= Neue Version Font Awesome:
Hintergrund-Info dazu hier vom Magazin: t3n-digital pioneers
1= Retro-Clock:
Eine eher unübliche Uhr im schicken Retro-Flip-Style liest nicht nur die aktuelle Zeit aus, sondern zeigt diese auch fortlaufend aktuell herunterlaufend im Flip-Mechanismus für Stunden, Minuten und Sekunden an.
2= Smooth-Scrolling-To-Top:
Wenn man ein wenig scrollt, blendet sich ein kleiner Button (mit Pfeil-nach-oben) ein. Ein Klick oder Touch auf diesen Button fährt die Seite sanft scrollend nach oben an den Anfang der Seite. Es ist also kein plötzlicher Sprung sondern ein animiertes Hinaufgleiten.
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.
4= CSS-Text-Schatten vielfach nutzen:
Je nachdem, welche Werte man bei Textfarbe, Hintergrundfarbe und Schattenfarbe man vergibt, ergibt sich entweder ein Schatten-Effekt, Einstanz-Effekt oder ein Glüheffekt.
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,--
|
| 19 |
Meine kleine Firma ist online
|
|
[ 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.
Jquery: Lightbox-Foto-Gallerie
Jquery: Smooth-Scroll-To-Top
- Das Logo: 1 Nehmen Sie Ihr eigenes grafisches Logo oder nutzen Sie die Font-Icon für ein Logo.
- Jquery: Smooth-Scrolling-To-Top.2
- Jquery: 'Lightbox Picture Gallery'.3 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
- Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
- Google-Webfonts ( Schrift 'Open Sans' bereits installiert ). Schriftschnitt:Light.
- CSS-Animation: Hineinschieben des Menüs von links nach rechts in die Seite hinein (bei mobilen Geräten).
- CSS-Animation: Fade-In + Delay.
Alle Menü-Links werden bei mobilen Geräten nacheinander mit kurzer Verzögerung (Delay) eingeblendet.
1= Das Logo:
In der Box, welche jetzt das Icon mit dem Schlüssel enthält, ist Platz für Ihr eigenes Logo. Sie können aber auch wie im Beipiel ein Icon benutzen, die Icon-Font 'Font Awesome' ist ja bereits installiert. So haben wir auf den Unterseiten mal verschiedene Icons als Beispiel eingebaut. Somit könnten Sie es leicht für ihre Firma anpassen, im Beispiel also Schlüsseldienst (Sicherheitstechnik), Handwerker, Elektronik (TV, Computer), Fotograf, Gastronomie, Friseur , Medizin (Ambulanz, Pharmazie).
2= Smooth-Scrolling-To-Top:
Wenn man ein wenig scrollt, blendet sich ein kleiner Button (mit Pfeil-nach-oben) ein. Ein Klick oder Touch auf diesen Button fährt die Seite sanft scrollend nach oben an den Anfang der Seite. Es ist also kein plötzlicher Sprung sondern ein animiertes Hinaufgleiten.
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 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
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 20 |
NATURE STUDIO |
|
[ 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 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.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 21 |
CAKES & COFFEE
|
|
JQUERY
3 x Foto-Show
+ ( Fotorama )
+ ( Lightbox )
+ ( Elastislide )
[ 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.
Jquery: Foto-Show 1 (Fotorama)
Jquery: Foto-Show 2 (Lightbox-Foto-Gallery)
Jquery: Foto-Show 3 (Elastislide)
- Jquery: 3 verschiedene Foto-Shows.1
- CSS-Animation: Fade-In + Delay.
Alle Menü-Links werden bei mobilen Geräten nacheinander mit kurzer Verzögerung (Delay) eingeblendet.
- Links beim Menü mit einem vorangestellten Icon 2 Hier ist es ein Kaffeetasse-Icon ( veränderbar )
- Mit Toggle-Menü 3 - Menü-Button-Schalter: An/Aus.
- Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
- Google-Webfonts ( Schrift 'OPEN SANS LIGHT' bereits installiert ).
- CSS-Animation: Toggle-Menü schiebt sich von links nach rechts in die Seite hinein. (Bei mobilen Geräten).
- CSS-Animation: Hover: Vergrösserung ( Scale ) bzw. Wenden ( RotateY ) bei den Icons.
1= 3 x verschiedene Foto-Shows:
1.) Jquery: Foto-Slideshow 1 (Fotorama) - Startet automatisch. Variabel. Auf jeder Seite mit untersch. Bild-Anzahl.
2.) Jquery: Foto-Show 2 (Lightbox-Foto-Gallery) - Startet auf Bild-Klick.
3.) Jquery: Foto-Slideshow 3 (Elastislide) - Zeigt je nach Auflösung eine versch. Anzahl von Bilder in einem Schuber, welcher durch Pfeil-Klick die Bilder nach links verschiebt und somit weitere Bilder anzeigt um dann auf Ihren Bild-Klick das gewünschte Bild öffnet.
2= Objekt voran oder nach gestellt:
Mit Pseudoelement 'before' bzw. 'after'. Vorteil: Die Angabe in der CSS-Datei hat Wirkung auf sämtliche HTML-Seiten. Somit könnnen Sie wie in diesem Fall das Kaffeetassen-Icon blitzschnell durch ein anderes Icon austauschen.
3= Toggle-Schalter:
Eine Javascript-freie Lösung, welche insbesondere auf mobilen Geräten eine Funktion per Schalter (an/aus) ermöglicht. Hier öffnet und schließt sich bei mobilen Geräten das Haupt-Menü
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 22 |
RESPONSIVE BEGINNERS
|
|
[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]
Template für
RESPONSIVE ANFÄNGER
+ Reduzierter Code
+ Leichteres Verständnis
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.
- Dieses Template ist für Responsive Anfänger.
- Auf das Wesentliche reduziert1. Der Quellcode ist damit kurz und knapp, übersichtlich und leichter.
1= Reduzierung auf das Wesentliche:
Es gibt in dieser Vorlage keine Font-Icons, keine Animationen, keine Google Webfonts, kein Grid-System für die Anordnung von Spalten oder horizontalen Bildreihen. Es wurde außerdem verzichtet auf ein Toggle-Menü und ein Aufklapp-Menü. Weggelassen haben wir auch Transparenzen per CSS oder per PNG-Grafiken sowie auch Farbverläufe per CSS. Auch nicht zum Einsatz kamen hier unterschiedlich formatierte Abschnitte im Inhaltsbereich. Schatten-Effekte auf Boxen oder Texte per CSS wurden hier ebenfalls nicht angewendet. Auch nicht dabei ist die Lightbox Fotogallerie. Somit mag die Konzentrierung auf die Responsive-Technik sehr viel angenehmer und hoffentlich leichter zu verstehen sein.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 29,--
|
| 23 |
Design Technology |
|
[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]
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.
- 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.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 24 |
TRENDSETTER COMPANY
|
|
[ 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,--
|
|
