Seiten

27.02.2014

Bildfenster - screen - Webvorlage

Hier geht es um die Webversion der Variante "screen" 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-screen'>

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 von schneebelegten Gipfeln eines Hochgebirges, das man hinter Glas voller Tropfen sieht
    body {
    background: #fafafa url(//themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;
    }
  • Inhaltsbereich: Alle Inhaltselemente (Header, Tabs, Posts, Sidebar, Fußzeile) liegen auf einem gemeinsamen Hintergrund, einem dunklen Gradienten. Posts und Tabs haben aber zusätzlich noch eigene Hintergrundfarben. Posts haben außerdem einen Rahmen. Jeder Post wird so deutlich abgegrenzt. Ecken sind in dieser Vorlagen-Variante nirgends abgerundet.
    .content-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