This article has gotten a lot of traffic from Stumbleupon. If you’re coming here from Stumbleupon, the URL to this article has changed (used to be paulspoerry.com/index.php/…. and now the index.php has been removed. If you could, please hit your “I like it!” button and give me a thumbs up.Thanx!
This is not my list… I snagged the list from tutorialblog.org, I’ve just compiled it all into a single resource. Below are 125 handy HTML, CSS, JavaScript, and AJAX snippets for your site or blog.
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 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’re compact, lightweight and accessible to text browsers, screenreaders, PDAs, phones, etc.
Part 2
Tables with style – It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn’t as exciting.
CSS Shadows – So for a couple of years now, folks have been trying to find ways to work around the fact that the box-shadow property from CSS3 seems to perpetually be just a few months away from actually appearing in Web browsers everywhere. Box shadows are a very common design element, and not being able to use them on the Web is a real pain in the ass.
Airtight Corners – Here’s a quick number on how to produce a box with rounded corners using only one image, and off-setting that image for each corner.
Collapsing Tables With DOM and CSS – Each of the tables below has a class called “footcollapse†which makes the script add the arrow images in the footer allowing the table to be collapsed and expanded.
3D Box Model Diagram – Here’s a thing. I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram.
Docking Boxes – Docking boxes (dbx) adds animated drag ‘n’ drop, snap-to-grid, and show/hide-contents functionality to any group of elements.
CSS Submit Button – For some time now we have all known about how you can treat a submit button as you would any tag when it comes to styling it with CSS, we can change its background colour, border and font styles using our trusty CSS.
PHP Style Switcher – For your style-sheet-switching pleasure, A List Apart offers the Switcher, a piece of JavaScript that dynamically changes page styles. Functional as it is, it quite unfortunately relies on the user to have both JavaScript and cookies enabled. There’s not much we can do about the cookies, but we can sidestep client-side processing with a little help from PHP.
Two Color sIFR – How to implement two color sIFR
Styled images with caption – The problem is a simple one. A client wants to add an image to their site via the content management system. They want it to look attractive, not appear too boxy (let us say they want a nice rounded corner, as this is all the rage) and have a nice caption underneath it. However, they do not know how to use an image editor (beyond basic resizing) or how to edit HTML.
Simple CSS Image Switcher – This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function.
Dynamic Pie Chart with CSS – This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries
Replicating a Tree Table – The aim is to replicate a graphic table tree using HTML
Listamatic – Can you take a simple list and use CSS to create radically different list options? The Listamatic shows the power of CSS when applied to a simple list.
Simple accessible external links – How to identify external links
CSS Element Hover Effect – Using css and html only
CSS Going to Print – You’ve seen them before: links that say “click here for printer-friendly version†or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.
Drop Caps with CSS – The code for the dropcap is simple, but we can fancy it up a bit. We use the inline CSS for fiddling with the look.
CSS: Unordered List Calendar - This is a list boxes calendar. It isn’t the most semantic method, but it does seem to be faily stable and it resizes perfectly. A monospace font like Courier New must be used to ensure proper proportions and two characters must be used. Prepared with dynamic generation in mind.
Visited Links – Everyone does visited links differently. Jakob Neilson flunkies use the old school blue-and-purple combo to help show visitors where they’ve been. People with actual design taste use more palatable colors, or perhaps a font-weight variation instead.
Smart Back to top link – Back to top link’s purpose is to quickly position the viewport back to a beginning of a web page. Sometimes you have a variable height of the content and this link is unnecessary if a particular page is shorter than viewport height
Displaying percentages with CSS – In turning this part of the design into something flexible on the website I saw two options; clever CSS, or ‘Lots of Images’. I decided that ‘Lots of Images’ was a bad idea
Unobtrusive Sidenotes - Unobtrusive Sidenotes is a simple mix of Javascript and CSS that makes it ridiculously easy to incorporate sidenotes into your web pages or blogs.
CSS Cheatsheet - The CSS cheat sheet is designed to act as a reminder and reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.
CSS Navigation Techniques – A roundup of 37 different nav bars
Part 353 CSS Techniques – Great roundup from our friends at Smashing Magazine
Accessible Map Rollovers – Create points on a map with roll-over boxes
Styling Horizontal Rules – Even though it’s sometimes recommended to replace the <hr> element with cascading stylesheets only using horizontal borders of other elements, I prefer <hr> as a section divider
Cross Browser Multi-Page Photograph Gallery - Hover over the tabs to display a page of images. Hover over each image to see a 2x image and finally, on the Portraits and Landscapes, click the image to open a new window showing the 640 x 480 pixel version
CSS Button – Create a button using only css
CSS + Javascript Fancy Menu – In this article I’ll go through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends
CSS Image Wrap – Image text wrap with sandbag divs
CSS Cross Fader – In this particular demo, I am going to show how to build a browser-agnostic crossfading effect using Script.aculo.us, a Javascript effects library
CSS Bar Graphs – Create complex Bar graphs using css only
Attach icons to anything using CSS – Thanks to CSS selectors it’s possible to attach icons to anything you want just by adding an attribute of your choosing to your HTML
HTML Visual Sitemap Tool – If you’ve ever had to produce a sitemap for a client using tools like Visio or OmniGraffle, you know that it can be tedious to visually organize a complex hierarchy of pages. Having experienced this myself, I developed a simple and efficient way to make a sitemap through the benefits of standards-based HTML and CSS
Digg comment style sliding divs – How to make sliding DIVs using Javascript and CSS from scratch without having the overhead of Effects libraries such as script.aculo.us
Ajax Auto Completion Demo
Thumbnail Images – Suppose you have a series of images in thumbnail and you would like the user to easily browse through them. In this script we will create three thumbnail images and a larger copy of the selected image will be displayed on the right of the screen. We will also highlight the currently selected thumbnail.Â
Sliding Photograph Galleries – This gallery is my simplest yet. It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size
Free CSS Menus – Downloadable examples of css-based navigation menus
Image Fade – Fade an image in using only CSS
Time Sensitive Style Switcher – You Can Change Styles Based on Time of Day
Free Web 2.0 Templates – Download free xhtml / CSS templates
Turn lists into Trees – In this article, I will present a technique to display a multi-level unordered list in the form of a tree with lines connecting nodes
Custom Bullets – Use css to style list items with custom bullet points
HTML Text Drop Shadows – The drop shadow may not be a designer’s most important tool, but on occasion the need arises to add some punch to a headline. One example could be for branding text that is positioned on top of an image; Depending on the colors of the image, your text might get lost without a shadow to pop it out
CSS Dashboard effect – Ever want to alert your users to a really important message?
Create flickr-like Editing Fields Using AJAX & CSS - On one of my web projects I’ve been working on, we needed to allow the user to edit some information on their profile page. I could have written an HTML form page and then written the php database updater, but why use such outdated interfaces?
Form field hints with CSS and JavaScript – As you tab through each input field, some helper text appears in box out to the right
Part 4
Â
Simple Accessible ‘More’ Links – “There is this information that we are hiding. But why not show that hidden information when the user is hovering the link?â€
Â
10 Tips for an easier CSS Life – As with most things, a logical and structured approach is the best way to go. Therefore I have put together 10 quick tips (in no special order) to help make your CSS coding as pain-free as possible
Â
CSS Gallery Layout – Setting up a gallery layout is not exactly one of the jobs I am looking forward to doing. I assume you all are using lists by now to lay out thumbnail galleries, right?
Â
CSS Alert Box – In various places around the net you may have seen alert boxes which, as far as I can tell, owe their origins to the K2 template for WordPress
Â
CSS Tab Designer – CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge requiredÂ
Mini Slide Navigation – Sliding nav bar using javascript for the slide effect
Â
Centered Tabs with CSS – What if we need a bit more flexibility? What if we need to place our navigation in the center?
Â
Multi Column Layout – We all know the problems that arise when we try to build multi-column layouts in which the columns are of equal height
Â
CSS Shorthand Properties – One of the many great possibilities in CSS is the use of shorthand properties. It lets you specify several properties by using only one
Â
10 CSS tricks you may not know – 10 Handy tips
Â
Snook’s Resizable Underlines – The aim is to apply underlines to paragraph text that stretch the whole width of the column (without using justified text), regardless of the lengths of the paragraph text itself
Â
Layout-O-Matic – Create layouts of your choosing with this online tool
Â
List-O-Matic – Create navigation bars from lists using this online tool
Â
CSS Vista – Edit CSS and see the results live in Firefox and Internet Explorer simultaneously
Â
Image Floats with the text wrap – How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image?
Â
Web Standards Checklist – A list to run through before you launch a standards compliant website
Â
Future Proof your CSS with conditional comments – Conditional comments in your style sheets
Â
CSS Star Ratings – Another handy piece of css and html for rating stars
Â
CSS Typography – You don’t often see “CSS†and “typography†used in the same sentence—and for good reason. Traditional typography is a very subtle and beautiful form of design, with thousands of variations and choices
Â
Zoom Zoom Zoom – Let the user change the size of the text
Â
Sliding Doors box with rounded corners – The goal of the exercise was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup
Â
Changing Man Layout – A liquid three column layout which featured two flexible outer columns and a fixed width centre column
Â
Switch McLayout – CSS-based liquid layout has proven successful during the reign of 800-pixel to 1024-pixel screens, but as we use a wider range of devices to access the web, we need more powerful and flexible ways of managing layout
Â
Styling Form Controls – A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms
Â
Part 5
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
Seems strange, but I’m only able to see them snippets article via the search function (say, http://www.paulspoerry.com/?s=snippets&submit=Submit). The URL you’d expect to contain the snippets http://www.paulspoerry.com/2007/125-code-snippets-for-web-designers/ points to an empty page, besides the header part.
Strange …
Correct me if I’m wrong
Anyways, those snippets are great!