Code for image shadow effect

Question

Level 1

0 points

Code for image shadow effect

iWeb creates very nice shadows. Is it a separate image created on the fly or some javascript? Is there any way to get the code that generates that effect? I'd like to extend it to other pages that weren't made in iWeb.

Thanks in advance.
Mike

Macbook, Mac OS X (10.5.7)

Posted on Jun 17, 2009 11:58 PM

Reply

Answer 1

Old Toad

Level 10

215,688 points

Jun 18, 2009 3:09 PM in response to mswarts

The shadows are actually png files created to give the shadow effect. For text there is some HTML code you can use to create a drop shadow around text. I don't know if you can add it around an image however.

<xmp>

<blockquote style="padding-left: 50px;"><font style="color: #FF6600; text-shadow: 3px 3px 2px #666">OT</font></blockquote>

</xmp> (Ignore the <xmp> </xmp> tags when using)

The code above will look like this:

OT

Change the 3,3,2 values to change the distance from the character, spread of the shadow and opacity of the shadow. The color tag can be left out for just black text.

To add bold and italics to it you'd use:

<xmp>

<b><i style="color: #FF6600; text-shadow: 3px 3px 2px #666">OT</i></b>

</xmp> (Ignore the <xmp></xmp> tags when using)

Which will look like this:

OT

Reply

Answer 2

mswarts Author

Level 1

0 points

Jun 18, 2009 5:16 PM in response to Old Toad

Thanks for the response Old Toad. To clarify, what I'm really looking to do is add a shadow to images. If iWeb is creating images to draw the shadows, that would make sense, except no such images appear to be part of the exported file. I'm thinking (and correct me if I'm wrong) that Apple is creating the effect with some javascript+css. If you could point me in the right direction, I would really appreciate it.

Thanks again.
Mike

Reply

Answer 3

mswarts Author

Level 1

0 points

Jun 18, 2009 6:48 PM in response to mswarts

I found a little more information that might help the question get solved.

iWeb is using a combination of the HTML below:

<xmp>

<html>
<head>
<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<script type="text/javascript" src="Scripts/iWebImage.js"></script>
<script type="text/javascript" src="Scripts/Blank.js"></script>
</head>
<body onload="onPageLoad();">
<div class="tinyText shadow_0">
<img src="Blank files/shapeimage1.png" />
</div>
</body>
</html>

</xmp>

And three JavaScipt files including Blank.js, iWebSite.js, and iWebImage.js

Without any one of these files, the shadow doesn't work. Blank.js is very simple:

<xmp>

setTransparentGifURL('Media/transparent.gif');function applyEffects()
{var registry=IWCreateEffectRegistry();registry.registerEffects({shadow_0:new IWShadow({blurRadius:1,offset:new IWPoint(4.2426,4.2426),color:'#000000',opacity:0.750000})});registry.applyEffec ts();}
function hostedOnDM()
{return false;}
function onPageLoad()
{loadMozillaCSS('Blank_files/BlankMoz.css')
fixAllIEPNGs('Media/transparent.gif');applyEffects()}

</xmp>

The other two are too big to paste here. If there is any way to adapt this code to add shadows to images in pages that weren't made in iWeb, that would be awesome. Anyone know how?

Thanks.
Mike

Reply

Answer 4

Old Toad

Level 10

215,688 points

Jun 18, 2009 8:23 PM in response to mswarts

I realized that at the last minute but decided to leave it in in case it might work around an image. If you have iWork you could do it in KeyNote and copy/paste into iWeb.

Reply

Answer 5

mswarts Author

Level 1

0 points

Jun 18, 2009 11:45 PM in response to Old Toad

Thanks for your reply Old Toad, but I'm really looking for a way to add iWeb-style shadows to images in web pages that were not made in iWeb. I need some way to adapt this code to apply such shadows to images, but I do not understand Javascript. Any thoughts on that? Those other 2 JavaScipt files baffle me.

Thanks.
Mike

Reply

Answer 6

Old Toad

Level 10

215,688 points

Jun 19, 2009 9:27 AM in response to mswarts

That area is way over my head. However, I created a drop shadow of a photo, published and then checked the files that were created. There was one .js file that controlled that drop shadow. The contents were:

// Created by iWeb 3.0.1 local-build-20090619

setTransparentGifURL('Media/transparent.gif');function applyEffects()
{var registry=IWCreateEffectRegistry();registry.registerEffects({shadow_0:new IWShadow({blurRadius:10,offset:new IWPoint(12.7279,12.7279),color:'#000000',opacity:1.000000})});registry.applyEff ects();}
function hostedOnDM()
{return false;}
function onPageLoad()
{loadMozillaCSS('Misc_files/MiscMoz.css')
adjustLineHeightIfTooBig('id1');adjustFontSizeIfTooBig('id1');adjustLineHeightIf TooBig('id2');adjustFontSizeIfTooBig('id2');detectBrowser();adjustLineHeightIfTo oBig('id3');adjustFontSizeIfTooBig('id3');Widget.onload();fixAllIEPNGs('Media/tr ansparent.gif');applyEffects()}
function onPageUnload()
{Widget.onunload();}

The name of the file was Misc.js. The page name was Misc. However, I dont see any place it indentifies the image file it's working on. That would be "Joaquin-2009.jpg."

In the html file for the page the photo was entered as:

<xmp>

<div style="height: 300px; width: 212px; height: 300px; left: 444px; position: absolute; top: 559px; width: 212px; z-index: 1; " class="tinyText style SkipStroke3 shadow_0">
<img src="Misc_files/Joaquin-2009.jpg" alt="" style="border: none; height: 300px; width: 213px; " />
</div>

</xmp>(Ignore the <xmp></xmp> tags when using)

How they tie together is way beyond me.

Reply

Answer 7

mswarts Author

Level 1

0 points

Jun 19, 2009 12:27 PM in response to Old Toad

I've been tinkering more and more and I've found that the JavaScript registers an effect "shadow_0" or whatever for each type of shadow on the exported page. This code can be used to adjust the shadow effect's color, opacity, blur radius and offset. I have successfully added shadows to image elements by copying over the iWebSite.js and iWebImage.js libraries (or whatever you call them) and then calling the shadow_0 class in my div that contains the image. At this point, I have to work out 2 more details. First, I have to figure out how to interact with offset. The coordinates baffle me. Second, I want to figure out how to add another effect, say shadow_1 to this code without breaking it.

setTransparentGifURL('Media/transparent.gif');function applyEffects()
{var registry=IWCreateEffectRegistry();registry.registerEffects({shadow_0:new IWShadow({blurRadius:5,offset:new IWPoint(4.2426,4.2426),color:'#000000',opacity:1.00000})});registry.applyEffect s();}
function hostedOnDM()
{return false;}
function onPageLoad()
{loadMozillaCSS('Blank_files/BlankMoz.css')
fixAllIEPNGs('Media/transparent.gif');applyEffects()}

I'll report back if I find the answers.
Mike

Reply

Answer 8

mswarts Author

Level 1

0 points

Jun 19, 2009 1:30 PM in response to mswarts

OK. Here's the solution for anyone interested. A couple of warnings first though: Apple has a naming scheme with the shadows. If you rename "shadow_1" to "shadow_pocket", for example (even if you change it in the HTML file too, it won't work.

If you saw the code I posted last time, you know how to use one type of shadow. The code below is a javascript file that allows 3 different shadows. Be careful to put braces and parenthesis in the right places. Javascript is a very sensitive language. You can use divs to enclose the images you want to add the shadow effect to. The divs need to have class="tinyText shadow_X", where X is the kind of shadow you want.

On to the offset… This was actually very easy. It is found in the Javascript below "IWPoint(0.0000,1.0000)". In that example, it literally means that the shadow is offset 1 pixel downward and no horizontal offset. It's a simple (x,y) coordinate system where x and y are the pixel increments from the original image.

The Javascript code:

setTransparentGifURL('Media/transparent.gif');function applyEffects()
{var registry=IWCreateEffectRegistry();registry.registerEffects({shadow_1:new IWShadow({blurRadius:2,offset:new IWPoint(0.0000,1.0000),color:'#000000',opacity:1.000000}),shadow_2:new IWShadow({blurRadius:5,offset:new IWPoint(0.0000,2.0000),color:'#000000',opacity:1.000000}),shadow_0:new IWShadow({blurRadius:5,offset:new IWPoint(0.0000,2.0000),color:'#000000',opacity:1.00000})});registry.applyEffect s();}
function hostedOnDM()
{return false;}
function onPageLoad()
{loadMozillaCSS('Blank_files/BlankMoz.css')
fixAllIEPNGs('Media/transparent.gif');applyEffects()}

Apple has done incredible work on these JavaScript libraries. So, anyone that wants to add beautiful shadows to their images will find these posts helpful.

Thanks for your help too Old Toad.
Mike

Reply

Answer 9

Cyclosaurus

Level 6

12,915 points

Jun 19, 2009 4:48 PM in response to mswarts

there are four effects that you can apply to iweb elements: crop, stroke (frame), reflection and shadow. they can be applied the same way as you found out, except the parameters for the effects are different.

here is my example of adding frame to photos page detail view:
http://widgets.cyclosaurus.com/Framed_DetailView/Photos.html
wait for the images appear, then click on one of them. better yet, they can be applied on-the-fly.

BTW, iwebsite.js and iwebimage.js are apple copyright lib intended to be used with iweb only (check out the files' header)... be aware.

Reply