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 9 of 9

Thread: Alpha PNG's

  1. #1
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Alpha PNG's

    Decided to branch out my designs a bit, and inspired by the great work of HarbingerOTV ( ), I want to try out a few things but I'm not sure where to start.

    I've built this, using an alpha PNG -
    http://s131484004.websitehome.co.uk/...cube_map1.html

    Although I want the white background of the div to be this image -
    http://s131484004.websitehome.co.uk/.../old_paper.jpg

    And it needs to work in gecko as well as IE. Any help much appreciated!

  • #2
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There are HTC's that give PNG support.... or @least I thought there was
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Didn't really help, I just need to set the background of that DIV to be the old paper, while keeping the transparency around the edges as it is now.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    well I guess I should help ( )

    You have photoshop? That's how I'll explain it.

    Open your old_paper.jpg and the cube_alpha1.png and then drag the cube.png over on top of the old paper image. ctrl+click the layer and then move the selection to the paper layer. select inverse and delete. Now turn off the cube image and you should have the old paper cut out like the png is.

    Saving it as a png-24 makes a 500k file.

    You can "pretty" it up by copying the layer. ctrl+click it and expand it by 2-3px. Fill it with a darkwer shade of brown and gaussian blur it a little. Now the funny stuff. Save the image as a png-24. then turn of the blured layer and save it as a gif.

    when you use the alpha filter for IE, and link inside that div will not work. Its sort of like the filter actually placese the trasparancy on top of everything else. sort of z-index: infinite.

    If your site is going to stay 512x512 you can esily slice the image up.

    slice off the top and bottom and save those as images. Then slice 3 vertical columns out of whats left over. Your basically cutting the transparent parts off.

    In your code forget using the P margins. make 5 divs inside of your container.
    the top/bottom/left and right will have a png as the background and the center will have a jpg. That way you won't have to worry about the links not working. I attached a pic showing a possible way to cut it up. do the same thing for the gif as well (you did save the gif right?

    In your code:
    Code:
    #container_top {      f\ilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='top_slice.png',sizingMethod ='image');
            background /**/: url(top_slice.gif) top center;
            width: ?;
            height: ?;
            }
    #container_top[id] {
            background: url(top_slice.png) top center;
    }
    then you can do the same for the left/center/right/bottom sections.

    that code makes it where IE6 loads the alpha filter. Any thing less than IE6 will load a gif. It won't be as pretty but at least it won't be that ugly gray box either. And then Browsers that support selectors will load the png as normal.
    Attached Thumbnails Attached Thumbnails Alpha PNG's-old_paper%5B1%5D.jpg  

  • #5
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! I'll see what I can do lol

  • #6
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have a javascript that allows IE 5.5 or better to correctly render png transparencies as well if someone would like it.
    Once I thought I was wrong but I was mistaken.

  • #7
    New Coder
    Join Date
    Dec 2002
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes I really am in need of it I cannot use the .htc behavior because I need the script to be in the html page.......

    please give me the code.

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    As far as I know, the main javascript being used for pngs is sleight.js or ds-sleight.js (my fav). The only issue with that is it doesn't work for backgrounds. I usually find it best to use Microsoft's "filter."

  • #9
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well this place won't allow me to attach a javascript file so google png fix. I'm inclinde to agree that it is decent enough for something simple but make sure that assuming it does not work the page deprecates gracefully.


    I used to use it to overly a logo over a background image which worked fine because worst case scenario IE added a light blue sort of background to the logo image that didn't look terrible anyway.
    Once I thought I was wrong but I was mistaken.


  •  

    Posting Permissions

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