CSS3 Design Contest Results

Advertisement

To get you really excited about CSS3, last month we announced the CSS3 Design Contest1 and encouraged designers to experiment and get creative with CSS3. As expected, we have received many creative and original submissions. To choose the winners of the contest, we considered the originality of the technique or approach and its uniqueness. The idea mattered more than the execution.

This process has taken a lot of time as it wasn’t easy, because we received quite a few creative submissions: however, a decision had to be taken and so we thoroughly went from one competition entry to another. And the decision was made. So today, it’s time to announce the winners and present the submissions to the contest.

Please notice that the contest results are experimental and may not necessarily look or work alike in different browsers. The techniques presented below should be considered as innovative, creative approaches showcasing what can be achieved with pure CSS3 and a bit of creative thinking. Please feel free to build upon these ideas to create further techniques and design solutions and make them available for the design community.

First place: CSS3 Charts

CSS3 Charts [ preview2 | download3 ]
This technique is an example of experimental CSS3 charts, without JavaScript and images in use. We miss cleaner markup and proper markup for tabular data here, but the use of CSS3 selectors is truly impressive: nth-child, :target, transformations, gradients and transitions in use. Designed by Sean Oh4 from USA.

CSS3 Designs For Free Download - css3-charts5

CSS3 Designs For Free Download - css3-charts6

Second place: CSS3 Rubik’s Cube

CSS3 Rubiks Cube [ preview7 | download8 ]
Interesting idea for a CSS3 design. The designer’s idea was to create a navigation menu: although it’s not very user-friendly for regular navigation, it may be interesting for engaging portfolio sites. Gradients and transforms in use. Designed by Francesco Benanti and Maicol Zenatti9 from Italy.

CSS3 Designs For Free Download - css3-rubiks-cube10

Third place: CSS3D

CSS3D [ preview11 | download12 ]
Do you have your 3D glasses at hand? If yes, put them on and observe this stereoscopic 3D effect, created with CSS3. Works in all modern browsers, and also on iPhone. 3D red-cyan glasses required. Designed by simurai13 from The Netherlands.

CSS3 Designs For Free Download - css3d14

Fourth place: CSS3 Monsters Blob

CSS3 Monsters Blob [ preview15 | download16 ]
A CSS monster, created with pure CSS3. Also check out Blob’s brother, CSS3 Monsters Dragon17. It goes without saying that the CSS monster is scalable. The eye is animated with jQuery’s Parallax effect. Designed by Sebastien Plaignaud18 from France.

CSS3 Designs For Free Download - css3-monsters-blob19

Fifth place: CSS3: A Rift in Time

CSS3 A Rift in Time [ preview20 | download21 ]
Interesting experimental layout: standard HTML/CSS web sites have always been vertical and horizontal. This entry shows what can be achieved if a site is flipped on to a 45 degree angle. Transitions and transforms in action. Designed by Maxwell Burton22 from USA.

CSS3 Designs For Free Download - css3-a-rift-in-time23

Congratulations!

We congratulate the winners of the CSS3 design contest and we again sincerley thank you for all the great entries that we’ve received. We appreciate your time, creative thoughts and we do respect your work and efforts. All winners will be contacted within the next 24 hours. Below you’ll find a detailed overview of the other entries of the contest. Thank you very much, and please join in next time!

CSS3 Jewelcase

CSS3 Jewelcase [ preview24 | download25 ]
“I love music and cover art, so this was a nice little project to explore some CSS3 features.” Designed by Bouke Regnerus26 from The Netherlands.

CSS3 Designs For Free Download - css3-jewelcase27

CSS3 Vicero

CSS3 Vicero [ preview28 | download29 ]
“I came up with this idea when I was sorting all my movies on my movie-stream-server. It would be so nice to have a web interface that’s rolling on a web server on the same machine. But if you dont have a server and just have regular DVD/BR, then you can type where the movie is in the shelf. So, what should we watch today? This theme is best experienced in Safari/Chrome because of some CSS3 effects; but it works also in FF, IE and Opera.” Designed by Adis Kurtalic from Sweden.

CSS3 Designs For Free Download - css3-vicero30

CSS3 iPad with Shadow

CSS3 iPad with Shadow [ preview31 | download32 ]
“I got a bit crazy at this contest. I’ve been experimenting a bit with CSS3. But when I saw this contest, I though for my self.. hey, let’s check this specifications at w3. There got be more to it than just rounded corners (which is great by the way). After using a couple of hours reading. I was stunned..whow! 3D effects, shadows. And I was thinking.. what can be painted can also be made in css3 using squares, circles… I was sitting with an iPAD in my hands reading about CSS3. I put it on the table… and thought; this image I am seeing right now, should be possible to make just with CSS3. The solution is best viewed in Google Chrome.” Designed by Morten Dischington Carlsson aka Mr.Jones33.

CSS3 Designs For Free Download - css3-ipad-with-shadow34

CSS3 Time Machine

CSS3 Time Machine [ preview35 | download36 ]
“A small example of using jQuery to trigger CSS3 animations in a ‘Time Machine’-fashion.” Designed by Nathan Burnett37 from USA.

CSS3 Designs For Free Download - css3-time-machine38

CSS3 CSS Effects

CSS3 CSS Effects [ preview39 | download40 ]
“This started as an experimental playground when I started learning CSS3 — CSS animation. There are five simple looping effects (animations). Each one uses JavaScript to initially setup the environment, but after that, everything is looped through CSS animation.” Designed by Yohei Shimomae41 from Canada.

CSS3 Designs For Free Download - css3-css-effects42

CSS3 Book

CSS3 Book [ preview43 | download44 ]
“This design allows you to place any amount of content in the ‘columnified’ DIV of the layout, allowing for a site-wide flexible and fully customisable ‘book-like’ feel. It uses the CSS3 multi-column module for the multi-column layout (and a JavaScript solution for Opera and IE, two browsers that, to date, do not support this module — this solution is a modified version of Cédric Savarese’s css3-multi-column.js45, and uses a combination of CSS shapes, border-radius, transforms, box-shadows and gradients to create the book appearance.

Page turning is achieved via Javascript (pageturn.js). The different stylesheets are fed to browsers via Javascript as well, so as to detect whether the multi-columns are supported or not (stylesheet.js — basic browser detection only, on the assumption that Opera, Firefox, Safari and Chrome users update their browsers regularly). As no images have been used in this template, total customisation of the appearance is easily achieved (moreover, the CSS is annotated). For a full explanation of how the two-column, multi-page layout works, please visit the following tutorial46.” Designed by Peter Craddock47 from Belgium.

CSS3 Designs For Free Download - css3-book48

CSS3 Rocket Man

CSS3 Rocket Man [ preview49 | download50 ]
“Whenever I work on a project for myself, I like to try and learn something new. This contest gave me a chance to play with CSS3 without having to worry about clients asking why it works in some browsers and not in others. The main thing I was curious about was the keyframe animations, this was something I had heard about but not played with at all. I am glad that I entered the contest for the sole reason that I learned a lot. I did not realize how easy it was to work with transitions and animations with CSS. This exercise has me really excited about the future. I can’t wait to see tomorrows rookie designers using this for spinning swords and dragons that breathe fire.” Designed by James Vecchio51 from USA.

CSS3 Designs For Free Download - css3-rocket-man52

CSS3 Wii-ish Idea

CSS3 Wii-ish Idea [ preview53 | download54 ]
“Just a little bit of CSS3 as an idea for holding some images. Would work really nice alongside some JS.” Designed by Stephen Cook55 from UK.

CSS3 Designs For Free Download - css3-wii-ish-idea56

CSS3 Video CSS

CSS3 Video CSS [ preview57 | download58 ]
“It is interleaved video in a jpeg file. Instead of having each frame in its common order, each row is interleaved with the next frames rows. So, the you can see the first row of the first frame, then the first row of the second frame, the first row of the third frame and so on. Jpeg files are size limited, so to be able to have a lot of frames, I’ve reordered the rows in a 16×16 grid. The top left of the grid is the first row, the next to the right is the second row, the next the third, and in the next colunm we have the n+16th row. This is the code to generate the jpeg file. The frames where named a0001.jpg, a0002.jpg, a0003.jpg…

<php
	$num_img=128;
	$out2=imagecreatetruecolor(256*16, 16*$num_img);

	for ($j=0; $j<$num_img; $j++)
		{
		$num=$j*4+10001;
		$filename="xplsv/a".substr($num, -4).".jpg";
		$out=imagecreatetruecolor(256, 256);
		$img=imagecreatefromstring(file_get_contents($filename));
		imagecopyresampled($out, $img, 0, 0, 0, 0, 256, 256,
		imagesx($img),
		imagesy($img));
		for ($i=0; $i<16; $i++)
			{
				for ($n=0; $n<16; $n++)
				{
					imagecopy($out2, $out, $n*256,
					$i*$num_img+$j, 0, $n+$i*16, 256, 1);
				}
			}
		imagedestroy($img);
		imagedestroy($out);
	}

	imagepng($out2, 'test.png');

?>

Then, I’m using the CSS displacement maps I’ve used in the Coke Can and the other displacement maps I did for Ajaxian. The displacement maps de-interleave the jpeg file. Then, displacing the background-position with CSS3 for each row, I get the video effect. Finally, I added a Smashing Magazine transparent png on top on the video to create the overlay effect. I really like to add video on websites with shapes, it looks really good. I would like to add that this is a crazy way to add video and that it should not be used for any real purpose. When I do things like that is just for pure geek entertainment and to show it is possible. I would suggest for CSS3/HTML5 to have a background-video tag.” Designed by Javier Roman from Spain.

CSS3 Designs For Free Download - css3-video-css59

CSS3 Megans RADius Font

CSS3 Megans RADius Font [ preview60 | download61 ]
“I am a print/web designer who likes to play with CSS+HTML from time to time. I have a passion for experimental typography, and like to explore new ways of creating type. For this project, the font can be adjusted to change the into a totally different face just by changing a few small images.” Designed by Megan Brown-Taylor62 from Honolulu, HI, USA.

CSS3 Designs For Free Download - css3-megans-radius-font63

CSS3 Monsters Dragon

CSS3 Monsters Dragon [ preview64 | download65 ]
“CSS Monsters are vector images created only with CSS.” Designed by Sebastien Plaignaud66 from France.

CSS3 Designs For Free Download - css3-monsters-dragon67

CSS3 iMac

CSS3 iMac [ preview68 | download69 ]
“A pure CSS iMac – no images. You can use it to display anything on the screen. In the example I setup a Flickr Feed of images as a slideshow. It is also completely resolution independent. All relative sizes – feel free to scale it up or down by changing your font size. I used some cool techniques including CSS gradients (and Safari Radial Gradients), CSS border-radius, text-shadow, even used a Safari CSS 3D transform for kicks! I used some jQuery to make a slideshow with the Flickr images and image title overlays. Overall, I think it turned out great. I am sure people out there could take this to the next level. It’s really easy for anyone to change the flickr feed and put in their own photos if they want. I hope to see this out there somewhere. Exciting! I love CSS3! Works in: Firefox 3.5+, Opera 10.5+, Safari 4+, Google Chrome 4.0+, but of course – looks the best in Safari.” Designed by Joshua Gatcke70 from México.

CSS3 Designs For Free Download - css3-imac71

CSS3 A Book Full of HTML5, CSS3, and JavaScript

CSS3 A Book Full of HTML5, CSS3, and JavaScript [ preview72 | download73 ]
“I wanted to use the bleeding-edge 3d capabilities of CSS3 & animations while working with JavaScript to trigger interactive events. Using CSS animations for a game is something that I also find intriguing.” Designed by Kurt Zenisek74 from USA.

CSS3 Designs For Free Download - css3-a-book-full75

CSS3 Camera

CSS3 Camera [ preview76 | download77 ]
“This “camera” was created solely with CSS3, with fallback gradients for browsers that do not support CSS3 gradients. Tested (and working) on:
Google Chrome
Opera 10.54
Firefox 3.6.6.”
Designed by Oscar Lemstr?m from Finland.

CSS3 Designs For Free Download - css3-camera78

CSS3 Under the Sea in CSS3

CSS3 Under the Sea in CSS3 [ preview79 | download80 ]
“A webpage using CSS3 in an under the Sea theme.” Designed by Carlo Rosati from USA.

CSS3 Designs For Free Download - css3-under-the-sea-in-css381

CSS3 90s

CSS3 90s [ preview82 | download83 ]
“Description: My idea was to create a design very 90’s style, like David Carson with the desconstruction of the form using CSS3 Transform. It’s still only working on Webkit because of the transitions.” Designed by Fabio Sasso84 from Brazil.

CSS3 Designs For Free Download - css3-90s85

CSS3 Magazine

CSS3 Magazine [ preview86 | download87 ]
“A Magazine design inspired from Wired. Built using A4 dimensions. Uses the following features: transparent colors, even-odd selectors, rotation, text shadow, box shadow, border radius, custom font faces. Would’ve liked to used more if not for the differences in Webkit and Mozilla support Concept, Design and HTML in 6 hours. CSS3 rocks!” Designed by Anand Gorantala88 from USA.

CSS3 Designs For Free Download - css3-magazine89

CSS3 Lightsaber

CSS3 Lightsaber [ preview90 | download91 ]
“I’m a huge Star Wars nerd, as well as a web standards geek. Naturally, these two *ahem* interests were bound to collide eventually. I’m just glad it resulted in a CSS3 lightsaber rather than my admittance into a mental hospital. I actually wrote a tutorial on how I made this CSS3 lightaber, and that can be found at92.” Designed by Max Luzuriaga93 from USA.

CSS3 Designs For Free Download - css3-lightsaber94

CSS3 Smashing Magazine Logo

CSS3 Smashing Magazine Logo [ preview95 | download96 ]
“The Smashing Magazine logo using CSS3 and a little Javascript to replace the “G” in “Smashing” with a “C”” Designed by Niko de Luna97 from The Philippines.

CSS3 Designs For Free Download - css3-smashing-magazine-logo98

CSS3 Expert Cook

CSS3 Expert Cook [ preview99 | download100 ]
“Simple as it may seem this template relies heavily on css3 for animations, transformations and gradients it uses all sorts of selectors and different css3 effects to achieve the design you see.” Designed by Andrei Oprea from Romania.

CSS3 Designs For Free Download - css3-expert-cook101

CSS3 Visoki Decani Temple

CSS3 Visoki Decani Temple [ preview102 | download103 ]
“CSS3 web design showcase dedicated to Serbian Orthodox monastery Visoki Decani.” Designed by Milos Zekovic104 from Serbia.

CSS3 Designs For Free Download - css3-visoki-decani-temple105

CSS3 Pseudo 3D Radial Buttons

CSS3 Pseudo 3D Radial Buttons [ preview106 | download107 ]
“Easy to use 3D Radial Buttons.” Designed by Denis Arkhipov108 from Russia.

CSS3 Designs For Free Download - css3-pseudo-3d-radial-buttons109

CSS3 Moving Stick Figure

CSS3 Moving Stick Figure [ preview110 | download111 ]
“Use CSS 3 border-radius and animation to create a stick figure and add moving control using jQuery.” Designed by Jeffri Hong112 from Indonesia.

CSS3 Designs For Free Download - css3-moving-stick-figure113

CSS3 Image-less Warp Shadows

CSS3 Image-less Warp Shadows [ preview114 | download115 ]
“A simple CSS3 technique to apply warped shadows to elements.” Designed by Tyler Dawson116 from USA.

CSS3 Designs For Free Download - css3-image-less-warp-shadows117

CSS3 Rabbit

CSS3 Rabbit [ preview118 | download119 ]
“Just playing with CSS3 properties (and rabbits).” Designed by Fabien Vauthey120

CSS3 Designs For Free Download - css3-rabbit121

CSS3 – The future is here

CSS3 – The future is here [ preview122 | download123 ]
“My wish was to create design that shows the full concept, presenting the different capabilities and aspects of CSS3. Probably the design would seem familiar to you and that’s it because I used the vision of the template published at your website. I considered that design as extremely appropriate for the case because it’s functional and catches the eye of the user. Honestly, I didn’t have time to think of my own design but I think that I accomplished my mission to show designers and developers what they can do with little more effort and that’s how I even learned some new stuff. I hope that my design will make others reconsider the usability of the browser they use and motivate them to do some action and step forward.” Designed by Antonio Stoilkov from Bulgaria.

CSS3 Designs For Free Download - css3-the-future-is-here124

CSS3 Designs For Free Download - css3-the-future-is-here125

CSS3 Designs For Free Download - css3-the-future-is-here126

CSS3 Rainbow Template

CSS3 Rainbow Template [ preview127 | download128 ]
“Web template design with sky and rainbow theme.” Designed by Anggun Pribadi129 from Indonesia.

CSS3 Designs For Free Download - css3-rainbow-template130

CSS3 Totally Fresh

CSS3 Totally Fresh [ preview131 | download132 ]
“Totally Fresh is a fun project created not only to display the capabilities of CSS3, but to show an exciting design that pops off the 2-dimensional canvas that is cleanly and properly marked up. I tend to design simple, typographic pieces, but I wanted this design to feel “fresh.” The design, therefore, resembles a car air freshener. It reflects a tangible print piece in a 3-dimensional space.” Designed by Chris Nager133 from USA.

CSS3 Designs For Free Download - css3-totally-fresh134

Further entries

Here is a brief overview of further entries submitted to the contest.

  • CSS3 Nav-Trick [ preview135 | download136 ]
    “Here is a simple method of letting visitors know which page they are on using simple CSS to move the List Items of a navigation menu to the right. I added a fancy arrow to enhance the effect. By giving each page a unique ID in the body tags and each list Item a unique class, when your browser sees the ID for the body, the matching class for the List Item will use the CSS. The fancy Arrow will be used as long as it is in the same directory as the html files. The CSS for the List Item position “Inside” will cause the List Item to move to the right which will visually show the visitor which page they are on. I used this method on the following website, the client was thrilled.” Designed by Greg Spence137.
  • CSS3 Cant Skate Dont Care [ preview138 | download139 ]
    “A 90s skate/grunge theme designed to explore which of the CSS3 rules could be used across a decent range of browsers without all the usual browser constraints we get in the day-to-day grind of business.” Designed by Josh Campbell140 from New Zealand.
  • CSS3 3D Tribute [ preview141 | download142 ]
    “This is my first jump into CSS3,… and I’m liking it!. I’ve incorporated font embedding, transforming events, multi-column paragraphs, utilized rounded corners, and included background gradients. The transforming forest only works on webkit browsers, creating a nice 3D effect, but renders-down nicely on other browsers, while the hover animation below jumps in different ways on all required browsers.” Designed by Walter Beardwood143 from Canada.
  • CSS3 Loading Bar [ preview144 | download145 ]
    “A CSS3 Loading Bar. CSS Animation only works in Chrome and Safari.” Designed by Joel Schwarting from USA.
  • CSS3 Personal Portfolio [ preview146 | download147 ]
    “” Designed by Sikandar Aazam148 from India.
  • CSS3 Taped-off Coming Soon [ preview149 | download150 ]
    “A coming soon page themed with cardboard, duct tape, and wood. Make sure you click “Submit” in a webkit browser to see the full effect!” Designed by Robert D’Ercole151 from USA.
  • CSS3 Smashing CSS3 Effects [ preview152 | download153 ]
    “A typographic based design which combines newly CSS3 features.” Designed by Tamer Aydin154 from Turkey.
  • CSS3 This Menu Item [ preview155 | download156 ]
    “The most basic navigation menu cleverly styled into a tabbed top menu.” Designed by Dan Beeston157 from Australia.
  • CSS3 Call of Duty Style [ preview158 | download159 ]
    “Inspired by Call of Duty Modern Warfare 2 loading screens. Fixed header and footer with no content blocks, animated.” Designed by Jason160 from USA.
  • CSS3 Image-less 3D Menu [ preview161 | download162 ]
    “My entry for this contest is more of a concept than a design. I’ve seen people use CSS3 to create 2D art and thought of doing so myself, yet the idea seemed too easy. However, 3D art using CSS3 is something I have yet to see! I wanted to create an image-less 3D page layout using CSS3. It took some playing around with the code to find the best method of producing an image-less 3D element, but I’m definitely happy (and excited) with my findings. Although, after the 3D elements were introduced, I felt as through it was still lacking. I needed more, I needed interaction within the 3D space. I then created a 3D navigation bar which acts as buttons. Through CSS3’s scaling method I created the illusion of buttons going back within the 3D space on a mouse hover, and on an active state the link creates more of an interactive feel for the user. This is only the beginning of this layout, and I plan to expand upon it to create a fully designed page template which will incorporate more “button-like” interaction throughout the design. Overall, this contest has definitely pushed me to play with CSS3 more and I am truly excited for this to become a web standard!” Designed by Chris Johnson163 from USA.
  • CSS3 Dreamer Blog [ preview164 | download165 ]
    “I feel CSS3 is great & exploring technique in modern web era.” Designed by Vijay N. Vanve.
  • CSS3 Alien Menu [ preview166 | download167 ]
    “Of course this is not for contest..(had no time to invent somethink outstanding T_T ) this is just to cheer you up :) he makes me smile. hope his ability will affect you too :D” Designed by Taras Kharuk.
  • CSS3 OSX-like Dock [ preview168 | download169 ]
    “Mac OSX-like Application Dock for page/tab switching.” Designed by Aleksi Grön170 from Finland.
  • CSS3 Autom.ato [ preview171 | download172 ]
    “The idea was to use only code to do the graphic design of this peace.The tipographic poster that Smashing Magazine once published was my inpiration. I only tried to do differently from that one. I was also inspired by a brazilian artist Abraham Palatnik (google it:)). He is known as a pioneer of technological art. His works with light are very beautiful and I watched them a little bit before I did this work. Oh! Autom.ato, I almost forgot, is an art group which I belong.We don’t have our blog yet, probably a good motive to continue the css3 learning.” Designed by Haidée Lima173 from Brazil.

Last Click

CSS3 Super Mario 3D Animated [ preview174 | download175 ]
Unfortunately, this entry was submitted too late and couldn’t participate in the contest, but it is certainly worth mentioning. Here are the insights from the developer: “After my latest CSS3 experiment without images (Internet Explorer Pure CSS Logo), a friend suggested to create an animated 3D Super Mario Icon based on the 3D Retro Mario GIF image by Cezkid. Well, this is the result of two weeks of work — an animated 3D Super Mario Icon built completely in CSS3 without images.” Designed by Andreas Jacob176 from Germany.

CSS3 Designs For Free Download - css3-super-mario-3d-animated177

(mm), (vf)

Footnotes

  1. 1 http://www.smashingmagazine.com/2010/06/18/css3-design-contest-join-in-and-win-ssd-hard-drive/
  2. 2 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-charts/index.html
  3. 3 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-charts/css3-charts.zip
  4. 4 http://www.ohsean.net
  5. 5 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-charts/index.html
  6. 6 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-charts/index.html
  7. 7 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rubiks-cube/index.html
  8. 8 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rubiks-cube/css3-rubiks-cube.zip
  9. 9 http://www.francescobenanti.com
  10. 10 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rubiks-cube/index.html
  11. 11 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3d/index.html
  12. 12 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3d/css3d.zip
  13. 13 http://simurai.com
  14. 14 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3d/index.html
  15. 15 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-monsters-blob/index.html
  16. 16 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-monsters-blob/css3-monsters-blob.zip
  17. 17 http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/uploader/images/css3-designs/css3-monsters-dragon/index.html
  18. 18 http://web.virtuousquare.fr
  19. 19 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-monsters-blob/index.html
  20. 20 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-a-rift-in-time/html/index.html
  21. 21 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-a-rift-in-time/css3-a-rift-in-time.zip
  22. 22 http://therewillbetangents.tumblr.com
  23. 23 http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/uploader/images/css3-designs/css3-a-rift-in-time/html/index.html
  24. 24 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-jewelcase/index.html
  25. 25 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-jewelcase/css3-jewelcase.zip
  26. 26 http://regner.us/blog
  27. 27 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-jewelcase/index.html
  28. 28 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-vicero/index.html
  29. 29 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-vicero/css3-vicero.zip
  30. 30 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-vicero/index.html
  31. 31 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-ipad-with-shadow/index.html
  32. 32 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-ipad-with-shadow/css3-ipad-with-shadow.zip
  33. 33 http://www.cranberryjams.com
  34. 34 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-ipad-with-shadow/index.html
  35. 35 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-time-machine/index.html
  36. 36 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-time-machine/css3-time-machine.zip
  37. 37 http://www.nbwebdevelopment.com
  38. 38 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-time-machine/index.html
  39. 39 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-css-effects/index.html
  40. 40 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-css-effects/css3-css-effects.zip
  41. 41 http://www.yoheishimomae.com
  42. 42 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-css-effects/index.html
  43. 43 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-book/index.html
  44. 44 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-book/css3-book.zip
  45. 45 http://www.alistapart.com/articles/css3multicolumn/
  46. 46 http://www.arpia.be/2010/02/tutorial-multi-page-multi-column-web-pages/
  47. 47 http://www.arpia.be
  48. 48 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-book/index.html
  49. 49 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rocket-man/index.html
  50. 50 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rocket-man/css3-rocket-man.zip
  51. 51 http://www.jamesvec.com
  52. 52 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rocket-man/index.html
  53. 53 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-wii-ish-idea/index.html
  54. 54 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-wii-ish-idea/css3-wii-ish-idea.zip
  55. 55 http://www.minaturecookie.com/
  56. 56 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-wii-ish-idea/index.html
  57. 57 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-video-css/index.html
  58. 58 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-video-css/css3-video-css.zip
  59. 59 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-video-css/index.html
  60. 60 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-megans-radius-font/index.html
  61. 61 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-megans-radius-font/css3-megans-radius-font.zip
  62. 62 http://www.megbee.com
  63. 63 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-megans-radius-font/index.html
  64. 64 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-monsters-dragon/index.html
  65. 65 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-monsters-dragon/css3-monsters-dragon.zip
  66. 66 http://web.virtuousquare.fr/
  67. 67 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-monsters-dragon/index.html
  68. 68 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-imac/index.html
  69. 69 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-imac/css3-imac.zip
  70. 70 http://www.99lime.com
  71. 71 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-imac/index.html
  72. 72 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-a-book-full/index.html
  73. 73 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-a-book-full/css3-a-book-full.zip
  74. 74 http://kzeni.com
  75. 75 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-a-book-full/index.html
  76. 76 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-camera/index.html
  77. 77 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-camera/css3-camera.zip
  78. 78 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-camera/index.html
  79. 79 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-under-the-sea-in-css3/index.html
  80. 80 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-under-the-sea-in-css3/css3-under-the-sea-in-css3.zip
  81. 81 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-under-the-sea-in-css3/index.html
  82. 82 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-90s/index.html
  83. 83 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-90s/css3-90s.zip
  84. 84 http://abduzeedo.com
  85. 85 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-90s/index.html
  86. 86 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-magazine/index.html
  87. 87 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-magazine/css3-magazine.zip
  88. 88 http://arrowconcept.com
  89. 89 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-magazine/index.html
  90. 90 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-lightsaber/index.html
  91. 91 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-lightsaber/css3-lightsaber.zip
  92. 92 http://www.thedesigngnome.com/tutorials/how-to-build-a-lightsaber-with-css/
  93. 93 http://www.thedesigngnome.com
  94. 94 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-lightsaber/index.html
  95. 95 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-smashing-magazine-logo/index.html
  96. 96 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-smashing-magazine-logo/css3-smashing-magazine-logo.zip
  97. 97 http://original-copy.deviantart.com
  98. 98 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-smashing-magazine-logo/index.html
  99. 99 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-expert-cook/index.html
  100. 100 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-expert-cook/css3-expert-cook.zip
  101. 101 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-expert-cook/index.html
  102. 102 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-visoki-decani-temple/index.html
  103. 103 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-visoki-decani-temple/css3-visoki-decani-temple.zip
  104. 104 http://www.miloszekovic.com
  105. 105 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-visoki-decani-temple/index.html
  106. 106 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-pseudo-3d-radial-buttons/index.html
  107. 107 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-pseudo-3d-radial-buttons/css3-pseudo-3d-radial-buttons.zip
  108. 108 http://www.cosmos-web.ru
  109. 109 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-pseudo-3d-radial-buttons/index.html
  110. 110 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-moving-stick-figure/index.html
  111. 111 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-moving-stick-figure/css3-moving-stick-figure.zip
  112. 112 http://jeffri.net
  113. 113 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-moving-stick-figure/index.html
  114. 114 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-image-less-warp-shadows/index.html
  115. 115 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-image-less-warp-shadows/css3-image-less-warp-shadows.zip
  116. 116 http://www.tyler-dawson.com
  117. 117 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-image-less-warp-shadows/index.html
  118. 118 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rabbit/index.html
  119. 119 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rabbit/css3-rabbit.zip
  120. 120 http://www.blackspotradish.com
  121. 121 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rabbit/index.html
  122. 122 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-the-future-is-here/index.html
  123. 123 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-the-future-is-here/css3-the-future-is-here.zip
  124. 124 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-the-future-is-here/index.html
  125. 125 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-the-future-is-here/index.html
  126. 126 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-the-future-is-here/index.html
  127. 127 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rainbow-template/index.html
  128. 128 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rainbow-template/css3-rainbow-template.zip
  129. 129 http://anggunpribadi.tumblr.com
  130. 130 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-rainbow-template/index.html
  131. 131 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-totally-fresh/index.html
  132. 132 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-totally-fresh/css3-totally-fresh.zip
  133. 133 http://ChrisNager.com
  134. 134 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-totally-fresh/index.html
  135. 135 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-nav-trick/index.html
  136. 136 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-nav-trick/css3-nav-trick.zip
  137. 137 http://www.carbon.utah.gov/volunteer/history.php
  138. 138 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-cant-skate-dont-care/index.html
  139. 139 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-cant-skate-dont-care/css3-cant-skate-dont-care.zip
  140. 140 http://josh.zype.co.nz
  141. 141 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-3d-tribute/index.html
  142. 142 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-3d-tribute/css3-3d-tribute.zip
  143. 143 http://mail.cnc.bc.ca/blogs/beardwoodw/
  144. 144 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-loading-bar/index.html
  145. 145 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-loading-bar/css3-loading-bar.zip
  146. 146 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-personal-portfolio/index.html
  147. 147 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-personal-portfolio/css3-personal-portfolio.zip
  148. 148 http://www.sikandar.co.in
  149. 149 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-taped-off-coming-soon/index.html
  150. 150 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-taped-off-coming-soon/css3-taped-off-coming-soon.zip
  151. 151 http://dercoledesign.com/
  152. 152 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-smashing-css3-effects/index.html
  153. 153 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-smashing-css3-effects/css3-smashing-css3-effects.zip
  154. 154 http://www.tamer-aydin.com
  155. 155 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-this-menu-item/index.html
  156. 156 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-this-menu-item/css3-this-menu-item.zip
  157. 157 http://www.civicnet.com.au
  158. 158 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-call-of-duty-style/index.html
  159. 159 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-call-of-duty-style/css3-call-of-duty-style.zip
  160. 160 http://www.thirderror.com
  161. 161 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-image-less-3d-menu/index.html
  162. 162 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-image-less-3d-menu/css3-image-less-3d-menu.zip
  163. 163 http://rebzmedia.com
  164. 164 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-dreamer-blog/index.html
  165. 165 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-dreamer-blog/css3-dreamer-blog.zip
  166. 166 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-alien-menu/index.html
  167. 167 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-alien-menu/css3-alien-menu.zip
  168. 168 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-osx-like-dock/index.html
  169. 169 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-osx-like-dock/css3-osx-like-dock.zip
  170. 170 http://ltsp.ekami.fi/OlliGron
  171. 171 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-automato/index.html
  172. 172 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-automato/css3-automato.zip
  173. 173 http://www.flickr.com/photos/haidee
  174. 174 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-super-mario-3d-animated/index.html
  175. 175 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-super-mario-3d-animated/css3-super-mario-3d-animated.zip
  176. 176 http://www.cordobo.com
  177. 177 http://coding.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-super-mario-3d-animated/index.html

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Thanks for publishing my work. Loved the contest! Let’s do more of them!

  2. 2

    Vitaly Friedman

    July 12, 2010 6:11 am

    Certainly, we already have some nice ideas ;-)

  3. 3

    Congrats to the winners!

  4. 4

    Refreshing and a welcome change.

  5. 5

    It’s nice to see such a variety of techniques! Some of these are already useful and some are really nice proof-of-concepts or just plain fun. Thanks again for the contest and featuring my submission!

  6. 6

    These are great!

  7. 7

    I had a really good time with this, can’t wait for the next one. Thanks for showing my design!

  8. 8

    Very cool and congrats to the winners – but I just don’t get it?! 100% unusable in IE right? Isn’t it going to be years before this is practical?

  9. 9

    Javier Román Cortés

    July 12, 2010 6:59 am

    Very nice experiments here, congrats to the winners and all the contestants.

    By other hand, please note that the background video in “CSS3 Video CSS” was courtesy of mrdoob/xplsv.

  10. 10

    Not everything must be practical.

  11. 11

    Frédéric Hewitt

    July 12, 2010 7:45 am

    The pyramidal graph of the winner is a shame. Never use pyramid for representing distribution percentage. The surface of IE represent only ~36% of the total triangle. On other side, the space occupied by Opera is a far too much big (around 5.2%). It’s a “visual lie”.

    In general rule, when someone use pyramidal graph, it’s because he want to give a false impression (here, the illusion that IE have a smaller share than the reality).

    But I like the pie chart. Good work for this one.

  12. 12

    In IE 8 the pie chart is just a big blue square and the triangle is gone, so it evens out. Its actually pretty cool to view some of these in IE. Like the monsters are all blocky.

  13. 13

    Great work… So happy to see such a great bunch of experiments.

  14. 14

    Kudos to the winners!

    And for those of you craving to start using CSS3 and chained to supporting IE – my husband just released a handy tool to help with that. http://css3pie.com/ – it’s a beta, so please test it and give us feedback!

  15. 15

    Congratulations to all the winners!
    And wow, thank you for choosing mine! I’ve never thought I will get so far! Thank you :D

  16. 16

    Maybe if designers stopped making “CSS3 dragons” and worked on real websites, they wouldn’t complain about being poor.

    Sick of seeing this stuff already. The only thing that you might actually use are the charts, those make sense. No one is going to use CSS3 to create graphics

  17. 17

    wow nice work!! thanks i should learn it now..

  18. 18

    Woow, very nice & beautiful. Thank you very much all the designers and smashing magazine.

    After we learnt and mixed all the designs and techniques in our brain, surely we will get more inspirations and new ways to do with CSS3. :-)

  19. 19

    whats the use if nothing works in ie.

  20. 20

    That is the point. IE is not the greatest neither the best example of Internet Browsers, it is the poorest browser there is, however, IE9 (will), or should I say might, support that.

  21. 21

    Awesome stuff! This was really fun, and congrats to all the winners :)

  22. 22

    True, im just thinking in practical terms and what I can use in a professional setting

  23. 23

    This is awesome!

    And why all the complaints? Ever heard of having fun? All of these were very fun and cool!

    Way to go guys! This was very inspiring!

  24. 24

    Great job, everyone.

    I found it interesting that some of the stuff doesn’t work properly in Chrome. (For example, the “Totally Fresh” logo.)

  25. 25

    Now were talkin!

  26. 26

    I am very frightened. Is this the future of the web?

  27. 27

    Wow, just wow. Impressive work. Now I feel little.

  28. 28

    Great work shown by designers. CSS3 Rocks!

  29. 29

    thats great work !!

  30. 30

    I am usually against this kind of thing where people are saying “look what I did, and it only took me 67 hours!” But I think some people are missing the entire point. This is what the contest was about. This wasn’t about something you would do for a client, but about what CAN be done with CSS3. It had nothing to do with being practical. This is one of the few times where I can say “These are insane. Right on!”

    Congrats to ALL who participated.

  31. 31

    Sequoia McDowell

    July 12, 2010 11:05 am

    I hate to be such a fuddy duddy but…
    This wasn’t a css3 contest, it was a *webkit* css contest. Some of these look right *exclusively* in the latest version of Safari, which has only 5% market share *across all versions,* so you’re talking about maybe 3% of people who can even see some of these correctly.

    I know all this stuff is done just for fun and one shouldn’t be a slave to IE, but dumping firefox, opera as well? I for one am not excited about seeing “this site best viewed in x” all over the place once again. I’d like to *choose* which modern, standards compliant browser I use, and a site that only works in Safari 5 doesn’t allow that choice.

    Anyway I know people are just having fun, and this stuff isn’t for production environments. I’d just like to suggest that the ability to style in a cross-browser compatible way is what sets apart truly great css designers/developers, and, IE notwithstanding, cross browser compatibility *is* a part of styling with CSS. The fact that a design that works fully in <15% of browsers wins a "CSS" competition is a hard pill to swallow for me.

    I say either require at least a bit of cross-browser compatibility, or just call it a "safari css" competition.

  32. 32

    Is the curved scrollbar only displayed in Safari and Chrome?

  33. 33

    Thanks smashing magazine! I had a fun time making my entry (css imac) and learned a bit along the way. Congrats to the winners and all the contestants!

  34. 34

    To the winners…awesome stuff. To SM, not clear what criteria was used to choose the other entries. Many work only in Mozilla or only in Webkit, not both. The rules were to make sure it looks right in modern browsers. I mean if we don’t put the effort into making it look right for Firefox/Safari/Chrome/Opera then it’s only an exercise in vendor-specific prefixes. Just following your rules. Still a lot of great talent out there!

  35. 35

    Thanks Smashing Mag, its great to see all the other entries. Congrats to all who entered. I hope to see more contests like this. What a great way to learn new techniques.

  36. 36

    Thx for the nice contest and great works here S.M.
    :D

  37. 37

    which works doesn’t work with Mozilla?

  38. 38

    WTF?????
    “Best viewed in Webkit browsers.”?????????????

  39. 39

    I just wanted to mention that I really enjoyed simurai’s “CSS3D” stereoscopic 3D effect (3rd place winner) Very Cool & Creative, congratulations simurai.

  40. 40

    I guess my question is why? Why go through all that trouble when you could do it with images.. ? nobody except hard core standards freaks would even notice. Tables for life <3

  41. 41

    Oh, great! Can’t believe that my submission is also listed. :D

    Thanks guys. Congrats for the winner!

  42. 42

    FYI the 3D effect name is anaglyph, not stereoscopic.

  43. 43

    it’s really fun…., thanks.

  44. 44

    Wow. Impressive stuff. Congrats to all the winners!

  45. 45

    Nguyen Phung Hung

    July 12, 2010 7:31 pm

    There are many good source code, that I need to learn. Thanks you very much!

  46. 46

    But the Maximum Users around world the are IE, How can we deny these ?

  47. 47

    CSS3 brains started experimenting
    CSS3 on top o/_

  48. 48
  49. 49

    thanks the article!

  50. 50

    Congratulations to winner, some of the works is amazing.

    Anyway,
    “CSS3 Smashing Magazine Logo” preview is not uploaded properly.

  51. 51

    this is the real winner: demos.jeffbatterton.com/iphone-css3/

  52. 52

    there should be a way to lower the 80% processor usage on a mid end PC
    still hope this caches up in IE and FF(animations).

    it will simplify my work thus i have more time developing flash.

  53. 53

    I understand this is experimental and only needs to work in some browsers. But some semantic HTML would be nice.

    Being creative while using web standards, now that’s a challenge.

  54. 54

    pain in the butt, you want to say.

  55. 55

    CSS3 Rockzzzzzzzz!!

  56. 56

    Love it. Oh, and Webkit is used by a number of mobile browsers too – and they have a large share of the market (iPhone, Android to name a couple). Rock it!

  57. 57

    Thanks for posting my design. I had a lotta fun doing it.

  58. 58

    a few of these don’t render correctly in FF 3.6. I thought that was part of the criteria that they work in modern browsers?

  59. 59

    “what can be achieved with pure CSS3 and a bit of creative thinking.”

    -webkit-animation-* is NOT “pure CSS3.”
    jQuery etc. is NOT… why should this even need mentioning? Can I set up a wordpress site and throw some CSS gradients on it and submit it to your contest? A blog platform in “pure CSS3,” amazing!

  60. 60

    Fantastic CSS3 !!

  61. 61

    Cool, I never thought they would add my submission to this post. There are so much other great submissions! I would love to see more of these contests.

  62. 62

    Ha ha. Awesome.

  63. 63

    Some people just have to correct everything…

  64. 64

    Which is cool.

  65. 65

    Once employers start requiring you to create graphics and animations with CSS, I’m going to shoot myself.

  66. 66

    awesome….i like CSS3…….

  67. 67

    Amazing work! Wow… I love it.

    Wish I’d known about this contest… maybe I could have won 2nd place with my Isocube!

  68. 68

    Video CSS kills Safari 5 win,
    Rubik’s cube lags Opera for some weird reason.

  69. 69

    the last time i checked, firefox and safari were free downloads.

  70. 70

    there is a huge difference between both. Just saying.

  71. 71

    most of them dont even work. what a garbage.

  72. 72

    Okay to all the haters, this was an amazing contest idea from Smashing magazine! Amazing. Because this was just to see what could be done with css3 . The fact that not all of the css3 examples work in every browser is only a statement that not all browsers support all of the features yet. Stop hating on everyone just enjoy the fun stuff that comes out, yes it doesn’t work in all browsers but thats because not all of the browsers support that same thing. Amazing contest Smashing Magazine! You should do more of the same thing because I truly believe that pushing the envelope is how new things get done. Who cares if it isn’t “Standards Compliant” , yes for client projects it does need to be standards compliant but this is for fun! stop hating.

  73. 73

    Awesome………….

  74. 74

    Andrew S. Roberts

    July 25, 2010 8:25 pm

    Awesome work everyone! :D

  75. 75
  76. 76

    I created an apple-style aluminum keyboard with css3, check it out!
    CSS Keyboard

  77. 77

    Awesome CSS3 work … Its a very good work to learn the css3 .

    Thanks a lot smashing team.

  78. 78

    A very good css3 design: http://t3kila.com/

  79. 79

    very useful article!thinks autor!

  80. 80

    This is really on the list of improved articles or blog posts of those who We have read more this subject as of late. Wonderful function.

  81. 81

    This was a nice contest showcase, thanks for all the info and keep it up!

↑ Back to top