Orginaldesign mit Fußleiste

Auf dieser Seite wird demonstriert, wie man unter Beibehaltung der bestehenden Designvorlage eine zusätzliche Fussleiste einfügen kann.

Ich habe diese Fußleiste so gestaltet, dass ein schmaler Rand unten immer sichtbar ist. Bei einer Berührung mit der Maus vergrößert sich dieser Bereich. Wenn man einen modernen browser benutzt, dann geschieht dieses Vergrößern mit einem sanften slide-in-Effekt.

Einbauanleitung

CSS-Teil in Sidewide

Es wird eine CSS3-Animation verwendet. Diese Art von Animationen wird von allen modernen Browsern unterstützt, allerdings muss man teilweise noch mit browserspezifischen Präfixen arbeiten.

<style type="text/css">
.wrapper{
/* ganz unten etwas Platz schaffen */
margin-bottom: 15px;
}

#fussleistefix{
/* Text etwas einruecken */
padding-left:20px;
padding-right:20px;
/* feste Position unten von ganz rechts bis ganz links */
position:fixed;
bottom:0; left:0; right:0;
/* Schriftfarbe des Designs ueberschreiben */
color:#000 !important;
/* Ausgangshoehe */
height:10px;
background-color: #f99;
/* etwas durchscheinend */
opacity:0.85;
/* Die Animation */
/* Zuerst fuer Firefox */
/* Was soll animiert werden */
-moz-transition-property: height;
/* wie lange */
-moz-transition-duration: 1s, 1s;
/* Verzoegerung */
-moz-transition-delay: 0s, 1s;
/* Analog fuer andere Browser */
-webkit-transition-property: height;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-delay: 0s, 1s;
-o-transition-property: height;
-o-transition-duration: 1s, 1s;
-o-transition-delay: 0s, 1s;
-ms-transition-property: height;
-ms-transition-duration: 1s, 1s;
-ms-transition-delay: 0s, 1s;
transition-property: height;
transition-duration: 1s, 1s;
transition-delay: 0s, 1s;
}
	
#fussleistefix p{
/* Schriftfarbe des Designs ueberschreiben, auch fuer p-Tags */
color:#000 !important;
}

#fussleistefix:hover{
/* Hoehe bei Animation */
height:95px;
}
</style>

HTML-Code in Sitewide

Dieser HTML-Code ist nur als Beispiel gedacht, Der eigentliche Inhalt kann natürlich viel umfangreicher sein. Wichtig ist aber immer die Verwendung von fussleistefix als eindeutige Kennung, auf die im CSS-Teil Bezug genommen wird.

<div id="fussleistefix">
<p>Irgendein Text</p>
</div>

Mehr Informationen zu CSS3-Animationen

Ausführliche Informationen zu CSS3-Animationen -auch zu weitaus komplexeren Animationen findet man im CSS-Teil von Skywalk-Webdesign.de.

Partnerwebsites

Websites mit Mobirise

  1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
  2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
  3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
  4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
  5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
  6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
  7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

Grunddesign anpassen (14.04.2013 21:02:00)

So wie auf dieser Website die NPage Designvorlage Plus 135 Grundlage für individuelle Anpassungen ist habe ich auf meiner Reiseberichtswebsite die NPage Designvorlage Plus 146 als Grundlage für individuelle Anpassungen gewählt.

Ich finde, dass sich das Ergebnis durchaus sehen lassen kann.


Bewertung: (4,00 Punkt(e) / 1 Bewertung(en))

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
Zum Seitenanfang