| 73 |
FERIENWOHNUNG HAUS SEEBLICK |
|
[ 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 ( 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 ). Dieser Farbfilter3 macht möglich, das die Schrift auf jedem Foto gut lesbar ist.
- Farbverläufe ohne Grafik - 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)
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= 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.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 74 |
BIG CITY WALK
|
|
[ 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.
- 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 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.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 75 |
Coffee & Lingerie |
|
 
Besonderheiten
In dem News-Menü mit Kurztext und Datumsangabe (angedeutet als Kalenderblatt) könnten Sie immer die jeweils letzten drei Neuigkeiten -ggflls. auch mehr- darstellen und dann z.B. auf die eigentliche News-Seite per Anker verlinken.
TechnikGrafisch angelegtes Layout.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 29,--
|
| 76 |
Jesus:Love |
|
 
Besonderheiten
Mit Aufklapp-Menü.
Anpassarer Einstanz-Effekt auf Schrift und Psalm (Diese Lösung ist für alle Browser kompatibel)
Technik
Flexibles Layout.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 29,--
|
| 77 |
SUMMER IN ICELAND
|
|
[ 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.
- 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.
- 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
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 78 |
THE COFFEE LOUNGE
|
|
[ 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.
- Google-Webfonts (Schrift bereits installiert). Hier spezieller, schicker Italic-Schriftschnitt1.
- Transparenz ( mit CSS-rgba ).
- Rundungen ( mit CSS-border-radius ).
- Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar .
- CSS-Animation: DREHEN.
1= 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.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 79 |
Imaginibus-Media
|
|
[ 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
- Foto-Präsentation. Alle Fotos auf der Startseite bis an den Rand gezogen sowie enthaltend Fototitel.
- Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
- Mit 'Lightbox Picture Gallery'.1 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
- Google-Webfonts ( Schrift 'Open Sans' bereits installiert ). Schriftschnitt:Light.
- Toggle-Schalter. 2 Button-Schalter: An/Aus.
- Fixed Position beim Toggle-Schalter. Button-Öffen und Button-Schließen scrollen nicht, da fest positioniert
- CSS-Animation beim Toogle-Schalter 3.
- CSS-Animation: Fenster schiebt sich von links nach rechts in die Seite 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 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 .
2= Toggle Schalter:
Eine Javascript-freie Lösung, welche auf mobilen Geräten eine Funktion per Schalter (an/aus) ermöglicht.
3= Toggle-Schalter-Animation:
Der Info-Button gleitet aus der Seite hinaus und gibt dann einen einem Schließen-Button frei.
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
| 80 |
We Take Care |
|
[ 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).
Privater Inhalt: Vorlage ist kostenlos
Kommerzieller Inhalt: einmalig Euro 39,--
|
|
