simplyScroll v2

<div dir="ltr"><div class="" style="margin:0px 0px 1em;padding:0px;font-size:24px;border:0px;outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);width:576px;height:200px;color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif;line-height:35px"> <div class="" style="margin:0px;padding:0px;border:0px;outline:0px;vertical-align:baseline;background-color:transparent;overflow:hidden;width:576px;height:200px"><ul class="" style="overflow:hidden;margin:0px 0px 1.2em;padding:0px;list-style:none;width:2320px"> <li style="padding:0px;margin:0px;list-style:none;float:left;width:290px;height:200px;font-size:18px"><img alt="Firehouse" height="200" src="http://logicbox.net/jquery/simplyscroll/assets/20080608_9N3H5GYL_tb.jpg" style="border: none; display: block;" width="290"></li> <li style="padding:0px;margin:0px;list-style:none;float:left;width:290px;height:200px;font-size:18px"><img alt="Chloe nightclub" height="200" src="http://logicbox.net/jquery/simplyscroll/assets/20080513_4D3SD1BQ_tb.jpg" style="border: none; display: block;" width="290"></li> <li style="padding:0px;margin:0px;list-style:none;float:left;width:290px;height:200px;font-size:18px"><img alt="Firehouse bar" height="200" src="http://logicbox.net/jquery/simplyscroll/assets/20080513_VPJWVQRW_tb.jpg" style="border: none; display: block;" width="290"></li> <li style="padding:0px;margin:0px;list-style:none;float:left;width:290px;height:200px;font-size:18px"><img alt="Firehouse chloe club fishtank" height="200" src="http://logicbox.net/jquery/simplyscroll/assets/20080514_B1YJ08B6_tb.jpg" style="border: none; display: block;" width="290"></li> <li style="padding:0px;margin:0px;list-style:none;float:left;width:290px;height:200px;font-size:18px"><img alt="Firehouse restaurant" height="200" src="http://logicbox.net/jquery/simplyscroll/assets/20080514_JYW68XPT_tb.jpg" style="border: none; display: block;" width="290"></li> <li style="padding:0px;margin:0px;list-style:none;float:left;width:290px;height:200px;font-size:18px"><img alt="Firehouse" height="200" src="http://logicbox.net/jquery/simplyscroll/assets/20080608_38CG51J2_tb.jpg" style="border: none; display: block;" width="290"></li> <li style="padding:0px;margin:0px;list-style:none;float:left;width:290px;height:200px;font-size:18px"><img alt="Firehouse" height="200" src="http://logicbox.net/jquery/simplyscroll/assets/20080608_9N3H5GYL_tb.jpg" style="border: none; display: block;" width="290"></li> <li style="padding:0px;margin:0px;list-style:none;float:left;width:290px;height:200px;font-size:18px"><img alt="Chloe nightclub" height="200" src="http://logicbox.net/jquery/simplyscroll/assets/20080513_4D3SD1BQ_tb.jpg" style="border: none; display: block;" width="290"></li> </ul></div></div><p style="margin:0px 0px 1.2em;padding:0px;font-size:18px;border:0px;outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif">simplyScroll is a scroll-tastic jQuery plugin that can animate (scroll) content either automatically or manually, horizontally or vertically, backwards or forwards.</p> <h2 style="margin:0px 0px 1.2em;padding:4px 8px;font-size:0.5833em;border:1px solid rgb(0,0,0);outline:0px;vertical-align:baseline;background-color:rgb(255,204,0);color:rgb(0,0,0);text-transform:uppercase;font-family:Arial,Helvetica,sans-serif"> NEW FEATURES IN V2</h2><ul style="margin:0px 0px 1.2em;color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:35px;background-color:rgb(51,51,51)"><li style="font-size:18px">Auto-scroll in either direction</li> <li style="font-size:18px">RTL support, normalises browser RTL scroll implementations</li><li style="font-size:18px">Touch support</li><li style="font-size:18px">Now automatically supports unequal sized elements in loop mode</li> <li style="font-size:18px">Pause/play button option</li></ul><h2 id="feat" style="margin:0px 0px 1.2em;padding:4px 8px;font-size:0.5833em;border:1px solid rgb(0,0,0);outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,204,0);text-transform:uppercase;font-family:Arial,Helvetica,sans-serif"> FEATURES</h2><ul style="margin:0px 0px 1.2em;color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:35px;background-color:rgb(51,51,51)"><li style="font-size:18px">Supports scrolling horizontally and vertically both forwards and backwards</li> <li style="font-size:18px">Uses DOM ScrollTop/ScrollLeft for optimal performance</li><li style="font-size:18px">Supports looped scrolling (infinite effect)</li><li style="font-size:18px">Fully customisable via CSS & HTML</li> <li style="font-size:18px">Supports jQuery 1.2.6 and higher (tested up to 1.7.1)</li><li style="font-size:18px">Works on all major browsers (including IE6/7!)</li></ul><h2 id="examp" style="margin:0px 0px 1.2em;padding:4px 8px;font-size:0.5833em;border:1px solid rgb(0,0,0);outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,204,0);text-transform:uppercase;font-family:Arial,Helvetica,sans-serif"> EXAMPLES</h2><ol style="margin:0px 0px 1.2em;color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:35px;background-color:rgb(51,51,51)"><li style="font-size:18px"><a href="http://logicbox.net/jquery/simplyscroll/horizontal.html" style="color:rgb(255,204,0)">Horizontal scroll</a> with loop (infinite effect)</li> <li style="font-size:18px"><a href="http://logicbox.net/jquery/simplyscroll/horizontal_manual.html" style="color:rgb(255,204,0)">As above</a> but manual scroll with buttons</li><li style="font-size:18px"><a href="http://logicbox.net/jquery/simplyscroll/vertical.html" style="color:rgb(255,204,0)">Manual Vertical scroll</a>, with buttons, looped</li> <li style="font-size:18px"><a href="http://logicbox.net/jquery/simplyscroll/custom.html" style="color:rgb(255,204,0)">Custom HTML example</a>, scrolling backwards</li><li style="font-size:18px"><a href="http://logicbox.net/jquery/simplyscroll/rtl.html" style="color:rgb(255,204,0)">RTL mode</a> page may look odd (or better)!</li> <li style="font-size:18px"><a href="http://logicbox.net/jquery/simplyscroll/pause.html" style="color:rgb(255,204,0)">Pause and resume</a></li></ol><h2 id="dl" style="margin:0px 0px 1.2em;padding:4px 8px;font-size:0.5833em;border:1px solid rgb(0,0,0);outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,204,0);text-transform:uppercase;font-family:Arial,Helvetica,sans-serif"> DOWNLOAD</h2><p style="margin:0px 0px 1.2em;padding:0px;font-size:18px;border:0px;outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif">simplyScroll is <a href="https://github.com/logicbox/jquery-simplyscroll" style="color:rgb(255,204,0)" title="simplyScroll on Github">open source</a> and dual licensed under MIT and GPL licenses. Latest version simplyScroll 2.0.5 released 10/05/12</p> <table class="" style="border-collapse:collapse;width:576px;margin-bottom:1.2em;color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:35px;background-color:rgb(51,51,51)"><tbody><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent"> <strong><a href="https://github.com/downloads/logicbox/jquery-simplyscroll/jquery-simplyscroll-2.0.5.zip" style="color:rgb(255,204,0)">jquery.simplyscroll.zip</a></strong></td><td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> <strong>30 Kb</strong></td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent"> <strong>Recommended</strong> Complete package including CSS & buttons.png</td></tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent"> <a href="https://raw.github.com/logicbox/jquery-simplyscroll/master/jquery.simplyscroll.js" style="color:rgb(255,204,0)">jquery.simplyscroll.js</a></td><td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> 13 Kb</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">Source</td></tr> <tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent"><a href="https://raw.github.com/logicbox/jquery-simplyscroll/master/jquery.simplyscroll.min.js" style="color:rgb(255,204,0)">jquery.simplyscroll.min.js</a></td> <td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> 8 Kb</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">minified (uncompressed)</td> </tr></tbody></table><h2 id="config" style="margin:0px 0px 1.2em;padding:4px 8px;font-size:0.5833em;border:1px solid rgb(0,0,0);outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,204,0);text-transform:uppercase;font-family:Arial,Helvetica,sans-serif"> CONFIGURATION</h2><p style="margin:0px 0px 1.2em;padding:0px;font-size:18px;border:0px;outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif">simplyScroll can be configured with a number of options</p> <table class="" style="border-collapse:collapse;width:576px;margin-bottom:1.2em;color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:35px;background-color:rgb(51,51,51)"><thead><tr><th style="margin:0px;padding:0px 0px 0px 16px;font-size:18px;border:0px;outline:0px;vertical-align:baseline;background-color:transparent"> Property</th><th style="margin:0px;padding:0px 0px 0px 16px;font-size:18px;border:0px;outline:0px;vertical-align:baseline;background-color:transparent">Default</th><th style="margin:0px;padding:0px 0px 0px 16px;font-size:18px;border:0px;outline:0px;vertical-align:baseline;background-color:transparent"> Description</th></tr></thead><tbody><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent"> customClass</td><td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> 'simply-scroll'</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent"> Class name for styling</td></tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent"> frameRate</td><td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> 24</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">Number of movements/frames per second</td> </tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">speed</td><td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> 1</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">Number of pixels moved per frame, in 'loop' mode must be divisible by total width of scroller</td> </tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">orientation</td> <td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> 'horizontal'</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent"> 'horizontal or 'vertical' - not to be confused with device orientation</td></tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent"> direction</td><td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> 'forwards'</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">'forwards' or 'backwards'</td> </tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">auto</td><td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> true</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">Automatic scrolling, use false for button controls</td> </tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">autoMode</td><td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> 'loop'</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">auto = true, 'loop' or 'bounce', (disables buttons)</td> </tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">manualMode</td><td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> 'end'</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">auto = false, 'loop' or 'end' (end-to-end)</td> </tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">pauseOnHover</td> <td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> true</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">Pause scroll on hover (auto only)</td> </tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">pauseOnTouch</td> <td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> true</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">Touch enabled devices only (auto only)</td> </tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">pauseButton</td> <td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> false</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">Creates a pause button (auto only)</td> </tr><tr><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">startOnLoad</td> <td class="" style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent;color:rgb(204,204,204)"> false</td><td style="padding:3px 0px 3px 16px;font-size:12px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(85,85,85);outline:0px;vertical-align:baseline;background-color:transparent">Init plugin on window.load (to allow for image loading etc)</td> </tr></tbody></table><h2 id="comments" style="margin:0px 0px 1.2em;padding:4px 8px;font-size:0.5833em;border:1px solid rgb(0,0,0);outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,204,0);text-transform:uppercase;font-family:Arial,Helvetica,sans-serif"> COMMENTS / FEEDBACK</h2><p class="" style="margin:0px 0px 1.2em;padding:0px;font-size:12px;border:0px;outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif"> <strong>Notes/issues:</strong></p><p class="" style="margin:0px 0px 1.2em;padding:0px;font-size:12px;border:0px;outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif"> simplyScroll jumping? Make sure you specify images sizes or start on window load (Chrome is especially affected by this - it's just so darn fast!)</p><p class="" style="margin:0px 0px 1.2em;padding:0px;font-size:12px;border:0px;outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif"> You can't use auto scrolling with buttons (yet - speed-up is a planned feature)</p><p class="" style="margin:0px 0px 1.2em;padding:0px;font-size:12px;border:0px;outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif"> There's a bug in Chrome 17 (released Feb 12) that returns a false positive on a touch support test (causing hover events not to be setup), version 2.0.3 fixes this.</p><p style="margin:0px 0px 1.2em;padding:0px;font-size:18px;border:0px;outline:0px;vertical-align:baseline;background-color:rgb(51,51,51);color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif"> Any feedback or bugs should be directed to @<a href="http://twitter.com/logicbox" style="color:rgb(255,204,0)">logicbox</a> or<a href="mailto:will@logicbox.net?subject=simplyScroll" style="color:rgb(255,204,0)">will@logicbox.net</a>. Enjoy!</p> </div>

simplyScroll v2

simplyScroll is a scroll-tastic jQuery plugin that can animate (scroll) content either automatically or manually, horizo...

Read more »

12 JQUERY LOADER, PROGRESS BAR AND CONTENT ANIMATIONS

<div dir="ltr"><h2 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase">JQUERY LOADERS</h2><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"> JQUERY AJAX LOADER & SPINNER</h3><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"><img alt="aplus-ajax-loader" class="" height="305" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/aplus-ajax-loader-600x305.png" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="aplus-ajax-loader" width="600"></h3> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"></strong><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://www.aplusdesign.com.au/demos/ajax-loader/index.html" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> | <a href="http://www.aplusdesign.com.au/blog/jquery-ajax-loader-spinner/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Source</a></strong></p> <h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase">JQUERY.NIMBLE.LOADER</h3><p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"> <img alt="jquery-nimble-loader" class="" height="282" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/jquery-nimble-loader.jpg" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="jquery-nimble-loader" width="600"></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://www.salesclic.com/jquery.nimble.loader/demo/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> | <a href="http://plugins.jquery.com/project/nimbleLoader" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Source</a></strong></p> <h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"></h3><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"> SPIN.JS</h3><p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><img alt="spin-js-jquery-loader" class="" height="245" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/spin-js-jquery-loader.png" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="spin-js-jquery-loader" width="600"></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://fgnass.github.com/spin.js/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> | <a href="http://fgnass.github.com/spin.js/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Source</a></strong></p> <h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"></h3><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"> CSS3 PIE GRAPH TIMER WITH JQUERY</h3><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"><img alt="CSS3-Pie-Graph-Timer-with-jQuery" class="" height="262" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/CSS3-Pie-Graph-Timer-with-jQuery.png" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="CSS3-Pie-Graph-Timer-with-jQuery" width="597"></h3> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://www.salesclic.com/jquery.nimble.loader/demo/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> | <a href="http://www.salesclic.com/jquery.nimble.loader/demo/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Source</a></strong></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"> </p><h2 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"> JQUERY PROGRESS BARS</h2><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase">PURE CSS3 AND JQUERY PROGRESS BAR</h3> <h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"><img alt="css-jquery-progress-bar" class="" height="187" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/css-jquery-progress-bar-600x187.jpg" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="css-jquery-progress-bar" width="600"></h3> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://www.htmldrive.net/items/demo/791/Very-Beautiful-CSS3-And-JQuery-progress-bar" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> | <a href="http://www.htmldrive.net/items/show/791/Very-Beautiful-CSS3-And-JQuery-progress-bar" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Source</a></strong></p> <h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"></h3><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"> JQUERY PROGRESSBAR</h3><p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><img alt="jquery-progress-bar" class="" height="160" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/jquery-progress-bar.png" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="jquery-progress-bar" width="600"></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://t.wits.sg/misc/jQueryProgressBar/demo.php" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> | <a href="http://plugins.jquery.com/project/jQueryProgressBar" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Source</a></strong></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"> </p><h2 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"> INFINITE SCROLLING</h2><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase">INFINITE AJAX SCROLL, A JQUERY PLUGIN</h3> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><img alt="Infinite-AJAX-Scroll-jQuery-plugin" class="" height="205" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/Infinite-AJAX-Scroll-jQuery-plugin.jpg" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="Infinite-AJAX-Scroll-jQuery-plugin" width="540"></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://www.fieg.nl/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> </strong>|<strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"> </strong><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Source</a></strong></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"> </p><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"> TRIGGERED INFINITE SCROLL</h3><p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><img alt="Triggered Infinite Scroll" class="" height="198" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/Triggered-Infinite-Scroll-600x198.png" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="Triggered Infinite Scroll" width="600"></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://www.infinite-scroll.com/trigger.html" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> </strong>|<strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"> </strong><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Source</a></strong></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"> </p><h2 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"> CONTENT LOADING ANIMATIONS</h2><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase">QUERYLOADER</h3> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><img alt="query-loader" height="305" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/query-loader-600x305.gif" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="query-loader" width="600"></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://www.gayadesign.com/scripts/queryLoader/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> | <a href="http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Source</a></strong></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"> </p><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"> INNERFADE</h3><p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><img alt="innerfade jquery loader" class="" height="213" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/innerfade-600x213.png" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="innerfade" width="600"></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://medienfreunde.com/lab/innerfade/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> | <a href="http://medienfreunde.com/lab/innerfade/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)">Source</a></strong></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"> </p><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"> QUICKSAND</h3><p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><img alt="Quicksand-jquery-content-animation" class="" height="397" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/Quicksand-jquery-content-animation-600x397.png" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="Quicksand-jquery-content-animation" width="600"></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://razorjack.net/quicksand/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> | <a href="http://razorjack.net/quicksand/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Source</a></strong></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"> </p><h3 style="margin:10px 0px;padding:0px;border:0px;vertical-align:baseline;clear:both;font-family:'Maven Pro',arial,serif;color:rgb(44,44,44);text-transform:uppercase"> FLIP!</h3><p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><img alt="jquery-flip" class="" height="268" src="http://todayinwebdesign.com/wp-content/uploads/2011/08/jquery-flip-600x268.png" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; max-width: 100%; height: auto;" title="jquery-flip" width="600"></p> <p style="margin:0px 0px 20px;padding:0px;border:0px;vertical-align:baseline;line-height:1.7em;color:rgb(51,51,51);font-family:Tahoma,Geneva,sans-serif;font-size:14px"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"><a href="http://lab.smashup.it/flip/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Demo</a> | <a href="http://lab.smashup.it/flip/" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;text-decoration:none;outline:none;color:rgb(203,37,37)" target="_blank">Source</a></strong></p> </div>

12 JQUERY LOADER, PROGRESS BAR AND CONTENT ANIMATIONS

JQUERY LOADERS JQUERY AJAX LOADER & SPINNER Demo  |  Source JQUERY.NIMBLE.LOADER Demo  |  Source SPIN.JS Demo  |  Source...

Read more »

30 Best CSS3 Generators for Developers

<div dir="ltr"><p>I have compiled a list of <strong>30 Best CSS3 Generators for developers</strong> that will play a vital role in developing and designing applications. <span id="more-2935"></span>With the following generators you will be able to quickly generate css3 code for almost everything. The following list of CSS3 Generators will assist and simplify your work and make it easy to create the exact CSS effects you need with the help of graphical interfaces.</p> <p>If you like the article you might be interested in our other article on <a href="http://codegeekz.com/must-have-css-tools-for-designers/" target="_blank"><strong>Must Have CSS Tools for Designers</strong></a> and <a href="http://codegeekz.com/css-frameworks-for-accelerated-development/" target="_blank"><strong>18 Best CSS Frameworks for Accelerated Development</strong></a></p> <h4>Enjoy!!</h4> <h2>1. CSS3 Generators</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3generator.jpg"><img alt="css3generator" class="" height="347" src="http://codegeekz.com/wp-content/uploads/css3generator.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://css3generator.com/" target="_blank">Source</a></span>  </p> <h2>2. Create CSS3</h2> <p><a href="http://codegeekz.com/wp-content/uploads/Create-CSS3.jpg"><img alt="Create CSS3" class="" height="321" src="http://codegeekz.com/wp-content/uploads/Create-CSS3.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://www.createcss3.com/" target="_blank">Source</a></span>  </p> <h2>3. CSS3Pie</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3pie.jpg"><img alt="css3pie" class="" height="321" src="http://codegeekz.com/wp-content/uploads/css3pie.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://css3pie.com/" target="_blank">Source</a></span>  </p> <h2>4. CSS 3.0 Maker</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3-maker.jpg"><img alt="css3 maker" class="" height="364" src="http://codegeekz.com/wp-content/uploads/css3-maker.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://www.css3maker.com/" target="_blank">Source</a></span>  </p> <h2>5. CSS3.Me</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3_me.jpg"><img alt="css3_me" class="" height="347" src="http://codegeekz.com/wp-content/uploads/css3_me.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://www.css3.me/" target="_blank">Source</a></span>  </p> <h2>6. CSS3 Gradient Generator</h2> <p><a href="http://codegeekz.com/wp-content/uploads/CSS3-Gradient-Generator.jpg"><img alt="CSS3 Gradient Generator" class="" height="321" src="http://codegeekz.com/wp-content/uploads/CSS3-Gradient-Generator.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://www.freehtml5templates.com/gradientgenerator/gradient-generator.php" target="_blank">Source</a></span>  </p> <h2>7. CSS Border Radius Generator</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css-border-radius.jpg"><img alt="css border radius" class="" height="321" src="http://codegeekz.com/wp-content/uploads/css-border-radius.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://border-radius.com/" target="_blank">Source</a></span>  </p> <h2>8. Border Image Generator</h2> <p><a href="http://codegeekz.com/wp-content/uploads/border-image-generator.jpg"><img alt="border image generator" class="" height="321" src="http://codegeekz.com/wp-content/uploads/border-image-generator.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://border-image.com/" target="_blank">Source</a></span>  </p> <h2>9. CSS Sprites</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css-sprites.jpg"><img alt="css sprites" class="" height="321" src="http://codegeekz.com/wp-content/uploads/css-sprites.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://css-sprit.es/" target="_blank">Source</a></span>  </p> <h2>10. CSS3 Button</h2> <p><a href="http://codegeekz.com/wp-content/uploads/CSS3-Button-Generator.jpg"><img alt="CSS3 Button Generator" class="" height="303" src="http://codegeekz.com/wp-content/uploads/CSS3-Button-Generator.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://css3button.net/" target="_blank">Source</a></span>  </p> <h2>11. CSS Arrow Please</h2> <p><a href="http://codegeekz.com/wp-content/uploads/cssarrowplease.jpg"><img alt="cssarrowplease" class="" height="347" src="http://codegeekz.com/wp-content/uploads/cssarrowplease.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://cssarrowplease.com/" target="_blank">Source</a></span>  </p> <h2>12. CSS3 Button Generator</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3buttongenerator.jpg"><img alt="css3buttongenerator" class="" height="351" src="http://codegeekz.com/wp-content/uploads/css3buttongenerator.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://css3buttongenerator.com/" target="_blank">Source</a></span>  </p> <h2>13. CSS3 Tricks Button Maker</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3-tricks-button-maker.jpg"><img alt="css3-tricks-button-maker" class="" height="321" src="http://codegeekz.com/wp-content/uploads/css3-tricks-button-maker.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://css-tricks.com/examples/ButtonMaker/" target="_blank">Source</a></span>  </p> <h2>14. CSS3 Gradient Generator</h2> <p><a href="http://codegeekz.com/wp-content/uploads/CSS3-Gradient-Generator1.jpg"><img alt="CSS3 Gradient Generator" class="" height="321" src="http://codegeekz.com/wp-content/uploads/CSS3-Gradient-Generator1.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://gradients.glrzad.com/" target="_blank">Source</a></span>  </p> <h2>15. CSS3 Gen</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3gen.jpg"><img alt="css3gen" class="" height="351" src="http://codegeekz.com/wp-content/uploads/css3gen.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://css3gen.com/" target="_blank">Source</a></span>  </p> <h2>16. CSS3 Menu</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3menu.jpg"><img alt="css3menu" class="" height="351" src="http://codegeekz.com/wp-content/uploads/css3menu.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://css3menu.com/" target="_blank">Source</a></span>  </p> <h2>17. Layer Styles</h2> <p><a href="http://codegeekz.com/wp-content/uploads/layerstyles2.jpg"><img alt="layerstyles" class="" height="547" src="http://codegeekz.com/wp-content/uploads/layerstyles2.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://layerstyles.org/" target="_blank">Source</a></span>  </p> <h2>18. CSS3 Patterns</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3-patterns1.jpg"><img alt="css3-patterns" class="" height="342" src="http://codegeekz.com/wp-content/uploads/css3-patterns1.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://lea.verou.me/css3patterns/" target="_blank">Source</a></span>  </p> <h2>19. Gradients</h2> <p><a href="http://codegeekz.com/wp-content/uploads/gradients.jpg"><img alt="gradients" class="" height="342" src="http://codegeekz.com/wp-content/uploads/gradients.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://westciv.com/tools/gradients/" target="_blank">Source</a></span>  </p> <h2>20. CSS3 Color Names</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3colorname.jpg"><img alt="css3colorname" class="" height="351" src="http://codegeekz.com/wp-content/uploads/css3colorname.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://www.codenique.com/web_color/css3_color_names.php" target="_blank">Source</a></span>  </p> <h2>21. CSS3 Please</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3please.jpg"><img alt="css3please" class="" height="351" src="http://codegeekz.com/wp-content/uploads/css3please.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://css3please.com/" target="_blank">Source</a></span>  </p> <h2>22. CSS3 Click Chart</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3clickchart.jpg"><img alt="css3clickchart" class="" height="351" src="http://codegeekz.com/wp-content/uploads/css3clickchart.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://css3clickchart.com/#box-sizing" target="_blank">Source</a></span>  </p> <h2>23. Ultimate CSS Gradient Generator</h2> <p><a href="http://codegeekz.com/wp-content/uploads/Ultimate-CSS-Gradient-Generator.jpg"><img alt="Ultimate CSS Gradient Generator" class="" height="321" src="http://codegeekz.com/wp-content/uploads/Ultimate-CSS-Gradient-Generator.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://www.colorzilla.com/gradient-editor/" target="_blank">Source</a></span>  </p> <h2>24. CSS3 Rounded Corner Generator</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3-rounded-corner-generator.jpg"><img alt="css3-rounded-corner-generator" class="" height="351" src="http://codegeekz.com/wp-content/uploads/css3-rounded-corner-generator.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://www.cssportal.com/css3-rounded-corner/" target="_blank">Source</a></span>  </p> <h2>25. CSS3 Multi Column Generator</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3-multi-column-generator.jpg"><img alt="css3-multi-column-generator" class="" height="351" src="http://codegeekz.com/wp-content/uploads/css3-multi-column-generator.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://debray.jerome.free.fr/index.php?outils/Generateur-de-multi-colonnes-en-css3" target="_blank">Source</a></span>  </p> <h2>26. CSS3 Radius and Box Shadow</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css3-radius-box-shadow.jpg"><img alt="css3-radius-box-shadow" class="" height="347" src="http://codegeekz.com/wp-content/uploads/css3-radius-box-shadow.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://css3.mikeplate.com/" target="_blank">Source</a></span>  </p> <h2>27. 3D CSS Text Generator</h2> <p><a href="http://codegeekz.com/wp-content/uploads/3D-CSS-Text-Generator.jpg"><img alt="3D CSS Text Generator" class="" height="342" src="http://codegeekz.com/wp-content/uploads/3D-CSS-Text-Generator.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://www.3dcsstext.com/" target="_blank">Source</a></span>  </p> <h2>28. CSS Layout Generator</h2> <p><a href="http://codegeekz.com/wp-content/uploads/css-layout-generator.jpg"><img alt="css layout generator" class="" height="321" src="http://codegeekz.com/wp-content/uploads/css-layout-generator.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://csslayoutgenerator.com/" target="_blank">Source</a></span>  </p> <h2>29. Blue Printer</h2> <p><a href="http://codegeekz.com/wp-content/uploads/blueprinter.jpg"><img alt="blueprinter" class="" height="321" src="http://codegeekz.com/wp-content/uploads/blueprinter.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://ianli.com/blueprinter/" target="_blank">Source</a></span>  </p> <h2>30. Ceaser</h2> <p><a href="http://codegeekz.com/wp-content/uploads/ceaser.jpg"><img alt="ceaser" class="" height="321" src="http://codegeekz.com/wp-content/uploads/ceaser.jpg" width="625"></a><br>  <br> <span class=""><a class="" href="http://matthewlein.com/ceaser/" target="_blank">Source</a></span>  </p><p>courtesy:</p></div>

30 Best CSS3 Generators for Developers

I have compiled a list of 30 Best CSS3 Generators for developers that will play a vital role in developing and designing applications. With...

Read more »