Are you a GitHub fan? We all know that GitHub is the perfect place to store repositories of open source code. GitHub seems to understand that most repo sites are usually boring so they’ve spiced their site up with some catchy CSS and great JavaScript features. One tiny piece of the GitHub design David Walsh loves are the basic buttons.
David Walsh has written a tutorial: Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript, in order to teach us how to create our own GitHub-style buttons with a bit of HTML, CSS, and JavaScript.
Requirements: Dojo, Mootools or jQuery Framework
Demo: http://davidwalsh.name/dw-content/github-button.php
License: License Free
The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers. You can use them on any non-commercial or commercial project.
You don’t need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. The Google Font API is compatible with Google Chrome 4.249.4+, Firefox 3.5+, Safari 3.1+ andIE 6+. However, The Google Font API is not currently supported on iPhone, iPad, iPod, or Android.
Requirements: –
Demo: http://code.google.com/webfonts
License: Open Source License
Are you sick of your type looking plain and boring? Many OpenType fonts have alternate characters built into them that can transform your type into a beautiful piece of art. By using these alternate characters you can add things like flourishes and flair to your type with ease.
Some type faces have alternate characters that can help out with legibility at smaller sizes. Even some handwritten fonts have alternate characters to change the style of a characters to make it seem more handwritten. In this article: Taking Type to the Next Level with Alternate Characters, we will take a deep dive into using alternate characters.
Source: Taking Type to the Next Level with Alternate Characters
Project Icons is a pack of 130 icons and 3 icon badges. These icons are 32px only. They are available in png, ico, icns and pasted icons. The badges are available in png only. These icons are licensed under a Creative Commons Attribution 3.0 license.
Bogdan Mihaiciuc is trying to update this set often, so if you want to be notified of future updates, you can follow him on Twitter.
Requirements: –
Demo: http://bogo-d.deviantart.com/art/Project-Icons…
License: Creative Commons License
Here are 100 fully scalable pictograms/icons free to download. It will surely help you declutter your visual space and communicate your message, the right way. once they’re in there, you’ll love their simplicity, while at the same time improving project’s usability.
Use them in your online, print, mobile and software applications. They will work good even for signs in real world around your street, campus, resort or even city: possibilities are unlimited. Best of all, whole set is free to download and use it in accordance with license agreement. No watermarks, no limitations: available in all major, industry standard scalable vector formats.
Requirements: –
Demo: http://pictoico.com/
License: Creative Commons License
When we are designing E-Commerce sites, we usually need some payment icons. So that we can clearly tell our clients which payment methods we accept.
Web Icon Set is very kind to release a set of Payment Icon Set for free. Payment Icon Set includes VISA Card, Master Card, American Express, Cirrus, PayPal, Cash Payment, Gold Coin, Gold Coin Stacks, Secure Payment, Shopping Cart. They are free for both personal and commercial projects.
Requirements: –
Demo: http://www.webiconset.com/payment-icon-set/
License: License Free
0to255 is a simple tool that helps web designers find lighter and darker colors based on any color. 0to255 cures your color manipulation woes. It’s fun, simple, and a huge time-saver.
Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.
Source: http://0to255.com/
How to Create a Realistic Looking Button with CSS3? The whole idea is to use a combination of subtle effects to create a three dimensional object. The idea is that: The button is set into the canvas. The texture of the button is different from the canvas and the surface is slightly raised. And the text of the button is pressed into it.
By going into the detail you can use these techniques in your designs. Think about your designs in 3D. It is less about using the specific border effects and more about using them together to achieve an overall look.
Requirements: CSS3
Demo: http://blog.anomalyinnovations.com/2010/03/creating-a-realistic…
License: License Free
The Social Buzz Icon Pack contains 12 icons for some of the most popular social networks out there. The set includes Bebo, Delicious, Digg, Facebook, Flickr, Google Buzz, Linked In, MySpace, Reddit, Stumble Upon, Technorati and Twitter Icon. This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution.
Requirements: –
Demo: http://www.tutorial9.net/resources/social-buzz-icon-pack/
License: License Free
Geaturecons are Vector based icons created to aid in the design, development, implementation and promotion of multi-touch interfaces. These icons will aid in the creation of wire-frame documents, digital help files and printed documentation. You can also use Geaturecons inside of your applications in order to demonstrate to users how to complete actions or prompt them to interact with an application when they approach it.
Swap out symbols to create your own icons, because these are scalable vector shapes, you can scale them to any size and alter them in any way you wish. Use your favorite vector graphics application to edit.
Requirements: –
Demo: http://gesturecons.com/
License: Creative Commons License
