xBlog: The visual thinking weblog
18th May 2005

Too many cooks?

“Imagine what it would be like to work with 29 other people on the same CSS file. Now you get the chance to help me with a little teamwork experiment.”

posted in CSS | Permalink | Comments Off

29th April 2005

How to Create a Photographic Gallery Using CSS

“One of the many uses for personal and professional web site is to display a gallery of photographs that show off your skills with a camera. Until now these galleries have been produced using javascript, PHP or CGI. Now, there is now another way. With this article I hope to show you how to produce a professional quality photograph gallery using nothing more than an unordered list of photographs and a Cascading Style Sheet (CSS).”

posted in CSS | Permalink | Comments Off

29th April 2005

184 Manually selected Style Sheet Resources

A big list of CSS resources in useful categories.

posted in CSS | Permalink | Comments Off

27th April 2005

How to Create a Frames Layout with CSS

“By far the most sought after use of CSS is to emulate the dated html ‘frame’ layout, whereby the header, navigation and footer stay on screen at all times and the content area will scroll. Since the adoption of the fixed position style by the latest browsers this is quite an easy task for CSS. Unfortunately, Internet Explorer hasn’t introduced this style into it’s repertoire (perhaps IE7 will correct this deficiency when it’s released later this year). Fortunately, there are ways around this and it’s possible to make Internet Explorer versions IE5.01, 5.5 and 6 fall into line with the rest.”

posted in CSS | Permalink | Comments Off

31st March 2005

Creating pure CSS buttons

“You’ve probably seen those small buttons that are linking to RSS feeds, the Xhtml Friends Network, GeoURL, etc. on many blogs and other sites… Usually, these buttons are statical GIF or PNG images. However, in this article you will learn how to create them using the Web standards XHTML and CSS. First of all, you need some markup.”

posted in CSS | Permalink | Comments Off

16th February 2005

Ten CSS tricks you may not know

“Article offering some lesser known CSS tricks — learn something new and see how many you already know!”

posted in CSS | Permalink | Comments Off

31st January 2005

How To write Efficient CSS

“One of the touted benefits of CSS is that it reduces total page weight, and thus download time, both at first page load, and even more on subsequent loads due to style sheet caching. This is true, but often a sizable fraction of the first load savings is lost because of highly redundant CSS code. Well that’s all over. Now you will learn some ’secrets’ of efficient CSS coding, enabling you to pare that style sheet right down to the bare bones. To be sure, you won’t achieve huge savings doing this, but for some highly competitive sites every little bit counts. There are several areas where byte-busting can happen, including shorthand†properties, multiple†declarations, default values, inheritance, and white space.”

posted in CSS | Permalink | Comments Off

27th December 2004

The Marriage of Presentation and Structure

“We advocate separating structure from style… Writing great CSS means understanding document structure from the ground up… The relationship between structure and style is an integrated one… Separation is in the layers, but together they form a whole…”

posted in CSS | Permalink | Comments Off

11th November 2004

Stylegala ★ the finest CSS and web standards resource

“Stylegala aims to promote, discuss and inspire the web audience in the areas of design, CSS and web standards ó combined.” (Thanks Coudal Partners!)

posted in CSS | Permalink | Comments Off

24th October 2004

3d CSS Zen Garden

“I’ve been thinking about making a CSS Zen Garden entry for a little while now, but before I think about design, I wanted to understand the Garden’s XHTML structure. I don’t know if this has come up anywhere before, but it seemed sensible for me to make a graphic illustration of the XHTML file.”

posted in CSS | Permalink | Comments Off

29th August 2004

Introducing Bleached

Ever wondered what your site would look like devoid of most of its color and imagery? Bleach the entire design, remove the saturation and leave behind the basic visual structure on a stark white background?

posted in CSS | Permalink | Comments Off

30th July 2004

Throwing Tables Out the Window

“Those who were at Digital Design World in Seattle this year saw me present a session titled, ‘No More Tables, CSS Layout Techniques’. In that session, we reviewed proper use of tables, and a few pointers for styling them with CSS. Then we turned to tableless layout, reviewing examples and an overview of the two basic approaches (positioning and floats). Half way through the presentation, I switched gears and announced weíd be converting a real-world example from tables and spacer gifs to a pure CSS layout. I could have created a fictitious example to work with in the presentation. But that idea would have seemed too contrived. If I created my own example, it would have been nice and tidy. Everything would have rendered exactly as I wanted it to, staying free and clear of any ìtrouble spotsî I already knew to avoid. Fictitious wasnít good enough. I wanted a real challenge. So I chose the site of a small, local-to-the-Seattle-area company I thought a few of the attendees in the audience might be familiar with: Microsoft.”

posted in CSS | Permalink | Comments Off

23rd June 2004

What’s in a name

“If standards conscious designers already follow conventions, then the stage is set. So I decided to look at forty designers’ sites to see what conventions were being used in common page elements like headers and banners, navigation, content and footers. Here’s what I found.” And here’s What’s in a name (pt2).

posted in CSS | Permalink | Comments Off

3rd June 2004

Web Standards ROI

“Is there anyone out there who still doubts the real world benefits of developing with Web standards? If so Iíve got some pretty compelling evidence for you. Especially when it comes to the benefits of CSS based design. Iím going to show you some actual numbers that show pretty clearly the Return On Investment (ROI) of going with Web standards. What Iíve done is gone back through my invoices and pulled the numbers for two very similar projects (in terms of scope and deliverable), one done back in 2001 and another done just before the end of 2003. Iím going to show you the differences between these projects in terms of time, effort and dollars as well as talk a little bit about the real world effects of using Web standards. Itís really pretty amazing.”

posted in CSS | Permalink | Comments Off

20th May 2004

3D CSS Box Model

“Iíve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, Iíve drawn a diagram. Iím not sure if this is of any use at all, but here it is anyway ó the 3D CSS Box Model.”

posted in CSS | Permalink | Comments Off