A few CSS techniques used by the pros.
| term | definition |
|---|---|
| pixy method | CSS technique to work around the small delay in loading the hover version of an image (browsers don’t load it until you roll over the object). The pixy method is to use a single image file, spliced with the hover version of the image sitting on top of the normal version. The box using that image is set to be the height of the actual image you want to use, so that the part of the image not used (the hover version) is hidden by being above the visible area of the box. Instead of switching the image when the user hovers, change the background-postion of the image so that the hover version becomes visisble and the normal version is out of box’s visible area. The effect is that image appears to change for the user, but what is really doing is moving up or down to reveal different parts of the same image file. |
| son of suckerfish | Popular CSS technique to make drop-down menus. |
| sliding doors | CSS technique to make a tabbed navigation but be able to use text to define the label for each tab. This technique solves the problem that each tab may take up a different width, and therefore you can’t use the same background image for all of them if you want to have nicely rounded corners on your tabs. The technique is to split the background image into a left part and right part, then specify the box where the label is to have a dynamic width, but fix the image to the top-right corner. |