If you read WebDesignTuts+ often, you'll probably have seen many references to ThemeForest, our marketplace for web templates and themes. However, there's a also a chance you've visited CodeCanyon, the sister marketplace to ThemeForest which retails code snippets and plugins. CodeCanyon is a pretty great resource full of useful, interesting and, well, kick-ass files for web development that might be an untapped resource for you.
CodeCanyon covers a wide range of different categories, from PHP scripts to WordPress plugins to code for mobile apps. Today, we're going to take a look at two specific categories, HTML5 and CSS, and some of the good-looking code snippets they contain. If you've got any extra favorites from CodeCanyon, drop some links in the comments!
Just a note before we get started, all prices here assume you are using prepaid credits. If you feel like only buying one or two, and don't want to invest in prepaid credits, please add $2 to the price quoted. Additionally, purchase counts are correct at time of writing.
Git CSS3 Buttons
We're going to kick off our roundup with some 100% CSS buttons that look great. These buttons are aptly named since they are styled similarly to the code repository GitHub. The file advertises "easy classes", has a detailed help file, and comes in at the low price of just $2. With 88 purchases, these buttons have the highest rating in the entire CSS category with a full five stars.
CSS3 Accordions
It's always great to write roundups, because you find some pretty great stuff. One example of this is CSS3 Accordions, a pack of pure-CSS horizontal and vertical accordions in four colors. This file also has a five-star rating and a $4 price tag, providing support for Firefox versions all the way back to Firefox 2, and Internet Explorer back to IE6 (and Opera, Safari and Chrome, of course).
Simple HTML5 Audio Player
This file is a simple audio player powered by HTML5 which plays back MP3 or OGG files in all major browsers. With setup advertised as completed in less than 3 minutes, and whose javascript file weighs in at only 5KB, this $6 file is pretty cool.
If you get the chance, have a play about with the live demo to appreciate the thoughtful design and the saving of your volume state across multiple settings.
- Should you want to work with playlists versus single files, check out MusicBox as an alternative.
CSS3 HipHop
This file is a pretty awesome CSS3 menu featuring large icons that "HipHop" when hovered. It's apparently easy to implement, and can be limited to displaying the jumping animation or only dimming non-hovered menu items should you want.
As to where you use it, the menu is an awesome piece of code to use on portfolio sites, as a product selector or as a main hub to link to subsites. At only $2, it's an awesome deal and I'm probably going to buy it myself once I've finished writing this article!
CSS3 Image Hover Effects
Before I wrote for Tuts+, I originally planned to publish some files on the marketplaces, with one of my first ideas being a bunch of image hover effects. While that idea never came to fruition (I was too busy writing about form validation), Pixelworkshop has published an awesome file in the meantime. The file features 17 distinct image hover effects for $5, including image rotations, overlays, ribbons and other awesome effects. Be sure to check out the video preview on this one!
- Alternatively, check out the $3 HoverMe, another collection of CSS3 image hover effects.
Docklr CSS
Although I can't see a an application I could use this file for, the effect it generates is pretty cool. Docklr CSS essentially replicates the functionality (i.e. magnification) of the dock in Mac OS X but within a browser window. Docklr uses CSS transitions to replicate the animations from OS X such as bouncing icons and magnification. For just $4, it's a steal!
Notification Boxes
Notification Boxes is essentially a bunch of notification boxes, built with CSS, that look great. They're well designed, but also feature some nice animations (with jQuery) when they are dismissed on click. Plus, Notification Boxes features support for jQuery cookies meaning that when a notification is dismissed, it doesn't reappear when you refresh or revisit the page.
Notification Boxes has a nice purchase count of 233, and sells for just $2.
- Be sure to also check out "NoticeUI" for $2, another nice set of CSS3 notification styles.
- Elitepack CSS3 Notification Boxes is another great example you should look at.
Pricer Pricing Grid
Pricer is one of several CSS-made pricing grids on CodeCanyon, and arguably one of the best. Pricer uses just pure CSS to create a pricing comparison grid for comparing, say, different plans for a web host or multiple levels of membership. Although there's no video preview, the listing promises CSS-powered animations in supported browsers (Safari 4+, Chrome 4+, Opera 10.5+, Firefox 4+) with "graceful degrading" in older browsers.
With 13 different color schemes, Pricer clocks in with a minimal $3 price tag.
- Alternative, take a look at CSS3 Web Pricing Tables Pack, a very nice alternative.
- If not that, then check out the $4 Griddler Pricing Grid I which is perhaps the best designed pricing grid on CodeCanyon, or it's successor, Griddler Pricing Grid II.
CSS3 Mega Drop Down Menu
I've stayed away from mentioning drop down menus to get to the sales-monster that is "CSS3 Mega Drop Down Menu" from Pixelworkshop (the creator of the previously mentioned "CSS3 Image Hover Effects").
With 3836 sales, this file is the most purchased across the entire CodeCanyon marketplace. Basically, it is a valid CSS3-powered drop down many with cross browser support in nine colors. The file has a ton of options for customizability, so it's definitely something to take a look at, although you might feel it necessary to add your own CSS in to refine the design a bit.
- An alternative is the $3 "Mega Dropdown Enhanced" file that probably ups "CSS3 Mega Drop Down Menu" in the style department.
- Alternatively, check out Alan Monroig's Sleek Design - Pure CSS nav.
CSS3 Shadow Pack
This $4 file features eleven CSS-generation shadows, including warp, hover and fold ones that look pretty awesome. It's one of those simple files that's always useful to have in your arsenal, and it hardly costs a dime to do so.
CSS Pagination Pack
Pagination can sometimes be undervalued, but it actually provides essential navigation to a blog. "CSS Pagination Pack" is a pack of CSS-powered pagination elements in seven colors.
This $2 pagination is generated with semantic, simple-to-understand code. The file ships with full documentation if you do need any help, but the simple usage example provided in the item description is all you really need.
CSS3 Bar Graphs
It's hard to ignore the sheer awesomeness of this file which generates very nice bar graphs with pure CSS and HTML, complete with hover states. The resulting graphs certainly aren't inferior considering they don't use any images. Frankly, $3 is a bargain for such a kick-ass file!
HTML5 Video Gallery with Live Playlist
HTML5 Video Gallery with Live Playlist is an aesthetically-pleasing, well-animated HTML5 video player that also contains a playlist component. The file works with OGV and MP4 files and even contains Flash fallback for browsers that don't support HTML5 video. I can confirm that the file works seamlessly on an iPad too!
HTML5 Video Gallery with Live Playlist costs $8 from CodeCanyon.
Elitepack Classic CSS3 Tags
Elitepack Classic CSS3 Tags is a pack of well-designed styles for post tags, compatible across browsers. Coming in several different color schemes, with hover states and a semantic implementation, the file is pretty nice.
Elitepack Classic CSS3 Tags is tagged (no pun intended!) with just a $3 price.
Wrap-up
As you can see, CodeCanyon contains some pretty cool CSS and HTML5-powered code files that might work well for a current or future project. However, this is certainly not the limit of what CodeCanyon offers, so be sure to browse its archives.
If you have any other favorite CodeCanyon files, be sure to share them in the comments!
