Look Mommy No Images

Discussion in 'CSS' started by just-4-teens, Mar 16, 2006.

  1. #1
    Do you use rounded edges on your site? Use images that take forever to load?

    Save your bandwidth and be rid of them images.

    Use CSS & Javascript and get the job done without the use of images. (i found this site whilst on digg)

    http://pro.html.it/esempio/nifty/
     
    just-4-teens, Mar 16, 2006 IP
    nevetS likes this.
  2. Riboflavin

    Riboflavin Well-Known Member

    Messages:
    1,091
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    155
    #2
    Seems kind of hacky to me, and it wouldn't work with JS disabled. Why wouldn't you make 4 small corner images and float then, it would probably use less bandwidth than all that CSS and JS combined.
     
    Riboflavin, Mar 16, 2006 IP
  3. seant

    seant Peon

    Messages:
    551
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    0
    #3
    yep works just as good :)
     
    seant, Mar 16, 2006 IP
  4. nevetS

    nevetS Evolving Dragon

    Messages:
    2,544
    Likes Received:
    211
    Best Answers:
    0
    Trophy Points:
    135
    #4
    Looks to me like the markup required by this technique is actually slimmer than what people normally use. And if .js is disabled, you end up with flat corners. That's not such a bad fallback.

    I think I might try this out a little.
     
    nevetS, Mar 16, 2006 IP
  5. just-4-teens

    just-4-teens Peon

    Messages:
    3,967
    Likes Received:
    168
    Best Answers:
    0
    Trophy Points:
    0
    #5
    u can see an example of this technique at www[DOT]mytopcheats[DOT]com

    because that page does not use images if takes just 15 seconds to loads on a 56k modem
     
    just-4-teens, Mar 17, 2006 IP
  6. ol.

    ol. Peon

    Messages:
    87
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Why would you do that when you can use background images to do it right?
     
    ol., Mar 17, 2006 IP
  7. just-4-teens

    just-4-teens Peon

    Messages:
    3,967
    Likes Received:
    168
    Best Answers:
    0
    Trophy Points:
    0
    #7
    yes you can use images, but images slow the page down, this technique makes one of my pages load in 1.5 seconds on a 56k modem, before when i was using images it took 10+ seconds just to load the images, and along with the images comes the code needed to get those images into place, it saves about 20kb per page (depending on how big your images were)
     
    just-4-teens, Mar 17, 2006 IP
  8. just-4-teens

    just-4-teens Peon

    Messages:
    3,967
    Likes Received:
    168
    Best Answers:
    0
    Trophy Points:
    0
    #8
    here what a page with this technique looks like with javascript disabled, i still think it looks "nifty"
     

    Attached Files:

    just-4-teens, Mar 17, 2006 IP
  9. ol.

    ol. Peon

    Messages:
    87
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #9
    If you optimise images correctly and don't go over the top you can get the same result pretty much...

    After the first page is hit, loading times will be tiny anyway (Because of the caching).

    This technique is 'ok', but it's messy and bound to casuse browser rendering problems.

    Using background images is the right way to do it and doesn't result in horrible looking markup.

    Sorry, I'm not trying to burst the bubble, just saying that you really don't need to use DOM stuff to get rounded corners (It's a bit like trying to kill a fly with a shotgun).
     
    ol., Mar 17, 2006 IP
  10. just-4-teens

    just-4-teens Peon

    Messages:
    3,967
    Likes Received:
    168
    Best Answers:
    0
    Trophy Points:
    0
    #10
    i have tested in IE, FF, Opera & Netscape and all display the page just fine (of course my versions are pretty up 2 date)

    why waste bandwidth on images when with this technique you can squeeze that extra few visiters in per month without having to pay extra $$$ to upgrade bandwidth, it also save on web space used because you do not have to store images on your server.

    IMO the good outweigh the bad with this technique, using images just slows down loading time and looks messy whilst images are loading
     
    just-4-teens, Mar 17, 2006 IP
  11. mariush

    mariush Peon

    Messages:
    562
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    0
    #11
    It's a neat trick but I don't really see the use of it. Yes, you don't use images but also the shape is *very* basic. You would not be able to do a design like the one that the last site in my signature.

    Nowadays, i think only US has a large population of people on slow connections and I guess that will change in time. Broadband connections are more and more popular.

    just-4-teens, I was looking at your page (http://www.mytopcheats.com/). Here's a question for you :

    Which page will load faster, that page with CSS corners, or the same page that you have now, but with zlib compression enabled ? Check this link below and think about it :

    http://www.pipeboost.com/GetReport.asp?URL=http://www.mytopcheats.com
     
    mariush, Mar 17, 2006 IP
  12. ol.

    ol. Peon

    Messages:
    87
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #12
    That's absoutley rediculious.

    The bandwidth costs, even on dp are neglegable, and in terms of looking good, images are BY FAR a better looking and more adaptive option...

    The only time I can think of using this is if I have a fluid layout with rounded corners, and even then there are better solutions.

    Like I say, not trying to burst the bubble, but I just don't see the point.

    And I produce a LOT of markup.
     
    ol., Mar 17, 2006 IP
  13. AyeZee

    AyeZee Guest

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    AyeZee, Apr 1, 2006 IP