WN - Skuggeffekter med CSS

Citat:

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

Kod:

// 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>';

}