Custom HTML5/CSS3 Solid User Interface Kit Freebie

I have been really focusing on custom CSS3 effects for much of 2012 and have built some incredible designs. After accruing a large knowledgebase of techniques I have put together this small UI kit for free download.

Live DemoDownload Source Code

This includes no PSD file as the page elements are created with 100% CSS properties. Some of the background gradients and CSS3 transform/transition effects do not render properly in all versions of Internet Explorer. I’ve gone through a great deal of problem solving to get all the elements working exactly the same in all major browsers (Google Chrome, Firefox, Opera, Safari).

For older versions of Internet Explorer I’ve included some hacks to generate BG gradients and the dropdown navigation items. Overall you shouldn’t have a problem integrating these pieces into your layout. All the styles are cataloged in a neat and organized fashion with CSS comments.

I also want to give a shoutout to Dmitriy Kubyshkin for his amazing article on cross-browser CSS3 checkboxes. Using his style it’s possible to create many custom input fields, including radio buttons and select menus. The check marks are created using CSS3 transform properties and will hopefully gain more traction as IE develops their support.

In total the kit includes a full imageless navigation bar with single-layer dropdown support. Also a series of buttons both standard rectangles and pill-style ovals. Along with the buttons I’ve attached related form inputs with dynamic transition effects. Feel free to download a copy of my code and implement these elements for any projects both personal and commercial.

About the Author:

Jake is a freelance writer and frontend web developer. He can be found writing in many blogs on topics such as mobile interfaces, freelancing, jQuery, and Objective-C. Check out his other articles throughout Google and follow his tweets @jakerocheleau. Jake’s Google+ profile.

Published November 1st, 2012 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

7 Responses

Comments are now closed on this post.

  • aule, November 1, 2012

    Have you compared doing this in MIT Curl ( http://www.curl.com ) ? With Smalltalk Seaside ?

  • Pix Albany Web Design, November 2, 2012

    Great work Jake! These really look fantastic! Thanks for posting… will definitely use!

  • Julia Howard, November 2, 2012

    Thank you so much! A real time-saver.

  • Mark Pritchard, November 3, 2012

    What to say?? You have posted again a great article. Thanks again.

  • Ram, November 3, 2012

    Good work! looks nice. Thought some JS also added to validate form. Yes it’s time saver. Thanks for sharing.

  • Vladimir J, November 7, 2012

    Very useful! Thank you.

  • Dick Raney, February 16, 2013

    The checkboxes don’t work for me in IE8 or IE9 in standards mode.