Seiten

▼

01.03.2014

Awesome - light - Webvorlage

Hier geht es um die Webversion der Variante "light" der Vorlage Awesome AG (Awesome Inc.).

So sieht sie aus

Ungeöffnet oben:

Geöffnet unten:


So erkennt man sie im Quelltext

Vorlage:
 /* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name:     Awesome Inc.
Designer: Tina Chen
URL:      tinachen.org
- - - - - - - - - - - - - - - - - - - - - - - - - - */
Variante:
 <body class='loading variant-light'>

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Grau-beige Farbe
  • Tab-Bereich-Hintergrund: Schmales Bild für .tabs-outer, das oben heller, dann dunkler und unten deutlich heller ist und sich seitlich immer weiter wiederholt - geht über gesamte Breite des jeweiligen Screens
    .tabs-outer {
    overflow: hidden;
    position: relative;
    background: #eeeeee url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat scroll 0 0;
    }
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    background: #666666 url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat-x scroll 0 -100px;
    color: #ffffff;
    }
  • Posts: Abgegrenzt durch Hintergrundfarbe ist der Post-Tag (.date-outer). Einzelne Posts (.post-outer) haben keinen eigenen Hintergrund. Sind mehrere Posts am gleichen Tag eingeordnet, sind zweiter bis letzter Post jeweils durch eine Rahmenlinie nach oben abgegrenzt.
  • Dunkler Schatten um allerhand Bereiche:
    .main-inner .column-left-inner,
    .main-inner .column-right-inner {
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    }
    .main-inner .widget {
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
    body .main-inner .Blog {
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    .date-outer {
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
    #blog-pager {
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
    .footer-fauxborder-left {
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
  • Fußzeilen-Hintergrund: Weiße Farbe für .footer-fauxborder-left geht über gesamte Breite des jeweiligen Screens


Ute Ziemes, bodyvariant.blogspot.de,
um

Keine Kommentare:

Kommentar veröffentlichen