Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

CSS3 Design Contest: Join In and Win SSD Hard Drive!

Update: The results are now available on the CSS3 Design Contest Results page1.

We used to develop websites with ugly hacks, dirty workarounds and unmaintainable code. We had to create rounded corners with “corner” background images and nasty divs. Cross-browser transparency was dirty; shadows were quirky; and do you remember resizable buttons and tabs that had to be implemented with CSS sliding doors? All of these workarounds were extremely time-consuming and resulted in bloated code. With CSS3, these creepy hacks are becoming history. And better still, we can use CSS3 right now.

CSS3 is powerful, simple and very easy to learn. Although Internet Explorer does not support most CSS3 properties yet, many designers are experimenting with the new features, gracefully degrading their designs for users with older browsers and offering rich CSS3 interactivity to users on modern browsers. CSS3 is being used (as it should be at the moment) as an additional layer to enrich the user experience by making websites cleaner, more adaptive and more responsive. It’s time to start using CSS3 today2.


Seeing the Web as a dynamic medium is a good thing, and it’s good to create rich user experience for those who are already use modern browsers or will be soon. Whatever your perspective, it doesn’t make any sense to keep looking back, afraid to look ahead, and thus avoiding experimenting with and learning about new CSS3 properties today. This is why we keep publishing articles about CSS3.

To get you really excited about CSS3, we have decided to organize a CSS3 contest to encourage designers to experiment with CSS3, and then showcase the results on Smashing Magazine.

What Prizes Can You Win? Link

Of course, as always, we have prizes for some of the participants. The winners of the contest will be determined by the Smashing Magazine editorial team. Each winner will receive one of the following prizes (the winner is free to choose the prize they want).

First Prize Link

Intel 2.5″ 160 GB SSD Hard Drive (X25-M Mainstream SATA II)3
The Intel X25-M Mainstream SATA II Solid State Drive provides faster disk performance and greater durability than traditional hard drives. The X25-M is a Solid State Drive (SSD), and it uses flash memory for storage, giving you dramatically faster data access. The X25-M is a SATA II hard drive with a capacity of 160 GB.

Intel SSD Hard Drive4

Intel SSD Hard Drive5

Second Prize Link

Sennheiser HD-555 Audiophile Headphones
The HD 555 features a special internal Surround Reflector, which generates an extended spatial sound field, making it the optimal headphones for home theater, as well as music. A comfortable, high-quality headphone system with acoustic refinement for sound channeling for a new kind of listening experience.

Sennheiser HD-555 Audiophile Headphones

Third — Fifth Prizes Link

Finally, Web design books. We will be giving away:


Rules Link

To participate, please follow these steps:

  1. Come up with an original, beautiful and readable design or technique that uses CSS3 styling. It could be anything: a typographic design, an original footer design, an interesting treatment of images or a complete CSS layout — it’s up to you. Also, feel free to use any CSS3 feature that you like. What’s important is that your submission is unique. The more distinctive it is, the better your chances of winning a prize!
  2. Download our blank template.
  3. Use this template to code your own (X)HTML and CSS. You may use JavaScript, but you don’t have to; pure (X)HTML and CSS3 is fine. You can use either XHTML or HTML 4.0 or HTML 5.
  4. Make sure the design looks right in modern browsers (Firefox 3.5+, Opera 10.5+, Safari 4+, Google Chrome 4.0+ Internet Explorer 9+, etc.).
  5. Make sure the design or technique still works (at some basic level) in older browsers.

You can submit more than one design for the contest. Once you’ve completed these steps, do the following:

  1. Create a screenshot of your design in the browser (you can use the Fireshot Firefox Extension9 to do it).
  2. Pack everything (both the screenshot and code) in a ZIP file.
  3. Attach the ZIP file to an email, addressed to and with the subject line [CSS3 Contest] Your_theme’s_title.
  4. In the email, please state your name, your main URL and the country where you reside. If possible, please also briefly describe the ideas that were the driving force behind your design. Be creative, use unusual techniques, explore new skills, do whatever it takes — we want you to get really excited about this.

Deadline Link

We’ll consider all entries that we receive until 29th of June 1st of July 2010. The best entries will be published briefly after the contest has ended. The winners will be determined Smashing Magazine’s editorial team and announced shortly after the deadline.

All entries will be released for free downloading and available for free use, without any restrictions whatsoever (you will be credited in the release post, of course). You may include at most one link to your website in the footer of the design.

To Get Your Creative Juices Flowing Link

To get some ideas to begin, take a close look at previous CSS3-related articles published on Smashing Magazine in recent months:

Again, you can design any (X)HTML + CSS template you want: for any blog, portfolio, corporate website, product page, “Coming Soon” page, maintenance page or other page. But the design should be original and designed specifically for this contest. Of course, you must own the copyright for the design and the code.

CSS Inspiration Link

Homer Simpson in Cross-Browser CSS15
A classic by Roman Cortes.

Homer Simpsons with Cross-Browser CSS16

Pure CSS3 Page-Flip Effect17
By using CSS3 gradients, transitions, 2-D transforms and clipping, Roman Cortes achieved this pure-CSS3 page-flipping effect (no JavaScript is used). But it works in Webkit browsers only (Safari and Chrome).

Css3-168 in Start Using CSS3 Today: Techniques and Tutorials18

Create a Vibrant Digital Poster Design with CSS319
CSS has come a long way in recent years, and with new browser support for a handful of CSS3 properties, we can begin to replicate design styles directly in the browser that before were possible only in our designing applications. Follow this walkthrough by Circlicious, a vibrant and abstract digital poster design made purely with HTML and CSS.

How To Create Depth And Nice 3D Ribbons Only Using CSS320

CSS3 Leopard-Style Stacks
Pure CSS3 (and experimental CSS). No JavaScript. An experiment by Gordon Brander.

CSS3 Leopard-style Stacks

Wicked CSS3 3-D Bar Chart21
An attempt to create a 3-D bar chart using CSS3. This example works only in the latest versions of Firefox, Chrome, Safari and Opera.

Wicked CSS3 3d bar chart22

Selectable Headlines With Color Transition (CSS3)23
A CSS3 color transition applied to selectable text using CSS3. Works only in Safari and Chrome.

Wicked CSS3 Color Transition24

Our Solar System in CSS3 25
This is an attempt to recreate our solar system using CSS3 features such as border-radius, transforms and animations. The result is surprising and quite interesting.

Our Solar System in CSS3  26

Fun With CSS Gradients27
This album display, similar to that of the iPhone, uses a radial gradient (not a linear one) as the background for the track names. The overall effect is a dim light. Odd-numbered tracks are also given a gradient to take advantage of -webkit-gradient’s support of alpha values.


CSS3 Bookshelf29
An interesting idea that doesn’t quite look right because of the rotation rendering, but worth the experimentation nevertheless.

CSS3 Bookshelf30

Pure CSS Twitter Fail Whale31
The curves here are done using various uneven border-radius properties. Stranger angles (such as the strings) are masked using containers set to overflow: hidden;.

Pure CSS Twitter Fail Whale32

Good luck, and get creative, folks!

Icon design by LazyCrazy33


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33

↑ 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.

  1. 1

    Steve McGrath

    June 18, 2010 2:41 am

    In the UK, it is reported over 50% of Public sector users are still on IE 6. Even if they upgrade (which isn’t likely given the current UK gov’t debt) they will only upgrade to IE 7 or 8. Many of them are still on Win 2k OS which doesnt even support IE 7 or 8 so why is everyone going crazy for CCS3 and HTML 5.

    It is going to be years (5+) before CCS3 and HTML5 is usable in a commercial environment and right now, why should I use it and have to give IE6/7/8 users a poor eperience when I can use existing technicques to develope website that look the same or similar in all browsers.

    • 2

      Considering many websites are already dropping IE6 support, including YouTube, Google Docs, deviantART and others, I wouldn’t be very surprised if this is just another nail in IE6’s coffin, rather than IE6 being a torn in the side of CSS3.

      Although I have to say, this contest, I really can’t understand what we’re supposed to do. CSS3 specifications don’t include transform and all that… That’s just the drafts. And CSS3 is supposed to help developers create sites that work correctly across browsers, not sites that are shiny and whatnot. If I submit something, it’ll be something functional, simple, practical and CSS3 enabled, but it won’t be shiny because that’s totally missing the point. I doubt I’ll stand a chance of winning anything, so I doubt I’ll go through the trouble…

    • 3

      Brits are nerds and so old fashoined and dumb. Majority of them are stuck at that because there grandpa taught them win2k and noone else took his place after that. And brits really don’t like going to universities. A Levels is good enough for them. I mean they think so. Huh!

      • 4

        Richard Vanbergen

        June 21, 2010 6:54 pm

        @Niel: Grow up.

      • 5

        I take offense to that massively xenophobic and downright ridiculous comment. You’ll find that most Brits go to University and many of us have degrees; to the point that they are no longer worth the paper they’re printed on. Going to Uni is pretty much a given nowadays. And if you actually knew what you were talking about you’d know that it’s mostly industry that’s clinging onto IE due to the perceived cost of upgrading intranet systems or fleets of computers; not the average user. Dropping support for IE6 on sites like Google and YouTube is hardly going to encourage businesses to upgrade their browsers.

        But while we’re on the subject of being “dumb”:-
        It’s “fashioned”, “their”, “no one”. “Brits”, “Universities”, “A Levels are” and “Huh?”.


      • 6

        @Neil: “Brits are dumb”

        That could only come from the mouth of an American ;-)

  2. 7

    Vitaly Friedman (Smashing Editorial)

    June 18, 2010 2:43 am

    Steve, obviously it depends on the environment in which a certain design will be used. However, if your environment allows you to design for users with modern browsers, you can use CSS3 already to create richer user experiences for these users.

    • 8

      Agreed – why can’t we use CSS3 techniques for browsers which do support it? Also, if upgrading to later versions of IE is going to be costly for public sectors, why not encourage upgrading to more capable free browsers such as Firefox and Chrome?

      On a more personal level, I’m really looking forward to taking part in this competition. I’ve been really excited about many aspects of CSS3 (and using techniques substantially in my own designs for months), so having the free reign and competitive aspect of experimentation will be an awesome incentive.

      Can’t wait to see what is developed for this competition!

      • 9

        It’s not upgrading the browser that is costly, IE is free too, afterall. What is costly is that at some point they had an intranet or some other web application built for them that only works in IE6. And it will cost them to upgrade that.

  3. 10

    Amazing contest!

  4. 11

    Hey, Just wanted to know whether people out of USA are eligible to participate in this competition and I am from Maldives and love to participate.

    • 12

      Vitaly Friedman (Smashing Editorial)

      June 18, 2010 3:03 am

      Of course, everybody is allowed to participate!

  5. 13

    It is a shame how Microsoft are the main culprits for holding back web technology, although I am growing wary of Apple’s market dominance (example Apple’s HTML5 feature page, only viewable in Safari…)

    The annoying thing is that companies have invested so heavily in Microsoft that it is too expensive for them to re train staff, when then could use a linux OS, such as Ubuntu and use modern browsers (which also cost nothing). It is ridiculous to expect a ten year old browser to do the job of an up to date one. I have upgraded by browsers four times in the last month.

    Back on topic, the CSS examples you have linked to are all amazing, definitely going to rack my brains for an idea to submit. (although the fail whale, and other advanced CSS illustrations seems like complete overkill)

    • 14

      I’m far from being an MS lover, but I don’t think you can put all the blame on Redmond for “holding back Web Technology”. In the workplace, browser choice is made for you and the majority of employers are both reluctant and scared in equal measure to live on the bleeding edge. Cost of testing, rollout and business continuity is the main reason for legacy browsers, not Mr Gates.

      Designers should be pushing the boundaries of the technology, but they shouldn’t expect the corporate world to come along for the ride.

      • 15

        I disagree, Microsoft are continually failing to create browsers that are stick to web standards. An example is here, a series of HTML5 tests compared in different browsers (IE9 scoring 0% on all)

      • 16

        Michael Ward

        June 18, 2010 7:44 am

        Microsoft IS to blame, in two respects:

        1) They are still creating browsers that are massively behind in web standards support

        2) They ceased browser development for many years. This lead to IE6 becoming a de-facto standard. This de-facto standard has faded amongst individuals, but still has its icy grip on the corporate world. As long as mission critical systems demand IE6, then that is where the corps will stay.

    • 17

      Pete Morley

      June 18, 2010 4:20 am

      What a lot of people seem to forget, is the state of the web before IE6 came out. IE6 had it’s issues and was arguably left to stagnate whie other browsers innovated, but on release, it was leaps and bounds above 5.

      As for the Apple HTML test. it was put up to show how Safari handles some key HTML 5 features, not as a HTML 5 showcase.

      From the Apple site:

      “The demos below show how the latest version of Apple’s Safari web browser, new Macs, and new Apple mobile devices all support the capabilities of HTML5, CSS3, and JavaScript”

    • 18

      Caleb Kester

      June 18, 2010 5:24 am

      It’s not necessarily microsoft to blame but the companies. Microsoft is trying to push people to IE8 with the whole security and old milk promotions. It’s businesses that have intranets that would break or that want to block facebook (doesn’t support IE6).

      • 19

        George Egonut

        June 20, 2010 6:31 am

        So the fact that upgrading from IE6 to IE8 would break an intranet is NOT Microsoft’s fault? Microsoft rolled out a terrible browser (IE6) that forced developers to write release-dependent code that was then NOT supported in later versions, forcing them to either patch or completely rewrite code if they wanted to upgrade. I don’t blame the companies for developing within Microsoft’s guidelines. MS changed the game on them and telling them IE8 is more secure does not change the fact that companies will now have to spend resources on fixing software that was developed under their guidelines.

        I don’t see that problem with other browsers, because I don’t have to rely on release-dependent code to create the intranet for them in the first place. Microsoft’s business model is based around having small companies become so entrenched in their software that it is cheaper for them to upgrade to their enterprise-level software than to go back and change over completely to a different system. I’m not saying that’s a bad business model, but the fact that they make everyone so dependent on proprietary fixes is a problem with advancing web standards.

  6. 20

    Nafi Putrawan

    June 18, 2010 3:15 am

    Aaaaaah, deadline make me can’t join this contest T_T

  7. 21

    Agree to Steve McGrath , IE6 is still more than 50% user use it, and it Suck of course.
    But as a developer we have to move forward and prepare for another technique.

    Great contest SM. but You just give us time to short, different with another contest before you give us time a month or more.
    But I really love to wait the result.

    • 22

      Smashing Editorial

      June 18, 2010 4:26 am

      The contest deadline was extended until the 1st of July.

      • 23

        Can it be extended little more ? lets say till 10th of July ? :-( I know its not possible… Loved to participate in this contest but don’t have much time …

        Gr8 & Inspirational Contest.. :-)

  8. 24

    Nick Parsons

    June 18, 2010 3:54 am

    Great idea! I think this is the kind of thing that really helps move the web design community along. It’ll be really neat to see what SM’s readers come up with.

  9. 25

    Radu Tanasescu

    June 18, 2010 3:57 am

    Hope I make it to the deadline :D

    I agree that IE6 will still be with us for a while but if I can make a website that looks grate in a modern browser and only misses round corners, text shadow and the like in IE6 I’m happy :)

  10. 26

    How about not about having not released browsers in the list? I mean IE9.

    • 27

      Pete Morley

      June 18, 2010 4:51 am

      If you’re a web designer, you really should be checking your websites before IE9 is launched to the public. There’s no reason we shouldn’t be designing right now with it in mind.

    • 28

      George Egonut

      June 20, 2010 6:33 am

      If you’re going to worry about backwards compatibility, you should be thinking about forward-compatibility as well. Think about it: if your design works well in all modern browsers but breaks or has unacceptable issues in IE9, which isn’t that far out, do you think you’ve done your job? Do you think that next year when your client’s website breaks in the browser most of their customers are using that you aren’t responsible for that?

      • 29

        matthew booth

        June 25, 2010 3:14 pm

        Of course you’re not responsible for that. There are plenty of examples of consumers purchasing current technology that will be negatively affected by future advancements in technology.

        One example would be AMD motherboards vs. Intel. AMD boards are backwards compatible whereas Intel mobo’s are processor specific for the most part.

        Automobile manufacturers are only liable to fix defects in car if the current car fails. If a newer car has newer features that makes an old car obsolete, the owner does not receive a (free) new car.

        Now if you want to charge a client to “future-proof” a website against a particular version, then that’s your choice as a company/individual.

  11. 30


    June 18, 2010 4:41 am

    On the one hand it’s great that Smashing Magazine publishes valuable and interesting info about CSS3, and now even a contest. Great way to encourage experimentation and I hope we keep getting good stuff like this.

    But: The place CSS3 currently has on the internet is being overrated on this website. It needs to be made clear that 95% of the beautiful CSS3 examples we’ve been seeing would not not fly in a real world website, for *most importantly* a real world client. Most web designers do not work for themselves, they work for clients.

    Example: I could make a website for a client, that would work in all popular browsers, but would use CSS3 for all rounded corners, shadows and gradients with graceful degradation. Viewing the website in Safari would look awesome. Viewing it in IE7 would work, but would look very very plain. Everything that made the design stand out is gone. I don’t know a lot of clients that would agree to that. In fact, they won’t even pay for the extra work that the CSS3 “layer” would entail, if only 10-30% of people is going to see it.

    So again, I fully agree with writing about CS3, experimenting with it, but we can only use it in certain specific cases and to a limited degree. I personally use it for small areas of websites that also look good without CSS3. Using it for every element in a website intended for the general public is just not responsible. For at least another few years.

  12. 31

    Smashing Editorial
    June 18th, 2010 4:26 am

    The contest deadlin was extended until the 1st of July.


    You just add 2 days for extended. :P
    We’ll see who will join this contest.

  13. 32

    Joe Stevens

    June 18, 2010 5:22 am

    I love every part of this contest except that it has to work in IE9. I use a Mac and I don’t have a Vista or Windows 7 license.

  14. 34

    Caleb Kester

    June 18, 2010 5:27 am

    Awesome contest! I think you need to stress that it doesn’t have to be a full website. You mentioned footer or a cool design trick. Because of that the deadline isn’t that bad…

  15. 35

    Just a tip… there’s this ScreenGrab extension for Firefox, it works too for grabbing Websites snapshots =) – and it’s free (but it don’t have that cool editor FireShot have)

  16. 36

    I second that. IE9 is not fully available to possible contestants.

  17. 39

    Caleb Kester

    June 18, 2010 5:39 am

    Quick question, since it’s a css3 design contest and not a html one, would it be against the rules to design a stylesheet for an existing site? Something similar to what firefox’s stylish addon would do.

    I’d probably need to get permission from the site but then it’d be able to?

    • 40

      Smashing Editorial

      June 18, 2010 6:01 am

      The design should be created specifically for the contest. So sorry, but no.

  18. 41

    Engulf Tech

    June 18, 2010 5:50 am

    We have recently taken up a website design project in CSS3 and HTML5. Hopefully, it will be ready by the 1st of July. Though, scheduled dead-line is 6th July.

  19. 42

    Gustavo Guichard

    June 18, 2010 6:57 am

    Why in a CSS3 contest promoted by Smashing Magazine should we care about graceful degradation in older browsers? Fuuu

    • 43

      George Egonut

      June 20, 2010 6:36 am

      I think the point of the contest is to not only show CSS3’s capabilities, but also to show the naysayers out there (which I guess makes them web designers who aren’t forward-thinking, which is something of an oxymoron to me) that you CAN use CSS3 right now, utilizing graceful degradation to ensure that it’s functional across a wide variety of browsers.

      • 44


        June 21, 2010 12:41 am

        I agree so long as people also understand that graceful degradation only goes so far. For example most websites adhere to a corporate identity. That identity will need to be visible to to every visitor. So implementing every rounded corner and gradient through CSS3 will leave the IE user with a very plain website that most clients would not accept. So I’m all in favour of graceful degradation and being forward thinking, but there are a lot of practical and client-related considerations to keep in mind.

  20. 45

    Amazing awards!!!


↑ Back to top