25 Code Snippets for Web Designers (Part5)
May 17, 2007 by Oli · 37 Comments 
Part 5 of the code snippets series sees us take a look at more handy pieces of html, css, javascript and other useful things to a web designer …
Web Project Framework – The ESWAT web project framework is a kit that contains a folder structure and some pre-written components that I use whenever I start off a new web project
SwfIR – Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website
Sexy Buttons with CSS – This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS
Uni-Form – Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms
PNG Overlay – Basically, it involves creating a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF. This way, a typical CMS installation can be configured so users can upload photos without having to worry about using any graphics program to apply filters
CSS-Based Form Template – Provided here is a flexible, semantically correct, and dare I say, accessible form template
CSS Cheat Sheet – All the CSS properties at a glance
New Clearing Method for IE7 – The easy clearing method described at Position Is Everything uses that to create a very convenient way of clearing floats without having to add extra markup. Unless I’m wrong that method will not work in IE7, since the box model bug was fixed in the original IE7 Beta 2 Preview
10 Free CSS and Javascript Calendars – Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. Here are a list of various css and javascript calendars for use on your site
10 Free CSS Graph Resources – Often in web-based applications, developers want to be able to display on the fly graphs. Here are 10 CSS Generators or Techniques that may help you in generating CSS graphs
Master Stylesheet – One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling
Grid Calculator – Change the settings (by dragging the sliders, clicking on the bars, or editing the values) to calculate the overall width of your grid
Subtraction – It’s been about a year now since I first started thinking about creating some kind of definitive documentation about my approach to designing for the Web with the typographic grid as my primary layout tool
101 CSS Resources – All the cool kids are using CSS to separate content from appearance on their sites. Here is 101 resources that will get your feet wet with CSS
CSS Boxes with Outside Frame (Rounded or Not) – The designer I work with wanted to have a site with information inside boxes. He also said that there would be a lot of boxes of variable height and width. More to that, the boxes needed to have a custom border all around and both the bottom side and the left one of the box would have a shadow that would be positioned above a random pattern
Ajaxian – JavaScript Round Corners with Drop Shadow
Heat Map – ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones
Ajax Poll Script – Download this Ajax script for creating a poll on your site
Ajax Load – Create your own animated gifs to indicate Ajax activity on your site
Ajaxian – Dynamic Right Click Context Menu
Plotr – I came across PlotKit, a well written piece of javascript that enables developers to use Canvas or SVG elements for rendering bar, line and pie charts. The only thing was that PlotKit needed the Mochikit library to work. So I took some parts of PlotKit and wrote some parts myself. The result is a lightweight charting framework (12kb!) named Plotr
Simple PHP randomizer – Display list items randomized
CSS Solid block menu – This is a lean, professional looking CSS menu that’s draped in a solid two color background image
8 Web Menus – I will show you some great examples in this posting which I hope you will enjoy and use on your websites. Some of them are built by me while other have credits but are free to use
CSS Link Backgrounds – Offering in-line external link backgrounds is challenging, especially getting them to work and look right with Internet Explorer 6. I decided to try it for myself to see what the fuss was all about
Possessing huge potential the online home based business is getting more and more attractiveness in the world. The business of webhosting firms is increasing with the increase in business sites. One should get through a proper hosting guide in order to have enough knowledge about recommended servers and hosting plans. These guides also enable the reader to choose the firms having insurance of their servers and company. Internet also provides the facility of online training and one can get Microsoft certification through online learning as well.
Here’s my 5 cents: for AJAX code search you should take a look to http://www.miniajax.com
+
How about doing a piece on mapping/ google maps and locations.
You could start with the ever so useful Link http://DigiLondon.com
I like this all a lot. Swfir is useful, except for the whole elastic header image thing. Just so everyone knows, you don’t need javascript to do an elastic header image. As a matter of fact, you can make it so that all images on your page resize along with the text. All you have to do is use relative sizing units (such as em) in your css to size your images. If your image sizes are set in css in relative units, your images will resize relative to the text, which makes for fully zooming web sites. It’s a neat css trick that is fully standards compliant and requires no javascript whatsoever! Check out my site to see an example.
-=Rob Snyder=-
great tips and tools. wished i would’ve found this earlier. keep em coming
great list !
thanks !
Check out this live chat, instant messenger aggregater, and stats system. It also works directly with Skype. Coolest script I have seen.
http://www.chatstat.com
Amazing, good job. Thanks
Thanks! Great resources!
en www.coralweb.com.ar hay un efecto muy interesante que simula la frialdad del metal, esta logrado en baja escala y en blancos y negros
Fantastic resource for coders and designers. Thanks for this useful compilation!
ff
excellent work, resources are great such as this list keep searching for more.
Hello! Good Site! Thanks you! kzgfhkxwyefpa
thanks for very good resources! it was very useful
awesome!!!!!!!!!!!!!!!!!!!!!!!!good job
some lovely techniques linked in, cheers
NICE JOB!!!
Hi visit my site
www.codepal.co.nr
I thought this might be useful to those looking for a CSS Button solution: www.cssbuttons.net