Schlagschatten ohne Einschränkung

Um einen schönen Schlagschatten zu bekommen bedarf es mehr als nur einem CSS - Eintrages. In diesem Artikel möchte ich beschreiben, was ich alles zum Thema Schlagschatten gefunden hab und was meiner Meinung bisher die beste Lösung ist.

1. Die reine CSS-Lösung...

Diese Variante ist ein prima Sache, wenn man ein Template baut und den Kunden präsentieren möchte. Dazu hab ich folgende gut dokumentierte Seite gefunden:

http://www.thestyleworks.de/tut-art/shadow.shtmlV

Vorteil:

+ Schnell einsetzbar

Nachteil:

- die runden "Ecken" funktionieren nur im Firefox

- es gibt gelegtlich Probleme mit dem Layout, weil die Grafik gefloatet wird.

2. Typo3 - GIFBUILDER-Lösung

Als ich erfolglos oder besser gesagt nicht perfekt den CSS-Schlagschatten im Typo3 eingebaut hatte. Fiel mir ein, dass es ja einen leistungsstarken GIFBUILDER gibt, der den Schatten doch ohne Problemen hinbekommen sollte.

Dazu hab ich auch wieder eine wundervolle Webseite gefunden, die alles schön erklärt:

http://wiki.typo3.org/index.php/GIFBUILDER#Variant_2

Dieser Codeschnipsel funktioniert schon super. Aber auch dieser war nicht perfekt. Hier meine Bewertungsübersicht:

Vorteil:

+ funktioniert global in Typo3

+ Browserunabhängig

Nachteil:

- die Grafiken werden verzerrt

- der "Vergrößerungslink" geht nicht mehr! (GIFBUILDER und imageLinkWrap vertragen sich nicht: http://www.typo3.net/tsref/cobject/image/)

3. Meine Lösung...

Wie ich eben schon erwähnte, verträgt sich der GIFBUILDER und imageLinkWrap nicht. Das hat mich natürlich gewurmt. TS ist nun sehr mächtig, wäre doch gelacht, wenn es nicht gehen würde.

Der Lösungsansatz basiert auf folgender Idee: Ich nehme aus dem vorherigen Kapitel einfach den reinen Schatten und lege diesen via CSS hinter die eigentliche Grafik. So muss ich die Grafik nicht verzerren, der Vergrößerungslink geht weiterhin, weil ich das IMAGE ja nicht anrühre.

Das einzige was Hack-Charakter hat, ist, dass ich die Bordereinstellung für den Abstand missbrauche. Typo3s IMG_TEXT benutzt die Bordereinstellung unter anderem, die Breiteneinstellung in dem umliegenden <dl>-Tag. Wenn ich den Border einschalte und auf die 15px ausdehne, sehe ich nix von dem Hntergrund-Schatten. Den eigentliche schwarzen Rahmen schalte ich zum Schluss einfach via CSS ab und sorge via CSS noch für eine ordentliche Positionierung des Bildes über dem Schatten (padding).

Falls ich da einen Denkfehler haben sollte mir mailen.

PS: Nach ein paar Überarbeitungen ist mir auf gefallen, dass die Möglichkeit verschiedene Bilder zu rendern, die ja im IMGTEXT mit der IMAGE-Liste (1,2,3,..) vorhanden ist, durch die starre imgObjNum kaputt gemacht wird. Würde imgObjNum auch den stdWrap beinhalten, könnte man einfach anhand unterschiedlicher Zustandsabfragen underschiedliche Bilder "umrahmen". Ich hoffe auf die Zukunft.

Rahmen ausgeschaltet

Rahmen eingeschaltet

TypoScript - Contants

lib.shadowIntensity = #999999

TypoScript - Setup

# Orginal Bildkonfiguration retten
shadowedImageTemp < tt_content.image.20.1
 
# Dann die normalen Einstellung kopieren
tt_content.image.30 < tt_content.image.20
 
# Als nächstes die "normalen" Einstellung mit der Bedingung knüpfen,
# dass sie nur angezeigt wird, ein KEIN Rahmen angeklickt
# wurde.
tt_content.image.20.stdWrap.if.isFalse.field = imageborder
 
# Jetzt in der Kopie die alte Bordereinstellung löschen und
# auf 15px vergrößern. Aufgrund eines Typo3-BUG hat,
# das keine Auswirkung, außer dass die Zelle um das Bild um
# 2x15px vergrößert wird. Das kommt uns sehr entgegen.
# Der eigentliche Rahmen wird später, via CSS abgeschaltet.
tt_content.image.30.border >
tt_content.image.30.border = 1
tt_content.image.30.borderThick = 15
 
 
# An die Kopie die Bedingung dran hängen, dass die DropShadow-
# Variante nur angezeigt wird, wenn der Border angeklickt
# wurde.
tt_content.image.30.stdWrap.if.isTrue.field = imageborder
 
# Jetzt kommt noch die Änderungen für den DropShadow:
# Ursprungsquelle: http://wiki.typo3.org/index.php/GIFBUILDER#Variant_2
# Aber ich hab das IMAGE im IMG_TEXT etwas 
# umgebaut.
tt_content.image.30.1.stdWrap.cObject = COA
tt_content.image.30.1.stdWrap.cObject{
  10 = TEXT
  10.value = <div style="background-repeat: no-repeat;
  20 = IMG_RESOURCE
  20.stdWrap.wrap = background-image:url(|);
 
  # jetzt der CodeSchnipsel aus dem Typo3-Wiki:
  20.file = GIFBUILDER
  20.file{
    XY = [10.w]+40,[10.h]+40
    # The background color of the image/content
    backColor = #ffffff
    transparentBackground = 1
    # Create a "dummy" image from the real image which is 20 pixel
    # smaller than the set width.
    10 = IMAGE
    10 {
      file.import.current = 1
      file.width.stdWrap = 1
      file.width.stdWrap.field = imagewidth
      file.width.prioriCalc = intval
      offset = 10,10
    }
 
    # Draw a black/gray box over the dummy image
    20 = BOX
    20.dimensions = 10,10,[10.w],[10.h]
    # You have to set lib.shadowIntensity in your constants.
    20.color = {$lib.shadowIntensity}
 
    # Blur the black box
    30 = EFFECT
    30.value = blur=99 |
    # Hier würde normalerweise Das Bild wieder
    # drüber gelegt werden, dass lasse ich wech
    # so hab ich nur den Schatten
  }
  #Background-Tag wieder schließen...
  30 = TEXT
  30.value = " >
 
  # in die 40 kommt das Orginalbild rein s.u.
 
  #Background-Tag wieder schließen...
  50 = TEXT
  50.value = </div>
}
 
# Jetzt noch die geretteten Bildeinstellungen übertragen...
tt_content.image.30.1.stdWrap.cObject.40 < shadowedImageTemp
tt_content.image.30.1.stdWrap.cObject.40 = IMAGE 
tt_content.image.30.1.stdWrap.cObject.40.file{
	import.current = 1
	field = imagewidth
	maxW = {$styles.content.imgtext.maxW}
}
 
# Damit das ganze auch in der Text-Bild-Kombinationfunktioniert...
tt_content.textpic.40 = < tt_content.image.30
tt_content.textpic.40.text.10 = COA
tt_content.textpic.40.text.10 {
    if.value = 24
    if.isGreaterThan.field = imageorient
    10 = < lib.stdheader
    10.stdWrap.dataWrap = <div class="csc-textpicHeader csc-textpicHeader-{field:imageorient}">|</div>
  }
tt_content.textpic.40.text.20 = < tt_content.text.20

CSS - Änderung

DIV.csc-textpic-border DIV.csc-textpic-imagewrap .csc-textpic-image IMG {
  border:0;
  padding: 5px 15px 15px 5px;  
}