SKRaghav-Moves with Latest Updates

S.K.Raghav the whole new experience to Web 2.0 applications.

25 Code Snippets for Web Designers & Developers

Posted by skraghav on May 12, 2007

Here are top free 25 code snippets for web designers, I am sure web designers will like to use them all. So what’s your waiting for, start using it.Each snippet section have links to download and instructions.

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.117.jpg

Box Over – BoxOver uses javascript / DHTML to show tooltips on a website.212.jpg

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.38.jpg

CSS Star Rating Redux – Star rating with css tutorial48.jpg

Ajax Contact Form – An unobtrusive AJAX contact form (works even with JavaScript disabled)58.jpg

Wufoo – Build online forms easily with this web app67.jpg

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.86.jpg

Adam’s Radio & Checkbox Customisation Method – Customised check boxes using images102.jpg

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.92.jpg

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.118.jpg

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.121.jpg

CSS Speech Bubbles13.png

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.142.jpg

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.152.jpg

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.161.jpg

Suckerfish HoverLightbox – A really creative way to show a collection of images in a gallery.171.jpg

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.181.jpg

CSS Image Maps – Image map that’s built entirely using CSS and XHTML.191.jpg

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!201.jpg

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.21.gif

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.222.jpg

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?231.jpg

Navigation Matrix Reloaded – This new experiment is, as the first one, based exclusively on graphics — therefore the same usability and accessiblity cautions apply.24.png

Light Weight Low Tech CSS Tabs – An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.241.jpg

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.25.gif


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: