35+ very Useful And Powerful CSS techniques

In this article tripwire magazine provides a list of very useful CSS Techniques that you can use freely to make your website or blog more dynamic and inprove its Look & Feel. The article will also give you an introduction to CSS and why it should be used instead of table-based layouts.

Introduction

Cascading Style Sheets (CSS) is used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document.

Cascading Style Sheets offer significant advantages compared to the other option available – table-layouts. First of all CSS provides us with a strict separation between layout, design of the page, and the information, presented on the page. This means that the layout of all pages in a website can be changed at one by editing style definitions in one .css-file that all the web pages refer to. The separation of layout and information also means that loading different .css files with the same content pages one can completely change the aspect of the site, making it perfectly suitable for immediate user needs fx. screen, printing or mobile devices.

Although almost all modern browsers have good CSS support, older browsers are at a disadvantage. However, on older browsers a CSS-based layout still proves to be usable by displaying navigation and content at the beginning of the page.

Using CSS can also avoid most of the accessibility issues raised by table-layout cells that can make it really hard for people that relay on text browsers, screen readers and speech output browsers to access information.

While CSS may offer many advantages and gives the developer very high level of control of the layout it is still quite hard to implement correctly from bottom up and without having experience and good tool support. Direct reuse or modification of existing CSS solutions to fit the exact needs for your site may be a good start and it is really the intention of this article to give you a good overview of what is possible with CSS and what is available freely to get you started quickly!

Table-layouts are quite simple to implement and they are in particular easy to work with in WYSIWYG editors. That is probably why we see tables being used on close to 9 out of 10 website on the Internet today (guesstimate).

Among the many issues related to tables, the most disturbing one (for users as well as web developers) is browser compatibility. Even though table-layouts have been around almost from the beginning of the Browser Era the most common browsers today just can’t agree on how to interpret and present tables. Known problems are gaps that should not be there, weird positioning of cells or even thicker rows or columns than intended etc. Guess most readers are ready to learn more about CSS now? Take a look at this post if you need more details to be convinced!

CSS has been around for some time and over the last few years web-developers have written many articles about CSS and developed many useful techniques. We believe that by using proven techniques and solutions you can save a significant amount of time and at the same time get a much more appealing and flexible look and feel on you website or blog. Of course this requires that you are able to what you need in time. Below you’ll find a list of techniques we ourselves really couldn’t live without. They are essential and they indeed make our life easier. Hope you find them as useful as we do!

UPDATE Mar. 21st: Take a lool at some of our other popular articles. If you’re looking for High Quality Free Fonts to use in your designs or Tools, Techniques and Inspiration you may find what you need in the articles listed below.

		75+ Excellent Free Fonts For Professional Design In this article tripwire magazine presents an overview of more than 75 excellent free fonts you should consider using for your designs. Not all free Fonts are worth using but the Fonts listed in this article have all been picked out because they are better than the rest.
		80+ Stunning Photoshop Text Effect Tutorials In this article tripwire magazine provides a collection of more than 60 very useful Typography and Font Tools, Techniques and Inspiration.
		60+ Typography & Font Mega Toolbox Photoshop can do some real magic when it comes to Text Effects. In this article tripwire magazine provides a list of more than 80 Stunning Photoshop Text Effect Tutorials that you can use to create Unique Logos, Posters, Post Cards…you name it.

1. CSS Tabs

CSS code is embedded in the page and can be found by viewing the page souce code

2. How to Size Text in CSS [1] [2]

3. Bar Graphs

Use CSS to show nice looking bar graphs based on just div and span tags

4. Drop Cap – Capital Letters with CSS

5. Opacity Applied to Heading

6. Magazine StyleDROP CAPS

7. Easy CSS Pullquotes

Thechniques that help you create various types of Pullqoutes.

8. Link List Block Hover

How to Create a Block Hover Effect for a List of Links

9. Create Resizable Images With CSS

Want layouts that still work if a user increases their browser’s text size? Resize images in order to stay in proportion with the content.

10. CSS Curves

11. Making web pages extend to the bottom of the window [1] [2]

If you ever made a web site with the content in a center column and a different background for the body, or with a short lateral navigation bar, probably you experienced the problem of some elements not extending to the bottom of the browser window when the height of the content is lesser than the document area of the browser window.

12. CSS image replacement for submit buttons

Using this method you’ll get a clickable image when style sheets are active, and a standard button when style sheets are off.

13. Vertical align for navigation lists with multiple lines

Let’s see a quick tip for aligning vertically navigation lists that use the tipical floated box approach to display the list in a row, but that have several items displayed across multiples lines.

14. CSS Image Preloader

Visitors browsing at slow connections have to wait until large images load and they don’t have a clue something is missing — they see an empty block of space between two blocks of text. Image preloader will solve this issue.

15. Link Thumbnail

A picture’s worth a thousand words, right? So spice up those plain old text links with Link

16. PHP-based CSS Style Switcher

his PHP script checks to see if the user allows cookies. If so, a function is provided to change to an alternate CSS

17. Prettier Accessible Forms

Form-styling solution that is both accessible and portable

18. Faux Absolute Positioning

With faux absolute positioning, we can align every item to a predefined position on the grid.

19. Sparkline charts

Here are three techniques for incorporating data visualization into standards-based navigation patterns.

20. A More Accessible Map

Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive? Yes: using an accessible CSS-based map in which the underlying map data is separated from the visual layout.

21. Multi-Column Lists

How to produce a single, semantically logical ordered list that wraps into vertical columns.

22. Revised Image Replacement

Image Replacement is a method of using an image to replace text and content, specifically header information, titles, headings, and visual content, while preserving the “readability” of the page.

23 . CSS3 Multi-Column Module

CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.

24. Optimizing Your Website Structure For Print Using CSS

The secret to creating printable pages is being able to identify and control the “content area(s)” of your website. Most websites are composed of a header, footer, sidebars/subnavigation, and one main content area. Control the content area and most of your work is done. The following are my tips to conquering the print media without changing the integrity of your website.

25. Optimizing Your Website Content For Print Using CSS

26. Printing Web documents and CSS

This document describes some of the issues concerning the use of CSS to reformat Web documents for printing

27. Onion Skinned Drop Shadows

Now, web designers can use it to render another seeming impossibility: the truly extensible CSS-based drop shadow.

28. Mountaintop Corners

This example demonstrates the way that the CSS above sets the background images on either end of the box, while assigning a background color to shine through the transparent portions of the images.

29. Improving Link Display for Print

How to insert the value of an anchor’s href attribute, in-line, after the text, slightly smaller and flanked by parentheses for printing web pages

30. CSS tricks for custom bullets

31. PDF Link Labeling Example

Insert image based on file type linked to.

32. Unobtrusive Sidenotes

Unobtrusive Sidenotes is a simple mix of Javascript and CSS that makes it ridiculously easy to incorporate sidenotes into your web pages or blogs

33. Format Footnotes with Javascript & CSS

There are two divs, “content” and “footnotes”. “Content” holds the content, “footnotes” is empty. The footnotes are added in-line in span tags (with class="footnote") within the content.

34. Create a valid CSS alert message

35. StyleMap: HTML Visual Sitemap Tool

StyleMap uses valid HTML, CSS and a touch of DOM scripting to produce a visual sitemap out of an embedded definition list. The result is a functional, scalable, and above-all rapid way to produce a tree-style map for the planning stages of your project.

36. Snook’s Resizable Underlines

The aim is to apply underlines to paragraph text that stretch the whole width of the column (without using justified text), regardless of the lengths of the paragraph text itself.