CSS Table Examples

1. A CSS Styled Table

Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.

2. A CSS Styled Table Part 2

This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.

Continue reading

CSS Form Examples

Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you’ll be creating stunning CSS forms in no time at all.

1. Semantic Horizontal Form

This form is coded in a semantic way and the elements are positioned next to eachother except for the last fieldset which spans the full width of the form below the 3 top fieldsets. It’s been tested in FF1.x, IE6 and Opera8. (looks a little quirky in IE5.x but still usable)

Continue reading

Backgrounds in CSS3

For the last part of our introductory series to CSS3, we will be taking a look at the new background properties. These include background size, using more than one background for an element, and background origin (which effects the position of a background).

The new features allow greater control of the background element and will provide designers with a whole array of new possibilities. As usual, examples can be found below:

Background Size

Before CSS3, background size was determined by the actual size of the image used. It will be possible with the next CSS revision to specify in terms of percentage or pixels how large a background image should be. This will allow you to re-use images in several different contexts and also expand a background to fill an area more accurately. Continue reading

Multiple Columns in CSS3

Multiple columns are a major facet of laying out text – newspapers have used them for decades. So important are they that it is amazing that the current way to achieve a multi column layout is one of the most complex techniques for a new designer to grasp.

CSS3 introduces a new module known, appropriately, as multi-column layout. It allows you to specify how many columns text should be split down into and how they should appear. As usual, examples can be found below:

Multiple columns using CSS3

At present, this feature is available in Firefox and Safari 3. When the module becomes finalised in the CSS3 specification it will be adopted by other browsers and rolled into their updates.

There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:

Continue reading

User Interface in CSS3

This tutorial will be taking a look at some of the new ways you can manipulate user interface features in CSS3. But what do we mean by “user interface”?

CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.

The examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers: Continue reading

Text Effects in CSS3

The third part in this series on CSS3 will be delving into the new text effects. Typography is, without any doubt, one of the most important aspects to get right when designing a layout. Type can draw the reader through a page, give a certain impression, provide impact, be subtle, or aid in separating content.

CSS is already reasonably versatile in the way in which text can be displayed, but still constricts design in quite a few areas. CSS3 goes some way towards removing those limitations.

All the examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers: Continue reading