The CSS Sprites
Perhaps the best use of CSS sprites is to tweak with icons or to induce decorative effects. The sprites use CSS positioning and selectively show the background images to save HTTP requests.
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them: Lots of tricks about sprites. You must have come across a CSS technique where the “on” and “off” states of a buttons have been combined in a single image and can be activated, simply by shifting the background-position. The CSS Sprites can be thought of as an extension of this technique.
CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance: Many of the busiest sites on the Internet make use of CSS sprites to save HTTP requests. Learn how AOL and Yahoo! use CSS sprites for performance enhancement.
Rounded corners are popular and powerful, but to employ them requires the use of complex HTML and CSS. Some easy ways to implement them have been formulated.
Even More Rounded Corners With CSS: Rounded corners with CSS for, single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, etc.
Liquid rounded corners: Try your hands on liquid design and transparent scrolling.
Mountaintop Corners: An easy way to create rounded corners.
Thierry Image Placement: The purpose of this technique is to compose headlines, which is made possible by replacing the normal HTML text with a CSS, a background image is added as well to achieve a specific look. The article explores the many different ways to implement the method.
Sliding Doors: It is a technique for creating visually stunning interface elements with simple, text-based, semantic markup. This article covers a scenario where no tab is highlighted, combine Sliding Doors with a single-image rollover, provide a fix for the clickable region in IE/Win, and suggest an alternate method of targeting tabs.
This technique meant to enable you to wrap around image text flow control to get a magazine style page layout.
Fancy text wrapping around an image
Equal Height Technique
One of the problems with CSS properties is that elements stretch vertically only. This technique was invented to solve that problem so as to make all columns appear to be the same height.
Faux Columns: Makes use of a vertically tiled background image to create a look of colored columns.
Equal Height Columns-revisited: Make all columns appear to be the same height, but no faux column style background images are needed.
Equal height boxes with CSS: This technique makes use of the CSS properties display:table, display:table-row and display:table-cell to make containers behave like table cells in this example. It looks like this:
List are valuable because a navigation bar, menu, etc are all a list of links. You can get a list semantically by using a list element. It also helps to provide at structure even when the CSS is disabled.
Turning a list into a navigation bar: It’s a simple markup. An unordered list, with each link placed in a separate list item.
7 Advanced CSS Menu: 7 Advanced CSS Menus techniques.
Making Headlines With CSS
Headers play an important part in enhancing the layout of the document. If the headers a intriguing enough then that particular section would captivate your reader.
Typography for Headlines: Enhance and embellish the typography of headlines.
Making Headlines With CSS: Use CSS to make fashionable Web page headers which would captivate the audience in an instant.
CSS Shadows Techniques
These techniques are used to make the CSS flexible, when drop shadows are applied to block elements they can expand along with the content of a block when its shape changes.
CSS Drop Shadows: Build flexible CSS drop shadows that can be applied to arbitrary block elements that can expand as the content of the block changes shape.
CSS Drop Shadows II: Standards-compliant drop-shadow to produce exquisite shadows.
An improved CSS shadow technique: An easy-to-use technique using only Web technology and a couple of image elements.
To manage and manipulate transparency is perhaps the trickiest part. The techniques below elucidate how to enhance the quality of your pages by inducing effects of transparency.
Partial Opacity: With Stu Nicholls’s methods the background for the text is made opaque and it’s also quite legible.
Several Link Techniques
Showing Hyperlink Cues with CSS: The CSS With this technique you can make the little icons next to hyperlinks speak! or signify whether the takes you away from the site, opens a pop up, etc.
The ways to style visited Links: Excellent way to differentiate visited and unvisited links, while keeping the text scannable and readable.
Link Thumbnail: When the mouse pointer hovers over an off-site link the script opens a small image of the destination page.
Iconize Textlinks with CSS: There’s a variety of ways to implement this.