I see these used in web pages and wold like to use/make them myself. I have Graphic Converter, and fireworks. How do I go about doing this? Is there a better easier solution (than the one I don't have.)
Fireworks in the Property Inspector: add effects -> shadow and glow -> drop shadow (or whatever) then use transperency/fade slider.
OK maybe I'm missing something, I tried what you said but when I import those images either they are visible and I can only see that image or they are not visible and I can only see the background image.
Notice how the contianer for the text is semi transparent and there are many other better examples in the garden. That is what I'm trying to do, get a semi-transparent image to float on top of a background between the text and the image.
You're really not explaining yourself very good here.
You can:
- Set transparancy via CSS, but this is not a well supported feature.
- Use a PNG with an alpha-channel, but this is not fully supported in IE, at least not in older versions.
But I'm unsure of what you want to accomplish, maybe transparency is not what you are looking for?
Can you see that the "Road to enlightenment" http://www.csszengarden.com/?cssfile...062.css&page=2 is transparent, and you can see the garden beind it. He made a box that is transparent to put words in because they would be difficult to read just setting on top of the picture. So he has a semi-(darkened)-transparent box to put words into. I am using Safari but the point of those CSS moments is that they are designed to at least work across 90% of the browsers ie Mozilla based and IE.
That's .gif. Gifs allow one level of transparency. So you can create transparency, but it'll look jagged or grainy.
Correct, butis it the whole thing or just an image created in PS that is semi-transparent and layered in the CSS? I would like to be able to make semi-transparent "layers" in PS and use them for this type of purpose in web design.
In other words can I design a web page and have a photo as part of the background and then put the content into containers and then layer a visible semi-transparent image under the text to make it easier to read?
Also, gifs can create transparency, but it'll look jagged or grainy.
OK so maybe .png? since I think that is what those are. Oops spoke too soon, those are .gifs and .jpgs.
OK so an easier way to do it is to layout the text and then findout the measurements and create an image to sit in the background, that appears to be transparent. But to quote the author " In the preamble section, a beautiful effect is created by using a light gray background that allows the backdrop graphic to show through.
So itwould appear that be created a png of the proper dimentions and transparent 35%, or maybe it was the 35th try, I think the former. It will be nice when I figure this out.
This graphic is not supported in older IE, If you look at the CSS it's got a IE hack section.
Yea that image was 4x4 for me, but I was able to whip up a transparent image but get it to display in the first child of the container, so I was able to cover a few words, but now all I need is to figure out how he put a contianer in that container.
This graphic is not supported in older IE, If you look at the CSS it's got a IE hack section.
OK got it, it was a matter of creating the image and letting it do the work, hey if it is transparent or mostly so, I let it be that. I will try other things but it appears to work. I was able to creat another DIV with the image attributes and plug it into the Intro Container flow.
<DIV id="intro">
<DIV id="image"> "here is what I pasted in"
\t<DIV id="pageHeader">
\t\t\t<H1><SPAN>css Zen Garden</SPAN></H1>
\t\t\t<H2><SPAN>The Beauty of <ACRONYM title="SNIP"</SPAN></H2>
\t\t</DIV>
\t\t
\t
\t\t<DIV id="quickSummary">
\t\t\t<P class="p1"><SPAN>A demonstration of what "SNIP"</SPAN></P>
\t\t\t<P class="p2"><SPAN>Download the sample "SNIP"</SPAN></P>
\t\t\t
\t\t</DIV>
\t\t
\t\t<DIV id="preamble">
\t\t\t<H3><SPAN>The Road to Enlightenment</SPAN></H3>
\t\t\t<P class="p1"><SPAN>Littering a dark and dreary "SNIP"</SPAN></P>
\t\t\t<P class="p2"><SPAN>Today, we must clear the "SNIP" </SPAN></P>
\t\t\t<P class="p3"><SPAN>The css Zen Garden "SNIP" </SPAN></P>
The image is just the background on the "preamble id". Nothing more fancy than that.
You mean "intro id", but yes nothing more than that. If it were only the preamble it would only cover the text starting with H3 "The Road to Enlighenment" By dropping just inside of the "intro id" that makes the image fill the text block defined by '"intro". In other words it would have missed the "quickSummary" wording all together.
All though it could have been better placed after "pageHeader"(?which is not defined? why?) than before it. It appears to be a part of the header as well, but it is not.
You mean "intro id", but yes nothing more than that. If it were only the preamble it would only cover the text starting with H3 "The Road to Enlighenment" By dropping just inside of the "intro id" that makes the image fill the text block defined by '"intro". In other words it would have missed the "quickSummary" wording all together.
No, I mean the "preamble" id tag. The grey transperant background is defined in the css id for this div.
The intro id has no background.
The premble id is ofcourse inside the intro id. the H3 tag just refers to the "road to enlightenment heading.
Try downloading the developer toolbar plugin for firefox. It makes stuff like this quite easy.
No, I mean the "preamble" id tag. The grey transperant background is defined in the css id for this div.
The intro id has no background.
The premble id is ofcourse inside the intro id. the H3 tag just refers to the "road to enlightenment heading.
Try downloading the developer toolbar plugin for firefox. It makes stuff like this quite easy.
All right I tried that, now you. It only covers the words associated with preamble which would be the last two sentences, to cover them all it must sit inside "intro" in the body since "intro" defines the table dimentions, while "preamble" defines where the text "preamble" is in the box. left and no margin. I'll have to check out that tool sounds fun. Did you see the code I posted? Tool or not, that is logical, but don't take my word for it. Try it.
Notice "preamble" and "quickSummary" are both defining text properties in "intro", so you have to cover them both, but better just to fill the box "intro".
All right I tried that, now you. It only covers the words associated with preamble which would be the last two sentences, to cover them all it must sit inside "intro" in the body since "intro" defines the table dimentions, while "preamble" defines where the text "preamble" is in the box. left and no margin. I'll have to check out that tool sounds fun. Did you see the code I posted? Tool or not, that is logical, but don't take my word for it. Try it.
Notice "preamble" and "quickSummary" are both defining text properties in "intro", so you have to cover them both, but better just to fill the box "intro".
I've highlighted the reference to the image in red. This is the transparent background you are trying to create.
(The rest of the id-tags inside the "preamble DIV" are used to format the text. And as seg. points out, the H3 tag cleverly replaces the text with a header image).
I've highlighted the reference to the image in red. This is the transparent background you are trying to create.
(The rest of the id-tags inside the "preamble DIV" are used to format the text. And as seg. points out, the H3 tag cleverly replaces the text with a header image).
OK I see what was happening, we were talking across each other. I was talking about the code that I posted and you were talking about the code from the last link I sent. Yes he declaired his background there, sorry about that. In the code I was working on, no such thing happened. But I do think that I understand what he was doing there. Making a box, making a screen, and having the screen rendered at the time of display. The fact that his screen was 4x4 to me said that he intended to send a small item acress the internet and have the cpu handle the repeats, clever.
Comments
Originally posted by segovius
Fireworks in the Property Inspector: add effects -> shadow and glow -> drop shadow (or whatever) then use transperency/fade slider.
OK maybe I'm missing something, I tried what you said but when I import those images either they are visible and I can only see that image or they are not visible and I can only see the background image.
For an example of what I'm trying to do go here: http://www.csszengarden.com/
Here is another example: http://csszengarden.com/?cssfile=htt...n2/flowers.css
http://csszengarden.com/?cssfile=153/153.css
http://csszengarden.com/?cssfile=/138/138.css
http://csszengarden.com/?cssfile=/096/096.css
http://csszengarden.com/?cssfile=/045/045.css
And of course here: http://www.csszengarden.com/?cssfile...062.css&page=2
Notice how the contianer for the text is semi transparent and there are many other better examples in the garden. That is what I'm trying to do, get a semi-transparent image to float on top of a background between the text and the image.
Originally posted by Placebo
Speaking of lack of support, I wouldn't screw with CSS transparency either.
OK get the images to be transparent and then float them on top.
Did everyone see the extra links I added to my second post?
You can:
- Set transparancy via CSS, but this is not a well supported feature.
- Use a PNG with an alpha-channel, but this is not fully supported in IE, at least not in older versions.
But I'm unsure of what you want to accomplish, maybe transparency is not what you are looking for?
Originally posted by New
You're really not explaining yourself very good here.
You can:
- Set transparancy via CSS, but this is not a well supported feature.
- Use a PNG with an alpha-channel, but this is not fully supported in IE, at least not in older versions.
But I'm unsure of what you want to accomplish, maybe transparency is not what you are looking for?
Can you see that the "Road to enlightenment" http://www.csszengarden.com/?cssfile...062.css&page=2 is transparent, and you can see the garden beind it. He made a box that is transparent to put words in because they would be difficult to read just setting on top of the picture. So he has a semi-(darkened)-transparent box to put words into. I am using Safari but the point of those CSS moments is that they are designed to at least work across 90% of the browsers ie Mozilla based and IE.
Also, gifs can create transparency, but it'll look jagged or grainy.
Originally posted by Placebo
That's .gif. Gifs allow one level of transparency. So you can create transparency, but it'll look jagged or grainy.
Correct, butis it the whole thing or just an image created in PS that is semi-transparent and layered in the CSS? I would like to be able to make semi-transparent "layers" in PS and use them for this type of purpose in web design.
In other words can I design a web page and have a photo as part of the background and then put the content into containers and then layer a visible semi-transparent image under the text to make it easier to read?
Originally posted by Placebo
Yeah, that's a transparent CSS layer.
Also, gifs can create transparency, but it'll look jagged or grainy.
OK so maybe .png? since I think that is what those are. Oops spoke too soon, those are .gifs and .jpgs.
OK so an easier way to do it is to layout the text and then findout the measurements and create an image to sit in the background, that appears to be transparent. But to quote the author " In the preamble section, a beautiful effect is created by using a light gray background that allows the backdrop graphic to show through.
Here is the CSS
body[id=css-zen-garden] #preamble { position:absolute; top:30px; left:20px; display: block; margin:0; border: 1px dotted #fff; padding: 0; width: 196px; height: 290px; background: transparent url (blk35.png) repeat; overflow:hidden; }
So itwould appear that be created a png of the proper dimentions and transparent 35%, or maybe it was the 35th try, I think the former. It will be nice when I figure this out.
U can find it here: http://www.csszengarden.com/062/blk35.png
This graphic is not supported in older IE, If you look at the CSS it's got a IE hack section.
Originally posted by New
Yeah, that particular box is a 35% (?) transparent black png.
U can find it here: http://www.csszengarden.com/062/blk35.png
This graphic is not supported in older IE, If you look at the CSS it's got a IE hack section.
Yea that image was 4x4 for me, but I was able to whip up a transparent image but get it to display in the first child of the container, so I was able to cover a few words, but now all I need is to figure out how he put a contianer in that container.
Originally posted by New
Yeah, that particular box is a 35% (?) transparent black png.
U can find it here: http://www.csszengarden.com/062/blk35.png
This graphic is not supported in older IE, If you look at the CSS it's got a IE hack section.
OK got it, it was a matter of creating the image and letting it do the work, hey if it is transparent or mostly so, I let it be that. I will try other things but it appears to work. I was able to creat another DIV with the image attributes and plug it into the Intro Container flow.
<DIV id="intro">
<DIV id="image"> "here is what I pasted in"
\t<DIV id="pageHeader">
\t\t\t<H1><SPAN>css Zen Garden</SPAN></H1>
\t\t\t<H2><SPAN>The Beauty of <ACRONYM title="SNIP"</SPAN></H2>
\t\t</DIV>
\t\t
\t
\t\t<DIV id="quickSummary">
\t\t\t<P class="p1"><SPAN>A demonstration of what "SNIP"</SPAN></P>
\t\t\t<P class="p2"><SPAN>Download the sample "SNIP"</SPAN></P>
\t\t\t
\t\t</DIV>
\t\t
\t\t<DIV id="preamble">
\t\t\t<H3><SPAN>The Road to Enlightenment</SPAN></H3>
\t\t\t<P class="p1"><SPAN>Littering a dark and dreary "SNIP"</SPAN></P>
\t\t\t<P class="p2"><SPAN>Today, we must clear the "SNIP" </SPAN></P>
\t\t\t<P class="p3"><SPAN>The css Zen Garden "SNIP" </SPAN></P>
\t\t</DIV>
\t</DIV>"closing my div"
\t</DIV> "oops sorry about that"
Originally posted by New
The image is just the background on the "preamble id". Nothing more fancy than that.
You mean "intro id", but yes nothing more than that. If it were only the preamble it would only cover the text starting with H3 "The Road to Enlighenment" By dropping just inside of the "intro id" that makes the image fill the text block defined by '"intro". In other words it would have missed the "quickSummary" wording all together.
All though it could have been better placed after "pageHeader"(?which is not defined? why?) than before it. It appears to be a part of the header as well, but it is not.
Originally posted by Brendon
You mean "intro id", but yes nothing more than that. If it were only the preamble it would only cover the text starting with H3 "The Road to Enlighenment" By dropping just inside of the "intro id" that makes the image fill the text block defined by '"intro". In other words it would have missed the "quickSummary" wording all together.
No, I mean the "preamble" id tag. The grey transperant background is defined in the css id for this div.
The intro id has no background.
The premble id is ofcourse inside the intro id. the H3 tag just refers to the "road to enlightenment heading.
Try downloading the developer toolbar plugin for firefox. It makes stuff like this quite easy.
Originally posted by New
No, I mean the "preamble" id tag. The grey transperant background is defined in the css id for this div.
The intro id has no background.
The premble id is ofcourse inside the intro id. the H3 tag just refers to the "road to enlightenment heading.
Try downloading the developer toolbar plugin for firefox. It makes stuff like this quite easy.
All right I tried that, now you. It only covers the words associated with preamble which would be the last two sentences, to cover them all it must sit inside "intro" in the body since "intro" defines the table dimentions, while "preamble" defines where the text "preamble" is in the box. left and no margin. I'll have to check out that tool sounds fun. Did you see the code I posted? Tool or not, that is logical, but don't take my word for it. Try it.
Notice "preamble" and "quickSummary" are both defining text properties in "intro", so you have to cover them both, but better just to fill the box "intro".
Originally posted by Brendon
All right I tried that, now you. It only covers the words associated with preamble which would be the last two sentences, to cover them all it must sit inside "intro" in the body since "intro" defines the table dimentions, while "preamble" defines where the text "preamble" is in the box. left and no margin. I'll have to check out that tool sounds fun. Did you see the code I posted? Tool or not, that is logical, but don't take my word for it. Try it.
Notice "preamble" and "quickSummary" are both defining text properties in "intro", so you have to cover them both, but better just to fill the box "intro".
here is the css code for the "preamble id":
#preamble
{
position: absolute; top: 30px; left: 20px;
display: block;
margin: 0;
border: 1px dotted #fff;
padding: 0; width: 196px; height: 290px;
background: transparent url(blk35.png) repeat;
overflow: hidden;
}
I've highlighted the reference to the image in red. This is the transparent background you are trying to create.
(The rest of the id-tags inside the "preamble DIV" are used to format the text. And as seg. points out, the H3 tag cleverly replaces the text with a header image).
Originally posted by New
here is the css code for the "preamble id":
Code:
#preamble
{
position: absolute; top: 30px; left: 20px;
display: block;
margin: 0;
border: 1px dotted #fff;
padding: 0; width: 196px; height: 290px;
background: transparent url(blk35.png) repeat;
overflow: hidden;
}
I've highlighted the reference to the image in red. This is the transparent background you are trying to create.
(The rest of the id-tags inside the "preamble DIV" are used to format the text. And as seg. points out, the H3 tag cleverly replaces the text with a header image).
OK I see what was happening, we were talking across each other. I was talking about the code that I posted and you were talking about the code from the last link I sent. Yes he declaired his background there, sorry about that. In the code I was working on, no such thing happened. But I do think that I understand what he was doing there. Making a box, making a screen, and having the screen rendered at the time of display. The fact that his screen was 4x4 to me said that he intended to send a small item acress the internet and have the cpu handle the repeats, clever.
Originally posted by Brendon
The fact that his screen was 4x4 to me said that he intended to send a small item acress the internet and have the cpu handle the repeats, clever.
Yes, it's clever, but also a very normal way of working with graphics online. The same thing is done with the background.
Originally posted by New
Yes, it's clever, but also a very normal way of working with graphics online. The same thing is done with the background.
Thanks for the tips, I can use all I get, you think your new. Sorry for the confusion.
Merry Christmas and Happy New Year.
Ty