Footers of websites are being used more & more effectively everyday to provide a better navigation and more information.
Footerama is a fresh design gallery which presents inspiring footers of beautiful websites.
From Footerama:
footer became an area where the web designers had the maximum opportunity to show their creativity, craziness and umm..personality, individuality.
The footers presented are well-categorized with their themes/colors & new items are added regularly.
Shine has 31 icons ranging from 24px square icons to 128px square icons. With the fresh color scheme combines with prominent realistic shapes, Shine will make your websites and interfaces really stand out from the crowd. Shine is shipped in two versions: vector and pixel sets.
You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes.
Brosho is a jQuery plugin which helps you to minimize the editor-browser switching while creating/editing websites.
It enables you to select elements in a webpage, edit the CSS properties with an in-browser editor & see the outputs instantly (similar to editing with Firebug).
Once you are satisfied with the changes implemented, copy-pasting the new code to the CSS file is enough.
The editor has few functions that makes the usage easy like:
- setting the position (top-bottom-left-right)
- enable/disable element highlighting
- one-click CSS code generation
It may be a good idea to disable links while using Brosho as a selected element can forward you to a new page & selections can become useless.
This would be especially useful for editing in Internet Explorer as the current editor is relativly useless.
Click for a DEMO
ZURB has taught us How to Build the New Visual Annotations. The solution was not technically too complex. With Notable, they have embraced the concept of graceful degradation: they take advantage of new CSS techniques that degrade cleanly to older browsers.
The note overlays are composed of two main elements, an outer border div and an inner overlay div. The trickiest piece, and most fun, was actually the gradient on the border. They didn’t want to use a canvas knockout so instead they used border-image, which is a really versatile but slightly tricky CSS property.
The basic gist of border-image is that you can set an image of your choosing as the overlay for the border of an object, but the truth is quite a bit more complicated.
sendcube is presenting 10 free e-mail templates that can be used in the newsletters we send.
All of them are styled with inline-CSS & tested to work in major e-mail clients like Outlook 2000+, Lotus Notes, Hotmail, Gmail, Yahoo & more.
The templates (most of them) come in 3 versions: left-column, right-column or one-column to better suit your needs.
It is possible to preview them & download only the ones you prefer or in bulk.
Compatibility: All Major E-mail Clients
MooCrop is an image cropping utility using the powerful mootools javascript framework. Alone, it is only a selection tool but when used with a serverside script then it becomes an image manipulation tool.
Some MooCrop features:
- Completely customizable CSS styling
- Detects and handles multiple CSS box models
- Allows for masking to be toggled
- Ability to hide resize handles during drag
- Custom events for your own modification
- Relative based postioning rather then absolute (should handle overflow properly)
- Works and retains layouts on floating images.
- Resize from 8 different directions
- Ability to set minimium size limit
- Cleans up nicely, leaving your DOM in its original state when removed.
- Fast!
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
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.
