SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Graphics forum I guess..

    Thanks for the reply

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha, png24!! Thanks
    This has just opened up so many possibilities for dynamic styling for me!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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.

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha well, if anyone is viewing a site on IE6 they deserve to see whatever mess they are presented with

  9. #9
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BuddyH View Post
    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

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BuddyH View Post
    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

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  15. #15
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    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

  16. #16
    SitePoint Member Newbie Learning's Avatar
    Join Date
    Jan 2012
    Location
    Georgia
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #18
    SitePoint Member Newbie Learning's Avatar
    Join Date
    Jan 2012
    Location
    Georgia
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  19. #19
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    SitePoint Member Newbie Learning's Avatar
    Join Date
    Jan 2012
    Location
    Georgia
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So all of them pretty much offer the same features?

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BuddyH View Post
    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.

    Quote Originally Posted by Newbie Learning View Post
    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.

  22. #22
    SitePoint Member Newbie Learning's Avatar
    Join Date
    Jan 2012
    Location
    Georgia
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  23. #23
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Newbie Learning View Post
    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.

  24. #24
    SitePoint Member Newbie Learning's Avatar
    Join Date
    Jan 2012
    Location
    Georgia
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  25. #25
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Don't worry about it. (And sure, no problem)

    We all learn sometime.

    ~TehYoyo


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •