[TYPO3-german] Layout und Rand-Schatteneffekte

[bernd wilke]

Am Tue, 20 Apr 2010 13:37:35 +0200 schrieb Jochen Graf:

> Hallo,
> 
> ich weiss., es geht hier nicht um Typo3, erhoffe mir aber etwas Hilfe.
> 
> Das Layout hat einen Schattenrand, nun versuche ich schon seit Tagen mit
> Gimp oder PSD einen Schatten zu erzeugen. Leider schlagen bisherige
> Versuche fehl.

im Grafik-Programm sollte das nicht das Problem sein.
 
> http://www.typotest11.uni-landau.de/fileadmin/schatten_layout.JPG
> 
> Im Forum bei PSD hatte ich auch nichts finden können. Kennt jemannd eine
> Seite, bei der es mal von grundauf erklärt wird?
> 
> "Schatteneffekte"
> 
> Normalerweise bin ich gut im Recherchieren, doch bei diesem Thema kann
> ich echt nichts passendes finden.
> 
> Der Schatten sollte später auf dieser Seite angepasst werden.
> 
> http://www.typotest11.uni-landau.de

Schatten dynamisch an HTML-Elemente dranzu hängen ist mit CSS nicht 
wirklich einfach zu machen. (Außer die Browser beherrschen irgendwann 
einmal das neue CSS, das Schatteneffekte definiert)
entweder du brichst dir einen ab mit diversen Kleingrafiken, die du an 
die richtigen Stellen mit HTML-Hilfselementen (oder gar Tabellen) 
positionierst, oder du machst es im ganzen sehr statisch (feste Größen 
und dann nur eine große Grafik die den Schatten beinhaltet).

bzgl. Schatten allgemein: 
entweder du definierst den Hintergrund mit in die Schattengrafik oder du 
arbeitest mit Transparenz um beliebigen Hintergrund durchscheinen zu 
lassen. Dann empfiehlt sich ein PNG mit Alpha-Transparenz, sofern du 
keinen Schlagschatten haben willst.

es gibt allerdings noch eine weitere Lösung, die die Arbeit mehr auf die 
Client-Seite verschiebt: benutze eine JavaScript-Bibliothek:
zb. mit JQuery:

<script src=".../jquery-1.4.2.js" type="text/javascript"></script>
<script src=".../jquery.dropshadow.js" type="text/javascript"></script>
<script type="text/javascript">
	window.onload = function() {
		$('.shadowed').dropShadow({top:10
				          ,left:8
		                          ,opacity:.8
				          ,blur:3
				          });
	};
</script>

Damit wird jedes Element der Seite, das (zusätzlich) die CSS-Klasse 
'shadowed' hat nach dem Laden der Seite mit Hilfe von Javascript mit 
einem Schatten versehen.
Damit ist es auf Entwicklerseite recht einfach einen Schatten zu 
definieren: man muss nur noch die Klassen 'verteilen'. 
Allerdings ist der Client beim Seitenaufbau je nach Intensität der 
Schatten doch recht heftig beschäftigt: für jeden verschwommenen Schatten 
werden viele schwache Schattierungen verstreut generiert.

 
bernd
-- 
http://www.pi-phi.de/cheatsheet.html