25.02.2014

Bildfenster - open - Webvorlage

Hier geht es um die Webversion der Variante "open" der Vorlage Bildfenster (Picture Window).

So sieht sie aus

Ungeöffnet oben:

Geöffnet unten:


So erkennt man sie im Quelltext

Vorlage:
/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name:     Picture Window
Designer: Josh Peterson
URL:      www.noaesthetic.com
- - - - - - - - - - - - - - - - - - - - - - - - - - */

Variante:
<body class='loading variant-open'>

Der Eintrag der Klasse verschwindet jedoch, wenn man Wesentliches an der Vorlage ändert, wie etwa das Hintergrundbild.

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Verschwommenes Bild einer Straße, die durch eine grüne Landschaft führt
    body {
    background: #111111 url(//themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center;
    }
  • Hautpthintergrund: Haupthintergrund hat nach oben abgerundete Ecken. Posts haben, mit geringerem Radius, alle Ecken abgerundet. Hinter Posts und Sidebar liegt ein heller Gradient. Posts haben außerdem eine weiße Hintergrundfarbe und einen Rahmen, wodurch sie deutlich einzeln abgegrenzt erscheinen.
    .main-outer {
    background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
    }
  • Tabs: Im Registerreiter-Stil, mit oben abgerundeten Ecken. Mit dunklem Gradienten unterlegt, ausgewählte und gehoverte Tabs werden jedoch mit einem hellen Gradienten unterlegt.
    .tabs-inner .widget li a {
    background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
    }
    .tabs-inner .widget li.selected a,
    .tabs-inner .widget li a:hover {
    background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll bottom;
    }
  • Fußzeile: Nach unten abgerundete Ecken. Mit dunklem Gradienten unterlegt.
    .footer-outer {
    background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
    }


Ute Ziemes, bodyvariant.blogspot.de,

Keine Kommentare:

Kommentar veröffentlichen