Results 1 to 10 of 10

Thread: [CSS] PNG Based Buttons

  1. #1
    Join Date
    Aug 2007
    Location
    Portland, Maine
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default [CSS] PNG Based Buttons

    1) CODE TITLE: CSS PNG Based Buttons

    2) AUTHOR NAME/NOTES: Dragos Stancu

    3) DESCRIPTION: If you want to make your pages look sexier, you may think of using buttons that seem to blend with the background in a more 2007-ish manner. The approach I am suggesting is suitable for pretty much any browser, including the IE-s 5.5-6 that don't have native support for the .png format.

    4) URL TO CODE: http://www.webfixtech.com/pngbutton.htm
    Last edited by Dragos; 08-10-2007 at 07:11 PM. Reason: improvements

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Poorly done. Use a thin image and stretch it; that way, the images are smaller and you don't have to depend on the user's text fitting inside a given pixel space. A non-breaking element around the whole thing wouldn't go amiss, either.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Aug 2007
    Location
    Portland, Maine
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    will that work in IE5.5?

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Of course. Background images have been well-supported for a long time.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Aug 2007
    Location
    Portland, Maine
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    you mean I should use a left, right and middle element and stretch only the middle background.

  6. #6
    Join Date
    Aug 2007
    Location
    Portland, Maine
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    'cause "background-repeat: repeat-x;" won't work; I am talking IE6, of course.

  7. #7
    Join Date
    Aug 2007
    Location
    Portland, Maine
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    you're probably talking jpg/gif; my purpose was to have blending background images; png files ...

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    It doesn't matter, you can use sizingMethod=scale to the AlphaImageLoader filter for IE5-6.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  9. #9
    Join Date
    Aug 2007
    Location
    Portland, Maine
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    that's cool , thanks for the help

  10. #10
    Join Date
    Aug 2007
    Location
    Portland, Maine
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Twey,
    I've changed the page so it reflects your suggestions.
    It works, thanks a lot for the reply.

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
  •