Categories: Developer's Den

Jumbo Pack: A Hundred And One All Time CSS Techniques!

Since the inclusion of CSS in web design, designers have had access to a whole range of properties which can be tinkered around with to make web pages look just the way you want them to, in addition to making them look great. In this post we explore several ways to tweak your pages with CSS. The techniques have been compiled at noupe.com.

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: Image Slicing’s Kiss of Death: Replace old-school image slicing and dicing (and the necessary JavaScript) with a CSS solution.

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.

The CSS Rounded Corners

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.

Rounded corners in CSS: Simple bordered division comprising four divisions and each one has a background-image positioned in each of the corners.

Liquid rounded corners: Try your hands on liquid design and transparent scrolling.

Mountaintop Corners: An easy way to create rounded corners.

Image Replacements Technique

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.

Other methods to achieve IR are Gilder/Levin Method, which has been described by Dave Shea and the Gilder Levin Ryznar Jacoubsen IR method, which has been described here.

Sliding Doors

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.

Sliding Doors” Box– Rounded Corners for All:This technique creates rounded-corner boxes coupled with visual flare and the least amount of semantically correct markup. When resized they keep their backgrounds intact.

Image Text Wrap Technique

This technique meant to enable you to wrap around image text flow control to get a magazine style page layout.

The techniques are:

CSS Image Text Wrap

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:

Turning A List Into A Navigation bar

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.

Uberlink CSS List Menus:

CSSMenus: Horizontal and Vertical List Menu


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.

Heading Style Gallery: Stylish content headings (h1,h2,…)

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.

Fun with Drop Shadows: Makes use of relative positioning.

Drop Shadows By Phil Baines:

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.

CSS Transparency

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.

Cross-Browser Variable Opacity with PNG: If there’s a bad support for PNG in a browser you make use of this graphic format’s lossless compression, alpha transparency, and variable opacity.

Two Techniques for CSS Transparency

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.

Navneet Kaushal: Navneet is a trusted digital marketing authority, who loves to blog and share his knowledge on SEO, web design, web development and internet marketing.