add a shadow effect around an entire image

[eholz1]

Hello CSS group,

I saw a beautiful effect that I would like to use either by CSS or
using photoshop to create the image/effect (maybe even imagemagick)

the site address is: http://victor.hasselblad.com/.

the lead image here is a white photograph (jpeg) on a white
background, with a shadow like effect around the entire
image. In this case the shadow effect is part of the jpeg, and not
created in CSS.

Any tips on how I could recreate this effect would be appreciated,

thanks

eholz1

[Nik Coughlin]

eholz1 wrote:

Hello CSS group,

I saw a beautiful effect that I would like to use either by CSS or
using photoshop to create the image/effect (maybe even imagemagick)

the site address is: http://victor.hasselblad.com/.

the lead image here is a white photograph (jpeg) on a white
background, with a shadow like effect around the entire
image. In this case the shadow effect is part of the jpeg, and not
created in CSS.

Any tips on how I could recreate this effect would be appreciated,

Using Photoshop:
http://www.google.com/search?q=photoshop+drop+shadow

Using Paint Shop Pro:
http://www.google.com/search?q=paint...ro+drop+shadow

Using the GIMP:
http://www.google.com/search?q=gimp+drop+shadow

[dorayme]

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

eholz1 wrote:

Hello CSS group,

I saw a beautiful effect that I would like to use either by CSS or
using photoshop to create the image/effect (maybe even imagemagick)

the site address is: http://victor.hasselblad.com/.

the lead image here is a white photograph (jpeg) on a white
background, with a shadow like effect around the entire
image. In this case the shadow effect is part of the jpeg, and not
created in CSS.

Any tips on how I could recreate this effect would be appreciated,

Using Photoshop:
http://www.google.com/search?q=photoshop+drop+shadow

Not sure this is it. Drop shadow is usually bottom and right. In
PS, I would be inclined to use outer glow and set the parameters
how you wish. In PS CS, you look at your layers palette. You
click on the icon of shape in question, you get options come up.
One of these is outer glow.

To OPs question, I don't think shadow for anything in css or html
is well supported or sophisticated enough.

--
dorayme

[Nik Coughlin]

dorayme wrote:

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

>eholz1 wrote:

>>Hello CSS group,

I saw a beautiful effect that I would like to use either by CSS or
using photoshop to create the image/effect (maybe even imagemagick)

the site address is: http://victor.hasselblad.com/.

Using Photoshop:
http://www.google.com/search?q=photoshop+drop+shadow

Not sure this is it. Drop shadow is usually bottom and right.

"Drop shadow" is the name of the effect the OP is trying to achieve. Outer
glow is a fine way to achive the same effect as
http://victor.hasselblad.com/ though. You can still get that effect in PS
with the drop shadow layer style, you just have to set distance to 0.

[dorayme]

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

dorayme wrote:

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

eholz1 wrote:
Hello CSS group,

I saw a beautiful effect that I would like to use either by CSS or
using photoshop to create the image/effect (maybe even imagemagick)

the site address is: http://victor.hasselblad.com/.
Using Photoshop:
http://www.google.com/search?q=photoshop+drop+shadow

Not sure this is it. Drop shadow is usually bottom and right.

"Drop shadow" is the name of the effect the OP is trying to achieve. Outer
glow is a fine way to achive the same effect as
http://victor.hasselblad.com/ though.

You can still get that effect in PS
with the drop shadow layer style, you just have to set distance to 0.

You are right Nik. Distance 0. Knock me down with a feather!

[Talking of feathers, I have been photographing them lately for a
print job. It is not so easy when you want a white one on
particular lightish background. Plus I kept finding better and
better feathers at the beach ...].

--
dorayme

[Eric Lindsay]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

eholz1 wrote:

Hello CSS group,
the site address is: http://victor.hasselblad.com/.
>

Using Photoshop:
http://www.google.com/search?q=photoshop+drop+shadow

Not sure this is it. Drop shadow is usually bottom and right. In
PS, I would be inclined to use outer glow and set the parameters
how you wish. In PS CS, you look at your layers palette. You
click on the icon of shape in question, you get options come up.
One of these is outer glow.

The only problem I see with doing the effects using a graphics package
is if you decide to change your background colours. You sometimes have
to redo all the effects applied to photos.

To OPs question, I don't think shadow for anything in css or html
is well supported or sophisticated enough.

David Hyatt was blogging in January about box shadows in a future Safari
browser:

"WebKit now supports the CSS3 box-shadow property (as
-webkit-box-shadow). This property allows you to specify a shadow effect
that will be applied to the border box of an object. The syntax of the
shadow is identical to text-shadow.
Some fun facts about the feature:
(1) It works with table cells, so you can make a nice evenly spaced grid
of shadowed cells.
(2) It works with first-letter and first-line, so you can create a nice
raised effect on floating first-letter boxes now.
(3) It works on inline flows that span multiple lines.
(4) If you specify a border-radius, the box-shadow will respect the
curvature of the border-radius."

I haven't bothered getting the nightly webkit downloads, but I have
rather liked the effects you get with text-shadow. I am thinking of
using all the new effects webkit supports - like box shadow - when I get
around to doing an Apple section of my site. By the time I get around to
cleaning up my text, Leopard will propably be out, with the new webkit
stuff incorporated in Safari. I am assuming here that most people
reading Apple related pages will be using Safari, and relatively few IE
user will be bothering to check. If all the new CSS works like it should
(and like text-shadow does) browsers that can't handle it will totally
ignore all of the CSS3 and experimental styles anyhow.

--
http://www.ericlindsay.com

[dorayme]

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

eholz1 wrote:
Hello CSS group,
the site address is: http://victor.hasselblad.com/.

Using Photoshop:
http://www.google.com/search?q=photoshop+drop+shadow
>

Not sure this is it. Drop shadow is usually bottom and right. In
PS, I would be inclined to use outer glow and set the parameters
how you wish. In PS CS, you look at your layers palette. You
click on the icon of shape in question, you get options come up.
One of these is outer glow.

The only problem I see with doing the effects using a graphics package
is if you decide to change your background colours. You sometimes have
to redo all the effects applied to photos.

You have to do this if you want some quality. I regularly
re-prepare images that have drop shadows to suit any significant
change in bg colour. There is simply no worthwhile browser
support that I know that helps.

To OPs question, I don't think shadow for anything in css or html
is well supported or sophisticated enough.

David Hyatt was blogging in January about box shadows in a future Safari
browser:

"WebKit now supports the CSS3 box-shadow property (as

....

I am assuming here that most people
reading Apple related pages will be using Safari, and relatively few IE
user will be bothering to check. If all the new CSS works like it should
(and like text-shadow does) browsers that can't handle it will totally
ignore all of the CSS3 and experimental styles anyhow.

Even if the assumption were true (I have no idea, I thought I was
the only Safari fan on earth?) you surely would not want to deny
Mac users of other browsers... but perhaps you have in mind
things that degrade well or are not detrimental to other
browsers...

--
dorayme

[Nik Coughlin]

dorayme wrote:

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

>The only problem I see with doing the effects using a graphics
package is if you decide to change your background colours. You
sometimes have to redo all the effects applied to photos.

You have to do this if you want some quality. I regularly
re-prepare images that have drop shadows to suit any significant
change in bg colour. There is simply no worthwhile browser
support that I know that helps.

Png with alpha transparency, supported by all modern browsers but needs a
hack to work in IE <7. Not for the whole image, just the shadow around it.

[Nik Coughlin]

dorayme wrote:

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

>>
The only problem I see with doing the effects using a graphics
package is if you decide to change your background colours. You
sometimes have to redo all the effects applied to photos.

You have to do this if you want some quality. I regularly
re-prepare images that have drop shadows to suit any significant
change in bg colour. There is simply no worthwhile browser
support that I know that helps.

http://nrkn.com/photoShadow/

[dorayme]

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

dorayme wrote:

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

>
The only problem I see with doing the effects using a graphics
package is if you decide to change your background colours. You
sometimes have to redo all the effects applied to photos.

You have to do this if you want some quality. I regularly
re-prepare images that have drop shadows to suit any significant
change in bg colour. There is simply no worthwhile browser
support that I know that helps.

http://nrkn.com/photoShadow/

Can't quite see the advantage for the case here over sticking it
on the pic (except, come to think of it, if the pic is to be
reused without shadow elsewhere)?

What is your preferred technique for a heading that is a pic of
text, where the text has a traditional bottom right shadow, not
too heavy. And it be portable to different uniformly coloured
backgrounds?

--
dorayme

[Nik Coughlin]

dorayme wrote:

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

>dorayme wrote:

>>In article
<NO***********************************@freenews. iinet.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

The only problem I see with doing the effects using a graphics
package is if you decide to change your background colours. You
sometimes have to redo all the effects applied to photos.
You have to do this if you want some quality. I regularly
re-prepare images that have drop shadows to suit any significant
change in bg colour. There is simply no worthwhile browser
support that I know that helps.

http://nrkn.com/photoShadow/

Can't quite see the advantage for the case here over sticking it
on the pic (except, come to think of it, if the pic is to be
reused without shadow elsewhere)?

http://nrkn.com/photoShadow/index2.html

Note that the only thing that's changed here is the background.

What is your preferred technique for a heading that is a pic of
text, where the text has a traditional bottom right shadow, not
too heavy. And it be portable to different uniformly coloured
backgrounds?

I'd probably do something like this:

http://nrkn.com/textShadow/

Note that again the only thing that's changed is the background. Doesn't
have to be uniformly coloured either.

[dorayme]

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

dorayme wrote:

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

dorayme wrote:
In article
<NO***********************************@freenews.i inet.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

The only problem I see with doing the effects using a graphics
package is if you decide to change your background colours. You
sometimes have to redo all the effects applied to photos.
You have to do this if you want some quality. I regularly
re-prepare images that have drop shadows to suit any significant
change in bg colour. There is simply no worthwhile browser
support that I know that helps.
http://nrkn.com/photoShadow/

Can't quite see the advantage for the case here over sticking it
on the pic (except, come to think of it, if the pic is to be
reused without shadow elsewhere)?

http://nrkn.com/photoShadow/index2.html

Note that the only thing that's changed here is the background.

I noted that before.

What is your preferred technique for a heading that is a pic of
text, where the text has a traditional bottom right shadow, not
too heavy. And it be portable to different uniformly coloured
backgrounds?

I'd probably do something like this:

http://nrkn.com/textShadow/

Note that again the only thing that's changed is the background. Doesn't
have to be uniformly coloured either.

No, but I said it because it helps to see what is going on! OK,
must look at not using transparent gifs when I want this... Sort
of been meaning to as I was vaguely aware of all this before and
it always seemed like more trouble than its worth but...

How boring are the hacks for < IE7?

--
dorayme

[Nik Coughlin]

dorayme wrote:

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

>dorayme wrote:

>>What is your preferred technique for a heading that is a pic of
text, where the text has a traditional bottom right shadow, not
too heavy. And it be portable to different uniformly coloured
backgrounds?

I'd probably do something like this:

http://nrkn.com/textShadow/

Note that again the only thing that's changed is the background.
Doesn't have to be uniformly coloured either.

No, but I said it because it helps to see what is going on! OK,
must look at not using transparent gifs when I want this... Sort
of been meaning to as I was vaguely aware of all this before and
it always seemed like more trouble than its worth but...

How boring are the hacks for < IE7?

Not too bad. You can automate it if you're using server side scripts. You
could do it with JavaScript too, but not a good idea to rely on it as we all
know.

There are a few ways of going about it, but this is how I did it for the
example above:

First, you'll need to use some conditional comments to add an extra style
section for IE 6 only. Like this:

<!--[if IE 6]>
<style type="text/css">
</style>
<![endif]-->

If you want to support IE version less than 6 (I don't bother anymore) then
you can do this instead:

<!--[if lte IE 6]>
<style type="text/css">
</style>
<![endif]-->

Or you can replace "lte IE 6" with "lt IE 7".

Then, take the image that you want to apply transparency to and wrap it in
an extra div, so that instead of this:
<img src="text.png" alt="Text">

You have this:
<div><img src="text.png" alt="Text"></div>

Then, in the IE-only style section inside the conditional comments, set the
wrapper div to be the width and height of the image. You then need to apply
a special IE-only filter that draws the transparent png into the div. It
will stretch the png to the size of the div, which is why you need to set it
to be the same size as the image. Also, IE is fussy about the conditions
under which the filter works, so you need to add position: relative as well.
Then you need to hide the image inside the div, otherwise it will appear
twice because you've also drawn it onto the containing div. All of that
together looks like this:
<!--[if IE 6]>
<style type="text/css">
..textShadow div {
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader
(
src='text.png',sizingMethod='scale'
);
position: relative;
height: 53px;
width: 141px;
}

..textShadow img {
display: none;
}
</style>
<![endif]-->

Working example:
http://nrkn.com/textShadow/

[dorayme]

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

dorayme wrote:

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

dorayme wrote:

>What is your preferred technique for a heading that is a pic of
text, where the text has a traditional bottom right shadow, not
too heavy. And it be portable to different uniformly coloured
backgrounds?

I'd probably do something like this:

http://nrkn.com/textShadow/

Note that again the only thing that's changed is the background.
Doesn't have to be uniformly coloured either.

No, but I said it because it helps to see what is going on! OK,
must look at not using transparent gifs when I want this... Sort
of been meaning to as I was vaguely aware of all this before and
it always seemed like more trouble than its worth but...

How boring are the hacks for < IE7?

Not too bad. You can automate it if you're using server side scripts. You
could do it with JavaScript too, but not a good idea to rely on it as we all
know.

There are a few ways of going about it, but this is how I did it for the
example above:

First, you'll need to use some conditional comments to add an extra style
section for IE 6 only. Like this:

<!--[if IE 6]>
<style type="text/css">
</style>
<![endif]-->

If you want to support IE version less than 6 (I don't bother anymore) then
you can do this instead:

<!--[if lte IE 6]>
<style type="text/css">
</style>
<![endif]-->

Or you can replace "lte IE 6" with "lt IE 7".

Then, take the image that you want to apply transparency to and wrap it in
an extra div, so that instead of this:
<img src="text.png" alt="Text">

You have this:
<div><img src="text.png" alt="Text"></div>

Then, in the IE-only style section inside the conditional comments, set the
wrapper div to be the width and height of the image. You then need to apply
a special IE-only filter that draws the transparent png into the div. It
will stretch the png to the size of the div, which is why you need to set it
to be the same size as the image. Also, IE is fussy about the conditions
under which the filter works, so you need to add position: relative as well.
Then you need to hide the image inside the div, otherwise it will appear
twice because you've also drawn it onto the containing div. All of that
together looks like this:
<!--[if IE 6]>
<style type="text/css">
.textShadow div {
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader
(
src='text.png',sizingMethod='scale'
);
position: relative;
height: 53px;
width: 141px;
}

.textShadow img {
display: none;
}
</style>
<![endif]-->

Working example:
http://nrkn.com/textShadow/

Well, that is a test example. Thanks for this Nik. I must say it
looks like something that I would have to be keen to do! I would
have to know that I am likely to be wanting it in many different
backgrounds. Otherwise my practice is simple: I keep layered png
or psds and go to this master to change the bg, I then export to
gif, transparent is fine then. Or not even necessary always, just
leave the bg in or even jpg where it suits.

Still, all food for thought...

--
dorayme

[Nik Coughlin]

dorayme wrote:

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

>dorayme wrote:

>>In article <eq**********@aioe.org>,

How boring are the hacks for < IE7?

Working example:
http://nrkn.com/textShadow/

Well, that is a test example. Thanks for this Nik. I must say it
looks like something that I would have to be keen to do! I would
have to know that I am likely to be wanting it in many different
backgrounds. Otherwise my practice is simple: I keep layered png
or psds and go to this master to change the bg, I then export to
gif, transparent is fine then. Or not even necessary always, just
leave the bg in or even jpg where it suits.

Still, all food for thought...

Yep. Your method is adequate in most cases. Alpha transparent png is
useful if you have non-uniform backgrounds, or if you want to use one image
against a variety of backgrounds.

Another thing you should know is that IE doesn't interpret the color
correction in Png files correctly (even 7), so a Png will look slightly
different in IE than it does in all other browsers. You can work around
this by removing the gAMA data chunk:
http://blog.reindel.com/2006/12/29/r...-colors-in-ie/

http://preview.tinyurl.com/25mmwt

[dorayme]

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

dorayme wrote:

In article <eq**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

dorayme wrote:
In article <eq**********@aioe.org>,

How boring are the hacks for < IE7?

Working example:
http://nrkn.com/textShadow/

Well, that is a test example. Thanks for this Nik. I must say it
looks like something that I would have to be keen to do! I would
have to know that I am likely to be wanting it in many different
backgrounds. Otherwise my practice is simple: I keep layered png
or psds and go to this master to change the bg, I then export to
gif, transparent is fine then. Or not even necessary always, just
leave the bg in or even jpg where it suits.

Still, all food for thought...

Yep. Your method is adequate in most cases. Alpha transparent png is
useful if you have non-uniform backgrounds, or if you want to use one image
against a variety of backgrounds.

Another thing you should know is that IE doesn't interpret the color
correction in Png files correctly (even 7), so a Png will look slightly
different in IE than it does in all other browsers. You can work around
this by removing the gAMA data chunk:
http://blog.reindel.com/2006/12/29/r...rom-a-png-imag
e-to-fix-darker-colors-in-ie/

http://preview.tinyurl.com/25mmwt

It occurred to me that your method might be actually practical
where a number of same sized pics were to be treated with the
same shadow. I even have a case that is close to it (but not
quite, because there are a significant minority that are slightly
different in size). I prepared each using an "action" consisting
of other "actions' I had made in PS. But I did it often! And I do
it when updating the site in question a fair bit too. mmm... as I
said, it is food for thought this direction you are mentioning
but I need to have a situation where it is actually practical.

--
dorayme

[Nik Coughlin]

dorayme wrote:

>
It occurred to me that your method might be actually practical
where a number of same sized pics were to be treated with the
same shadow. I even have a case that is close to it (but not
quite, because there are a significant minority that are slightly
different in size). I prepared each using an "action" consisting
of other "actions' I had made in PS. But I did it often! And I do
it when updating the site in question a fair bit too. mmm... as I
said, it is food for thought this direction you are mentioning
but I need to have a situation where it is actually practical.

You can use a variation on css sliding doors to arrange a sliced-up shadow
to fit any sized picture (or any Html element for that matter, see the h1 in
this example):

http://www.nrkn.com/photoShadowArbitrary/

Re-size the text in your browser and you'll see the shadow around the h1
element adjust to suit its new size.

Note that I haven't bothered applying the IE <7 hack here, so the Png files
won't appear correctly in IE 6.

It's a lot of markup, but if you gzip your pages it compresses away to
almost nothing.

I didn't spend much time on the shadow graphic that I used for this (it was
actually just a radial gradient), so it looks a little funny but it
demonstrates the concept.