New York Times online had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were.
CatchMyFame found this very useful and immediately created Before/After jQuery Plugin for the same purpose. The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.
Nettus has published a tutorial: Learn how to Create a Retro Animated Flip-Down Clock. In the tutorial, we will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, we are trying to replicate the flip action of the pads and make it as lifelike as possible. With it’s retro styling, it could be a really neat thing to add to your website.
The clock is composed of three groups of images: hours, minutes and seconds, which are split in an upper part and a lower part so we can obtain the “flip” effect. The main animation consists of reducing the height of the upper part from 100% to 0%, then increasing the height of the lower part from 0% to 100% for each group in which a digit changes.
Click here for a demo
TinEye is a reverse image search engine. You can submit an image to TinEye to find out where it came from, how it is being used, if modified versions of the image exist, or to find higher resolution versions. TinEye is the first image search engine on the web to use image identification technology rather than keywords, metadata or watermarks.
When you submit an image to be searched, TinEye creates a unique and compact digital signature or ‘fingerprint’ for it, then compares this fingerprint to every other image in their index to retrieve matches. TinEye can even find a partial fingerprint match.
TinEye does not typically find similar images; it finds exact matches including those that have been cropped, edited or resized. I have found TinEye very useful, you can easily find out who has stolen your images from your website or portfolio. You can see how powerful TinEye is by checking out their search examples.
AutoSuggest jQuery Plugin makes auto-completing extremely easy. AutoSuggest will turn any regular text input box into a rad auto-complete box. It will dynamically create all the HTML elements that it needs to function. You don’t need to add any extra HTML to work with AutoSuggest.
Also, AutoSuggest jQuery Plugin uses ZERO images! All styling is done 100% in the included CSS file. This means it is super easy to customize the look of everything! You only need to edit the included CSS file. You can even use images if you want, just add the appropriate lines of code into the CSS file. And also, AutoSuggest jQuery plugin is dramatically smaller in size with just 7kb minified.
Iconizer is one of the latest online generators that you may find useful.
It is a free & web-based application, from the makers of popular Preloaders.net, that enables you to customize various popular icon sets online.
Iconizer allows you to select an icon from a list of well-categorized icon sets and:
- select the foreground/background color
- size of it
- file type to be created
- add an animation
- resize it & more..
While mimicking the OS X dock and stacks isn’t new, it’s certainly not common. Nettuts has shown us a few ways to do Outside the Box Navigation with OS X style docks and stacks navigation.
jQuery OS X Stack and Drop Stack is my favorite navigation style out of the three shown in the tutorial. It’s super lightweight (~1kb). It might be a little awkward having the navigation in the bottom right or left of the browser window but it would certainly be creative and save lots of space.
MooEditable is a MooTools plugin that instantly converts a textarea field into a WYSIWYG editor.
It has a slick interface & comes with only the frequently used items like text formatting, lists, inserting images/links & undo/redo.
The plugin can also switch between design & HTML modes.
If you’d like to improve it further or customize to your needs, It has a very detailed documentation.
CSS Globe has shown us a little trick that you can apply to your forms to enhance user experience. We will display editable form data (indented to be edited, updated) as regular tabular data intended for reading.
This works on most modern browsers with pure CSS, but we need a little bit of Javascript in order to make this work on Internet Explorer though, because of the lack of support for :focus pseudo-class.
Screenpresso is a simple-yet-powerful & free screenshot tool that improves your Ctrl+Print function.
It can capture the entire screen, region or window with various options like “including the cursor”, “automated resizing of them” or even “applying automated effects”.
The tool sits in the system tray & allows you to keep an history of the last 100 screenshots.
It can auto-name the captured images or batch convert them (resizing & adding effects) after they are taken.
The screenshots can be drag’n dropped into any application or there are other sharing features like “send to e-mail”, “send to Twitter” or “save to clipboard”.
Screenpresso also has a built-in image editor that can apply image effects, insert objects (textboxes, arrows, annotations, etc.), apply resize or crop to the screenshots.
For Mac & Linux users, sadly, it only works in Windows.
GaleriaSHQIP is a free PHP-MySQL image gallery script for easily displaying any number of images.
It has an admin panel to upload new images or delete/update the previous ones.
The script offers a simple interface for presenting images & upon-click, they can be viewed in their original sizes in a modal box (uses piroBox).
GaleriaSHQIP has a web-based installer for a quicker installation & has a built-in brute-force filter + various other security features.
