25 Code Snippets for Web Designers (Part2)
March 16, 2007 by Oli · 47 Comments 
Part 2 of our code snippets series takes a look at more handy pieces of html, ajax and css that you can incorporate into your web designs. If you missed part 1 you can see it here.
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
Making money on internet is not a difficult task. Just buy domain name and the enough web space needed for a web site to come online. A striking as well as proper domain name with appropriate extension also increases the worth of the site. If the site is about banking or accounting than try directory submission in popular business directories. A higher ranked site along large number of visitors can also take part in affiliate marketing and make enough money through blog marketing as well.
Cool part 2 rocks just like part 1
Spectafantasticular. And then some.
Yes now Javascript please
Yes, another extra-useful list of snippets!
Thanks a lot!!
Let’s have some javascripts now!
For the Javascript-wanters – check out our post on Ajax tutorials – loads there for you!
http://tutorialblog.org/100-ajax-tutorials-and-resources/
Good stuff… Thanks.
sifr3 allows for multiple colors, as well as varying styles and sizes.
http://novemberborn.net/sifr3
bravo!
Thank you very much for this list. It a definite must read for web designers and coders alike. Cheers.
thanx u, but how about css frameworks, code plz?
Awesome collection. I custom built my own blog site and have been tweaking a few things here and there. These collections are great when looking for things to improve.
Thanks!
Especially for CSS Navigation Techniques.
Interesting comments..
I often refer my friends to Listamatic whenever a navigation list has to be styled
Good web site!!! Thank you for your job!!! I will recommend you to all my friends… Visit my site and add your comments
You can check out this web site and can get an idea how the CSS has been scripted…
nice collection again, thanks…
These are really easy to use
I read part1 and now part2, it is a good tutorial.
very nice thanx
nice collection again,thanks
gooodd veri veri
)))))
erotich hikaye
thanks a lot..
thanx for all nice
thanks for you
Ögretmenler Sitesi [http://www.ogretmenlernet.com]
I have seen snippets for web design part 1 but I didnt know part 2 was out already. Nice.
Sohbet [http://www.sohbeth.com]