DESIGNwalker max

1. Image map for detailed information

A further stage in the use of a css image map.

Just hover your mouse over the painting to reveal three areas of interest. Then hover over each area to reveal an enlarged detail with text.

This method could be used on an educational site to give information and enhanced details of images in general.

The idea is based on my previous image maps but takes it a step further in functionality.

Works in IE5.5 and almost works in IE5.01

2. How to Create Flick Animations with CSS

This is a method of animation that requires some interaction with your visitors, making a visit to your web site a more enjoyable experience for them, and maybe tempting them to come back for more.

FLICK ANIMATION is 100% CSS and DOES NOT use javascript

3. FACE: Faruk’s Animated CSS Enhancements

FACE was developed to allow standards-compliant web developers to put more life and energy into their pages, without having to learn Javascript or Flash: all it takes is basic math skills and a good understanding of CSS. FACE is built entirely from JavaScript and the CSS that you provide to control the animation.

4. CSS Gradient Text Effect

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).

5. css: add a loading icon to your larger images

Let’s say that you have a large image (or several large images) on a particular page, and you want to let visitors know that the image is loading.

You could use a piece of javascript to embed a “loading” image for all images that have not yet loaded, but unless you are loading a ton of very large images on a single page, we have a much simpler (and cleaner) method to accomplish the same thing.

6. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

I like Crazy Egg’s pricing table on their Pricing & Signup page. When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

7. How to make sexy buttons with CSS

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.

8. Checkmark Your Visited Links with Pure CSS

You can take control of the styling of these anchor elements in your CSS by targeting them with pseudo classes. The goal of this tutorial is to get a check mark preceding visited links for a nice visual indicator.

9. footerStick

I’m going to show you all how to force the footer of a webpage to stick to the bottom of the viewport. This is a pretty advanced CSS method and requires that you know a bit about how CSS works.

10. CSS Dock Menu

If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles – top and bottom. This CSS dock menu is perfert to add on to my iTheme. Here I will show you how to implement it to your web page.

11. Create a Lightbox effect only with CSS – no javascript needed

There are tons of Lightbox scripts in the web, each one with its unique features and limitations, but all require massive use of Javascript or the installation of javascript frameworks.

This example does not want to compete with those scripts, but if you are looking for a simple, 100% CSS, 0% javascript lightbox, this may help you.

Tags: css, JavaScript, Tutorial, WebDesign