You are free to use and edit the icons for any personal or commercial work without credit, however a linkback or credit to Gemicon / Torqois would be very appreciated. You may NOT REDISTRIBUTE OR SELL Gemicon icon set on any other website or source.

Author: Turqois
Homepage: http://gemicon.net/

CSS3 PIE is implemented as an attached behavior and once the behavior is attached, it looks for any of the supported CSS3 properties which might be attached to the target element, parses those properties, and renders them on the page. In addition to the traditional PIE.htc behavior, there’s also a PIE.js which is a pure JavaScript version of CSS3 PIE. While the .htc behavior is still the recommended approach for most users, the JavaScript version has some advantages that may be a better fit for some users.

CSS3 PIE current adds full or partial support to IE 6-8 for the following CSS3 properties:

• border-radius
• box-shadow
• border-image
• CSS3 Backgrounds (-pie-background)
• Gradients
• RGBA Color Values

In addition, CSS3 CPIE adds support for border-image and linear-gradient to IE 9, which already supports the other features natively.

Author: Jason Johnston
Homepage: http://css3pie.com/
Demo: http://css3pie.com/demos/
Github: https://github.com/lojjic/PIE
License: Apache License Version 2.0 and General Public License (GPL) Version 2.

Polaris UI Pack also comes with free icon set (Linecons) that contains 48 fully scalable vector icons with outline styles. Linecons icon set are available in web font, AI, PSD, PNG, SVG and PDF formats.

Author: Designmodo
Homepage: http://designmodo.com/polaris-free/

Response JS’s most powerful feature is its breakpoint sets. Breakpoint sets allow the ability to serve different content via breakpoint-based HTML5 data attributes. Breakpoints can be based on width | device-width | height | device-height | device-pixel-ratio or on custom props. Designers can use the default breakpoints or specify custom breakpoints to create exactly data attributes they need.

Author: Ryan Van Etten
Homepage: http://responsejs.com/
Github: https://github.com/ryanve/response.js
License: MIT License

EasyTabs allows complete customization of appearance, layout, and style via CSS. It provides smooth transitions between panels when tab is selected. It supports nested tabs, can loads AJAX content (which also supports caching of AJAX content), specify initial or default tab when page first loads, add next / previous navigation and can have multiple tabs instances on one page. It can also support back and forward button in browsers by including either the jQuery HashChange plugin or the jQuery Address plugin.

EasyTabs is so flexible and can be configured by passing in a hash of options when you instantiate it on a container. EasyTabs tabs can be automatically cycle at a specified interval, which makes it possible to use this tab plugin as a jQuery slider too.

Author: Steve Schwartz
Homepage: http://os.alfajango.com/easytabs/
Github: https://github.com/JangoSteve/jQuery-EasyTabs
License: MIT and GPL Licenses

It is very customizable with lots of styling options such as the theme, orientation, height & width (set auto for responsive layout), rounded and list style type. It has also some nice functional options including time between slide cycles, automatically cycle through slides, slide animation speed, custom easing function, link slides via hash and a lot more.

Author: Luch Klooster
Demo: http://members.ziggo.nl/luch.klooster/
Github: https://github.com/Luch/conventAccordion
License: MIT and GPL Licenses

You can download Animate.css either as a whole or create a custom download that only includes the animation effects you need. When you create a custom build, try hovering over each animation label and it will show you exactly what the animation does so you can decide whether or not to include it. If you choose to download the whole thing, you’ll get one big CSS file containing all of the animation classes and a folder full of individual CSS animation files, one CSS file for every animation.

CSS3 animation doesn’t work in IE9 and below so you won’t see Animate.css effects on these browsers. Safari, Chrome, Firefox, Opera and even some mobile browsers like those of Android and iOS will work fine.

Author: Dan Eden
Homepage: http://daneden.me/animate/
Github: https://github.com/daneden/animate.css
License: ☺ Licence

bxSlider is fully themed but if you want bare-bones slider, you can easily opt out using its default theme by excluding the packaged CSS file.

bxSlider can supports multiple slider in a single page. You can use thumbnails as a pagination for slides and it also allows custom “next / prev” control selectors. Aside from these, bxSlider has a packed and long list of features. To know more about its advanced customization, you may look at the slider examples and its tons of configuration options.

Author: Steven Wanderski
Homepage: http://bxslider.com/
Github: https://github.com/wandoledzep/bxslider-4
License: WTFPL

HTML KickStart includes common UI elements such as responsive menus, responsive slideshow using BXSlider, CSS3 buttons, flexible & responsive grids / columns, image styles & galleries, tooltips, tabs, icons & glyphs, typography, forms, lists, tables, breadcrumbs, horizontal rules, code formatting and few helper CSS classes.

Author: Joshua Gatcke
Homepage: http://www.99lime.com/
Github: https://github.com/joshuagatcke/HTML-KickStart
License: MIT License

Basically, you need to create multiple image frames for an image you need to have a 360 degrees view. Then in the plugin’s options, define the path to these image frames, the total number of frames, start & end frames and Three Sixty Slider plugin will take care of the rest for providing the illusion of a 360 degrees view with smooth animations. You don’t need to hard-code a lot of <img> tags in your HTML because it will figure out the multiple image frames based on the options.

Three Sixty Slider has a graceful loading state – that is, it will only show and spin once all the image frames are loaded. You can also define the loading or spinner selector to be used while the image frames are still loaded. It has also a navigation option in which you can play/pause the frames that are spinning or rotate it left or right. Of course you can just use your mouse to drag and rotate the image.

Author: Gaurav Jassal
Homepage: http://creativeaura.github.com/threesixty-slider/
Github: https://github.com/creativeaura/threesixty-slider
License: MIT & GPL Licenses

We hand-picked and listed below 20 sleek, creative, clean, modern, and well designed PSD templates. Most of the PSD templates below are fully layered thus you can easily change them and adapt to your own liking.

Though all these PSD website templates are free, some of them does have few restrictions, i.e. selling them is not allowed. Be sure to read each of the template’s Licensing Terms & Conditions before downloading and using them.

• 1. Cloud Hosting PSD Template

  

• 2. MeteorApp PSD Template

  

• 3. Fresh App Free Website PSD

  

• 4. Redux Business Website Template Design

  

• 5. Ascend eCommerce Service PSD Template

  

• 6. Justeme PSD Template

  

• 7. Travler Free PSD Web Design

  

• 8. Gastronymous Free PSD Template

  

• 9. Run App PSD Website Template

  

• 10. Magnate: Professional Website PSD Template

  

• 11. Corked Screwer Free Website PSD Template

  

• 12. Orange Free PSD Website Template

  

• 13. AppCivilization Free PSD Template

  

• 14. Pump Free Website PSD Template

  

• 15. Light Landing Page PSD Design

  

• 16. Showcase Free Website PSD Template

  

• 17. ViewPort: Magazine Site PSD Template

  

• 18. Mode – Fresh and Modern Website Design PSD

  

• 19. iPhone App Sales Web Design

  

• 20. Landing Page PSD Design

  

Opera Mobile Emulator is the desktop version of Opera’s smartphone browser and is free to download. It makes testing responsive web designs much easier as it renders pages as close as you can get to how it would look on a real phone. The engine and user interface are identical to that of the Opera’s smartphone browser, but it integrates the useful keyboard shortcuts and command-line flags available to desktop programming.

When starting the Emulator, you can choose from a number of mobile devices (from Amazon Kindles to HTC phones to Samsung tablets), each one pre-configured with its specific resolution and pixel density. After clicking the “Launch” button, the Opera Mobile browser gets started with the chosen settings. You can manually resize the window if you would like to check how well the website responsiveness works and how different UI elements on it behave. For those not worried about resizing, there is a simple button to switch between landscape and portrait.

To know more about Opera Mobile Emulator’s capabilities, here’s a detailed article by Andreas Bovens on Developing Responsive Designs With Opera Mobile Emulator.

Homepage: http://www.opera.com/developer/tools/mobile/
License: Free

jKit allows you to extend it to include your own components, and style any component according to your taste using CSS. jKit also plays nicely with other jQuery plugins and JavaScript libaries while being cross-browser and cross platform compatible.

jKit has a lots of effects & components and each of of them have its own detailed documentation. Current UI components include Binding, Template, Background, Lightbox, Slideshow, Gallery, Tabs, Accordion, Carousel, Parallax, Ticker, Cycle, Animation, Zoom, Menu, Tooltip, Paginate, Sort, Filter, Form, Validate, Ajax, Chart, Scroll, Partially, Summary, Limit, Hide, Remove, Show, Showandhide, Loop, Random, Encode, Split, Live, Key, Replace, Fontsize, Swap and Lorem.

Homepage: http://jquery-jkit.com/
Github: https://github.com/FrediBach/jQuery-jKit/
License: MIT License

Responsive Boilerplate can adapt to any screen size, including fluid media; images and video and pre-configured with 4 breakpoints for the most common resolutions (320, 480, 768, 1024).

Included in the download package are the PSD Template, an HTML5 starting point file for fast development and two Sublime Text snippets for the CSS grid and the HTML file.

Homepage: http://responsiveboilerplate.com/
Live Demo: http://responsiveboilerplate.com/demo.html
Github: https://github.com/newaeonweb/responsiveboilerplate
License: MIT License

The look of your Tooltipsters can be easily changed by modifying the default Tooltipster theme. You also have the option to create and attach a brand new theme.

Tooltipster has many options that gives you a wide range of variables to tweak your tooltip. You can set your tooltip’s animation, delay, position and offsets, speed, trigger and lot more advanced options.

Homepage: http://calebjacob.com/tooltipster/
Live Demo: http://calebjacob.com/tooltipster/#demos
Github: https://github.com/iamceege/tooltipster

Pingdom Full Page Test tool examines all parts of a web page including file sizes, load times, and other details about every single element of a web page (HTML, CSS, JavaScript, images, etc.). It will automatically put together plenty of performance-related statistics for you based on the test result.

The “Performance Grade” results will show how your website conforms to performance best practices from Google Page Speed and list some great tips on how to speed up your website.

Full Page Test tool can also test from multiple locations to see how fast a website loads in Netherlands and USA (New York and Dallas, Texas).

Homepage: http://tools.pingdom.com/fpt/

Currently it has four online design applications: CSS Ribbon Generator, Form Builder, Icon Builder and CSS Button Generator.

Homepage: http://livetools.uiparade.com/index.html

PunyPNG uses several web optimization techniques to reduce the file sizes of your images. It first analyzes the content of your image and figures out the best image format to use.

Depending on the file, PunyPNG will automatically convert your GIF into a PNG format and then further compress that. For JPEGs, sometimes it’s better to make it a PNG, and other times it’s better to keep it as JPEG and use jpeg-tran to optimize it. PunyPNG makes all those decisions for you and ensures the best possible results.

PunyPNG requires Flash for uploading the images and it allows multiple (up to 5 files) image uploads of each file size no greater than 150KB.

Homepage: http://www.punypng.com/

Icons DB icons can be used freely in both personal and commercial projects with no attribution required, though they will always appreciate if you give credits for their work.

Homepage: http://www.iconsdb.com/

Edge Web Fonts service is powered by Typekit’s font serving platform and JavaScript libraries and it uses the same standards-based method of serving fonts and makes use of the same global font serving network for speed and stability.

To use these fonts, add a JavaScript tag to the <head> of your HTML, then reference its font-family name in your CSS.

Homepage: http://html.adobe.com/edge/webfonts/

CodeMirror works with language-specific modes. Modes are JavaScript programs that help color (and optionally indent) text written in a given language. CodeMirror comes with a wide range of modes including HTML mixed-mode, CSS, PHP, SQL, JavaScript, Python, Ruby, LESS, Sass, Java and a lot more.

CodeMirror supports auto-completion (XML), search/replace, code folding, split view, Mode overlays, Mode multiplexer, HTML editor with preview, auto-resizing editor, setting breakpoints, highlighting the current line, highlighting selection matches, theming, mixed font sizes, stand-alone highlighting, full-screen editing, Mode auto-changing, visible tabs, autoformatting of code and much more.

CodeMirror core library provides only the editor component, no accompanying buttons, auto-completion, or other IDE functionality but there’s a separate CodeMirror UI project and several add-ons included in the distribution for reusable implementations of extra features.

Homepage: http://codemirror.net/
Github: https://github.com/marijnh/CodeMirror

Oxwall enables users to create blogs, forums, wiki, groups & events; upload and share photos & videos; comment, tag and rate any kind of content; customize profile and privacy; collaborate & share files and many other features to build a complete social networking site.

Oxwall has a powerful Administration Panel to provide complete member and content management; content moderaton and ability to appoint moderators; flexible privacy and permissions management; custom statistics on different metrics a-la Google Analytics; pages, menus and custom content management; advertisement management and statistics; powerful appearance building tool; ability to install/upgrade plugins and an overwhelming set of site and plugin configuration tools.

Homepage: http://www.oxwall.org/
Demo: http://demo.oxwall.org/
License: Common Public Attribution License 1.0

Elusive Icons contains 270+ Bootstrap default icons, social icons and general use icons. When downloading Elusive Icons, you’ll also receive all the icons in .svg vector format so you can play with them, improve them and contribute them back on GitHub.

Homepage: http://aristeides.com/elusive-iconfont/
GitHub: https://github.com/aristath/elusive-iconfont
License: SIL – Open Font Licence

Take note though that Fresco’s responsive lightbox plugin is licensed under the terms of the Fresco License. The Light version may be used freely on non-commercial domains. A Pro version can be purchased for commercial use.

Homepage: http://www.frescojs.com/
License: Fresco License

ColorZilla’s Ultimate CSS Gradient Generator comes to the rescue. It lets you create a CSS gradient online with its Photoshop-like interface. The Ultimate CSS Gradient Generator will generate cross-browser CSS gradient code and support different orientation such as horizontal, vertical, diagonal and radial gradients.

Notable Features of ColorZilla’s Ultimate CSS Gradient Generator

• Cross-browser CSS gradient syntax
• Supports horizontal, vertical, diagonal and radial gradients
• Supports complex multi-stop gradients
• Opacity support with multiple opacity stops
• Supports hex, rgb, rgba, hsl, hsla color formats
• Support for full multi-stop gradients with IE9
• Adjust gradient by hue, saturation, lightness
• Sass output

Homepage: http://www.colorzilla.com/gradient-editor/

You may use Brankic1979′s 350 vector web icons for both personal and commercial use, which means this free icons can be used in any project without worrying about licensing. But you may NOT distribute the icon set elsewhere without Brankic1979′s consent (see official site for more Licensing information).

Homepage: http://brankic1979.com/icons/

You can link to certain tab on page A from page B via URL parameter and you can turn on tab persistence, so the most recently clicked tab is stored inside a cookie and remembered between page refresh.

Though this unobtrusive script is intended for tab interface implementation, two of its features:

1. turn on automatic tabs rotation and
2. add next/previous navigation

will also make this a slideshow or slider script. Thus, you can now have an unlimited tab interface plus an unlimited slideshow from a simple, lightweight JavaScript.

Homepage: http://www.kminek.pl/lab/yetii/
License: BSD License

Here’s a list of 20+ free CAPTCHA scripts and anti-spam solutions & services you can use to provide first-level degree of protection from spam bots and possible real human spammers. Most of these anti-spam solutions supports many web applications and programming languages including but not limited to WordPress, Drupal, Joomla, PHP, Ruby on Rails, ColdFusion and many more.

• 

  Mollom

  Mollom is a web service that analyzes the quality of content posted to websites using a filtering technique based on the combination of content analysis and CAPTCHA challenges. It helps keep your site clean and on topic by automatically blocking comment spam, forum posts spam, contact form spam and fake user accounts.

• 

  Defensio

  Defensio™ is web service that provides superior security against threats targeting social media, along with improved management and control of content posted on any site. It provides real-time malicious content detection, profanity filtering, Facebook protection, URL category blocking, enhanced statistics and a new & improved API.

• 

  Ironclad CAPTCHA

  Ironclad CAPTCHA is a 3D objects based CAPTCHA where each object can be positioned, scaled, rotated and colored in random way. The user are then required to count the number of three given types in the picture to pass the test. There are additional objects that should not be counted, besides three types that should.

• 

  Secureimage

  Securimage is an open-source free PHP CAPTCHA script for generating complex images and CAPTCHA codes to protect forms from spam and abuse. It can be easily added into existing forms on your website to provide protection from spam bots. It offers several security features such as image distortion, random lines, and noise.

• 

  reCAPTCHA

  reCAPTCHA is a secure and accessible anti-spam web service which protects your site from comment spam, malicious registrations and other forms of attacks by using a CAPTCHA to ensure that only humans perform certain actions. reCAPTCHA comes in the form of a widget that you can easily add to your blog, forum, registration form, etc. In addition to protecting your site, reCAPTCHA also helps us digitize old books and newspapers.

• 

  Picatcha

  Picatcha is a usable and secure image-based CAPTCHA with the goal of making it easy for humans to read but harder for bots to crack. Like KeyCaptcha, it lets visitors click/touch on its CAPTCHA instead of text typing. You can also customize the CAPTCHA such as the number of images, image sizes, color and noise type.

• 

  KeyCAPTCHA

  KeyCAPTCHA is an innovative anti-spam solution that does not require any text typing. Instead of guessing images and text, KeyCAPTCHA offers visitors to complete an easy interactive task. You can also earn money by specifying social and commercial advertising shares in CAPTCHA on your website.

• 

  VouchSafe

  VouchSafe is a secure and accessible test designed to separate human users from bots, to help prevent spam and some kinds of online fraud. VouchSafe is the first image-based Human Interactive Proof that uses an Adaptive AI to generate challenges based on the way humans think.

• 

  Solve Media

  Solve Media is a privately held CAPTCHA service specializing in challenging users to prove they are human by having them type in the text of an advertisers brand name which they are calling type-in advertising. The user challenge is for skippable pre-roll advertising in which the user is given the option to type in a slogan of the current advertiser in order to stop the advertisement that would normally play before the content is allowed to start.

• 

  HelloCaptcha

  HelloCaptcha is another web service, anti-spam solution providing animated images CAPTCHA. The first generation of HELLOCAPTCHA botdetectors are animated GIF images. The animation gives an additional dimension (the time) to the cracking algorithms.

• 

  Ajax Fancy CAPTCHA

  Ajax Fancy CAPTCHA is a jQuery plugin that helps you protect your web pages from bots and spammers. It has intuitive way of completing “verify humanity” tasks by asking user to drag and drop specified item into a circle. CAPTCHA’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”.

• 

  NuCaptcha

  NuCaptcha is specifically designed to allow authenticated humans to pass quickly and easily while adjusting to a higher level of CAPTCHA security when a risk is detected. NuCaptcha uses measure indicators to identify suspicious, high risk activity and adjusts to present a real-time adaptive CAPTCHA.

• 

  Confident CAPTCHA

  Confident CAPTCHA is a clickable, picture CAPTCHA that stops spam and bots on blogs, web forms, account registrations, ticketing sites and more by asking visitors to click on specific pictures. It is highly customizable and administrators can increase or decrease the difficulty of the CAPTCHA depending upon the level of security needed.

• 

  textCAPTCHA

  textCAPTCHA provides a web service to generate textual CAPTCHAs based on simple logic questions. Instead of hard-to-solve image CAPTCHAs, textCAPTCHA uses textual questions which will serve as an initial barrier from comment spam, forum spam or “bots” registering in your site.

• 

  Sweet Captcha

  SweetCaptcha is a free CAPTCHA service with new and fresh graphical CAPTCHA focused on enhancing the user experience on your website. Instead of using difficult and boring text, SweetCaptcha offers a cute and interactive friendly user experience by letting users drag a picture into another picture.

• 

  ASIRRA

  Asirra (Animal Species Image Recognition for Restricting Access) is a human interactive proof that works by asking users to identify photographs of cats and dogs. It’s powered by Petfinder’s over three million images of cats and dogs, manually classified by people at thousands of animal shelters across the United States.

• 

  BotDetect CAPTCHA

  BotDetect CAPTCHA is feature-packed security solution using CAPTCHA challenges to prevent automated page posting. It allows you to have custom CAPTCHA image size, format, color scheme; custom CAPTCHA code length, style, character set, timeouts, generated code filtering and many other options & features.

WordPress Anti-Spam Plugins

• 

  Antispam Bee

  Antispam Bee protects blogs from ping and comment spam with sophisticated techniques. It can review the comment contents for BBCode links, block comments from specific countries, validate the IP address of commentators, allow comments only in certain language and many other advanced features.

• 

  Growmap Anti Spambot Plugin

  This anti-spam plugin will add a client side generated checkbox to your comment form asking users to confirm that they are not a spammer. Because the checkbox is genereated via client side JavaScript that bots cannot see, it should stop 99% of all automated spam bots.

• 

  Akismet

  From the creator of WordPress, Akismet is a hosted service to stop trackback and comment spam. When a new comment, trackback or pingback is added to your site it is submitted to the Akismet web service which runs hundreds of tests on the comment and returns a thumbs up or thumbs down.

7 More CAPTCHA Scripts and Anti-Spam Solutions & Services

1. The Honey Pot Metod:
   • Easy Spam Prevention Using Hidden Form Fields
   • PHP Honey Pot Spam Prevention
2. hOOmanTest
3. WebSpamProtect
4. adcaptcher
5. minteye
6. Captchator
7. Spamerator

You can now write specific CSS code for the browsers (FF, IE, Opera, Safari, Chrome, Konqueror, Iron), browser versions (most importantly ie6, ie7, ie8, ie9), rendering engines ( Webkit, Mozilla, Gecko), platforms/OSes (Mac, Win, Win8, Win7, Vista, WinXP, Win2k, WinNT, FreeBSD, Linux/x11), platform version and devices (iPhone, WebTV, Blackberry, Android, J2me, RIM Playbook) without using any CSS hacks. It also detects if JavaScript is disabled or not in the browser and add an appropriate class name.

If you want to use CSS Browser Selector in another language other than JavaScript, you may take a look on the PHP, Ruby on Rails and the WordPress plugin versions.

Homepage: https://github.com/rafaelp/css_browser_selector
Live Demo: http://rafael.adm.br/css_browser_selector/
License: http://creativecommons.org/licenses/by/2.5/

But no worries, below is an ultimate list / compilation of 40+ solutions and tutorials you can use to customize and enhance these supposedly non-customizable HTML form elements.

1) 8 Almost All Form Elements Customization & Enhancements
2) 20 Checkbox and Radio Buttons Customization & Enhancements
3) 14 Select Box / Dropdown Box Customization & Enhancements
4) 5 File Upload Field Customization & Enhancements

8 Almost All Form Elements Customization & Enhancements

• 

  Uniform (Sexy Forms w/ jQuery)

  Uniform let you style and control the look and feel of your checkboxes, drop down menus, radio buttons, file upload inputs & other form elements. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
  Live Demo   GitHub  

• 

  csDefault

  It is a lightweight, cross-browser CSS3 and jQuery library which would give all HTML form elements the styling they need. It works on Chrome, Firefox 5+, Opera, IE 7+, Android 2.3, Opera Mobile, Firefox Mobile, Safari 5. The csDefault code is released under public domain.
  Live Demo   GitHub  

• 

  Custom Form Elements (CFE) for MooTools

  Custom Form Elements (CFE) is completely unobstrusive, Javascript form replacement script that will enhance HTML forms elements in terms of style, usability and accessibility by using JavaScript and/or CSS. CFE enhances and will let you customize checkboxes, radio buttons, file upload field, select box, etc. It fully supports focusing on elements as well as tabindex and supports custom events.
  Live Demo   GitHub  

• 

  Niceforms

  Niceforms is a non-intrusive JavaScript method that allows complete customization of checkbox, radio buttons, file input field and other HTML form elements. It’s a script that will replace the most commonly used HTML form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
  Live Demo   GitHub  

• 

  jNiceIt

  jNiceIt is a jQuery plugin which allows you to customize checkbox, radio button, file upload input, select box & other generic form controls and apply your customized design to them. Design of each form elements can be fully customized via CSS. The plugin supports both fixed and fluid page layouts.
  Live Demo

• 

  YUI Niceforms

  YUI Niceforms is an easy to use and highly configurable YUI plugin to customize checkbox, radio buttons, file upload field and other form controls to give a modern look that is consistent across all major browsers. YUI Niceforms is based on Niceforms by Emblematiq.
  Live Demo

• 

  Sexy Forms

  Sexyforms is a non-intrusive JavaScript library that improves the appearance of HTML forms such as checkboxes, radio buttons, file input, textbox, select box, textarea and buttons.
  Live Demo

• 

  JQF1 – jQuery FormOne

  JQF1 is a jQuery solution for styling & customizing form elements. JQF1 is cross-browser compatible and tested in IE6/7/8, Firefox, Safari, Opera, Chrome, SeaMonkey and Flock. The ability to search or filter inside of select options list is one of JQF1′s exclusive feature.
  Live Demo

20 Checkbox and Radio Buttons Customization & Enhancements

• 

  Fancy Checkbox & Radio Buttons

  This is one of the oldest solution to have a custom checkbox and radio buttons. It uses CSS and old school JavaScript (jQuery version is available) to achieved the desired designed of the checkbox and radio buttons.
  Live Demo

• 

  ScrewDefaultButtons

  ScrewDefaultButtons is a jQuery plugin allowing you to customize the browser defaults for radio buttons and checkboxes with your own custom design. It comes with it’s own commands to give you better control of the custom radio buttons and checkboxes.
  Live Demo   GitHub  

• 

  formReplacer

  formReplacer is ajQuery plugin that replaces default checkboxes, select box or dropdown box and radio buttons with more flexible custom design. You can style those form elements however you like, you just need to alter few CSS rules to change their appearance.
  Live Demo

• 

  jQuery Checkbox

  jQuery Checkbox is a lightweight and easily styllable checkbox plugin for jQuery. The default style mimics the look of an iPhone UI but you can customize it to whatever you want. It has been tested and is compatible with IE7+, FF 3.6+, Opera 10, Safari 5 and Google Chrome.
  Live Demo   GitHub  

• 

  Adam’s Radio/Checkbox Customisation

  The script parses a specified form for input types and associated labels. If the input type is found to be a radio button or checkbox then the widget is hidden and the label is altered to display a custom widget-style-image by modifying the label’s CSS style.
  Live Demo

• 

  jQuery prettyCheckable

  This plugin replaces the default checkboxes and radio button inputs with your own custom design. It’s selectable with “tab” and checkable with keyboard; change events & chainning preserved; and is compatible with IE7+, Chrome, Firefox, Safari and mobile browsers.
  Live Demo   GitHub  

• 

  jQuery Custom Forms

  This is another jQuery plugin authored by Vinícius Ebersol to to generate accessible custom select box, radio buttons and checkbox.
  Live Demo   GitHub  

• 

  iButton jQuery Plugin

  iButton jQuery plugin emulates the checkbox functionality found on the iPhone. It works with checkboxes or radio button elements and have full keyboard support, custom event handlers, iPhone support and many other features.
  Live Demo

• 

  customInput

  A jQuery plugin to build an accessible, custom designed checkbox and radio button input elements. It is based on progressive enhancement that leverages an input element’s built-in functionality and accessibility features and works in all modern browsers without added markup or mandatory CSS classes.
  Live Demo

• 

  Custom Checkbox & Radio Buttons with Just CSS

  This is a tutorial by inserthtml on how to create a custom checkbox and radio buttons with just pure CSS. It works on modern browsers, unfortunately it doesn’t work in IE8.
  Live Demo

• 

  jQuery FancyOpts Plugin

  This plugin allows you to create custom, image-based radio buttons and checkboxes seamlessly integrated into existing forms with graceful degradation. It supports navigation and selection via keyboard input.
  Live Demo

• 

  ezMark jQuery Plugin

  ezMark is a jQuery Plugin that allows you to customize radio buttons and checkboxs. It has been tested and works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome) and it degrades gracefully.
  Live Demo   GitHub  

• 

  8 More Custom Checkbox & Custom Radio Buttons

  1) SlayerOffice Custom Checkbox Elements
  2) jQuery Custom Checkbox
  3) iPhone Style Radio & Checkbox Switches – won’t degrade gracefully
  4) Ryan Fait’s Custom Checkboxes & Radio Buttons
  5) prettyCheckboxes – onClick event called multiple times
  6) jQuery Checkbox
  7) Pretty Checkboxes with jQuery – won’t degrade gracefully
  8) Classic Digg-Style Radio Buttons – won’t degrade gracefully.

14 Select Box / Dropdown Box Customization & Enhancements

• 

  .customSelect()

  This jQuery Plugin uses the native select box functionality of the web browser and overlays a stylable <span> element in order to acheive your custom design select box. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box.
  Live Demo   GitHub  

• 

  DropKick JS

  DropKick is a jQuery plugin that works by transforming your existing, boring select box into beautiful, customizable HTML select dropdowns. DropKick works on IE7/8, degrades gracefully and supports keyboard navigation. You should set a tabindex attribute in the select box to enable navigation via tabbing.
  Live Demo   GitHub  

• 

  SelectBoxIt

  SelectBoxIt allows you to replace HTML select boxes with feature rich dropdowns. SelectBoxIt provides first-class support for mobile, tablet, and desktop browsers, triggering the native “wheel” interface for mobile and tablet devices. It has also built-in ARIA support, full keyboard search and navigation support.
  Live Demo   GitHub  

• 

  Better Select Elements with jQuery & CSS3

  This is a tutorial by Martin Angelov on making better select box elements with jQuery and CSS3. The jQuery script is going to take an ordinary select box element, and replace it with a better looking, markup powered version, while keeping all the functionality intact. It keeps the original select box hidden on the page, and changes its value according to the fancy replacement.
  Live Demo

• 

  Chosen

  Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. Instead of forcing your users to scroll through a giant list of items, they can just start typing the name of the item they were looking for. Non-matching entries are removed from view and choices can be selected using enter or mouse click.
  Live Demo   GitHub  

• 

  Select2

  Select2 is primarily not a custom-look solution (though its look and feel is based on Chosen library above) but rather it enhances the functionality of a select box. It is a feature-packed, jQuery plugin for select boxes to enable and support searching, remote data sets, and infinite scrolling of results.
  Live Demo   GitHub  

• 

  JavaScript Image Combobox

  This image combobox is fully skin-able, support keyboard navigation and can be created via JSON object. Each <option> can have an image and description. Multiple selection can have checkbox UI. You may covert all combobox as image combobox, you may convert by id, multiple ids, or by wild card.
  Live Demo

• 

  7 More Select Box Customization

  1) Dropdown Check List
  2) jQuery UI MultiSelect Widget
  3) jQuery Multiselect
  4) Linkselect jQuery Plugin
  5) jQuery Selectbox
  6) bsmSelect – Better Select Multiple
  7) jQuery Custom Select Box

5 File Upload Input Customization and Enhancements

The file upload input field is probably the most difficult HTML form element to style. Thus, only a few solutions are available. You may take a look on the 8 Almost All Form Elements Customization & Enhancements above since some it have also customize the file input elements. But if you want a custom file upload field only, take a look at these 5 resources:

1. Filament Group’s jQuery Custom File Upload Input
2. Quirksmode’s Styling an input type=”file”
3. Viget’s Custom File Inputs with a Bit of jQuery
4. File Style Plugin for jQuery
5. Changing Form Input Styles on Focus with jQuery

To save you time figuring out if your email campaign renders the same in major email clients, CampaignMonitor has put together a guide to CSS support in email clients. It details the level of support for CSS in the most widely used email clients. The guide includes email software for Windows and Mac OS (Outlook 2007/10/13+, Outlook 2000/03, Apple Mail 4), web based email clients (Outlook.com, Yahoo! Mail Beta, Google Gmail) as well as on mobile (Apple iPhone/iPad, Android 2.3 (Gmail)+).

Homepage: http://www.campaignmonitor.com/css/
Download: PDF Format or XLS Format

• SimpleTabs is a standalone JavaScript tab script and does not depend on any third-party JavaScript library such as jQuery or Mootools. That means it won’t conflict with scripts made with these libraries or any other script.
• It does not need different IDs per tab container in order to have multiple tab sets. So, you can have as many SimpleTabs tab sets as you want on the same page.
• It remembers the last tab clicked on and if you reload the page (e.g. navigate somewhere and return to the page containing the tabs) that specific tab is already active.
• It’s simple to implement, small in size (2.52 KB compressed) and fast to load.
• Works on all browsers.

Homepage: http://nuevvo.com/labs/simpletabs/
License: GNU / GPL v2

The problem is these “loading gif” images is not easy to create unless you have the skills to do so. Fortunately, there are online tools which will generate these AJAX loading icons with a few clicks. There are even some that doesn’t require images but use either JavaScript or CSS3 to achieve a loading icon image effect. There are also other sites that have a collection of ready-to-download loading icon images.

• 

  Preloaders.net

  Preloaders.net has a fantastic categorized collection of APNG and GIF AJAX loaders images. You can set your preloaders’ image type (support APNG & GIF), background (transparent is available) and foreground color, size with constrain proportion option, animation speed and many other options.

• 

  CSSLoad.net

  If you want to have an AJAX loading icon but don’t want to use an image to save HTTP request, this CSS3 loading spinner generator is for you. It makes use of of CSS3 transitions, transforms and CSS3 animation to achieve a “loading GIF” image effect.

• 

  spin.js

  spin.js is another spinner or preloader generator that doesn’t use any images. It used JavaScript for modern browsers and uses VML as fallback in old IEs to have a loading icon image effect. It doesn’t require any JavaScript library to work but it does have jQuery plugin which you might want to check out.

• 

  CanvasLoader Creator

  Heartcode CanvasLoader Creator is a free online tool which you can use to generate preloaders (spinners or throbblers). This loading icon generator uses the CanvasLoader UI Library – a lightweight JavaScript UI library which can be used to create spinners using the HTML5 Canvas object in modern browsers, or VML in older ones. Same with spin.js, no external images or CSS are required.

• 

  NETEYE Activity Indicator

  This is jQuery plugin that renders a vector-based, translucent activity indicator (spinner) using SVG or VML. No images or external CSS are required, works in all major browsers (including IE6), supports Alpha transparency, degrades gracefully and is highly configurable. Unfortunately, this doesn’t have a UI so you have to manually pass some options into your code.

• 

  Ajaxload

  Ajaxload.info is still in Beta and the only option for it’s loading icon that you can set is it’s background and foreground color. It has only a limited number of loading GIFs compared to Preloaders.net.

• 

  Chimply

  Chimply is in beta stage but it has also a nice collection of categorized Ajax loading icons (spinner and animated bar icons). Common settings/options include background and foreground colors, animation speed, width and size. You can download the generated loading icon in GIF & SWF formats.

• 

  Loading GIF

  Loading GIF Image Generator has some few, nice loading icons ready to download. Unlike most of the loading image generators, the only customization you can made on the loading image icon is it’s background and foreground color.

Worthy To Mention Loading GIF Generators / Collection

The CSS dropdown menu also comes with predefined transformations, including horizontal menu, vertical left-to-right menu, vertical right-to-left menu, horizontal linear menu and horizontal upwards menu – all you need to do is to change the class name of the unordered list. Should you have difficulty in making your styled CSS dropdown menu, just look at the examples which mimic the dropdown menus of Adobe, Flickr, MTV and NVidia.

Homepage: http://lwis.net/free-css-drop-down-menu/
Live Demo: CSS Dropdown Menu Framework
License: MIT & GPL