tinym.com

• Work
• About
• Design Quote
• Contact
• Web Hosting

05-28-09

Lightweight CSS Fisheye Menu

Before you read about why I decided to use this technique (& how it works) - see it in action.

A few weeks ago I spent a considerable amount of time troubleshooting various JavaScript conflicts in a Wordpress site I was working on for my employer. Part of the page design included a neat JavaScript-based fisheye navigation menu. I was happy with the icons and their behavior on the page until we activated a featured content plugin. That plugin caused all kinds of strange behavior on the site…

After much frustration turning plugins on and off then refreshing the pages I decided to scrap unnecessary JavaScript [the cute stuff I liked most] on the page. As things were removed the site began to behave again. Alas, I really wanted that fisheye navigation menu…

I hatched a simple plan to produce a similar effect minus freakish js conflicts. I decided to use an image map styled with CSS. I didn’t have a lot of time so I turned to my favorite image map generator at image-maps.com. I created the background graphic with all the pretty navigation icons and created an image map using their online tool. You’ll need use some specific settings in the Advanced section. The roll over image should be larger than the image you used on the background. This creates the fisheye effect in the menu.
Image-Maps.com Advanced Settings

Here’s the background I used for this demo:

After I generated the image map at image-maps.com I saved the code and edited it in my favorite code editor .

See the css fisheye menu in action. This version will load a little slow since the images are hosted at flickr.com to save bandwidth here. A link to the demo, source files, and icons are listed below.

The Goods



Icons:PRACTIKA by Smashing Magazine
Layered Gimp File for this demo: layered file
Source Files: css fisheye menu source

04-02-09

Free Happy Spring Background

Happy Spring!  I’m celebrating with a free background.  Available for non-commercial use only.  Please be kind and leave the credits intact somewhere on the image once you download.

download (618 kb)

flickr (618 kb)

01-14-09

Free Background Images & Textures for Web Designers

Green, Yellow, and Pink oh my!  Background Labs gives them away for free.  Seamless backgrounds and textures in a variety of colors and patterns.  These are perfect for the usual projects - your blog, social networking profile pages, and other web design projects too.  I’m a little crazy for cute and retro backgrounds,  I hope you enjoy these as much as me. 

Some of my faves from the site:

More cute backgrounds

More retro backgrounds

10-01-08

Revolution is Going Open Source!

Today Brian Gardner, best-selling WordPress premium theme developer, announced the next phase of development for the Revolution WordPress themes… Open Source!  The old themes will no longer be sold and a new breed of FREE, GPL compliant, themes will replace them.  Support will continue for those who have purchased the [now] old themes and the new ones will be released with an optional package that includes support, tutorials, and other goodies.  More details will be released with the launch of the new site November 1, 2008.  I’m excited to use these new themes.

05-05-08

Fancy Ajax File Upload with Progress Meter

I stumbled upon FancyUpload while looking for a new, and pretty, ajax upload script. It automatically logs all uploads, shows pretty little icons for each file, and lets you clear the list all without leaving the page. It’s even got fancy progress meters to keep you on track.

The official description reads like this: “FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.”

Ajax is so nice.

03-26-08

the CocaCola press center

The CocaCola Company has a great press center for recognized members of the media. This is one of the heritage images, the first place to sell CocaCola.

03-07-08

Premium Wordpress Themes: New Releases

The market for premium Wordpress themes is hoppin’. Magazine style themes are really popular right now. Maybe you thought it would all end there. It didn’t. Brian Gardner recently released Revolution Pro Business. It’s a sleek black and white theme featured on Revolutiontheme.com. A single use license is $79.99 with price breaks for existing Revolution Theme customers.

02-08-08

fun image generators for web designers

Pop Minds Web Studio created 4 online image generator tools you should check out.  They’re fun to play with even if you never have a use for them.

Stripe Generator - ” Unleash your personal style, experiment and download the tile. You can use it directly in your css file or as pattern in Photoshop®!”

Reflection Maker -  “A little tool for all your reflection needs!”

Tartan Maker -  “Tartan Maker - the new trendsetting application for cool designers”

Tabs Generator -  “No more neverending PS sessions, trying to match your idea!”

Until I'm finished with the redesign of tinym.com I will feature a different WordPress theme whenever I feel like it. As much as I enjoy changing themes I will be finishing my own design on a distant day in the future... please enjoy (& download if you like) the featured themes.

Featured theme: Cardeo Minimal WordPress Theme by Matt Lambert | cardeo.ca