Re: [css-d] a picture with in a picture
David Hucklesby wrote: On Sat, 08 Mar 2008 17:38:59 -0600, Rafael wrote: T wrote: [···] Use .png for the frame, cos it has excellent transparency support. Yet another reason not to use it: PNG images don't work in IE6 (and, although we all regret this, IE6 is still the dominant browser in the real world). PNG-8 works just fine: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ Cordially, David Yes, I was referring to IE's lack of support for PNG images, but I forgot about that article. I guess that's because I don't own Fireworks :) Thanks for the reminder. Rafael. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a picture with in a picture
If you want an ornate frame, for example, where parts of it overlap the image,
set the picture as the background image, then place the frame image over the
top.
For example, each page loads a different image. This is called image.jpg in the
block below (just replace with your image name).
div class=bg_image style=background-image: url(images/image.jpg);
img src=images/frame.png ... /
/div
In your CSS:
#bg_image {
background-repeat: no-repeat;
border: 0; /* Your frame IS the border*/
height: (however tall the frame is) px / em / %;
width: (however wide the frame is) px / em / %;
}
Make sure the inside of the frame is transparent, so your background image will
show through.
This way, you can have a gallery style frame, with intricate patterns,
gargoyles, or whatever, sticking into the picture area.
I haven't tested this, but I don't see any reason why it shouldn't work.
Use .png for the frame, cos it has excellent transparency support.
Hope this works out for you, and I'd like to see it when it's done.
Good luck
-Original Message-
From: [EMAIL PROTECTED]
Sent: Thu, 6 Mar 2008 18:57:18 -0800
To: css-d@lists.css-discuss.org
Subject: [css-d] a picture with in a picture
Is it possible to have an image showing a picture frame and have that
as part of the css style sheet.
Then in HTML on different pages use that frame to cover over an
image, giving the image a nice decorative picture frame.
Don't know if I'm pushing the limits.
thanks in advance
chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a picture with in a picture
T wrote: If you want an ornate frame, for example, where parts of it overlap the image, set the picture as the background image, then place the frame image over the top. For example, each page loads a different image. This is called image.jpg in the block below (just replace with your image name). div class=bg_image style=background-image: url(images/image.jpg); img src=images/frame.png ... / /div This isn't, IMO, the best approach. The reason is simple: your content is in the CSS, not in the page. What you're showing in your content is the frame, for every image, the style you add gives the actual image. This simply doesn't sound right. Make sure the inside of the frame is transparent, so your background image will show through. [···] Use .png for the frame, cos it has excellent transparency support. Yet another reason not to use it: PNG images don't work in IE6 (and, although we all regret this, IE6 is still the dominant browser in the real world). Rafael. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a picture with in a picture
On Sat, 08 Mar 2008 17:38:59 -0600, Rafael wrote: T wrote: [···] Use .png for the frame, cos it has excellent transparency support. Yet another reason not to use it: PNG images don't work in IE6 (and, although we all regret this, IE6 is still the dominant browser in the real world). PNG-8 works just fine: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a picture with in a picture
Here's a way to get png transparency to work in IE6: http://jake.cfwebtools.com/2007/09/17/ie6-png-transparency-fix/ -- Jake Churchill Team Leader 11204 Davenport, Ste. 100 Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 From: David Hucklesby [EMAIL PROTECTED] Sent: Saturday, March 08, 2008 8:25 PM To: Rafael [EMAIL PROTECTED] Subject: Re: [css-d] a picture with in a picture On Sat, 08 Mar 2008 17:38:59 -0600, Rafael wrote: T wrote: [···] Use .png for the frame, cos it has excellent transparency support. Yet another reason not to use it: PNG images don't work in IE6 (and, although we all regret this, IE6 is still the dominant browser in the real world). PNG-8 works just fine: Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a picture with in a picture
Jim Davis wrote: On Thu, Mar 6, 2008 at 6:57 PM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Is it possible to have an image showing a picture frame and have that as part of the css style sheet. Here is a way to have the frame in as a background in the css and adding the image in the body of the html: http://www.jimdavis.org/test/frame_demo.html Or a similar technique with no additional markup: http://scott.sauyet.com/CSS/Demo/Frame/ Either method works only with fixed-size images. Techniques that use some sort of textured image to make a pseudo-frame are possible, but they will require additional containers in the markup, either included in the source or added by Javascript. -- Scott __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a picture with in a picture
Thank-you all for the great collection of ideas.
I'm going though them now and will let you know how it turns out.
You have expanded my vision of what is possible though css.
thank-you
chris
On 7-Mar-08, at 6:07 AM, T wrote:
If you want an ornate frame, for example, where parts of it overlap
the image, set the picture as the background image, then place the
frame image over the top.
For example, each page loads a different image. This is called
image.jpg in the block below (just replace with your image name).
div class=bg_image style=background-image: url(images/image.jpg);
img src=images/frame.png ... /
/div
In your CSS:
#bg_image {
background-repeat: no-repeat;
border: 0; /* Your frame IS the border*/
height: (however tall the frame is) px / em / %;
width: (however wide the frame is) px / em / %;
}
Make sure the inside of the frame is transparent, so your background
image will show through.
This way, you can have a gallery style frame, with intricate
patterns, gargoyles, or whatever, sticking into the picture area.
I haven't tested this, but I don't see any reason why it shouldn't work.
Use .png for the frame, cos it has excellent transparency support.
Hope this works out for you, and I'd like to see it when it's done.
Good luck
-Original Message-
From: [EMAIL PROTECTED]
Sent: Thu, 6 Mar 2008 18:57:18 -0800
To: css-d@lists.css-discuss.org
Subject: [css-d] a picture with in a picture
Is it possible to have an image showing a picture frame and have that
as part of the css style sheet.
Then in HTML on different pages use that frame to cover over an
image, giving the image a nice decorative picture frame.
Don't know if I'm pushing the limits.
thanks in advance
chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a picture with in a picture
Scott Sauyet wrote: Jim Davis wrote: On Thu, Mar 6, 2008 at 6:57 PM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Is it possible to have an image showing a picture frame and have that as part of the css style sheet. Here is a way to have the frame in as a background in the css and adding the image in the body of the html: http://www.jimdavis.org/test/frame_demo.html Or a similar technique with no additional markup: http://scott.sauyet.com/CSS/Demo/Frame/ Either method works only with fixed-size images. Techniques that use some sort of textured image to make a pseudo-frame are possible, but they will require additional containers in the markup, either included in the source or added by Javascript. -- Scott Interesting... I've played with background's color, padding and border's color/width to give images soft thin (usually 1-4px) shadows but I never thought of using images too (duh!). I guess I'm definitely not a graphic guy. Thanks for the insight :) Rafael. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] a picture with in a picture
Is it possible to have an image showing a picture frame and have that as part of the css style sheet. Then in HTML on different pages use that frame to cover over an image, giving the image a nice decorative picture frame. Don't know if I'm pushing the limits. thanks in advance chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a picture with in a picture
Sure. Make a div id=frame. Make a blank black frame image and use that as a background-image with no repeat. Then inside that div, put your img add padding-top and padding-left to line up. On 3/6/08, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Is it possible to have an image showing a picture frame and have that as part of the css style sheet. Then in HTML on different pages use that frame to cover over an image, giving the image a nice decorative picture frame. Don't know if I'm pushing the limits. thanks in advance chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a picture with in a picture
Here is a way to have the frame in as a background in the css and adding the image in the body of the html: http://www.jimdavis.org/test/frame_demo.html Jim On Thu, Mar 6, 2008 at 6:57 PM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Is it possible to have an image showing a picture frame and have that as part of the css style sheet. Then in HTML on different pages use that frame to cover over an image, giving the image a nice decorative picture frame. Don't know if I'm pushing the limits. thanks in advance chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
