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!
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
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 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.
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.
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.
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
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 Image Wrap – Image text wrap with sandbag divs
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
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?
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
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
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
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 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
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
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