25 Code Snippets for Web Designers (Part1)
There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series …
Bubble Tool Tips - Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.
Box Over - BoxOver uses javascript / DHTML to show tooltips on a website.
Ajax Star rating Bar - This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh.
CSS Star Rating Redux - Star rating with css tutorial
Ajax Contact Form - An unobtrusive AJAX contact form (works even with JavaScript disabled)
Wufoo - Build online forms easily with this web app
Pretty Accessible Forms - It can be time consuming to make web forms both pretty and accessible. In particular, laying out forms where the form label and input are horizontally adjacent, as in the image below, can be a real problem.
Adam’s Radio & Checkbox Customisation Method - Customised check boxes using images
sIFR 3b1: The Mo鈥� Betta Beta - sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems.
Revised Image Replacement - Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them.
CSS Rounded Corners - Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.
Even More Rounded Corners - Another article detailing a method of doing rounded corners with CSS. In this case, single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you (or your designer) could want.
Vertical Bar Graphs - Who wants to use Excel to make a new graph each week? Using CSS and PHP you can create attractive bar graphs (yes, even the stacked kind) that are always up to date.
CSS Vertical Bar Graphs - Here’s a fairly typical vertical bar graph showing a hypothetical set of quarterly data for, say, invoice and collection totals. The difference here is that the whole thing is a simple set of nested lists and CSS. Really.
Suckerfish HoverLightbox - A really creative way to show a collection of images in a gallery.
Lightbox JS - Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
CSS Image Maps - Image map that’s built entirely using CSS and XHTML.
CSS Image Pop-up - This is an Pop-UP image effect that is similar to the ones you see using JavaScript on mouseover or on click but THIS ONE uses ONLY CSS!
Sliding Doors CSS Navigation - A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects.
Taming Lists - I’ll demonstrate how to use CSS to bring unwieldy lists under control. It鈥檚 time for you to tell lists how to behave, instead of letting them run wild on your web page.
The Art of Navigation - The main purpose of this design experiment is to see how far we can push CSS. Is it possible to create the most complex navigation (in terms of graphic design) and have it marked-up as an unordered list?
Navigation Matrix Reloaded - This new experiment is, as the first one, based exclusively on graphics 鈥� therefore the same usability and accessiblity cautions apply.
Light Weight Low Tech CSS Tabs - An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.
Accessible Image-Tab Rollovers - I wanted to continue to use a simple unordered list for the navigation in the markup. Much has already been said about using lists for navigation, here and elsewhere. They鈥檙e compact, lightweight and accessible to text browsers, screenreaders, PDAs, phones, etc.
If you liked this tutorial, add us to: 
Tags: No Tags
imagesafari blog » Blog Archive » 禄 25 Code Snippets for Web Designers Says:
[…] Link […]
March 9th, 2007 at 9:23 pm
Wizard Says:
Very nice page, really. I enjoyed it.
A few weird things though, like this round corners thing.
Oh well.
Was nice all in all.
March 9th, 2007 at 10:34 pm
Nikhil Says:
This is cool! I like it a lot.
March 9th, 2007 at 11:16 pm
Terinea Tech Tips Says:
Some useful tips that I’m always forgetting, how many of them are fashionable rather than function I wonder?
March 9th, 2007 at 11:40 pm
alim fazal Says:
i like your webpage codes snipps.
i also use those features on my websites www.wallpaperdojo.com and www.slackerlinks.com
March 9th, 2007 at 11:51 pm
Trev Says:
Hi,
You should link Lightbox to the most recent version: 2.0. http://www.huddletogether.com/projects/lightbox2/
March 10th, 2007 at 12:17 am
John Says:
Nice to have all those put in one place….I think that I have seen like 90% of them on Digg and then never can find them again….I presume you are a good bookmarker.
John
http://www.monomachines.com
March 10th, 2007 at 1:32 am
glych Says:
I’ve been implementing the sIFR script for over a year now and it works fantastically! i would recommend using a font that has all of the symbols and caps you would need though instead of some “designer” font that might only have some, otherwise you get those annoying little boxes instead of the letter, punctuation, or symbol you want.
-glych
March 10th, 2007 at 1:48 am
jayoh Says:
thank you for this resource.
March 10th, 2007 at 1:57 am
pligg.com Says:
25 Code Snippets for Web Designers
A collection of scripts, html snippets, and widgets that you can incorporate into your Web designs.
March 10th, 2007 at 2:09 am
panique Says:
Nice list, some things I’ve not seen before, but lose the “Pretty Accessible Forms”. This is what the table tag is for, semantic faux paus or not.
March 10th, 2007 at 2:30 am
Internet Brain » 25 Code Snippets for Web Designers (Part1 Says:
[…] 禄 25 Code Snippets for Web Designers (Part1) […]
March 10th, 2007 at 4:19 am
R.Bhavesh Says:
Real cool stuff. all in one place. Thanks for the article.
March 10th, 2007 at 4:38 am
chrziz.com » Great list of resources for Web Designers Says:
[…] Digg: 25 Code Snippets for Web Designers […]
March 10th, 2007 at 6:34 am
Your title here » Blog Archive » 25 Killer Code Snippets Every Good Web Designer Should See Says:
[…] up 25 of the Best CSS, scripts, html and widgets that you can use on on your website or blog..read more | digg […]
March 10th, 2007 at 7:34 am
links for 2007-03-10 « [[ the sirens of titan ]] Says:
[…] 禄 25 Code Snippets for Web Designers (Part1) ccs and js electrickery (tags: ajax code css design example javascript reference tutorials web2.0 webdesign web) […]
March 10th, 2007 at 9:18 am
drakazz Says:
very nice, much better than expected!
Looking forward to seeing more now
March 10th, 2007 at 9:20 am
trat for Says:
Thanks for the excellent listing and facilitating sharing among users.
March 10th, 2007 at 9:26 am
Techie Buzz Says:
25 code snippets which rock, A must for every web
As a html / css programmer I get lots of requests of making different types of menus and navigation, a certain type of drop down to be done or rounded edged columns using css and divs.
March 10th, 2007 at 9:37 am