Friday, July 2, 2010

Web Designer Tools Collection

Mood Boards





Mood boards (also called inspiration boards) are a
great tool for designers who work with clients who might not have a
clear-cut idea of what they want.


Mood boards often take the form of a collage that
includes design elements for the project. Examples of elements included
might be typography samples, color schemes, specific graphic examples,
or general “mood” elements that reflect the designer’s vision for the
impression the site should give to visitors.


Mood boards are often used in the interior design field to show
clients ideas for redecorating a room or an entire house. They’re also
used in the fashion industry to serve as inspiration and direction for
a line or a season. But they’re just as valuable for graphic and web
designers.



Depending on the type of client you’re working with, you might create a loose collage with samples overlapping in an organic fashion. If your client is in a creative field, or familiar with the creative process, this kind of mood board can work quite well.


If your client, on the other hand, is used to a more corporate or
formal environment, creating a more organized mood board is probably
more suitable.


Use headers to set apart the color scheme, specific design elements,
typography, and other parts of your mood board to give the entire thing
some structure.


If you have multiple ideas for directions in which a project can go, creating a few different mood boards can be a great way to get client feedback and further refine your own ideas.


Creating two or three different examples to show a client can be
valuable in getting further direction from your client without spending
hours or days on an actual site mock-up just to be told it’s nothing
like what they’re looking for.


And that’s really the main benefit of using mood boards in your design process. A mood board generally takes a lot less time to create than a site mock-up.


Using mood boards to get further feedback from an indecisive or
insecure client before committing hours to a design that will only be
rejected makes everyone happier.




Resources for Creating Your Own Moodboards


We published an article on Why Mood Boards Matter
at the end of last year. The article covers the basics of creating mood
boards and why you’d want to use them. It’s a great starting point.


From the Couch has a video tutorial called Creating An Effective Mood Board. It’s around seven minutes long and covers the basics of creating a digital mood board for projects.


Flickr has an Inspiration Boards
pool that collects mood and inspiration board images from across
multiple design disciplines. It’s a good place to find some inspiration
or just check out examples of how others are approaching their mood
boards.




Compilation of Online Tools


Online web design tools are a dime a dozen. Sorting through them to
find the ones that truly stand out can can seem to take more time than
you might ever expect to save by using them.


But below we’ve found the best tools for typography, CSS, AJAX and
Javascript, color selection, and tools to make creating individual page
elements easier.


Again, these are some of the best tools available for what they do,
so you won’t have to waste a bunch of time testing dozens of different
tools.


Typography Tools


There are a host of online tools for experimenting with the
typography on your website designs. Some allow you to compare different
typefaces side-by-side. Some only let you sample one style at a time.
And still others show you different recommended font stacks.


Other useful web typography tools include apps for converting pixel
sizes to em units and a variety of Lorem Ipsum and other dummy text
generators. In all, there are typography tools out there for just about
every possible need a web designer might have.


Typetester


Typetester lets you compare up to three fonts side by side.


You can select any font from your own computer or use fonts from
their menu of common system fonts and web-safe fonts. It also allows
you to change the color, leading, tracking, size, and other style
options.


It’s a great tool when trying to decide which fonts to use for different elements or even for compiling your own font stacks (since it lets you compare numerous fonts side-by-side).





CSS Type Set


CSS Type Set lets you paste any text you want to
modify into one box, adjust sliders and choose other formatting
options, and then copy the generated CSS.


It’s a quick and easy way to format any text you need, from paragraphs to head tags.


Options include text color, leading, tracking, baseline shift, text decorations, alignment, and more.





Better CSS Font Stacks


While not a traditional tool, per se, this article offers a number
of alternatives to the standard font stacks generally used in CSS.


In addition to offering guidelines for creating your own font stacks, this article also provides a wide variety of sample stacks you can use. An excellent resource when you’re feeling a bit stumped over your typography options.





HTML-Ipsum


Most standard Lorem Ipsum generators online give you a block of text
and nothing more. And that’s great if you’re just trying to fill up
some space.


But HTML-Ipsum gives you text that’s already been marked up with basic HTML tags
(paragraph, head, unordered lists, etc.) so you can see how all the
different elements interact with one another. It’s a huge timesaver.





PXtoEm.com


PXtoEM.com does exactly what it says: it converts pixel-sized fonts into em-sized fonts.


The options it gives you are what make it a really impressive and flexible tool, though.


You can choose the base body font size and get conversions based on
your browser’s default font size (so if, for example, you set your base
font percentage to 62.5% so that a 10 pixel size is equal to 1em, you
can select that as your default size).





Typechart


Typechart lets you browse a variety of web-safe fonts and view how they’ll look on both Windows and Mac systems.


You can find fonts based on size, whether they’re serif or
sans-serif, or emphasis. It only includes web-safe fonts, so the
options offered are limited. But for basic typography, it’s a great
tool that can provide plenty of inspiration.


And you can copy and paste the CSS for each style without leaving the page.





Flipping Typical


Flipping Typical lets you view the common fonts you have on your computer in a grid format to make choosing the right font for your current project easier.


This is a great tool when you’re not interested in just using the standard web-safe fonts and want to see more options.


It’s especially useful if you don’t want to wade through a few
hundred fonts installed on your computer and just want to see the more
popular ones.





CSS Tools


CSS is almost as important in web design as HTML. And there are
hundreds of tools out there to make your CSS cleaner, leaner, more
effective, and generally better that save you the time and effort
required to manually perfect your style sheets.


Compressing your style sheets, which can help speed up load time for
your sites, is simplified by using an automatic online tool. There are
tools available to eliminate duplicate declarations, too.


Cheat sheets keep the basic elements of CSS at your fingertips for
when the coffee hasn’t quite kicked in in the morning and you’re having
a hard time remembering which order your shorthand markup should be in.


While most of these tools do a great job at cleaning up your CSS,
make sure you always keep a backup of your original and test the final
product generated. Sometimes a cleaner or compressor will remove
something that was necessary after all, breaking your site.


CSS SuperScrub


CSS SuperScrub aims to significantly reduce the complexity and size of your style sheets.


It gets rid of redundant calls, strips out unneeded content, and
groups together remaining elements to make editing easier later.


There are a few options, including one to remove all the whitespace
in your style sheet, or to insert a new line before opening braces.





Code Beautifier


Code Beautifier optimizes and cleans up your CSS files.


It offers a large number of options for formatting your text,
including compressing colors, sorting your properties, converting all
of your selectors to lowercase, converting your properties to either
uppercase or lowercase, and choosing the level of compression you want
to use.


You can either copy and paste your CSS into the app or supply a URL for your CSS file.





CSS Drive


CSS Drive is a basic CSS compressor.


You can set how compressed you want your CSS to be (light, normal or
super compact), and how you want it to handle comments (whether to
strip them out).


There’s also an advanced mode that gives you a lot more options,
including removing spaces around certain characters, removing tabs,
removing new lines, and more.





CSS Redundancy Checker


Sometimes in the process of designing a site, you might set up CSS selectors that don’t end up making it into your final markup.


These selectors do nothing more than make your style sheets bulkier and harder to edit later.


CSS Redundancy Checker goes through your style sheet and each of your HTML pages to see which selectors aren’t being used, and then removes them.


It’s a great tool to use if you think you might have unnecessary selectors in your style sheets.





CSS Property Index


The CSS Property Index lists every CSS property alphabetically.


Clicking on any of the included properties brings you to a
definition and information about the default value, allowed values, and
whether it inherits from a parent property.





CSS Shorthand Guide


Using shorthand CSS properties makes your CSS files smaller than using longhand properties.


But remembering which order all the different elements go in for all
the different properties can be a headache, especially for those you
might not use in every single design you do.


It also includes information on the default property values, so if
you choose to leave out a property you’ll know what it will assume the
value to be.





Color Tools


Choosing the right colors for your website designs can be one of the
most important decisions you make in the entire design process.


Sometimes we come into a design with a predefined color scheme (such
as when a client already has established brand colors) or immediately
know what colors we want to use. Other times we might be free to create
our own palette for the design.


If you’re creating a color scheme from scratch, color palette generators and galleries can be a huge help.


If you already have a color scheme, there are other considerations
to take into account, such as accessibility and which colors to use on
which parts of the site.


But there are tools out there to help with those decisions, too.
Below are some of the best tools available for managing color schemes.




Colorblind Web Page Filter


Considering that somewhere between 7 and 10% of the male population has some degree of color blindness (according to Wikipedia), making sure that your sites are still accessible to that population isn’t a bad idea.


This tool shows you how your designs will appear to people with a
number of different colorblindness disorders. You can view the results
for your entire site or exclude images from the result.


They also provide a link to a colorblind-safe color selection tool.





Find Matching Colors for Your Website


This color palette tool finds colors that coordinate with any color you select.


You can either choose a color from their predefined options or enter
any hex or RGB color value to get coordinating palettes based on
complementary, split complementary, triade, tetrade, analogic or
monotone color schemes.


The colors provided are all similar in intensity, though, which
means this is really just a starting point for creating color palettes
for your designs.





Color Palette Generator


Photos are great places to look for design inspiration. This tool can create a color palette from any image you choose (just input the image’s URL).


It provides both dull and vibrant color schemes based on the image you provide.


Being able to use any image online really makes this tool valuable,
as it saves the time of having to download an image and then reupload
to a site like this to generate a color scheme (or download and then
open in a graphics program to manually create a color palette).





Kuler


Adobe’s Kuler color palette gallery is one of the better color palette galleries out there.


You can browse or search more than 10,000 color palettes submitted
by Kuler users and then download or save your favorites for later
reference.


Kuler also includes a really powerful palette creation tool that
lets you select colors with sliders or based on HSV, RGB, CMYK, LAB or
hex color values.


Setting any color as the base color will then change the surrounding colors to complement.





COLOURlovers


COLOURlovers is another great color scheme gallery.


You can search more than 800,000 color schemes (based
on 20 schemes per page and 43,200+ pages of schemes). In addition to
palettes, you can also search individual colors and patterns based on
palettes.


One of COLOURlovers most useful features, though, is it’s pattern
creation tool, which makes creating your own patterns based on either a
predefined color scheme or one you create on the fly.


Just make sure you contact the copyright owner of the pattern if you want to use one for commercial work.





100 Random Colors 2.0


If you really just have no idea where to start on the color scheme
for one of your designs, 100 Random Colors 2.0 might be just the right
tool.


It does just what the name says: presents you with 100 random colors, including their hex values.


And if you don’t find anything in the first 100, you can just hit refresh and be given a whole new set!





Individual Element Tools


There are a lot of generators out there that make it quick and easy
to create buttons, backgrounds, forms, and other design elements for
your sites.


Some of them are just gimmicky, but others are a great help if you
just want to quickly create something like a Web 2.0-ish button or a
basic striped background.


Form-building tools can be very helpful, too, especially if you want
your clients to be able to do some of their own admin work on their
forms.


I know of at least a couple of designers who use these tools so they
don’t have to build a custom, simplified interface for accessing the
form database or for editing forms for their clients. They’re a great
time-saver, especially for building more complicated forms.


Wufoo


Wufoo is an HTML form builder that offers more than 80 form templates and color schemes while also allowing you full control to create custom forms for your clients.


The templates make it quicker and easier to create standard web forms (like registration pages or contact forms).


Submitted forms are automatically collected in a database that makes
it simple for your clients to print, email individual entries, filter,
search, and perform other advanced functions without requiring you to
build a custom interface.


You can even use Wufoo to create online order forms and integrate with Authorize.net, PayPal or Google Checkout.





BgPatterns


BgPatterns lets you create tiled patterns using a wide variety of different repeating elements.


You can select your background color, canvas texture, and the angle
of the pattern. You can apply the backgrounds you create to the
BgPatterns site to preview, and then download the image once you’ve
finalized it.


You can also browse patterns created by others. It’s the quickest and easiest way to create simple, tiled backgrounds.





Stripe Generator 2.0


Creating repeating stripes for a website is time consuming.


Sure, you can create templates for common stripes you might use, but
what if you want a pin stripe for one project, a wide stripe for
another, and one at an odd angle for another? Soon those templates just
don’t seem to cut it anymore.


The Stripe Generator 2.0 offers stripes at a variety of angles, in just about any width you choose, with or without shadows and gradients, and using any hex colors you want.


They also include a stripe gallery where you can see what others have built.





Tartan Maker


If creating striped backgrounds is time consuming, creating plaid backgrounds is a huge headache.


That’s where Tartan Maker comes in. Select the yarn size, the colors
for your pattern and the angle and it creates it automatically.


You can preview your designs full screen and then download the file.





Pixelknete’s Background Dotter


This background generator creates a modern dotted background with progressively smaller dots as they move down the page.


You can select up to two dot colors and two colors for a gradient background (or just a single color for a solid background).


You can also specify the pattern’s height (the default is 700 pixels). The background created repeats on a horizontal axis.





As Button Generator


If you ignore the poorly translated text on this page, you’ll see that this is one of the smoothest button generators available. Add text, different gradients, stripes, images, and more to your buttons.


You can select the button and border colors, the overall size (using
sliders or text fields) and the border thickness, and how rounded the
button is.


If you include stripes, you’re given plenty of options, including
color, transparency, thickness, the space between stripes and the angle.


This is definitely the most fully-featured button generator out there.





Button Maker


This button generator lets you easily create two-tone 80×15 pixel buttons.


Select the button colors, the border colors, where the split between
the boxes should be, and enter the text for each side, and that’s it!


This is one of those tools that isn’t loaded with features but does what it was designed to do perfectly and seamlessly.





AJAX and JavaScript Tools


We all know Ajax can add a ton of functionality to your site. Whether you want to add a simple image gallery, an interactive contact form, or create an entire web application, Ajax is there to help.


But starting from scratch can be daunting, especially if you’re
relatively new to Ajax. And even if you consider yourself a pro, it can
still be time-consuming to start with a blank slate for each of your
projects.


There are plenty of tools out there to speed up your Ajax
development. From script collections to frameworks to specific element
generators, there’s likely something available in the tools below that
will make you a more efficient developer.




Ajaxload


Ajaxload is a generator to create Ajax loader icons. There are a ton of different icons to choose from.


All you have to do is set the foreground and background colors (or
choose a transparent background) and then just download the generated
script.


Quick and easy but it saves you a few minutes (or longer) of coding!





Mini AJAX


Mini Ajax is a gallery of downloadable Ajax and DHTML scripts.


It includes everything from modal windows to slideshows to more
advanced scripts (like calendars and entire project management tools).


It’s a great starting point to find individual Ajax elements or even just to get some inspiration.


There are demos available for a lot of the scripts and all of them are downloadable from their original sources.





MooTools


MooTools is an Object-Oriented JavaScript framework.
It’s definitely not designed for beginners, but can allow you to write
flexible, powerful Ajax apps that are cross-browser compatible.


It’s also standards-compliant and incredibly well documented.


In addition to the core builder, there are also a ton of plugins
available. MooTools can be used to create everything from simple image
galleries to complete user interfaces.





jQuery


jQuery is a JavaScript library that simplifies a variety of JavaScript functions.


One of the best parts of this particular tool, though, are the number of plugins already available for jQuery.


There are ready-made plugins for everything from simple animations to forms to widgets to advanced user interface elements.


There’s likely already a plugin made for just about anything you
might want to do with JavaScript or Ajax, or at least one to use as a
basis for creating your own.





Script.aculo.us


Script.aculo.us is a JavaScript user interface library that includes an animation framework, Ajax controls, DOM utilities and more.


It’s used by Apple, CNN, Basecamp, and Ruby on Rails. It’s built on the Prototype Framework.


There’s extensive documentation available in the Script.aculo.us wiki, making it easy to get started.





Online JavaScript Compression Tool


Compressing your JavaScript files makes them load
faster, eat up less of your bandwidth, and take up less space on your
server. This tool makes compression easier.


Just copy and paste your JS files (or upload them) into this tool
and then select whether you want to compress using Minify or Packer.


It automatically spits out cleaner, more efficient code. Just make
sure you thoroughly test the results and always keep a backup of your
original file.





JavaScript Beautifier


If your JavaScript is a bit messier than you’d like (or almost
impossible to decipher because it’s so poorly formatted), run it
through this beautifier to get neat, clean, consistently-formatted scripts that are easier to read and edit later.


The settings used are minimal, but you can choose how many spaces to
use for indents, whether to detect packers, and whether to preserve
line breaks.


Again, make sure you test the final code and keep a backup handy in case of any problems in your newly-beautified code.





BrowserShots


Unfortunately, different browsers render sites in slightly different
ways. This can be a huge headache, especially if your clients are using
one browser and you’re using a completely different one.


If they’re seeing things that aren’t showing up on your end (or vice versa), it can create problems on both sides.


You can always install multiple browsers on your computer, but a)
that’s a waste of disk space and b) what about browsers that aren’t
available for your OS? That’s where BrowserShots comes in.


You can choose from virtually every major browser in existence, including obscure browsers like Minefield and Epiphany.


BrowserShots shows you screenshots of only the browsers you’ve chosen to view, so you can choose as many or as few as you want.


Just remember that the more browsers you choose to test, the longer
it will take. The way BrowserShots is set up, though, you can just
bookmark the page and come back later to see your results.





Firebug


No list of web designer tools would be complete without mentioning the Firebug Firefox plugin.


Often thought of as the single most valuable tool in a designer’s arsenal, Firebug makes debugging and editing your code (whether it’s JavaScript, CSS, or HTML) infinitely easier.


You can tweak your CSS right in your browser. Visualize the way your
CSS boxes are aligned. Edit any element on your page right in your
browser.


Debug your JavaScript and find errors faster. And that’s just scratching the surface of what Firebug can do.


It really is a must-have tool for every designer out there. Once you use it, you’ll wonder how you ever designed without it.




70 Amazing jQuery Plugins with Tutorials

AutoSnippet – Automatic Code Snippet Generator


Generating the code snippet from the source code (HTML, CSS and
Javascript). No more cumbersome repetitive tasks and no more
inconsistencies between example and real code.



Demo


————————————————————————



jQuery Approach


Approach is a jQuery plugin that allows you to animate style
properties based on the cursor’s proximity to an object. It works in a
very similar manner to jQuery animate, however it animates over
distance instead of time.



Demo


—————————————————————-



jQuery Animated Border


Animated borders for any block level element. This plugin creates an animated border with configurable thickness and color.



Demo


——————————————————————-


jQuery CSS Clip Animation Plugin


Here’s a simple jQuery 1.2.6 “plugin” to extend the animate function to support animation of the clip property.



Demo


———————————————————————


Add to Cart


This plugin implements visual effect of adding something to cart
(busket). Visually it’s similar to Microsoft Word post-save visual
effect, when a gray rectangular of page moves down to the toolbar.



Demo


—————————————————————–


animaDrag: Animating Drag and Drop Plugin


animaDrag is an ultra lightweight drag and drop plugin that is
independent of the jQuery UI framework. Although it has fewer features
than the UI draggable library, it is also much smaller. AnimaDrag
allows draggable items to be eased by jQuery animation, which UI
draggables do not allow. This allows for a richer display of the
transition between two locations, with full easing support.



Demo


——————————————————————–



a-tools


Cross-browser text selection and modification plugin built on top of
the jQuery library. Tested with Opera 9.5 (Windows) and Opera 9.6
(Linux), Mozilla Firefox 3.0 (Windows and Linux), Internet Explorer 7,
Chrome 2.0 and Safari 4.0. Also works with jQuery 1.4.



Demo


———————————————————————


jQuery 3 State Switch Plugin


jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that
expresses the selection and some states of list item using radio button
and checkbox at the same time.


The applications of J3SSW includes some interfaces for sort key or filter key of any search results.



Demo


—————————————————————


jQuery Doubleselect Plugin


Fill in a second select box dependent on the first one.



Demo


—————————————————————–


jQuery columnManager plugin


A jQuery-plugin to toggle the visibility of table columns
(collapsing and expanding them) and to save the state until the next
visit.


It’s supporting tables with colspans and rowspans, too!



Demo


———————————————————————-


jqDnR


qDnR is a lightweight plugin for jQuery  that lets you drag, drop, and resize elements.



Demo


——————————————————————


Tablesorter


tablesorter is a jQuery plugin for turning a standard HTML table
with THEAD and TBODY tags into a sortable table without page refreshes.
tablesorter can successfully parse and sort many types of data
including linked data in a cell. It has many useful features.



Demo


——————————————————————–


jQuery Spoilers Plugin


Spoilers is a jQuery plugin which implements a feature first seen on the imdb.com web site



Demo


—————————————————————–


PopUpWindow


It allows you to open a popup windows in any size you wish.



Demo


—————————————————————-


Masked Input Plugin


It allows a user to more easily enter fixed width input where you
would like them to enter the data in a certain format (dates,phone
numbers, etc). It has been tested on Internet Explorer 6/7, Firefox
1.5/2/3, Safari, Opera, and Chrome.



Demo


———————————————————


AJAX Calendar Widget with Optional TimeZone Support


The Any+Time JavaScript Library includes a highly-customizable,
jQuery-compatible datepicker/ timepicker (calendar/ clock widget) and a
powerful Date/String parse/format utility.



Demo


———————————————————-


Video Lightbox – Easily add video to website or blog



Video Lightbox is a jQuery plugin that shows your videos in the page with a nice lightbox-style overlay.



Demo


—————————————————————


jQuery CSS Drop Down Menu Style


CSS UL/LI Drop Down Menu with Palm Pre look-n-feel and LavaLamp effect.



Demo


————————————————————-


A jQuery Notifications Plugin


jNotifica is a jQuery plugin that provides a beautiful and simple
notifications system. It’s usefull for substitute JavaScript alerts.



Demo


————————————————————-


Popin


Create an easy modal window with a automatic ajax request.



Demo


—————————————————————


Javascript Floating Box JQuery Plugin


In may cases, web page contents does not fit into the screen, we
will have scroll down to the page to read whole contents. bu doing so,
we will lose those information on top. This javascript Floating Menu
will do the trick and to keep  specified contents already visible



Demo


—————————————————————-


jQuery – Numeric


Allows only valid characters (i.e. numbers) to be typed into a text
box. Can take negative numbers and a decimal point. You can supply a
callback that runs when focus is lost and the value in the text box is
not a valid number.



Demo


————————————————————-


jQuery plugin: Treeview


Lightweight and flexible transformation of an unordered list into an
expandable and collapsable tree, great for unobtrusive navigation
enhancements. Supports both location and cookie based persistence.



Demo


—————————————————————–


jQuery Autocomplete Plugin


Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.


By giving an autocompleted field focus or entering something into
it, the plugin starts searching for matching entries and displays a
list of values to choose from. By entering more characters, the user
can filter down the list to better matches.



Demo


—————————————————————-



Password Validation


This plugin extends the jQuery validation plugin, providing two components:


* A function that rates passwords for factors like mixed upper/lower
case, mix of characters (digits, special characters), length and
similarity to a username (optional).


* A custom method for the validation plugin that uses the rating
function to display a password strength meter, requiring the field to
have a “good” rating. The text displayed can be localized.



Demo


———————————————————-


jQuery plugin: Prettydate


The plugin provides clientside date formatting in the style of
Twitter’s timeline: “just now”, “5 minutes ago”, “yesterday”, “2 weeks
ago”.



Demo


————————————————————


Accordion


This plugin creates an accordion menu. It works with nested lists,
definition lists, or just nested divs. Options are available to specify
the structure, if necessary, the active element (to display at first)
and to customize animations. The navigation-option automatically
activates a part of the accordion based on the current location (URL)
of the page.



Demo


—————————————————————


jQuery Countable Plugin


A jQuery plugin that adds a character counter to inputs and textareas.



Demo


—————————————————————–


jQuery Live Query Plugin


Live Query utilizes the power of jQuery selectors by binding events
or firing callbacks for matched elements auto-magically, even after the
page has been loaded and the DOM updated.



Demo


—————————————————————–


jQuery Expandable Plugin


A jQuery plugin that auto-expands textareas to fit the contents as a user types.



Demo


—————————————————————–


hoverIntent


hoverIntent is a plug-in that attempts to determine the user’s
intent… like a crystal ball, only with mouse movement! It works like
(and was derived from) jQuery’s built-in hover. However, instead of
immediately calling the onMouseOver function, it waits until the user’s
mouse slows down enough before making the call.



Demo


—————————————————————–


clueTip


The clueTip plugin allows you to easily show a fancy tooltip when
the user’s mouse hovers over (or, optionally, clicks on) any element
you designate in your script. If the element includes a title
attribute, its text becomes the heading of the clueTip.



Demo


——————————————————————-


LoadMask


LoadMask jQuery plugin can mask DOM elements while their content is
loading or changing to prevent user interactions and inform that some
background task is still running. It is very light (~2Kb) and easy to
use.


Demo

PART -2

1.jqPuzzle


jqPuzzle lets you easily create sliding puzzles for your web page. Select an image, put it in your page, and add some magic.


442.Feature Your Products With Jquery


When you click on a product, the product image will zoom out to see
a featured close-up shot and a description. When you click on another
product, the last opened product will zoom back and the new clicked
product will zoom back and the new clicked product will zoom out.


43







3.Create an Amazing Music Player Using Mouse Gestures & Hotkeys in jQuery 42



4.Create Astonishing iCal-like Calendars With jQuery



41



5.jQuery Image Cube


A jQuery plugin that sets a division to rotate between images (or other things) as if they were on the faces of a cube.40



6.Tooltips



39



7.Fly Off Page


It will take selected elements and make them fly (not literally) off the page in a random or pre-defined direction.38



8.Create a jQuery Popup Bubble


Learn how to add a cool popup bubble to RSS feed link using jQuery.37



9.Simple Page Peel Effect with jQuery & CSS



35



10.Create a Content Rich Tooltip with JSON and jQuery


This tutorial will demonstrate how to
build tooltips that are powered by jQuery, with information pulled from
a JSON array. Here’s a look at the final result that we’ll be looking
to me:34



11.Reel


Reel is a jQuery plugin which takes an
image tag and makes it a live “projection” of pre-built animation
frames sequence. Its aim is to provide a 360° view of something or
someplace. Great alternative to widely used Flash techniques.33.2 33.1





12.Color Changing Text and Backgrounds w/ jQuery


Here’s a quick and easy way to cycle between multiple colors smoothly.32



13.Simply Scroll v1


A jQuery plugin for scrolling a set of images.31



14.Sexy Alert Box


Sexy Alert Box is a “sexy” clon of classic
javascript alert. With a taste to lightbox, it changes the ugly alerts
of dows for more attractive alerts!.30



15.Supersized – Full Screen Background/Slishow jQuery Plugin



29



16.Sexy LightBox


SexyLightBox is a clon, sexier and more lightweight than the classic LightBox.28



17.Jcrop


Jcrop is the quick and easy way to add
image cropping functionality to your web application. It combines the
ease-of-use of a typical jQuery plugin with a powerful cross-platform
DHTML cropping engine that is faithful to familiar desktop graphictions.27



18.Timeago jQuery Plugin


Timeago is a jQuery plugin that makes it
easy to support automatically updating fuzzy timestamps (e.g. “4
minutes aor “about 1 day ago”).26



19.Creating a Virtual jQuery Keyboard


This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from.25



20.A Cool Slider Effect That Stuck To Top Of The Page.



24



21.Creating a Keyboard with CSS and jQuery


The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked.23



22.AnythingZoomer jQuery Plugin


You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuplugin that does it.22



23.jQuery – Horizontal Accordion


This jQuery plugin allows you to easily transform any unordered list into a horizontal menu.20



24.Background-Position Plugin 19



25.jqDock v1.2



Transform a set of images into a Mac-like Dock menu,

horizontal or vertical, with icons thad on rollover!


18.2 18.1





26.jQuery Horizontal Tooltips Menu


A horizontal menu with tooltip that slides
accross the menu panel. It’s a bit similar to lavmp, but in this
script, it displays the caption of the icon menu.17



27.Image Lazy Loader Plugin For jQuery


Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded needed.


16



28.Easy Image Rollover Script With jQuery 15



29.jQuery Effect


A jQuery based animation/effects, progressive enhancement plugin for CSS backgrounds.14



30.Create a Realistic Hover Effect With jQuery 13



31.Masked Gallery


Build your own .png mask and cho your images to slide inside!10



32.Container Plus


This is a useful plug in to build full
featured and fully skinnable containers. The container can be set to
draggable, resizable, collapsable and minimizable.9



33.Ajaxify jQuery Plugin


Ajaxify is a jQuery plugin. it can convert
all links in a web page into an ajax load and submit requests. with
this ultra weight plugin, you can build a complex ajax website with one
line.8



34.Seek Attention


The “seekAttention” plugin gracefully
get’s your users attention by fading out a definable area but leaving
the target element (the element which is seeking attention) un-faded
and thereocusing the users attention on it.7



35.Create Simple Tooltips With CSS and jQuery



6



36.S3 Slider jQuery



5



37.The Sexy Curls jQuery Plugin


Sexy Curls jQuery Plugin is an open-source jQuery plugin by Elliott Kember

which lets you share in the be page fold.4



38.JQZoom


JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.3



39.jParallax


jParallax turns a selected element into a
‘window’, or viewport, and all its children into absolutely positioned
layers that can be seen through the viewport. These layers move in
response to the mouse, and, depending on their dimensions (and options
for layer initialisation), they move by different amounts, in a
parallaxd of way.2



40.Fancy Zoom


Designed to view full-size photos and
images inline without requiring a separate web page load, FancyZoom is
providing a smooth, clean, truly Mac-like effect, almost like it’s a
function of Safari itself.




1


Popular Posts