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 helpful 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.
CSS Speech Bubbles
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’s 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 accessibility 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’re compact, lightweight and accessible to text browsers, screenreaders, PDAs, phones, etc.
Become expert in web design using our expert 70-643 guide and 642-504 video tutorials. Our 70-648 web designing course include everything that you need to become expert in design work.





































Very nice page, really. I enjoyed it.
A few weird things though, like this round corners thing.
Oh well.
Was nice all in all.
This is cool! I like it a lot.
Some useful tips that I’m always forgetting, how many of them are fashionable rather than function I wonder?
Hi,
You should link Lightbox to the most recent version: 2.0. http://www.huddletogether.com/projects/lightbox2/
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
thank you for this resource.
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.
Real cool stuff. all in one place. Thanks for the article.
i like your webpage codes snipps.
i also use those features on my websites http://www.wallpaperdojo.com and http://www.slackerlinks.com
Thanks for the excellent listing and facilitating sharing among users.
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
Maybe it’s just me, but sIFR looks like the sort of hideous creation people should stay well clear of. The idea is a nifty one but seriously, how is using Flash to display static text for the sake of ensuring a certain type face a good idea? If I tell my browser to increase the font size on the page, the Flash stuff stays the same size. The page takes longer to render because the browser has to load up a zillion little bits of Flash content. Any else here use Adblock and have Adblock handles al over that sIFT page?
A PHP implementation that returned a PNG image containing the text would be better. Just leaving the text as actual text would be better still.
very cool and informative page
thnx…
“how is using Flash to display static text for the sake of ensuring a certain type face a good idea? ”
You’re obviously a programmer Bob, Designers realise why
Great list! =D
Great tutorial. thanks!
very nice, much better than expected!
Looking forward to seeing more now
Great insight. Can someone clarify which ones are wordpress friendly?
——–
http://www.mostofmymac.com
Fantastic piece of compilation. I have not used all of those that you have described, other than the suckerfish hoverbox.
Excellent tips!!
I have used some of them on my site
Mysore Medical College
It’s a realy nice list, love the stars, will try ! Thanks
What a great list! thanks!
This is the most useful collection that I’ve come across online, thanks for sharing.
Good work, but loose the stuff about rounded corners – this can, and should be done with CSS.
Really cool sites! Thank u
Really useful tips!
Thanks a lot!
Great
Great list. Thanks.
BTW: “Box Over” link broken?
Quite nice!
panique, that’s probably the dumbest comment I’ve ever heard… semantic faux pas or not? That’s called being lazy and/or unskilled.
Great!! Nice link.
Thanks.
Great scripts! Thank you!
very nice snippets
Wow, that’s a lot of snippets, I don’t know which one to add first…
Thanks a lot for all these resources
realy nice!
One of the best recources I ever seen on internet.
Thank you for this great work.
this is cool, thanx
Thanks for this post! Nice samples!
thanks, good job…
Lots of great ideas there – has got me thinking!
This is cool! I like it a lot. thanks
thanks, good job…
I love CSS Star System. This is too lovely
I love ajax
nice!!1
Msn nickleri
harika site
wonderfull
nick names
love
MICHHH nORMALLLL CHKRAAAAAAAAAAAN
Thanks good
Okey..
How do you do ?
thank you good job
thanks tutorial blog
thank you my friend very useful
Thank’s good article
thank you nice collection
thank you good wroking nice collection
thank you my friend very useful
thank you my friend very useful
thanks tutorial blog
thankx
hehey what a useful share
hehey what a useful share
Thanks. Great Job
Thanks…
danke
thkans
new
Great code snips thanks
Thanks…
Great code snips thanks
very cool thanks snips
All Good! thanks.
Great code snips thanks… good
thanks u
thank you
I agree with
Thank you..
thank you..
nice article ….
Lots of great ideas there – has got me thinking!
nice =)
its so nice.
i like it
really nice
i like that
thx for this subject
Very Good. Thanks.
do you want enjoy?
i like it
Very nice page, really. Thank a lot.
I will subscribe to your newsletters for the news tutorial. thank a lot.
Great! Thanks
like oyu site
Eywallah
amerikan kapı
thanks
thanks bye.
thanks for great article
thanks
ooo
crazy post thank you
thank you=)
i want listen radyo
Very Good. Thanks.
thanks
Thanks!
hımm..thanks super post thanks you
super post thanks you
…
thanks you
great site thanks
thank you
thank you whery good
Thanks
look nice thanks
thanks
thanks.
Thanks
thank you
thanks snippest
Thanks.
thanks
thank you
thank you
thanks
Real cool stuff. all in one place. Thanks for the article.
thanks for you.
Great blog, keep it going !
thanks snippest
thanks
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.
Thanks for this post!
Some really good bits of code. They really can make a difference to what may otherwise be a “bland†looking web site
Great article thanks millions times
Some useful tips that I’m always forgetting, how many of them are fashionable rather than function I wonder?
By the way, Jeremiah, double-clicking on a word is supposed to select that word. And if you don’t let go after the second click, you can drag to select the whole sentence or paragraph. It’s very handy when you copy and paste a lot.
And if you don’t let go after the second click, you can drag to select the whole sentence or paragraph
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…
Sorry
http://www.klip-izle.com
thanks very nice.
wery god a web page thank
thank you
thank sooo much xx
ı was looking for all thıs photoshop thıng an ı have founf everythıng here
Thanks for the really nice post. I’ve been looking for this for a while.
Thankss…
Thanks Great
http://www.tumer-metin.com
thank you.
thank u
thank you
i will use it and used
it in http://www.paylastv.com
thanks….
Thank You for another very interesting article.
It’s really good written and I fully agree with You
on main issue, btw. I must say that I really enjoyed
reading all of Your posts. It’s interesting to read ideas,
and observations from someone else’s point of view… it makes
you think more
Exactly what I was looking for on my site! Just couldn’t figure out how to do the form without it being all off-kilter. Thanks!
J=
İts a very good tutorial, thanks
Nice..
thanks
Thank you
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 …
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 …
thanks you (:
As a 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.
This code snippets is cool. Now i am searching for a widget that is able to show you the website when you point your cursor to the link. Anybody?
Very good thanks
As a 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.
Thanks
thanks you mns
danke
teşekkürler
Thanks for all
Thanks good
Good site. thanks
Thanks! I use 3 of this tools, great selection
thanks..
Ty For Post!
Those are really nice snippets, I have been using Wufoo but did not know about others, i should use them on my website, this one
Thanks all mén
thansk çok süper iii gzel ama ne bu dime
Thanks in advance
I liked it
Thanks for page very thanks.
gracias!!, muy buen post
thanks for..
Great collection of very nice tutorials.
THX
Thank you
gry internetowe
thanks.
Great insight. Can someone clarify which ones are wordpress friendly?
thank u very much for this
oh this is very exiting subject thanks
thanks a lot
Wow, thanks so much!
ohhh this is very interesting thanks a lot eveybody
thanks
nasıl yani
thanks
thank u very much for this
Hey all those Persistent database connections may render your database server unable to server more than X amount of users at the same time. I think that the mysql limit is 30. So for me the best way is not to make persistent database connections.
Cool AJAX!
nice codes good ajax.
Wonderful Article i enjoyed reading it.
thnx
tnh
helloo ty
thanks a lot
good designs thanks
thank you man
thank you
thank you.
thanks
thank you man
sehr schön gemacht thx
thanks for your efford
thanks
Very great site.
pusat izle
thanks. i like a lot.
Thanks.. İt is ver nice.
Nice sharing, thanks…
Thanks
THANKS…
Thanks..
http://www.mytescil.net
Evden eve nakliyat
This is cool! I like it a lot.
Thanks…
This is cool! I like it a lot.
Very nicely written! Thanks!
Very nicely written, I appreciate it.
thaks
http://www.msnavatarlarii.com
http://www.2zler.com
http://www.felek.us
Thanks
Thanks very good
Good jobs, thanks for all
Some really good bits of code. They really can make a difference to what may otherwise be a “bland†looking web site.
thanks
thanks
Grafik, tasarım ve sanat üzerine tartışma ve paylaşımların yapıldığı forum.
thank you very good
Hi, my name is ola
Some really good bits of code. They really can make a difference to what may otherwise be a “bland†looking web site
Some really good bits of code. They really can make a difference to what may otherwise be a “bland†looking web site.
Wow, that’s a lot of snippets, I don’t know which one to add first…
Thanks a lot for all these resources
thanks anyway,i’ll use it.
Hey. Thanks for your article. Very good