/    Sign up×
Community /Pin to ProfileBookmark

PNG box?

Copy linkTweet thisAlerts:
Feb 08.2007

Is it possible to make a box with fixed width with png background that is bulletproofed for enlarging the text that it encloses? I have a header that is three curved and one square corner that needs to be semi-transparent with three text boxes in it over a container with another background and need to blend them. I’ve tried some things but nothing seems to work ?
Thanks in advance!

the html code:

[CODE]
<div id=”container”>
<div id=”header”>
<div id=”logo”>
<p><a href=””><img src=”logo.jpg” alt=”” border=”0″/></a></p>
</div>
<div id=”contentcenter”>
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>text</p>
</div>
<h3>text lines</h3>
</div>
</div>
[/CODE]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelFeb 08.2007 — A background-image, or a background-color? Either I suppose? I have a little helper that makes the opacity work on all browsers. I'm on the Linux machine this morning, -I'll switch over to XP... brb

back:

Something like this:[code=html]div.this {
background-color:#3F352A;
opacity: 0.6;
-moz-opacity: 0.6;
-khtml-opacity: .6;
filter: alpha(opacity=60);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);[/code]where the DIV you want to have an opaque background has [I]class="this" [/I]. Is this what you mean?

an image can be treated the same way:[code=html]div.this img {
background-color:#3F352A;
opacity: 0.6;
-moz-opacity: .6;
-khtml-opacity: .6;
filter: alpha(opacity=60);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);[/code]
Copy linkTweet thisAlerts:
@papercutauthorFeb 08.2007 — Transparency alone is not a problem. I need the box (with the png background) to have three curved corners and one square. The box is fixed in width but when it's contents grow the box should stretch to enclose them vertically.
Copy linkTweet thisAlerts:
@KDLAFeb 08.2007 — Here's something I've used:
<i>
</i>#wrapper {margin: auto; padding: 0; text-align: left; width: 58em; display: block; background: #203984; color: #000;}

#top-right {background: url(../images/corner.gif) no-repeat top right; float: right; margin: 0; padding: 0; width: 40px; height: 17px; display: block;}
#top-left {background: url(../images/corner.gif) no-repeat top left; float: left; margin: 0; padding: 0; width: 40px; height: 17px; display: block;}
#bot-right {clear: right; background: url(../images/corner.gif) no-repeat bottom right; float: right; margin: 0; padding: 0; width: 40px; height: 17px; display: block;}
#bot-left {clear: left; background: url(../images/corner.gif) no-repeat bottom left; float: left; margin: 0; padding: 0; width: 40px; height: 17px; display: block;}
.space {min-height: 17px; line-height: 17px;}
<i>
</i>&lt;div id="wrapper"&gt;
&lt;div id="top-left"&gt;&lt;/div&gt;
&lt;div id="top-right"&gt;&lt;/div&gt;
&lt;div class="space"&gt;&amp;nbsp;&lt;/div&gt;
...
&lt;div id="bot-left"&gt;&lt;/div&gt;&lt;div id="bot-right"&gt;&lt;/div&gt;
&lt;div class="space"&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;&lt;!-- End Wrapper --&gt;
&lt;/body&gt;
&lt;/html&gt;


When the text size is increased, the box stretches vertically.

I use one image: http://www.letky.org/images/corner.gif

If you leave the background attribute out of the corner styles, you'll get the straight corner.

Oh, you can see the page [url="http://www.letky.org/"]here[/url].

KDLA
Copy linkTweet thisAlerts:
@papercutauthorFeb 08.2007 — what I mean is something like

http://www.cssplay.co.uk/boxes/three_cornered.html

with one square corner and three curved but instead with a semi-transparent png as background on the whole box. is there a way?
Copy linkTweet thisAlerts:
@WebJoelFeb 09.2007 — what I mean is something like

http://www.cssplay.co.uk/boxes/three_cornered.html

with one square corner and three curved but instead with a semi-transparent png as background on the whole box. is there a way?[/QUOTE]
That would seem to be exactly what you want, and using the fine code at cssplay and the opacity filter I provided earlier, you should have this. Can I assume that you'd like someone to write this up and post the refined code? I'm not being snide, -I assume that this is a bit much for you and would like to have a working foot-noted copy-able model to use.

I'll have a go at it in a little bit, -see if I can put something together. ?
Copy linkTweet thisAlerts:
@papercutauthorFeb 09.2007 — The thing is Stu is using a background-color for his example and I need a kind of a complicated png image. In this case I didn't find a solution that's why I'm here asking if anyone can help me.
Copy linkTweet thisAlerts:
@JackAndrewsFeb 20.2007 — Here's a solution for round corners that requires no images. Pretty cool. Only caveat might be the js load time, but it also has a lite version that is compressed js. It's also GNU. http://www.curvycorners.net
×

Success!

Help @papercut spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...