Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Semi-Transparency

    Hi I am creating a website for a client and they have this silly idea for a layout that I've tried (and failed) to talk them out of. Basically it is one image that will change from page to page and another image that will remain the same across all pages. The catch is that one hovers over the other. I've created this no problem with some simple CSS but now they are wanting to add a drop shadow to the image on top as it is looking jagged (which I warned them about). To do this I'm going to need to use some kind of semi-transparent layers. Does anyone know how I can accomplish this? Preferably via GIMP, but Photoshop would also help.

    I've attached an image that illustrates my intentions, it's sort of dumbed down and not exactly what it's going to end up looking like, but should help describe this better than words.

    Thanks in advance for any suggestions.
    Attached Thumbnails Attached Thumbnails Semi-Transparency-ticket.gif  

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    AZ, USA
    Posts
    685
    Thanks
    6
    Thanked 46 Times in 46 Posts
    Try just using the drop-shadow feature in gimp. Filters > Light and Shadow > Drop Shadow. You can set the opacity, x/y offset, blur radius, etc.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    why not create the drop shadow in css?

    use two copies of image2, and clip one about 5-10px per side.
    then make the other partially transparent: "opacity: .50; filter: alpha(opacity=50);", and put it behind the first copy.

    that way, it will work across any background, and you won't have to make a bunch of copies by hand.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    There are some CSS properties which can help:
    http://www.mandarindesign.com/opacity.html
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.


  •  

    Posting Permissions

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