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 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2010
    Location
    Whitley Bay, UK
    Posts
    46
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Dropped shadow effect and PNG and GIF

    Hello

    I want a coloured text box on my site and initially just had a flat image, but decided to investigate the possibility of adding a dropped shadow effect. I used Inkscape and produced a PNG file.

    This showed up fine on Firefox and IE on my machine, but various internet articles state that IE doesn’t always handle PNG files correctly.

    As an alternative, I decided to revert back to the plain GIF file box, using a conditional comment in the code.

    Any suggestions, as the shadow effect is far better. I tried to save a dropped shadow image as a GIF but it didn't work.

    The result is here

    http://williebeetest.99k.org/vector.html


    Many thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    IE handles PNG just as well as other modern browsers. Only IE 6 and earlier versions didn’t support alpha transparency on PNGs. You can safely use PNG with alpha tranparency if you don’t care about IE 6. And if you have a solid background you don’t even have to use any transparency so it would even look OK in IE 6. In any case, PNG is preferred over GIF.

  • #3
    New Coder
    Join Date
    Feb 2010
    Location
    Whitley Bay, UK
    Posts
    46
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    IE handles PNG just as well as other modern browsers. Only IE 6 and earlier versions didn’t support alpha transparency on PNGs. You can safely use PNG with alpha tranparency if you don’t care about IE 6. And if you have a solid background you don’t even have to use any transparency so it would even look OK in IE 6. In any case, PNG is preferred over GIF.
    Thanks for that Stephan

    Yeah, I was suprised when it worked OK for me on IE, but I have IE7.

    The best way then, would be for me just to use the following conditional comment

    <!--[if lte IE 6]>
    style 2
    <![endif]-->

    That way, the majority of folk (about 90%)will see the dropped shadow effect

    thanks again for your reply !

    Brian

  • #4
    New to the CF scene
    Join Date
    Apr 2010
    Location
    Canada
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    Well I am in a need of help, I want to add this cool drop shadow effect to a website I am building, but unfortunately for me I can't seem to get it right. I want to apply this drop shadow effect to this website.

  • #5
    New Coder
    Join Date
    Feb 2010
    Location
    Whitley Bay, UK
    Posts
    46
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Taylor24Smith View Post
    Well I am in a need of help, I want to add this cool drop shadow effect to a website I am building, but unfortunately for me I can't seem to get it right. I want to apply this drop shadow effect to this website.
    Hi

    I used Inkscape, a free vector drawing program, obtained from http://www.inkscape.org/

    just draw a shape, then copy it and color this copy black or gray. Put under the original layer and add a slight blur, then move it right and down slightly.

    If I can do it, everybody else can as I've just started this whole web design thing a couple of months ago.

    Regards !


    ps I had a great holiday in Toronto and Cleveland House nearby many years ago. You are lucky to be living in such a beautiful country.


  •  

    Posting Permissions

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