Part 3 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 them, check out part one and part two as well.
53 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
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
Blogs are the invention of web 2.0 and are becoming rapidly popular on internet. One can find latest information along valuable comments on them. As any web hosting blog provides the latest information on hosting along its advancements where as one can also have enough knowledge about control panel as well as the education about pc backup through them. A person having enough knowledge of internet marketing advertising can easily start home business. While one can find the business of text-link advertising another profitable home based business. Blogs too provide information about online courses like MCSE training and many other while teaches as well how to get online certificate.




























































Great list, just one more and we have 100 great resources
Thanks!
Thanks - Ill get working on the 100 next week
nice list. thankz
You are so great… Thanks again!
Thanks a lot I really needed the digg style sliding =)
[...] at more handy pieces of html, ajax and css that you can incorporate into your web designs.”read more | digg [...]
Thanks… nice collection…
Thanks for taking the time to put all this code on one page. Very useful.
About the mentionned CSS image wrap: be sure to check http://www.theboxoffice.be/ which lets you automatically generate the sandbag divs
thanks
very good list, some stuff I had seen before some new. I will be sure to come back later when I need something interesting…
Hi,
thanks for the great list,
got some good ideas.
thanks
Fergal.
[...] Code Snippets For Web Designers Filed under: Uncategorized — recar @ 11:12 am 25 Code Snippets For Web Designers “Part 3 of our code snippets series takes a look at more handy pieces of html, ajax and css [...]
Thanks for great list
I love it.
[...] read more | digg story [...]
[...] read more | digg story Swap This These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
[...] read more | digg story [...]
[...] read more | digg story [...]
Hey if you want more check here they are: http://www.enricoromita.it/prv-stuff.rar
[...] 25 Code Snippets for Web Designers (Part3) now up to 75 and still going strong - some cool, some dubious and a couple of useful CSS/Javascript tricks for boosting your web development flair factor (tags: css webdesign javascript code design tips web howto DHTML ideas inspiration interface webdev web2.0 tpu) [...]
Wonderful tips. I’m going to see if i can use it for my site MUSICSHEDD.com
[...] read more | digg story [...]
[...] at more handy pieces of html, ajax and css that you can incorporate into your web designs.”read more | digg [...]
[...] » 25 Code Snippets for Web Designers (Part3) (tags: css javascript tips) [...]
[...] 25 Code Snippets for Web Designers (Part3) [...]
[...] » 25 Code Snippets for Web Designers (Part3) (tags: 2007 advice ajax article articles awesome blog blogs reference web tips design code javascript webdesign css **) [...]
[...] » 25 Code Snippets for Web Designers (Part3) (tags: css WebDesign javascript design code tips web) [...]
[...] 25 Code Snippets for Web Designers (Part3) – 25 užitoÄných kúskov kódu pre web designerov 3. ÄasÅ¥ [...]
[...] 25 Code Snippets for Web Designers (Part3) Part 3 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. (tags: AJAX blogs code css design gallery guide HTML Javascript Links programming Reference resource resources script tabs technology tips tricks tutorial usability Web webDesign webdev website work) [...]
[...] » 25 Code Snippets for Web Designers (Part3) “Part 3 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. “ (tags: web-2.0 useful code) [...]
[...] 25 Code Snippets For Web Designers via digg « Speedup Windows XP in Minutes! [...]
[...] site with tons of info and tutorials(a little more advanced): http://www.cssplay.co.uk/index.html http://tutorialblog.org/25-code-snippets-for-web-designers-part3/ [...]
[...] tutorialblog.org [...]
[...] http://tutorialblog.org/25-code-snippets-for-web-designers-part3/ - And part 3. [...]
[...] 25 Code snippets for webdesigners [...]
[...] » 25 Code Snippets for Web Designers (Part3) (tags: websites tips design) [...]
[...] 25 code snippets for web designers (Part 3). [...]
again a very helpful list of resources.
Hi My Name Is ivamgv.
[...] » 25 Code Snippets for Web Designers (Part3) Some good stuff, and some other less good stuff. (tags: css webdesign javascript tips howto) [...]
[...] week Tutorial Blog released part 3 of their series of Code Snippets for Web Designers. There are numerous pieces of html, ajax and css that one can incorporate into web designs. And we [...]
Hello! Good Site! Thanks you! cylbajxryfs
[...] Plug-ins Announced 10 New Ways to Make Money Online How to Design Great Looking Web 2.0 Websites 25 Code Snippets For Web Designers How to put together a computer 25 things you must know before buying digital camera How To [...]
Martin
while I was surfing the internet when i found your blog i stick to it reading more and more keep going.
[...] read more | digg story [...]
[...] read more | digg story [...]
[...] read more | digg story [...]
Thanks for taking the time to put all this code on one page. Very useful.
[...] things that are free and you’re free to play with. Tutorial blog has thus gathered not 1,2,3 but 4 perhaps more in further series of handy scripts, bits of html and widgets that you can [...]