- June 18th, 2010
- 73 Comments
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?
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).
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.
Sennheiser HD-555 Audiophile Headphones6
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 Design8, by Dan Cederholm and Ethan Marcotte,
- HTML and CSS Web Standards Solutions: A Web Standardista’s Approach9, by Web Standardistas,
- Designing with Web Standards (3rd edition)10, by Jeffrey Zeldman and Ethan Marcotte.
To participate, please follow these steps:
- 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!
- Download our blank template11.
- 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.).
- 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:
- Create a screenshot of your design in the browser (you can use the Fireshot Firefox Extension12 to do it).
- Pack everything (both the screenshot and code) in a ZIP file.
- Attach the ZIP file to an email, addressed to firstname.lastname@example.org and with the subject line [CSS3 Contest] Your_theme’s_title.
- 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.
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 Tutorials13
The ultimate starting point for your CSS3 designs. In this article, you will find everything you need to get started on your CSS3 experiments.
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 CSS315
This article covers in detail what you need to know about every CSS3 feature, with examples and useful links.
- CSS3 Solutions for Internet Explorer16
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 CSS317.
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.
Pure CSS3 Page-Flip Effect20
Create a Vibrant Digital Poster Design with CSS322
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.
Fun With CSS Gradients32
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.
Good luck, and get creative, folks!
- 1 http://coding.smashingmagazine.com/2010/07/12/css3-design-contest-results/
- 2 http://www.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/
- 3 http://www.intel.com/cd/channel/reseller/asmo-na/eng/products/nand/feature/index.htm
- 4 http://www.intel.com/cd/channel/reseller/asmo-na/eng/products/nand/feature/index.htm
- 5 http://www.intel.com/cd/channel/reseller/asmo-na/eng/products/nand/feature/index.htm
- 6 http://www.sennheiserusa.com/private_headphones_audiophile-headphones_005342
- 7 http://www.sennheiserusa.com/private_headphones_audiophile-headphones_005342
- 8 http://www.peachpit.com/store/product.aspx?isbn=0321643380
- 9 http://www.webstandardistas.com/book/
- 10 http://www.zeldman.com/dwws/
- 11 http://www.smashingmagazine.com/contest/css3-blank-template.zip
- 12 https://addons.mozilla.org/en-US/firefox/addon/5648
- 13 http://www.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/
- 15 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
- 16 http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
- 17 http://www.smashingmagazine.com/tag/css3/
- 18 http://www.romancortes.com/blog/homer-css/
- 19 http://www.romancortes.com/blog/homer-css/
- 20 http://www.romancortes.com/blog/pure-css3-page-flip-effect/
- 21 http://www.romancortes.com/blog/pure-css3-page-flip-effect/
- 22 http://line25.com/tutorials/create-a-vibrant-digital-poster-design-with-css3
- 23 http://line25.com/tutorials/create-a-vibrant-digital-poster-design-with-css3
- 24 http://gordonbrander.com/lab/css3-stacks/
- 25 http://gordonbrander.com/lab/css3-stacks/
- 26 http://www.marcofolio.net/css/wicked_css3_3d_bar_chart.html
- 27 http://www.marcofolio.net/css/wicked_css3_3d_bar_chart.html
- 28 http://trentwalton.com/2010/03/24/css3-background-clip-text/
- 29 http://trentwalton.com/2010/03/24/css3-background-clip-text/
- 30 http://neography.com/journal/our-solar-system-in-css3/
- 31 http://neography.com/journal/our-solar-system-in-css3/
- 32 http://www.martinilab.com/blog/104/fun-with-webkit-css-gradients/
- 33 http://www.martinilab.com/blog/104/fun-with-webkit-css-gradients/
- 34 http://www.steveworkman.com/web-design/css3-web-design/2010/css3-bookshelf/
- 35 http://www.steveworkman.com/web-design/css3-web-design/2010/css3-bookshelf/
- 36 http://www.subcide.com/articles/pure-css-twitter-fail-whale/
- 37 http://www.subcide.com/articles/pure-css-twitter-fail-whale/
- 38 http://lazycrazy.deviantart.com/art/Designer-s-tools-icon-WD2-144014050