Speziell gestaltete Abschnitte

Je nach Blog-Thema oder Post-Routine kann die Gestaltung von Abschnitten wiederkehrender bestimmter Bedeutung der Orientierung im Post sehr entgegen kommen. So ist es zum Beispiel hilfreich, Nebenbemerkungen schon an einem Rahmen, der Hintergrundfarbe oder anderen Auffälligkeiten zu erkennen. Ich habe ein paar zum hiesigen Blog passende Farben für die Gestaltung solcher Abschnitte ausprobiert und zehn davon vorläufig behalten. Ich realisiere sie mit div-Containern, denen ich Klassen zuweise und denen wiederum bestimmte CSS-Regeln.

Die div-Klassen, ihr Aussehen, ihre Nutzung, ihr Code

Bereits mit Nutzungsregel

rahmenschwarzrot

Für wichtige Mitteilungen.
HTML
<div class="rahmenschwarzrot">
Hier Inhalt rein
</div>
CSS
.rahmenschwarzrot {
margin: 3px 0;
box-shadow: inset 0 0 3px #ff0000;
border: 1px solid #000;
padding: 0 5px;
}

rahmengelb

Begleitinfo
Für kurze Begleitinfos, die nicht das Thema direkt betreffen, aber bei der Behandlung des Themas am Rande von Interesse werden können.
HTML
<div class="rahmengelb">
<div class="markierung">
Begleitinfo
</div>
Hier Inhalt rein
</div>
CSS
.rahmengelb {
margin: 3px 0;
box-shadow: inset 0 0 5px #f2d902;
border: 1px solid #f4ce02;
border-radius: 15px;
padding: 0 5px 20px;
}

hintergrundgelb

Für vertiefende Info-Abschnitte zum Thema / Hintergrundinfos zu Teilen des Themas.
HTML
<div class="hintergrundgelb">
Hier Inhalt rein
</div>
CSS
.hintergrundgelb {
margin: 3px 0;
box-shadow: 0 0 3px #cab703;
border: 1px solid #fdfbe4;
background-color: #fbf7b8;
padding: 5px;
}

Noch ohne Nutzungsregel

rahmendunkelblau

Noch ohne Nutzungsregel
HTML
<div class="rahmendunkelblau">
Hier Inhalt rein
</div>
CSS
.rahmendunkelblau {
margin: 3px 0;
box-shadow: inset 0 0 3px #0603da;
border: 1px solid #000034;
padding: 2px 5px;
color: #000034;br /> }

rahmenhellblau

Noch ohne Nutzungsregel
HTML
<div class="rahmenhellblau">
Hier Inhalt rein
</div>
CSS
.rahmenhellblau {
margin: 3px 0;
box-shadow: 0 0 5px #598eff;
border: 1px solid #598eff;
padding: 0 5px;
}

neonblau

Noch ohne Nutzungsregel
HTML
<div class="neonblau">
Hier Inhalt rein
</div>
CSS
.neonblau {
margin: 3px 0;
background: none repeat scroll 0 0 #000048;
padding: 5px;
color: #fff; text-shadow:
0 0 10px #fff,
0 0 12.5px #0a19e6,
0 0 15px #0a19e6,
0 0 17.5px #0a19e6;
}

hintergrundhellblau

Noch ohne Nutzungsregel
HTML
<div class="hintergrundhellblau">
Hier Inhalt rein
</div>
CSS
.hintergrundhellblau {
margin: 3px 0;
background-color: #598eff;
padding: 0 5px;
color: #fff;
font-weight: bold;
text-shadow: 0 -1px #0810cb, 1px 0 #0810cb, 0 1px #0810cb, -1px 0 #0810cb;
}

hintergrundorange

Noch ohne Nutzungsregel
HTML
<div class="hintergrundorange">
Hier Inhalt rein
</div>
CSS
.hintergrundorange {
margin: 3px 0;
background-color: #fb9b08;
padding: 0 5px;
color: #fff;
font-weight: bold;
text-shadow: 0 -1px #c67001, 1px 0 #c67001, 0 1px #c67001, -1px 0 #c67001;
}

hintergrundgruen

Noch ohne Nutzungsregel
HTML
<div class="hintergrundgruen">
Hier Inhalt rein
</div>
CSS
.hintergrundgruen {
margin: 3px 0;
background-color: #819208;
padding: 0 5px;
color: #fff;
font-weight: bold;
text-shadow: 0 -1px #506d23, 1px 0 #506d23, 0 1px #506d23, -1px 0 #506d23;
}
Ute Ziemes, 13021961.blogspot.de
, 

Kommentare

Kommentar veröffentlichen