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 Demo – Download 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.