25 Code Snippets for Web Designers (Part2)

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

---

Download the JN0-522 tutorials to learn about html, ajax and css applications that you can incorporate in your web design. Become expert in web designing using 642-566 videos and 70-433 design guides.

---