25 Code Snippets for Web Designers (Part1)

March 9, 2007 by · 242 Comments 

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.

117.jpg


Box Over – BoxOver uses javascript / DHTML to show tooltips on a website.

212.jpg


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.

38.jpg


CSS Star Rating Redux – Star rating with css tutorial

48.jpg


Ajax Contact Form – An unobtrusive AJAX contact form (works even with JavaScript disabled)

58.jpg


Wufoo – Build online forms easily with this web app

67.jpg


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.

86.jpg


Adam’s Radio & Checkbox Customisation Method – Customised check boxes using images

102.jpg


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.

92.jpg


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.

118.jpg


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.

121.jpg


CSS Speech Bubbles

13.png


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.

142.jpg


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.

152.jpg


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.

161.jpg


Suckerfish HoverLightbox – A really creative way to show a collection of images in a gallery.

171.jpg


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.

181.jpg


CSS Image Maps – Image map that’s built entirely using CSS and XHTML.

191.jpg


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!

201.jpg


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

. 21.gif


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.

222.jpg


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?

231.jpg


Navigation Matrix Reloaded – This new experiment is, as the first one, based exclusively on graphics therefore the same usability and accessibility cautions apply.

24.png


Light Weight Low Tech CSS Tabs – An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.

241.jpg


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.

25.gif


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.


Oliver Dale runs Kooc Media, A UK-Based web company which specialises in Web Apps, Online Communities, Wordpress Tutorials & Wordpress Plugins.

Comments

242 Responses to “25 Code Snippets for Web Designers (Part1)”
  1. 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.

  2. Nikhil says:

    This is cool! I like it a lot.

  3. Some useful tips that I’m always forgetting, how many of them are fashionable rather than function I wonder?

  4. Trev says:

    Hi,
    You should link Lightbox to the most recent version: 2.0. http://www.huddletogether.com/projects/lightbox2/

  5. 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

  6. jayoh says:

    thank you for this resource.

  7. 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.

  8. R.Bhavesh says:

    Real cool stuff. all in one place. Thanks for the article.

  9. alim fazal says:

    i like your webpage codes snipps.
    i also use those features on my websites http://www.wallpaperdojo.com and http://www.slackerlinks.com

  10. trat for says:

    Thanks for the excellent listing and facilitating sharing among users.

  11. 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

  12. bob says:

    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.

  13. tech says:

    very cool and informative page
    thnx… :D

  14. Oli says:

    “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 ;)

  15. ilker says:

    Great list! =D

  16. xxdesmus says:

    Great tutorial. thanks!

  17. drakazz says:

    very nice, much better than expected!
    Looking forward to seeing more now ;-)

  18. Great insight. Can someone clarify which ones are wordpress friendly?
    ——–
    http://www.mostofmymac.com

  19. Keith says:

    Fantastic piece of compilation. I have not used all of those that you have described, other than the suckerfish hoverbox.

  20. Anantha says:

    Excellent tips!!

    I have used some of them on my site
    Mysore Medical College

  21. Ted says:

    It’s a realy nice list, love the stars, will try ! Thanks

  22. insomnity says:

    What a great list! thanks!

  23. Microsoft Freak says:

    This is the most useful collection that I’ve come across online, thanks for sharing.

  24. Mike says:

    Good work, but loose the stuff about rounded corners – this can, and should be done with CSS.

  25. deprisa says:

    Really cool sites! Thank u

  26. R.Daneel says:

    Really useful tips!
    Thanks a lot!

  27. Grim says:

    Great

  28. Great list. Thanks.

    BTW: “Box Over” link broken?

  29. khary says:

    panique, that’s probably the dumbest comment I’ve ever heard… semantic faux pas or not? That’s called being lazy and/or unskilled.

  30. gillian2 says:

    Great!! Nice link.
    Thanks.

  31. afanasyev says:

    Great scripts! Thank you!

  32. todo sobre derecho says:

    very nice snippets

  33. BaroqueW says:

    Wow, that’s a lot of snippets, I don’t know which one to add first…
    Thanks a lot for all these resources

  34. Samuele says:

    realy nice!

  35. Abazza says:

    One of the best recources I ever seen on internet.
    Thank you for this great work.

  36. moximo says:

    this is cool, thanx

  37. Thanks for this post! Nice samples!

  38. suzie says:

    thanks, good job…

  39. Lots of great ideas there – has got me thinking!

  40. lee says:

    This is cool! I like it a lot. thanks

  41. cellin says:

    thanks, good job…

  42. I love CSS Star System. This is too lovely :)

  43. kozmetik says:

    I love ajax :)

  44. video izle says:

    nice!!1

  45. Msn Nickleri says:

    Msn nickleri

  46. Msn Nickleri says:

    harika site

  47. Msn Nickleri says:

    wonderfull

  48. Msn Nickleri says:

    nick names

  49. aÅŸk,sevgi says:

    love

  50. HiHOO says:

    MICHHH nORMALLLL CHKRAAAAAAAAAAAN :)

  51. Bebefix says:

    Thanks good

  52. Okey..

    How do you do ?

  53. thank you good job ;)

  54. msn nickleri says:

    thanks tutorial blog ;)

  55. CmFmFan says:

    thank you my friend very useful

  56. Thank’s good article

  57. cep telefonu says:

    thank you nice collection

  58. galatasaray says:

    thank you good wroking nice collection ;)

  59. thank you my friend very useful

  60. thank you my friend very useful

  61. e-kitap says:

    thanks tutorial blog

  62. thankx :)

  63. Msn Nickleri says:

    hehey what a useful share :)

  64. hehey what a useful share

  65. Daniel says:

    Thanks. Great Job

  66. Thanks…

  67. danke

  68. thkans

  69. new

  70. shaz says:

    Great code snips thanks

  71. yemek tarifi says:

    Thanks…

  72. Great code snips thanks

  73. carsiulan says:

    very cool thanks snips

  74. Emma Watson says:

    All Good! thanks.

  75. door says:

    Great code snips thanks… good

  76. thanks u

  77. john says:

    thank you

  78. I agree with

  79. Tabela says:

    Thank you..

  80. Oyun says:

    thank you..

  81. Video says:

    nice article ….

  82. Komikler says:

    Lots of great ideas there – has got me thinking!

  83. nice =)

  84. OZCAN LAY says:

    its so nice.

  85. OZCAN LAY says:

    i like it

  86. ozyyy says:

    really nice :)

  87. otelci says:

    i like that

  88. portal says:

    thx for this subject

  89. Very Good. Thanks.

  90. 7 wonders says:

    do you want enjoy?

  91. i like it

  92. Exchange says:

    Very nice page, really. Thank a lot.

  93. I will subscribe to your newsletters for the news tutorial. thank a lot.

  94. Great! Thanks

  95. like oyu site

  96. Eywallah

  97. amerikan kapı

  98. Metacafe says:

    thanks

  99. megarotic says:

    thanks bye.

  100. Michael says:

    thanks for great article

  101. Meble says:

    thanks

  102. Oyun indir says:

    ooo :) crazy post thank you

  103. Lincoln says:

    thank you=)

  104. Nonda says:

    i want listen radyo

  105. Aliyev says:

    Very Good. Thanks.

  106. thanks

  107. Cosplay says:

    Thanks!

  108. kezman says:

    hımm..thanks super post thanks you

  109. sabrina says:

    super post thanks you

  110. johson says:

    thanks you

  111. indir says:

    great site thanks

  112. thank you

  113. thank you whery good

  114. Thanks

  115. video izle says:

    look nice thanks

  116. thanks

  117. mirc indir says:

    thanks.

  118. maviye says:

    Thanks

  119. cam balkon says:

    thank you

  120. google says:

    thanks snippest

  121. Thanks.

  122. thanks

  123. thank you

  124. Msn indir says:

    thank you

  125. msn avatar says:

    thanks

  126. resimler says:

    Real cool stuff. all in one place. Thanks for the article.

  127. radyo dinle says:

    thanks for you.

  128. Great blog, keep it going !

  129. thanks snippest

  130. Amasya says:

    thanks

  131. Resimler says:

    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.

  132. Thanks for this post!

  133. ganyan says:

    Some really good bits of code. They really can make a difference to what may otherwise be a “bland” looking web site

  134. Great article thanks millions times

  135. programlar says:

    Some useful tips that I’m always forgetting, how many of them are fashionable rather than function I wonder?

  136. Sohbet says:

    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.

  137. And if you don’t let go after the second click, you can drag to select the whole sentence or paragraph

  138. Johan says:

    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…

  139. klip izle says:

    http://www.klip-izle.com

  140. siirler says:

    thanks very nice.

  141. mIRC says:

    wery god a web page thank

  142. fullserial says:

    thank you

  143. thank sooo much xx

  144. ı was looking for all thıs photoshop thıng an ı have founf everythıng here

  145. Hanson Host says:

    Thanks for the really nice post. I’ve been looking for this for a while.

  146. Thankss…

  147. vB-Hacker says:

    Thanks Great

    http://www.tumer-metin.com

  148. tatil says:

    thank you.

  149. caoo says:

    thank u

  150. kraloyun says:

    thank you

  151. firaton says:

    i will use it and used
    it in http://www.paylastv.com
    thanks….

  152. ganyan says:

    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

  153. JLGraham says:

    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=

  154. Denem yanilma says:

    İts a very good tutorial, thanks :D

  155. traveler says:

    Nice..

  156. Health Guide says:

    thanks

  157. Thank you

  158. Alex says:

    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 …

  159. Web says:

    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 …

  160. cinsellik says:

    thanks you (:

  161. The Muse says:

    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.

  162. Meteko says:

    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?

  163. Very good thanks

  164. 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.

  165. Thanks

  166. msn nickleri says:

    thanks you mns

  167. danke

  168. teşekkürler

  169. Thanks for all

  170. Thanks good

  171. oyunlar says:

    Good site. thanks

  172. Romit says:

    Thanks! I use 3 of this tools, great selection ;)

  173. Site Ekle says:

    thanks..

  174. reppp says:

    Ty For Post!

  175. health articles, health article says:

    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

  176. drcetinerdotorg says:

    Thanks all mén

  177. thansk çok süper iii gzel ama ne bu dime

  178. kral oyunlar says:

    Thanks in advance

  179. reklam says:

    I liked it

  180. Bello says:

    Thanks for page very thanks.

  181. ctraos says:

    gracias!!, muy buen post :D

  182. porno says:

    thanks for..

  183. Webdesign says:

    Great collection of very nice tutorials.
    THX

  184. Marcin says:

    Thank you ;)

    gry internetowe

  185. Halo says:

  186. oyunlar says:

    thanks.

  187. Fatih says:

    Great insight. Can someone clarify which ones are wordpress friendly?

  188. thank u very much for this

  189. oh this is very exiting subject thanks

  190. George says:

    thanks a lot :)

  191. Joe says:

    Wow, thanks so much!

  192. oyunlar says:

    ohhh this is very interesting thanks a lot eveybody

  193. gamer says:

    thanks

  194. Erol safak says:

    nasıl yani :)

  195. thanks

  196. halay says:

    thank u very much for this

  197. 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.

  198. Cool AJAX!

  199. frikikler says:

    nice codes good ajax.

  200. saglik says:

    Wonderful Article i enjoyed reading it.

  201. oyun says:

    thnx

  202. araba says:

    tnh

  203. proj says:

    helloo ty

  204. thanks a lot

  205. good designs thanks

  206. forumbeta says:

    thank you man ;)

  207. thank you

  208. nezh says:

    thank you.

  209. bayan says:

    thanks

  210. Sohbet says:

    thank you man :)

  211. chris says:

    sehr schön gemacht thx

  212. Grup hepsi says:

    thanks for your efford

  213. kilo vermek says:

    thanks

  214. Gry says:

    Very great site.

  215. pusat says:

    pusat izle

  216. thanks. i like a lot.

  217. Oyunlar says:

    Thanks.. İt is ver nice.

  218. noname says:

    Nice sharing, thanks…

  219. Sohbet says:

    Thanks

  220. OYUNLAR says:

    THANKS…

  221. Kartal says:

    Thanks..

    http://www.mytescil.net

  222. ugtuze says:


    Evden eve nakliyat

    This is cool! I like it a lot.

  223. youtube says:

    Thanks…

  224. This is cool! I like it a lot.

  225. web says:

    Very nicely written! Thanks! :D

  226. Very nicely written, I appreciate it. :D

  227. Thanks

  228. Arama motoru says:

    Thanks very good

  229. Radyo Dinle says:

    Good jobs, thanks for all

  230. small says:

    Some really good bits of code. They really can make a difference to what may otherwise be a “bland” looking web site.

  231. rize pazar says:

    thanks

  232. takı says:

    thanks

  233. Grafik, tasarım ve sanat üzerine tartışma ve paylaşımların yapıldığı forum.

  234. netlog says:

    thank you very good

  235. Ola says:

    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

  236. Youtube says:

    Some really good bits of code. They really can make a difference to what may otherwise be a “bland” looking web site.

  237. Kamil says:

    Wow, that’s a lot of snippets, I don’t know which one to add first…
    Thanks a lot for all these resources

  238. thanks anyway,i’ll use it.

  239. Grudzien says:

    Hey. Thanks for your article. Very good