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. 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
浙公网安备 33010602011771号