| 49 |
Wide Open Country
|
|
ONE-PAGER
+ Polaroid-Fotos
+ schräge Objekte
+ CSS-Slideshow
+ CSS-Box-Fenster
Technik
- Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
- Mobile-First-Technik.
- One-Pager: Die ganze Homepage besteht nur aus einer einzigen HTML-Seite.
- Jquery: Smooth Scroll To Sections. Animiertes Angleiten der jeweiligen Abschnitte sprich Bereiche/Sektionen der Webseite.
- Jquery Smooth Scroll To Top. Button, welcher erst später beim Scrollen eingeblendet wird und ein annimiertes Hoch-Scrollen zum Kopf-Bereich der Webseite ermöglicht.
- Jquery: Lightbox-Foto-Gallerie. Alle Gallerie-Fotos komplett innerhalb eines neuen Fensters durchsehen bzw. Vor-und Zurück-Schalten.
- Icon-Font: Font Awesome.
- Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light' sowie 'Josefin Sans'.
- CSS-Only-Menü mit Toggle-Schalter. Eine Javascript-freie Lösung, welche eine Funktion per Schalter (an/aus) ermöglicht. In der Regel wird das Menü auf mobilen Geräten hierbei zunächst versteckt.
- CSS-Menü-Animation: Hineingleiten des Menüs bei mobilen Auflösungen.
Besonderheiten
- Polaroid-Fotos: Per CSS angelegt und mit typischer Textzeile im unterem Drittel des Polaroid-Fotos.
- Box-Fenster CSS-Only: Diverse Inhaltsfenster öffen sich als div-Box mittels Klick auf den 'Weiter-Button' innerhalb der selben Seite als CSS-Konstrukt.
- CSS Bildwechsler Slideshow inklusive Bildanzeiger, bei dem 4 Männer und eine Frau als kleine Icons die Gesamtzahl der Bilder sowie das aktuelle Bild anzeigen.
- CSS-Animation Bei Mausberührung werden die schräg-gestellten Objekte wieder gerade gerichtet.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 50 |
New Purism |
|
Besonderheiten
Kleine Bilder-Gallerie im Fussbereich. Startseite + 2 alternative Unterseiten anbei.
Technik
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 29,--
|
| 51 |
Impressions |
|
Besonderheiten
Jede Seite hat ein eigenes Foto, 8 Seiten bereits verlinkt.
Verschiedene Menü-Zustände beim Menü:
Ausgangslink: Zahl als Text in Weiss. Linktext in Grau. Kein grafischer Pfeil.
Mouseover-Link: Zahl als Text in Gelb. Linktext in Weiss. Blauer grafischer Pfeil.
Aktueller-Link: Zahl als Text in Orange. Linktext in Weiss. Weisser grafischer Pfeil.
Technik
Flexibles Layout.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 29,--
|
| 52 |
Technical Solutions
|
|
[ 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,--
|
| 53 |
The Blue Racer |
|
 
Besonderheiten
Viele Menüs. Kalenderblätter für News-Bereich.
Technik
Flexibles Layout.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 29,--
|
| 54 |
Diamonds and Girls |
|
[ Fotos zeigen Auflösungsansicht von kleinstem SMARTPHONE im Portraitmodus ]
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-Ribbons (engl:ribbon = Band, Schleife, Farbband).
- 1 x Ribbon schräggestellt, wickelt sich um die jeweiligen Boxen platziert links oben.
- 1 x Ribbon horizontal und vertikal zentriert, umwickelt die Box also mittig (siehe beim Logo).
- Responsive Full Screen Image.
- Transparenz per CSS-rgba (Farbe und untersch. Deckkraft somit schnell änderbar).
- Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert, das per Umschalt-Button funktioniert)
- On-Focus (Beim Formular werden bei Klick in die aktiven Felder diese anders dargestellt).
- CSS3-Animation Ausblenden (Mouseover: Bei den Boxen-Bildern auf Start sowie Bildern auf Unterseiten).
- CSS-Animation Drehen (Mouseover: Bei den Social Media Icons).
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 55 |
Sofa Social Media
|
|
[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]
3D - Konstruktion
mit Trapez-Form
nur per CSS erstellt
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).
- 3D-Konstruktion 1 - Geometrische Form ( TRAPEZ nur mit CSS erstellt ).
- Gedeckte Farbtöne.
- Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
- Google-Webfonts ( Schrift 'OPEN SANS LIGHT' bereits installiert ).
- Mit Toggle-Menü 2 - Menü-Button-Schalter: An/Aus.
- Mit 'Lightbox Picture Gallery'. 3 ( Foto-Gallerie-Schau ).
1= 3D-Effekt
Eine Trapez-Form verschafft uns hier im oberen Bereich einen wundervollen 3-D-Effekt. Im unteren Bereich der Webseite wird dieses gespiegelt und rundet damit diesen Effekt perfekt ab. Außerdem verstärken die auch perspektivisch angeordneten Social Media Icons nochmal diesen 3D-Effekt.
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= 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,--
|
| 56 |
DOCUMENT RESPONSIVE
|
|
[ 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.
- Special Edition. Responsive-Version unseres Templates Nr. 36/Document.
- Hochgestelltes Zeichen (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= Versch. Effekte auf den Fotos: SLIDE-TOP, SLIDE-BOTTOM, SLIDE-LEFT, SLIDE-RIGHT, SLIDE-DIAGONAL, SLIDE-ZICKZACK.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
|
