Manchmal reicht eine Farbe nicht

Wenn man mit mehrfarbigen Hintergründen arbeitet, kommt es schnell mal vor, das eine Überschrift schlecht lesbar ist. Vielleicht möchte man aber auch aus dekorativen Gründen einen Schatten, ohne dabei auf Grafik zurückzugreifen - hier steht wie man das machen kann.

Zunächst muss einem klar sein, wie das überhaupt funktioniert:

Es wird ein Bereich für den Text definiert, innerhalb dieses Bereiches wird der Text als Überschrift 2x gesetzt, und zwar mit fixer Position, wobei eines vom anderen einige Pixel in die Richtung des Schattenwurfs versetzt ist.

Klar soweit? Ja / Nein ... egal: hier kommt der HTML-Code den wir erzielen wollen (passend zum Beispiel rechts):

<div class="shl">
<h1 class="shad">Die Rennstrecken</h1>
<h1>Die Rennstrecken</h1>
</div>

dazu kommt dann folgende CSS-Formatierung:

#sh1 { position: relative }

#sh1 h1 { position: absolute;
      left: 12px;
top: 8px;
    color: white;
        font-size: 28px;}

#sh1 h1.shad { left: 14px;
            top: 10px;
               color: black;
opacity: 0.7;
          -moz-opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Zwei kleine Tricks werden hier verwendet:

der Schatten wird im HTML zuerst gesetzt, und dann der Text darüber
im CSS wird der Schatten nur mit den Unterschieden zur Headline formatiert

Als Bonus noch das CSS für alle Browser um 70% Opazität zu erreichen - dadurch schimmert der Hintergrund leicht durch - das sieht man im vergrößerten Bild wenn man ganz genau hinschaut.

Das Typoscript dazu gibt es eigentlich nicht, hab ich das doch in CSC gemacht und direkt im HTML-Template verankert - ich muss es nur noch 2 x auf die Seite parsen, dazu hab ich im HTML einfach den Platzhalter für den Titel 2x eingefügt.

Würde man es mit 2 Variablen machen wollen, tät ich es so scripten:

Typoscript:

#den Titel und seinen Schlagschatten

temp.ptitle = COA
temp.ptitle.10 = TEXT
temp.ptitle.10.field = title

temp.ptitle2 = COA
temp.ptitle2.10 = TEXT
temp.ptitle2.10.field = title

Und dann noch ins HTML-Template parsen:

# substitute the ###seitentitel(/2)### subpart with page title
subparts.seitentitel < temp.ptitle
subparts.seitentitel2 < temp.ptitle2

: klicken zum Vergrößern

Nur Weiß hebt sich nicht genug ab - hier ist unter der Headline ein Schatten. Ohne Grafik, nur HTML und CSS 2.

2 Kommentare

Seite 1 von 1 1

#1 Peter schrieb am 09.02.2011 22:02

Leicht kann man das inzwischen auch mit CSS3 via "text-shadow" erreichen. Es können zwar noch nicht alle Browser aber die meisten. (außer der berüchtigte IE...)

#2 Christian Rehkopf schrieb am 10.02.2011 01:39

Stympt! ;-)

Aber da den immer noch gut 45% der Internetuser verwenden, sind die CSS3-Sachen derzeit leider noch nicht so der Renner.

Noch schlimmer wird es mit Farbverläufen und runden Ecken - Webkit- und Mozilla-Browser können es problemlos (wenn auch mit Browser-spezifischen Anweisungen im CSS) aber der IE eben nicht.

Es werden zwar einige MS-DX-Filter unterstützt, es funktioniert aber immer nur ein Effekt gleichzeitig - und das auch noch konsequent: wenn man einen Farbverlauf macht, dann ist die Schriftenglättung schon mal im Eimer - und die vorher gerundeten Ecken auch.

Bei bisherigen Tests mit der IE 9er Beta war es nicht besser.

MS macht sich da echt lächerlich.