[TYPO3-german] Layout und Rand-Schatteneffekte

JoH asenau info at cybercraft.de
Tue Apr 20 15:42:00 CEST 2010


> Das Layout hat einen Schattenrand, nun versuche ich schon seit Tagen
> mit Gimp oder PSD einen Schatten zu erzeugen.
> Leider schlagen bisherige Versuche fehl.
>
> http://www.typotest11.uni-landau.de/fileadmin/schatten_layout.JPG

Ich nehme mal an, die Breite ist in diesem Layout fix?

Dann brauchst Du den Schatten nicht separat aus vielen Einzelteilen
dranzustricken, sondern machst ganz einfach einen durchgehenden Hintergrund
in einen DIV Container. Das Prinzip nennt sich "sliding door" und ist in dem
Fall um 90° gedreht, weil die "Tür" nach unten aufgeht. Du kannst sie aus
zwei oder drei Teilen aufbauen. Letzteres ist flexibler, weil es auch bei
extremen Höhen eines Blocks funktioniert, während die Zweiteilung in der
Höhe begrenzt ist.

Der Container ist einfach in der Breite um genau so viele Pixel größer als
der eigentliche Inhalt wie Du an Schatten benötigst. Im oberen Teil enthält
er die oberen Ecken, sowie den Schatten für die obere und die beiden
seitlichen Kanten in einer großen Grafik, die bei der zweigeteilten Version
einfach hoch genug sein muß, um die maximale Seitenhöhe abzudecken. In
diesen Container kommt später auch der Inhalt (also die ursprünglichen
Boxen) mit entsprechendem Padding. Abschließend brauchst Du darunter noch
einen Container für die unteren Ecken sowie die untere Kante.

Bei der dreigeteilten Variante gibt es noch einen ähnlichen Container für
die oberen Ecken und Kanten.
In dem Fall kann die Grafik für die seitlichen Kanten kleiner sein und sich
in der y-Achse wiederholen.

Aufbau zweiteilig:

<div class="shadow-top">
    <div class="content">
    </div>
</div>
<div class="shadow-bottom">
</div>

Aufbau dreiteilig:

<div class="shadow-top">
</div>
<div class="shadow-middle">
    <div class="content">
    </div>
</div>
<div class="shadow-bottom">
</div>

Damit dürfte sich das erzeugen der Grafiken erheblich vereinfachen, zumal Du
im eigentlichen Hintergrund keinerlei Farbverläufe berücksichtigen mußt, die
sich speziell bei der dreigeteilten Variante ggf. bemerkbar machen würden.

HTH

Joey

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your gob sometimes!)
Dieter Nuhr, German comedian
Xing: http://contact.cybercraft.de
Twitter: http://twitter.com/bunnyfield
TYPO3 cookbook (2nd edition): http://www.typo3experts.com




More information about the TYPO3-german mailing list