/    Sign up×
Community /Pin to ProfileBookmark

Opacity, transparency, divs … can this example be done?

Copy linkTweet thisAlerts:
Aug 23.2007

Hi All.

I’ve been reading up on opacity and I’ve been trying to get something like the attached image coded in html using CSS. To get the opacity to change I know you need to use this:

filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50;

If I wanted the height of the div to be variable depending on the amount of text that is in the red box how do I do this? I know a div on top of the actual red box is probably needed, but can that work if the height is not static?

I’m also having trouble with the actual layout of the red box. Does anyone want to tackle this guy and see if it can be coded up in HTML and work cross browser? Basically the transparency is making things 10x harder. Without that I think I’d be able to manage somehow, but it probably wouldn’t be as clean as it could be.

Thanks!

[upl-file uuid=1baa1da6-6326-4917-90c8-ed1f4b4a91d5 size=79kB]bush2.jpg[/upl-file]

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriAug 24.2007 — Rather than trying to muck around with opacity (which causes problems with text as well as the rounded corner borders), I would use a (semi)transparent .png graphic split into top and bottom halves, with each half being longer than necessary - the bottom half can be applied as a background (aligned to the bottom) to the box container div, whilst the top half can be a background to the text element (most probably a paragraph).
Copy linkTweet thisAlerts:
@CentauriAug 24.2007 — Actually, after thinking about that, the overlapping semi-transparencies would interfere with each other....

However, it the top part of the graphic is made,say, 20px high, the first text element (with the top graphic as its background) can be given a negative top margin of 20px, effectively pulling it upwards and aligning the graphics.
Copy linkTweet thisAlerts:
@jtownauthorAug 24.2007 — Actually, after thinking about that, the overlapping semi-transparencies would interfere with each other....

However, it the top part of the graphic is made,say, 20px high, the first text element (with the top graphic as its background) can be given a negative top margin of 20px, effectively pulling it upwards and aligning the graphics.[/QUOTE]
A semi transparent png doesn't work with old IE does it? I haven't tried yet, but from initial reading that's what I gathered.

So with the text given a negative margin in it's own div, will the height of the background div follow the text that is in a div outside of it? I'd like to not specify a height, but this is a bit difficult. I'm also sort of new to CSS and divs.
Copy linkTweet thisAlerts:
@Major_PayneAug 24.2007 — Might go through some of the great examples at this site:

CSS Opacity in Mozilla,IE, and Opera

Take your time as it has a wealth of information.

Ron
×

Success!

Help @jtown 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.18,
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,
)...