50 Beautiful CSS-Based Web-Designs in 2006

Advertisement

2006 was rich on creative, beautiful and unusual design concepts. We’ve seen a lot of whitespace, many examples of readable and usable text-design, badges, stars, rounded corners, shapes, gradients, mirror and 3D-effects – just name it. Let’s take a close look at some of the most beautiful designs we’ve seen in 2006. Links checked: May/29 2008 – 5 outdated designs deleted.

Vibrant Designs Link

Screenshot1

SteveLeggat.com2

Screenshot3

Emotionslive.co.uk4

Screenshot5

Dinis91.com6

Screenshot7

Joyent.com8

Screenshot9

Haveamint.com10

Screenshot11

Vivabit.com12

Screenshot13

olivier.danchin.neuf.fr14

Screenshot15

Foxie.ru16

Screenshot17

Cameronmoll.com/portfolio18

Screenshot19

Tonyyoo.com/v220

Screenshot21

Komodomedia.com22

Screenshot23

Bartelme.at24

Screenshot25

Quatuour.be26

Screenshot27

Onlinecenter.nu28

Screenshot29

Fall.tnvacation.com30

Screenshot31

Zero.ru32

Screenshot33

Methodarts.com34

Screenshot35

Summer.tnvacation.com36

Screenshot37

Icebrrg.com38

Dark Designs Link

Screenshot39

Kineda.com40

Screenshot41

Colourmod.com42

Screenshot43

Rikcat.com44

Screenshot45

BeSuperCharged.com46

Screenshot47

Veerle.duoh.com48

Screenshot49

Obuweb.com50

Screenshot51

Slideshowpro.net52

Screenshot53

Whitwa.net54

Light Designs Link

Screenshot55

Mstefan.com56

Screenshot57

Subdued.net58

Screenshot59

Devlounge.net60

Screenshot61

Theologisches-seminar-elstal.de62

Screenshot63

Nice-Design.co.uk64

Screenshot

Media2006

Screenshot65

ElectricPulp.com66

Screenshot67

SusannePaschke.de68

Screenshot69

PixelEden.net70

Screenshot71

Jek2k.com72

Screenshot73

Morellc.com74

Screenshot75

Attitudedesign.co.uk

Screenshot76

CSS Vault77

Screenshot78

Evaneckard.com79

Screenshot80

WallopCreative.com81

Screenshot82

Jeffcroft.com83

Footnotes Link

  1. 1 http://www.steveleggat.com
  2. 2 http://www.steveleggat.com
  3. 3 http://emotionslive.co.uk/
  4. 4 http://emotionslive.co.uk/
  5. 5 http://www.dinis91.com/
  6. 6 http://www.dinis91.com/
  7. 7 http://joyent.com/
  8. 8 http://joyent.com/
  9. 9 http://www.haveamint.com/
  10. 10 http://www.haveamint.com/
  11. 11 http://www.vivabit.com/
  12. 12 http://www.vivabit.com/
  13. 13 http://olivier.danchin.neuf.fr/
  14. 14 http://olivier.danchin.neuf.fr/
  15. 15 http://foxie.ru
  16. 16 http://foxie.ru/
  17. 17 http://www.cameronmoll.com/portfolio/
  18. 18 http://www.cameronmoll.com/portfolio/
  19. 19 http://tonyyoo.com/v2/
  20. 20 http://tonyyoo.com/v2/
  21. 21 http://www.komodomedia.com/
  22. 22 http://www.komodomedia.com/
  23. 23 http://www.bartelme.at
  24. 24 http://www.bartelme.at
  25. 25 http://www.quatuor.be
  26. 26 http://www.quatuour.be
  27. 27 http://www.onlinecenter.nu
  28. 28 http://www.onlinecenter.nu
  29. 29 http://fall.tnvacation.com
  30. 30 http://fall.tnvacation.com
  31. 31 http://www.zero.ru
  32. 32 http://www.zero.ru
  33. 33 http://www.methodarts.com
  34. 34 http://www.methodarts.com
  35. 35 http://summer.tnvacation.com
  36. 36 http://summer.tnvacation.com
  37. 37 http://www.icebrrg.com
  38. 38 http://www.icebrrg.com
  39. 39 http://www.kineda.com
  40. 40 http://www.kineda.com
  41. 41 http://www.colourmod.com
  42. 42 http://www.colourmod.com
  43. 43 http://www.rikcat.com/rik_catlow_urban_pop_art/
  44. 44 http://www.rikcat.com/rik_catlow_urban_pop_art/
  45. 45 http://www.besupercharged.com
  46. 46 http://www.besupercharged.com/
  47. 47 http://veerle.duoh.com
  48. 48 http://veerle.duoh.com
  49. 49 http://www.obuweb.com/
  50. 50 http://www.obuweb.com/
  51. 51 http://www.slideshowpro.net
  52. 52 http://www.slideshowpro.net
  53. 53 http://www.whitwa.net
  54. 54 http://www.whitwa.net/
  55. 55 http://www.mstefan.com
  56. 56 http://www.mstefan.com
  57. 57 http://www.subdued.net
  58. 58 http://www.subdued.net
  59. 59 http://www.devlounge.net
  60. 60 http://www.devlounge.net
  61. 61 http://www.theologisches-seminar-elstal.de
  62. 62 http://www.theologisches-seminar-elstal.de
  63. 63 http://www.nice-design.co.uk
  64. 64 http://www.nice-design.co.uk
  65. 65 http://www.electricpulp.com
  66. 66 http://www.electricpulp.com/
  67. 67 http://www.susannepaschke.de/
  68. 68 http://www.susannepaschke.de/
  69. 69 http://www.pixeleden.net
  70. 70 http://www.pixeleden.net/
  71. 71 http://www.jek2k.com
  72. 72 http://www.jek2k.com
  73. 73 http://www.morellc.com
  74. 74 http://www.morellc.com
  75. 75 http://www.attitudedesign.co.uk
  76. 76 http://www.cssvault.com
  77. 77 http://www.cssvault.com
  78. 78 http://www.evaneckard.com/
  79. 79 http://www.evaneckard.com/
  80. 80 http://www.wallopcreative.com
  81. 81 http://www.wallopcreative.com/
  82. 82 http://www2.jeffcroft.com/
  83. 83 http://www2.jeffcroft.com/

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

Advertisement
  1. 1

    Some fine looking websites here, but also a nice illustration that “CSS-based” means nothing when applied to semantically incorrect markup. Some of these sites are even plain inaccessible.

    -5
  2. 2

    Great stuff!

    3
  3. 3

    Impressive!

    It’s nice to see what we can do with CSS + XHTML but, surely, we need to have in mind that a semantic markup is VERY important to a successful site.

    0
  4. 4

    Beautiful and crazy

    -1
  5. 5

    Very impressive list. But I would like to suggest one more site to this list which is missing here. With your permission:

    N.Design Studio – very beautiful work!

    Cheers!

    -1
  6. 6

    Thanks for featuring Devlounge, great list!

    -3
  7. 7

    Very cool!

    -1
  8. 8

    Super nice work, well done :)

    -3
  9. 9

    Wow. Thanks for the inspiring list.

    -2
  10. 10

    Not to be a party pooper, but http://foxie.ru/ looks like a table-based mess to me. Or perhaps I don’t understand the rules for inclusion on this list :)

    -1
  11. 11

    Real beauty. Very inspiring. Thanks for the list.

    -1
  12. 12

    Great list, will add to My Ma.gnolia bookmarks

    0
  13. 13

    What an inspiring list! Awesome.

    -1
  14. 14

    Nice sites!

    -1
  15. 15

    Wow Beautiful!!!

    -1
  16. 16

    wonderfull list!
    thankyou for mentioning my blog – the correct url would be http://www.mstefan.com/blog/ by the way ;)

    -1
  17. 17

    All these sites look eerily the same. I like clean gradients and tabs as much as the next guy, but the shit has to stop. It’s like the 45 degree angle thing during late 1999-2000. (Damn you 2Advanced!) There is nothing impressive about rehashing the same crap over and over. CSS+XHTML does not mean you site needs to look like a trendy web 2.0 logo.

    I’m not saying these are not good sites, because most of them are, but good design should look good 10 years later, and these will not. They are part of trend, like low-rise pants and bug-eye glasses. So take off you Von Dutch hat and think up some new ideas.

    1
  18. 18

    Indeed great collections man…

    -1
  19. 19

    Yeah, I think http://www.ndesign-studio.com is beautiful and Nick is great CSS designer.

    -1
  20. 20

    great list… with many differents styles..
    2006 was a goodYear..

    -2
  21. 21

    Nice work! I got lost in the list for hours…

    -1
  22. 22

    Thanks for the screenshot, but you got the URL wrong – its Nice-Design.co.uk

    -1
  23. 23

    Bullshit. Why is it always LOOKS over USABILITY?

    I mean there are hundreds of sites that “look nice” but are extremely difficult and tedious to use. Small text, radical colors and contrast, usage of Flash, required scrolling, useless images, too limited effective area without scaling support, non-standard solutions (= difficult to interpret what is a link/button) etc.

    The list goes on and on but yet many people deem such sites as incredible.

    6
  24. 24

    Great list, all very beautiful!

    0
  25. 25

    This site is absolutely knackered in IE7. It doesn’t matter what the browser is, you have to cater for them all. So don’t come trying to tell me what’s good when you obviously can’t build one yourself…

    And if I see one more page centered css site with a graphic popped on top of the page I am going to SCREAM.

    0
  26. 26

    What about mattbango.com, oh wait, rikcat.com stole his design and then gets the credit.

    0
  27. 27

    Great collection. I always enjoy seeing different examples of CSS goodness! The art on those sites is nice as well.

    0
  28. 28

    Really impressive designs! This list is another great resource for inspiration!

    Thanks!

    0
  29. 29

    David,

    I believe that ‘CSS-based’ merely differentiates between the CSS and Flash wars that went down a few years back. For example, the gorgeous http://www.ampedesports.com/ uses CSS for 99% of layouts but still includes a bit of flash and html (tables) here and there, so I’m not sure… should it be allowed?

    -1
  30. 30

    Woooooow!

    This sites are really very pleasant for the eye!

    Great 4 inspiration!!

    0
  31. 31

    designs are really nice
    but how would i know because your CSS on
    this site is messed up

    -1
  32. 32

    This all looks like some WordPress themes. Very generic and derivative stuff.

    -1
  33. 33

    Ironic- how screwed up this page is nd they are recognizing good web site design…………….
    Not working the way they want in IE6 nor IE7

    -1
  34. 34

    2006 has been a great year for CSS-based website. Congratulations to all and great compilation!

    -1
  35. 35

    designs are really nice
    but how would i know because your CSS on
    this site is messed up

    Looks fine in firefox. Stop using ie7 and use a real browser, fool!

    0
  36. 36

    Wow what that ! Please respect the standard ! IE7 is more standard as FF ! But the result suck ! And check your JS too :-)

    undefined values :-(

    Else a nice idea :-)

    See you !

    -2
  37. 37

    Some of these sites are plain inaccessible :(
    They aren’t fully css-based

    0
  38. 38

    take off “http://foxie.ru/” of the list it’s made out of tables!

    -1
  39. 39

    Good selection… nice webpages.

    -1
  40. 40

    Great list. Some there I think I would put after some others. Thanks for the compilation!

    0
  41. 41

    Mediocre. All sites have the same layout, all they changed are the images.

    1
  42. 42

    90% have the same aesthetic. Pretty Boring.

    0
  43. 43

    inspiring list here.

    i wish all of the sites were still the same, but some of them were changed. that makes the snapshots worthy.

    0
  44. 44

    fun list but makes me think more of illustrator skills than css skills.

    1
  45. 45

    Those are some amazing designs. Surprisingly, there were even some designs that I would use over my current one. I wonder if anyone reads these comments, eh?

    -1
  46. 46

    your google adsense ads are in violation of their terms of service, you can’t place pix next to them.

    -2
  47. 47

    Just noticed that my home page needed correcting. Cheers, Dan.

    -1
  48. 48

    Cool works!

    -1
  49. 49

    I just relaunched my online portfolio, maybe you like it enough to put it on your list? anyway, i would be glad to hear the user opinions on the usability of my site. just post your comments in my kontakt-sektion. (in the moment the site is only german, sorry)

    -1
  50. 50

    David Carrero Fdez-Baillo

    December 21, 2006 4:50 pm

    that’s good design ;-)

    note: Ahh you must kill the attach image for google adsense code, the new style don’t permit this from google :(

    -1

↑ Back to top