Possible to have a transparent gradient image or css?

Hi, I’m trying to create a horizontal menu where I can have a transparent gradient go over the top of the background color. I had this great idea to make a css menu, set the background color for <li> items to whatever I want (I would use a color picker & php/mysql to echo out the background color) then have a 30% transparent gradient sit on top of it. So if the background colours were set to white, black, dark red, light blue or khaki, they would look as below.
Hmm I can’t post images?

Anyway I made an image in photoshop with a transparent background, then added a layer & filled it with a gradient & set opacity to 30%, but alas when I tried to save it, photoshop fliled the background with white, even if I saved as gif or png. Thus the background color can’t be seen.

Is there any way to achieve what I am trying to do with photoshop or perhaps css?

You can read up on CSS3 gradients here.

Be warned that this isn’t supported in a good chunk of the market (IE8 down and older versions of main browsers)

Your best bet would be to use an image, which would require you asking in the graphic section of this forum (does this forum even have a photoshop section? I really should go explore different parts of this forum)

Graphics forum I guess…

Thanks for the reply :slight_smile:

Hi, I’m trying to create a horizontal website menu where I can have a partially transparent gradient image go over the top of the background color. I had this great idea to make a css menu, set the background color for <li> items to whatever I want (I would use a color picker & php/mysql to echo out the background color) then have a partially transparent gradient sit on top of it so that there would be a subtle gradient over whatever color I used for my background.

I made an image in photoshop with a transparent background, then added a layer & filled it with a gradient & set opacity to 30%, but alas when I tried to save it, photoshop fliled the background with white, even if I saved as gif or png. Thus the background color can’t be seen.

Is there any way to achieve what I am trying to do with photoshop?

You should be able to save a partially transparent image. Make sure to check the transparency option when saving for the web, and choose png-24 if necessary.

Aha, png24!! Thanks :slight_smile:
This has just opened up so many possibilities for dynamic styling for me!

Yep, it’s pretty handy. PNG-24 doesn’t work so well on IE6, but I’ve completely forgotten about that browser now! What a relief. :slight_smile:

Haha well, if anyone is viewing a site on IE6 they deserve to see whatever mess they are presented with :stuck_out_tongue:

Too bad clients don’t think that way.

~TehYoyo

Too bad the hundreds of thousands of users who don’t have a better choice available to them don’t think that way. I hate IE6 with a festering hatred, but I realize that a bunch of people are stuck with using it for the near future.

I don’t understand why anyone would be stuck with it when an ever increasing array of modern browsers are freely available to download & install in a matter of minutes. I’m guessing there must some reason why some people are not able to download a new browser?

Corporate IT Policy (network user restrictions) is typically the number one reason many people aren’t allowed to install/upgrade to the latest browsers, etc. We’ll ignore OS limitations and hardware for sake of simplicity.

Some people are afraid of complicated computer things…even though some browsers are incredibly simple to download and install (like Chrome, my favorite), they don’t do it. Also, a lot of people don’t know about browsers or they don’t know the benefits. While you or I may know that (in my opinion), Chrome is the best (best HTML5 support, best CSS3 support, to my knowledge, constantly updating, fastest, simplest, etc), an average user just wants to browse the web…which IE lets them do.

~TehYoyo

Ah ok. Surely Microsoft could easily solve this problem before they break for lunch with a windows update that simply forced people with IE6 to upgrade to IE7 or higher depending on their OS version?
Firefox routinely updates itself. It doesn’t even require you to even download or install anything, the simple act of opening the browser runs the update. Surely it would be kids play for Mr Gates & his merry men to do this with users of IE6?

They certainly try to get people to upgrade their browser…

I know that during the isolated times that I use Internet Explorer 8, I get a pop-up begging me to upgrade to IE9…

They can’t force anyone to upgrade or install anything.

Chrome does the same thing as Firefox.

Also, Windows updates are usually unnoticeable. Maybe they are security fixes, bug fixes, etc. Something as noticeable as a new browser would certainly attract more attention than that and people would freak.

~TehYoyo

Sorry to jump in on this tread with such a doofus approach, but I’m not as knowledgeable as y’all, so I’m unsure of the correct terminology to use, so bear with me. I hope my question is comparable to the discussion on this thread.

Can you tell me what software is needed to create that see-through strip below the lady’s face that reads “TRANSCRIPTION SPECIALISTS”? I want to be able to place that see-through strip, with text, over photos, either straight across or diagonally. But as for what type of software I can use, I’m clueless. I’m sure that one of the Adobe products will do the trick, but I don’t know which one. I’ve Googled till I’m blue in the face. I’ve also viewed a variety of YouTube Adobe instructional videos, and still can’t narrow down which piece of software it does that.

If the below picture is too small for you to see, you can view the page at StanleyLegalReporting.com.

What you are asking can easily be done in photoshop by simply placing a white rectangle shape over the photograph and decreacing its opacity. :slight_smile:

If you don’t have hundreds of dollars to spend on Photoshop, you can download Gimp for free http://www.gimp.org It will easily do the task you are asking.

Ah-hah! Very good, then.

Now, can I bother you to ask what the difference is in Photoshop, Illustrator, and InDesign? If you know, that is.

I guess they are like the difference between Windows, Linux & Mac OSX. They’re all graphics softwares, they have many common tools and layouts and they also have some varying tools & layouts.

If you are just starting out, I would recommend giving Gimp a try first. It will do more than a good enough job until you become experienced in working with graphics.

So all of them pretty much offer the same features?