Re: [WSG] images against color backgrounds

2010-12-09 Thread Tim White 
Or, try the CSS3 box-shadow

http://www.css3.info/preview/box-shadow/

Tim

On Thu, Dec 9, 2010 at 11:01 AM, Stuart Foulstone
 wrote:
>
> Might get some ideas from CSS Drop Shadows @
>
> http://www.alistapart.com/articles/cssdropshadows/
>
>
> On Wed, December 8, 2010 9:01 pm, cat soul wrote:
>> I hope I'm not bending/breaking the purpose of the list but wanted
>> opinions on best practices for preparing images for use on web pages
>> where there are color backgrounds, and the image must have some of
>> that background color in them.
>>
>> Example: you want to place an image with a drop shadow, so in
>> photoshop, you prepare your image with drop shadow, both of them in
>> layers above the same background color as on the page. When you place
>> such an image, flattened and jpg'd, it looks seamless.
>>
>> Trouble comes when you want to change the background color on the page
>> (s) where you've already prepped the images with a given color..then
>> you have to change that, too, and re-jpg, re-place, etc..
>>
>> Some images don't look right unless their lifted off the page with a
>> drop shadow, IMHO...
>>
>> cs
>>
>>
>> ***
>> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
>> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
>> Help: memberh...@webstandardsgroup.org
>> ***
>>
>>
>
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
>
>


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] images against color backgrounds

2010-12-09 Thread Stuart Foulstone 

Might get some ideas from CSS Drop Shadows @

http://www.alistapart.com/articles/cssdropshadows/


On Wed, December 8, 2010 9:01 pm, cat soul wrote:
> I hope I'm not bending/breaking the purpose of the list but wanted
> opinions on best practices for preparing images for use on web pages
> where there are color backgrounds, and the image must have some of
> that background color in them.
>
> Example: you want to place an image with a drop shadow, so in
> photoshop, you prepare your image with drop shadow, both of them in
> layers above the same background color as on the page. When you place
> such an image, flattened and jpg'd, it looks seamless.
>
> Trouble comes when you want to change the background color on the page
> (s) where you've already prepped the images with a given color..then
> you have to change that, too, and re-jpg, re-place, etc..
>
> Some images don't look right unless their lifted off the page with a
> drop shadow, IMHO...
>
> cs
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
>
>




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] images against color backgrounds

2010-12-08 Thread Joseph Taylor 
Good point on the javascript repairs (there are a couple techniques of 
fixing .png support in IE6)


Trouble with this method is it can cause other troubles (like links over 
.png backgrounds etc) so be careful.


It all depends on what you're trying to do.

Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 12/8/10 5:11 PM, Henrik Madsen wrote:

.png with alpha channel is the best way to go.

IE6 and lower can't handle the alpha channel and make the transparent 
background gray.


Can be conditionally fixed with js, for example: 
http://www.dillerdesign.com/experiment/DD_belatedPNG/




Based on my site audience I'll make fallback .gif replacements for 
the .png images (that look crappier but are at least transparent)


You can also make 8 bit .pngs (with no alpha channel) that behave 
just like .gif


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 12/8/10 4:01 PM, cat soul wrote:
I hope I'm not bending/breaking the purpose of the list but wanted 
opinions on best practices for preparing images for use on web pages 
where there are color backgrounds, and the image must have some of 
that background color in them.


Example: you want to place an image with a drop shadow, so in 
photoshop, you prepare your image with drop shadow, both of them in 
layers above the same background color as on the page. When you 
place such an image, flattened and jpg'd, it looks seamless.


Trouble comes when you want to change the background color on the 
page(s) where you've already prepped the images with a given 
color..then you have to change that, too, and re-jpg, re-place, etc..


Some images don't look right unless their lifted off the page with a 
drop shadow, IMHO...


cs


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org 


***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*** 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] images against color backgrounds

2010-12-08 Thread Henrik Madsen 

.png with alpha channel is the best way to go.

IE6 and lower can't handle the alpha channel and make the  
transparent background gray.


Can be conditionally fixed with js, for example: 
http://www.dillerdesign.com/experiment/DD_belatedPNG/



Based on my site audience I'll make fallback .gif replacements for  
the .png images (that look crappier but are at least transparent)


You can also make 8 bit .pngs (with no alpha channel) that behave  
just like .gif

Joseph R. B. Taylor
Web Designer / Developer
--
Sites by Joe, LLC
"Clean, Simple and Elegant Web Design"
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 12/8/10 4:01 PM, cat soul wrote:


I hope I'm not bending/breaking the purpose of the list but wanted  
opinions on best practices for preparing images for use on web  
pages where there are color backgrounds, and the image must have  
some of that background color in them.


Example: you want to place an image with a drop shadow, so in  
photoshop, you prepare your image with drop shadow, both of them in  
layers above the same background color as on the page. When you  
place such an image, flattened and jpg'd, it looks seamless.


Trouble comes when you want to change the background color on the  
page(s) where you've already prepped the images with a given  
color..then you have to change that, too, and re-jpg, re-place, etc..


Some images don't look right unless their lifted off the page with  
a drop shadow, IMHO...


cs


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] images against color backgrounds

2010-12-08 Thread Joseph Taylor 

.png with alpha channel is the best way to go.

IE6 and lower can't handle the alpha channel and make the transparent 
background gray.


Based on my site audience I'll make fallback .gif replacements for the 
.png images (that look crappier but are at least transparent)


You can also make 8 bit .pngs (with no alpha channel) that behave just 
like .gif


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 12/8/10 4:01 PM, cat soul wrote:
I hope I'm not bending/breaking the purpose of the list but wanted 
opinions on best practices for preparing images for use on web pages 
where there are color backgrounds, and the image must have some of 
that background color in them.


Example: you want to place an image with a drop shadow, so in 
photoshop, you prepare your image with drop shadow, both of them in 
layers above the same background color as on the page. When you place 
such an image, flattened and jpg'd, it looks seamless.


Trouble comes when you want to change the background color on the 
page(s) where you've already prepped the images with a given 
color..then you have to change that, too, and re-jpg, re-place, etc..


Some images don't look right unless their lifted off the page with a 
drop shadow, IMHO...


cs


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] images against color backgrounds

2010-12-08 Thread cat soul 
I hope I'm not bending/breaking the purpose of the list but wanted  
opinions on best practices for preparing images for use on web pages  
where there are color backgrounds, and the image must have some of  
that background color in them.


Example: you want to place an image with a drop shadow, so in  
photoshop, you prepare your image with drop shadow, both of them in  
layers above the same background color as on the page. When you place  
such an image, flattened and jpg'd, it looks seamless.


Trouble comes when you want to change the background color on the page 
(s) where you've already prepped the images with a given color..then  
you have to change that, too, and re-jpg, re-place, etc..


Some images don't look right unless their lifted off the page with a  
drop shadow, IMHO...


cs


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***