SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Should I still use transparent gifs for navigation bar in CSS?

    I'm creating a navigation bar using CSS and Dreamweaver. Do designers still use transparent gifs if they want a certain font in a navigation bar using CSS, or is that old school?
    Thanks

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Transparent .gifs ? Are you talking about a <table> layout? Transparent .gifs were a means of giving fixed dimensions to otherwise flexible table-cells. Seriously not needed today. Were you referring to something else?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    If you are talking about using images because you want a certain font, it's not totally outdated, but an option worth investigating is web fonts, which are very reliable now, and are a lot easier than having to make images for each item.

    As ronpat said, we are guessing at your meaning.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    transparent gifs if they want a certain font i
    this is poorly phrased, a font/image replacement does not need to be a transparent GIF(or PNG), and in many case use no transparency at all.

    OK, semantic of the question aside.

    I don't think GRAPHICAL navigation are old school at all, but today you have more choices on how to go about it.

    1) good old fashion graphics (be they GIF, JPG, PNG etc; transparent or not). Sometimes the effect you are trying to create just works best with a raster image. It also has the broadest support.

    2) But in the case you just want to use a special font for navigation (or other things) MANY (not all) modern browsers, support web fonts. Again the things to consider are: your target audience's browser, storage /copyright issues, and is it worth it do have the user d/l a whole typeface (or two) if you could have made the same nav sprite for under 12KB.

    3) Level:ADVANCED! on a completely different extreme, there are web fonts available out there which re composed of navigational graphics and icons. This can offer fully scalable, customizable graphical navigation. Of course it can also be confusing for users with their styles off (or who don't support webfonts).. as they may see the letter 'k' instead of a neat little 'home' icon.

    All methods have they place , their advantages and their disadvantages. Simply casting one way of doing things aside, summarily, is never a wise move.

  5. #5
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Transparent .gifs ? Are you talking about a <table> layout? Transparent .gifs were a means of giving fixed dimensions to otherwise flexible table-cells. Seriously not needed today. Were you referring to something else?
    Yes, I was referring to transparent gifs that would go into a table.

  6. #6
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    this is poorly phrased, a font/image replacement does not need to be a transparent GIF(or PNG), and in many case use no transparency at all.

    OK, semantic of the question aside.

    I don't think GRAPHICAL navigation are old school at all, but today you have more choices on how to go about it.

    1) good old fashion graphics (be they GIF, JPG, PNG etc; transparent or not). Sometimes the effect you are trying to create just works best with a raster image. It also has the broadest support.

    2) But in the case you just want to use a special font for navigation (or other things) MANY (not all) modern browsers, support web fonts. Again the things to consider are: your target audience's browser, storage /copyright issues, and is it worth it do have the user d/l a whole typeface (or two) if you could have made the same nav sprite for under 12KB.

    3) Level:ADVANCED! on a completely different extreme, there are web fonts available out there which re composed of navigational graphics and icons. This can offer fully scalable, customizable graphical navigation. Of course it can also be confusing for users with their styles off (or who don't support webfonts).. as they may see the letter 'k' instead of a neat little 'home' icon.

    All methods have they place , their advantages and their disadvantages. Simply casting one way of doing things aside, summarily, is never a wise move.
    Thanks everyone for your advice. I appreciate it. Now I have to look up the term "Web Fonts." I am guessing fonts used in browsers like the old days... limited, or something new. I have no been in the game of web design in a while. I now have to pick up where I left off. So if anyone would like to bring me up to speed on web fonts I would appreciate it. Right now I will do a search on Youtube about it.
    Thanks everyone.

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Another Designer View Post
    Yes, I was referring to transparent gifs that would go into a table.
    Come ... join the 21st century ... don't be afraid ...

    Seriously, layout tables and spacer gifs? They have been considered out of date for more than 12 years ... you really need to learn more modern coding techniques.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Another Designer View Post
    Now I have to look up the term "Web Fonts.".
    There's a lot of info online. Google "@font-face". Here is an intro:

    http://sixrevisions.com/css/font-face-guide/

    You can either pay for fonts or use ones that are free. FontSquirrel is a great place to get free fonts, along with the code you need to use them.


Tags for this Thread

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
  •