Possible to have a transparent gradient image or css?

**BuddyH** · Feb 20, 2012 14:21

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?

**RyanReese** · Feb 20, 2012 14:38

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)

**BuddyH** · Feb 20, 2012 16:03

Graphics forum I guess..

Thanks for the reply

**BuddyH** · Feb 20, 2012 16:08

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?

**ralph.m** · Feb 20, 2012 16:49

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.

**BuddyH** · Feb 20, 2012 16:51

Aha, png24!! Thanks

This has just opened up so many possibilities for dynamic styling for me!

**ralph.m** · Feb 20, 2012 16:54

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.

**BuddyH** · Feb 20, 2012 16:58

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

**TehYoyo** · Feb 26, 2012 17:25

Originally Posted by BuddyH

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

Too bad clients don't think that way.

~TehYoyo

**Black Max** · Feb 27, 2012 22:52

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.

**BuddyH** · Feb 28, 2012 03:32

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?

**xhtmlcoder** · Feb 28, 2012 04:43

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.

**TehYoyo** · Feb 28, 2012 14:17

Originally Posted by BuddyH

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?

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

**BuddyH** · Feb 28, 2012 16:04

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?

**TehYoyo** · Feb 28, 2012 17:10

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

**Newbie Learning** · Feb 28, 2012 17:40

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.

Attachment 59199

**BuddyH** · Feb 28, 2012 18:02

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

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.

**Newbie Learning** · Feb 28, 2012 18:06

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.

**BuddyH** · Feb 28, 2012 18:13

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.

**Newbie Learning** · Feb 28, 2012 18:15

So all of them pretty much offer the same features?

**ralph.m** · Feb 28, 2012 19:48

Originally Posted by BuddyH

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?

They have recently implemented that, so IE6/7 will update to 8 unless people stop it.

Originally Posted by Newbie Learning

what the difference is in Photoshop, Illustrator, and InDesign?

Photoshop is mainly for editing photos and working with pixels. Illustrator is more of a vector program, drawing images with lines that can be scaled easily (in a way that pixels can't). InDesign is for page layouts (mainly for print documents, from single pages to complete books). It's kind of like Word on steroids.

So they each have quite different purposes. The only real overlap that I know of is that you could design a single print page in any one of the three ... but that's about it.

**Newbie Learning** · Feb 28, 2012 20:06

Ralph,

Thanks a bunch. That's spelled out plainly enough for even me. LOL! I've been using PowerPoint to play around with fonts, create logos, etc, but I'm ready to do a bit more. So it sounds like Photoshop is what I'm looking for, then.

Thanks for such a quick response.

**TehYoyo** · Feb 28, 2012 20:06

Originally Posted by Newbie Learning

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.

Attachment 59199

What you've done right there is what is commonly called post-jacking.

I don't know about here at SPF (as I'm relatively new as well), but in general forum etiquette, it's heavily frowned-upon. You should really just create a new thread.

Here's my take:

Photoshop:
Photo editing and graphic manipulation. Although Photoshop can do so, so, so much more.

Illustrator:
Vector graphic creation. I guess that's the best way to describe it...I don't know how else to. It's definitely not used for photo/graphic manipulation. Look up vector v. bitmap if you're confused or create a thread.

InDesign:
InDesign is used to create magazines and such. I wouldn't say it's so much as Word on steroids as Word with extended capabilities. InDesign is used to create (like I said) magazines. Therefore, it has greater flexibility in terms of layouts, tools, fonts, etc. It's like the difference b/w Win and Mac (which isn't, probably, a good topic to bring up in any post). Mac is more user-friendly (the Word equivalent in this analogy), whereas Windows (the InDesign) is for power-users who want to be able to do more but suffer the cost of usability and everyday use. That isn't to comment on any aspect of the quality of MacOS or Windows.

Really, InDesign is the odd-one-out as it's a word processing system. You should really be asking "What's the difference between Photoshop, Lightroom, Illustrator, and Fireworks?" which is an entirely different question. Just don't get into the Flash Professional/Catalyst/Builder question. Ugh.

~TehYoyo

Oh, and welcome!

Note: Just saw your post about Photoshop. Be warned that it's a hefty $700.

**Newbie Learning** · Feb 28, 2012 20:37

TeyYoyo,

Thank you very much for the info. I'll do some research to compare Photoshop, Lightroom, Illustrator, and Fireworks. Thanks for the tip.

And I do apologize to all of you for the post-jacking. Please pardon me.

**TehYoyo** · Feb 28, 2012 20:59

Don't worry about it. (And sure, no problem)

We all learn sometime.

~TehYoyo

User Tag List

Thread: Possible to have a transparent gradient image or css?

Thread Tools

Display

Possible to have a transparent gradient image or css?

Possible to make a partially transparent gradient in png or gif with photoshop?

Bookmarks

Bookmarks

Posting Permissions