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.

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.

[By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]

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.

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.

Third — Fifth Prizes

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

• Handcrafted CSS: More Bulletproof Web Design, by Dan Cederholm and Ethan Marcotte,
• HTML and CSS Web Standards Solutions: A Web Standardista’s Approach, by Web Standardistas,
• Designing with Web Standards (3rd edition), by Jeffrey Zeldman and Ethan Marcotte.

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:

• Start Using CSS3 Today: Techniques and Tutorials
  The ultimate starting point for your CSS3 designs. In this article, you will find everything you need to get started on your CSS3 experiments.
• 50 Brilliant CSS3/JavaScript Coding Techniques
  In this post, we present 50 useful and powerful CSS3/jQuery techniques that can strongly improve the user experience and designer’s workflow and that can replace those old dirty workarounds we used in Internet Explorer 6 et al.
• Take Your Design to the Next Level With CSS3
  This article covers in detail what you need to know about every CSS3 feature, with examples and useful links.
• CSS3 Solutions for Internet Explorer
  This articles lays out a number of options that developers can consider when support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7 and IE8—all of which are still significantly used).
• … Also check out even more previous articles on CSS3.

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.

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

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 Leopard-Style Stacks
Pure CSS3 (and experimental CSS). No JavaScript. An experiment by Gordon Brander.

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.

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

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.

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 Bookshelf
An interesting idea that doesn’t quite look right because of the rotation rendering, but worth the experimentation nevertheless.

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

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: contest, css3

Go to Source