Image or Gradient Transparency

P

PHTech

Senior Member
Joined
Aug 21, 2006
Messages
588
Reaction score
0
Location
Witbank
Hi there...

How can I make images or gradients, set for example 40% Tranparency or something similiar...?

Like have a look at http://www.blueletterbible.org/. The Nav links on the left has a type of transparency set...

How would I go about to do something similiar in for instance, Dreamweaver CS3, or in code...?

Thanx...!
 
Add the following into your CSS class for the items you want to be transparent:

Code: 
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;

This should cater for cross-browser compatible transparency. Remember, 60% opacity = 40% transparency. ;)
 
So the cross-browser compatibility is then only to for the CSS to be compatible with other browsers like Mozilla, Opera etc...?

Will this work for something with a CSS rule like the following:
Code: 
.navigationHorRed:hover {
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
	background-color: #FF0000;
	padding: 6px;
	width: 130px;
	filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}

Will the red background specified in this rule be transparent in some way... Sorry for asking so much, but coding, hey, is not my best asset... hehe... Thanx for all your your help so far...! :)
 
Yes, that should work 100%! Remember - everything contained in the DOM object with that CSS class will be 40% transparent. If you ONLY want the background to be transparent (for instance a DIV container with a transparent red background) I'd suggest using a 40% transparent .PNG file for the background image.

Just beware that .PNG files are handled differently by older browsers - it might not be transparent at all. IE only supports .PNG files semi-correctly from 7.0. Other browsers like Firefox, Opera and Safari will handle .PNGs with ease.
 
OK... Cool... Have figured it out to work...

Maybe I am pushing it now, but is there a way to do a gradient transparency on an image...? And if so, can you do a gradient transparency on the left and right of one image...? If not, its also fine, just want to know if its not TOO difficult...

Thanx...!
 
Now you're pushing it a bit ;) My suggestion would be to create a gradient-transparent image, save it as .PNG and use that. Then you don't have to worry about CSS classes, but have the probability of the image not displaying correctly on older browsers... So it depends on your requirements, I guess.
 
PHTech said:
OK... Cool... Have figured it out to work...

Maybe I am pushing it now, but is there a way to do a gradient transparency on an image...? And if so, can you do a gradient transparency on the left and right of one image...? If not, its also fine, just want to know if its not TOO difficult...

Thanx...!
Click to expand...
IIRC this is in CSS 3.0...
 
I have played with the PNG graphics format (using Firworks 8) and it worked like a DREAM for me...! What I wanted to do before, I can now do with PNG graphics...!

You can take a look at http://cairos.techstudio.co.za/ and most of the images is PNG...!

Thanx for all the help...!
 
Are we looking at the navlinks?

If so, they look nice - but you could achieve that effect using only images and CSS - no flash required.

You should always steer clear of using Flash for navigation. Google struggles to pick it up, and users without flash capabilities can't use your site.
 
OK Cool... So you would recommend that I use something like rollover images for the navlinks...?

I have also implemented a security script for the SWF assets, so that you don't have to activate it to use is... But I assume that won't help with the Google thing...?
 
PHTech said:
I have played with the PNG graphics format (using Firworks 8) and it worked like a DREAM for me...! What I wanted to do before, I can now do with PNG graphics...!

You can take a look at http://cairos.techstudio.co.za/ and most of the images is PNG...!

Thanx for all the help...!
Click to expand...

Huge pleasure!

As Raithlin suggested, CSS is THE WAY TO GO. I try and stray away from Flash as possible...
 
FarligOpptreden said:
Huge pleasure!

As Raithlin suggested, CSS is THE WAY TO GO. I try and stray away from Flash as possible...
Click to expand...

I personally think that Flash is cool for some stuff, like small slide shows, or animations, but now that you guys explained and linked me to CSS, I would definately go with CSS...!

THANX hey...!

:)
 
PHTech said:
THANX MAN...! I appreciate your effort helping out on this one...! Thanx alot...! I will definately use the CSS style, as I beleive it won't give me too much troubles like SWF...

THANX...! :)
Click to expand...
That's what makes this forum so popular - people willing to help each other. :)
 
PHTech said:
I personally think that Flash is cool for some stuff, like small slide shows, or animations, but now that you guys explained and linked me to CSS, I would definately go with CSS...!

THANX hey...!

:)
Click to expand...

I personally don't like websites to "move" too much, so I stay away from animations. As for image galleries or slide shows, I build them using XML, CSS and javascript (and ASP.NET, of course ;)).
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X