[Schneaker]

Efter massa ändringar så funkar det nu.

Exempel:
http://trafikpumpen.se/shadow.php

Källkod:
http://trafikpumpen.se/shadow.phps

Gör vad ni vill med koden, vore kul om den kom till nytta.
Skrev den egentligen för ett av mina projekt, men kom på att andra kunde ha nytta av den

[Jonas]

Originally posted by Schneaker@Feb 28 2005, 22:22
Efter massa ändringar så funkar det nu.

Exempel:
http://trafikpumpen.se/shadow.php

Källkod:
http://trafikpumpen.se/shadow.phps

Gör vad ni vill med koden, vore kul om den kom till nytta.
Skrev den egentligen för ett av mina projekt, men kom på att andra kunde ha nytta av den

Generera 200st <div>...

Liknar skräpkod.
Har sett på andra håll något som kan göras med mindre kod.

Dock kommer jag inte ihåg urlen

[Micke04]

En annan lösning som jag gillar:

http://www.alistapart.com/d/onionskin/gallery.html
http://www.alistapart.com/articles/onionskin/

[koala]

Alistaparts metod är lite mer stilren imho, även om den naturligtvis inte blir semantiskt korrekt. Använder onion shadows på rätt många av mina sidor.

[Schneaker]

ALA har ett antal artiklar om dropshadows, "min" metod är en snutt lätthanterad kod som gör precis samma som de beskriver i en av sina artiklar

[koala]

Originally posted by Schneaker@Mar 2 2005, 02:15
ALA har ett antal artiklar om dropshadows, "min" metod är en snutt lätthanterad kod som gör precis samma som de beskriver i en av sina artiklar

Inte för att jag vill klanka ner på din kod på något vis, men om html-koden blir över 1,5 kb per skuggeffekt så bör man nog överväga att använda några gif-bilder istället :P


Här är min kod (gif-bilderna kan ni sno från ALA eller skapa egna). Jag utelämnar CSS-filen och förklaringar till hur man använder detta. Exempel på resultat: www.y1.se/profiles.php?user_id=17

// CSS-mall:
// .shadowWrap1, .shadowWrap2, .shadowWrap3 {
// display:inline-table;
// /* \*/display:block;/**/} 
// .shadowWrap1 {
// background:url(img/shadow.gif) right bottom no-repeat;}
// .shadowWrap2 {background:url(img/shadow_corner_bl.gif) left bottom no-repeat;}
// .shadowWrap3 {
// padding:0 4px 4px 0;
// background:url(img/shadow_corner_tr.gif) right top no-repeat;}
// .shadowWrapImage {
//  display: block;
//  position: relative;
//  border: 1px solid #000;
// }
// .shadowWrapImage img {
// display:block;
// }


// change these if you must: (all units are pixels)
define('SHADOWSIZE_X', 4); // shadow width
define('SHADOWSIZE_Y', 4); // shadow height
define('PADDING_X', 0); // the total width occupied by paddings in the css
define('PADDING_Y', 0); // the total height occupied by paddings in the css
define('BORDER_X', 2); // the total width occupied by borders in the css
define('BORDER_Y', 2); // the total height occupied by borders in the css



function shadowImage ($imageFile, $altText='', $linkHref='', $linkTarget='', $onClick='') {
	if (!file_exists($imageFile)) {
 trigger_error('File does not exist: '.$imageFile, E_USER_WARNING);
 return '';
	}
	$size = getimagesize($imageFile);
	$x = $size[0];
	$y = $size[1];
	$size = $size[3];
	
	$X = $x + SHADOWSIZE_X + PADDING_X + BORDER_X;
	$Y = $y + SHADOWSIZE_Y + PADDING_Y + BORDER_Y;
	
	
	$linkText = '';
	if (!empty($linkHref)) {
 $linkText = '<a href="'.$linkHref.'"';
 if (!empty($linkTarget)) {
 	$linkText .= ' target="'.$linkTarget.'"';
 }
 $linkText .= ' title="'.$altText.'"';
 if (!empty($onClick)) {
 	$linkText .= ' onclick="'.$onClick.'"';
 } 
 $linkText .= '>';
	}
	
	
	$imgStr = '<img
   src="'.$imageFile.'"
   alt="'.$altText.'"
   '.$size.'
  />';
	
	if (!empty($linkText)) {
 $imgStr = $linkText . $imgStr . '</a>';
	}	

	return '<div style="width:'.($X).'px; height:'.($Y).'px;"><div class="shadowWrap1" style="width:'.$X.'px; height:'.$Y.'px;"><div class="shadowWrap2"><div class="shadowWrap3">'.$imgStr.'</div></div></div></div>';
}