If there was ever a free fonts download website to garner any excitement it would be Fonts 500. The website has an incredibly large collection of free font downloads worthy of adding to your bookmark(s) collection. Font popularity is based on download activity from larger font resources found throughout the net. Previews are presented in a clean fashion with an option to input your own sample text. Incredibly easy to use, simple to navigate, and quite possibly the one site to visit for free fonts. Where do you look for free font downloads on a whims notice?

Although budget developers may balk at the premium price(s) for higher pixel count [detailed] sets, understand that IconBuffet appeals to the masses by offering more affordable icon options – even going so far as to offer free icon sets acquired through icon swaps. These swaps require a little detective work wading through requests in the forum, or chancing upon posted opportunities such as this. With a little patience & strategy, your persistence may soon pay off resulting in a sizable collection of royalty-free icons. I, for one, am in a motivated state to complete the free icons collection. Interested in a trade for any of the following sets? Number of delivers remaining are noted in parentheses.

• Alexandria Architecture – (4)
• Alexandria Atmosphere – (4)
• Ashbury Menagerie (4)
• Ashbury Welcome – (5)
• Blinksale (3)
• Dresden Atmosphere (1)
• Dresden Tournament (2)
• Durango Research (3)
• Farewell Snow (3)
• Helsinki Hi-Fi (4)
• Mallow Buzz 1 (4)
• Mallow Buzz 2 (4)
• Manhattan Finance (4)
• Manhattan Metroplex (4)
• Manhattan Smilies 1 (5)
• Manhattan Symbol – (4)
• Manhattan Veggie (4)
• Marseilles Breakfast (5)
• Marseilles Cafe (4)
• Modena Alfanumerico Cool – (5)
• Oslo Atmosphere (3)
• Oslo Finance (4)
• Shanghai Smilies (3)
• Shanghai Tech Smilies (5) – Missing?
• Taipei Buddies 1 (5)
• Taipei Night Market (4)
• Tower Grove Melee (3)
• Tower Grove Promenade (5)
• Tower Grove Wedding – (5)

Everything else is missing. Have something worthy of a trade? Drop your offer in the comments making sure to enter the correct email address for your comment credentials. No need to include your actual address in the comment body.

Sets in bold were kindly added thanks to reader(s) – Andre, Barry, Bharath, Ben, Elysa, and Adam.

The above sites, in one way, shape, or form, utilize 5ThirtyOne releases as a base from which to build upon. I’ve collected 3 which recently caught my attention. A task in itself considering combined downloads from 5ThirtyOne servers recently clipped the 15,000 mark (not including download figures from sites such as WordPress Theme Viewer).

Worry not if your site was not mentioned above. I visit each and every site which returns an incoming link from a themes footer. I can not describe what a challenge it was to browse through incoming links – let alone decide which sites to feature. Drop a comment if you think I’ve missed your customizations.

After having grown tiresome of the flash solution which I had made use of for quick gallery previews in the portfolio, I decided to return to the basics with a CSS based image gallery. Plain-vanilla CSS using relative & absolute positioning to achieve a clean scriptless gallery.

For the following tutorial, we’ll construct a simple two image model using two thumbnail images, and their respective full image previews:

<div id="image_gallery">
<ul id="gallery_thumbs">
<li><a class="thumb" href="#tb"><img src="/img/thmb.gif" alt="thmb" /><span><img src="/img/lrg1.gif" alt="prvw" /></span></a></li>
<li><a class="thumb" href="#tb"><img src="/img/thmb.gif" alt="thmb" /><span><img src="/img/lrg2.gif" alt="prvw" /></span></a></li>
</ul>
</div>

Using the above structure, we now have a gallery container designated by #image_gallery, and a basic unordered list with the thumbnails and associated full previews wrapped with <span> tags to hide using CSS.

#image_gallery {
position: relative;
overflow: hidden;
}
ul#gallery_thumbs {
list-style: none;
margin: 0;
padding: 0;
}
#gallery_thumbs li {
background: none;
display: inline;
}
.thumb img { /* styles thumbnail previews */
background: #fff;
padding: 2px;
border: 1px solid #ddd;
}
.thumb:hover img {
background-color: transparent;
}
.thumb span { /* hides large previews */
visibility: hidden;
position: absolute;
}
.thumb span img { /* styles large previews */
background: #fff;
padding: 2px;
border: 1px solid #ddd;
}
.thumb:hover span { /* displays preview while hovering over thumb */
visibility: visible;
top: 80px; /* absolute positioning to control where previews are displayed */
left: 0;
z-index: 100;
}

Now that we have the basic HTML & CSS, we can now experiment with styling a gallery to match.

File this under “Finally! No more waiting for Canvas tag support!” How often have you found yourself wondering how in the world image reflections could be achieved without the need of Photoshopped elements or “IE gets the GIF while Firefox and Safari get the canvas tag”? I sure have. Fortunately, web designers are one step closer to achieving image reflections with cross browser support using the Script.aculo.us library.

reflect: function(element) {
element = $(element);
options = $H({
amount: 1/3,
opacity: 1/3
}).merge(arguments[1] || {});
// Safari's support for .complete is broken,
// so we rely on the window onload event for now
/*if(!element.complete) {
setTimeout(function(){Image.reflect(element,options)}, 10);
return;
}*/
var p = element.parentNode, n = element.nextSibling;
var d = 1.0/(element.height*options.amount);
(element.height*options.amount).times( function(line) {
var h = Builder.node('div',{style:'height:1px;overflow:hidden'},
[Builder.node('img',{src:element.src,
style:'margin-top:-' (element.height-line-1) 'px'
})]);
p.insertBefore(h,n);
$(h).setOpacity((1-d*line)*options.opacity);
});
}
}
Event.observe(window,'load', function(){Image.reflect('elementID')} );

Read more on the pre-production process on mir.aculo.us. Note that the concept is not yet “safe” for use so keep your britches on. Unless of course you have the itch to experiment on your own time honing the process.

My foresight of this years popular web design trends? Reflections, reflections, and what’s that..? Oh yes, image reflections.