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

Smashing-magazine-advertisement in CSS3 Design Contest: Join In and Win SSD Hard Drive!
 in CSS3 Design Contest: Join In and Win SSD Hard Drive!  in CSS3 Design Contest: Join In and Win SSD Hard Drive!  in CSS3 Design Contest: Join In and Win SSD Hard Drive!

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

Designers-instrumentary 370 in CSS3 Design Contest: Join In and Win SSD Hard Drive!

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.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

What Prizes Can You Win?

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

Intel 2.5″ 160 GB SSD Hard Drive (X25-M Mainstream SATA II)
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 in CSS3 Design Contest: Join In and Win SSD Hard Drive!

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

Second Prize

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.

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

Third — Fifth Prizes

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

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

Rules

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 Extension 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 css3@smashingmagazine.com 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

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

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

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

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

Pure CSS3 Page-Flip Effect
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 CSS3 Design Contest: Join In and Win SSD Hard Drive!

Create a Vibrant Digital Poster Design with CSS3
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.

Css3-22 in CSS3 Design Contest: Join In and Win SSD Hard Drive!

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

Css3-15 in CSS3 Design Contest: Join In and Win SSD Hard Drive!

Wicked CSS3 3-D Bar Chart
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.

Css3-techniques-16 in CSS3 Design Contest: Join In and Win SSD Hard Drive!

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

Css3-techniques-24 in CSS3 Design Contest: Join In and Win SSD Hard Drive!

Our Solar System in CSS3
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.

Css3-techniques-14 in CSS3 Design Contest: Join In and Win SSD Hard Drive!

Fun With CSS Gradients
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-techniques-36 in CSS3 Design Contest: Join In and Win SSD Hard Drive!

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

Css3-techniques-02 in CSS3 Design Contest: Join In and Win SSD Hard Drive!

Pure CSS Twitter Fail Whale
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;.

Css3-techniques-10 in CSS3 Design Contest: Join In and Win SSD Hard Drive!

Good luck, and get creative, folks!

Icon design by LazyCrazy

(al)


© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

9 + 4 =

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.