xBlog: The visual thinking weblog
10th March 2006

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

“Among the many things to like about Veerle’s redesign of her blog is the way she does the hover effects for lists of links, such as those in her ‘approved’ section. Rather than force others to wade through Veerle’s CSS (wow, that’s quite a style sheet!) I thought it’d be helpful to show how to create this ‘block hover’ effect.”

posted in CSS | Permalink | Comments Off

1st February 2006

Bubble Tooltips

“Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.” (Thanks swissmiss!)

posted in CSS | Permalink | Comments Off

26th January 2006

CSS Compressor

“Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The ‘Normal’ mode should work well in most cases, creating a good balance between the two.”

posted in CSS | Permalink | Comments Off

25th January 2006

Onion Skinned Drop Shadows

“Yes, Onion skinned. Animators use onion skinning to render what is impossible to see otherwise: a snapshot of motion across time. Now, web designers can use it to render another seeming impossibility: the truly extensible CSS-based drop shadow.”

posted in CSS | Permalink | Comments Off

12th January 2006

CSS Curly Quotes

“Simon Collison recently explained how to create Swooshy Curly Quotes Without Images using CSS. It’s a nice technique that works cross-browser, but you have to add <span> tags to your markup for it to work. Here is an alternate technique that requires no changes to your markup that will work in modern CSS2 compatible browsers like Firefox.”

posted in CSS | Permalink | Comments Off

6th December 2005

My contribution to the CSS shadow kerfuffle

“So for a couple of years now, folks have been trying to find ways to work around the fact that the box-shadow property from CSS3 seems to perpetually be just a few months away from actually appearing in Web browsers everywhere. Box shadows are a very common design element, and not being able to use them on the Web is a real pain in the ass.”

posted in CSS | Permalink | Comments Off

5th December 2005

CSS-Technique: Worn Type

“I was asked about how did I do the rough worn type for post headlines on Khmerang.com, so I thought I’d write a kind of a tutorial on worn type. It’s quite simple technique, derived from Gilder/Levin image replacement, but instead of replacing the whole text, I’m just placing a repeating pattern image on top of it”

posted in CSS | Permalink | Comments Off

1st December 2005

intensivstation :: CSS Templates

All templates are XHTML 1.0 and CSS2, with 3- and 4-column fixed and dynamic layouts.

posted in CSS | Permalink | Comments Off

24th October 2005

Call to action: The demise of CSS hacks and broken pages

“We‚Äôre starting to see the first round of sites and pages breaking due to the CSS fixes we have made. We would like to ask your help in cleaning up existing CSS hacks in your pages for IE7. It is has been our policy since IE6 that under quirks doctype we will not make any behavioral changes so that existing pages will continue to render unmodified, but under the strict doctype we want to change behavior to be as compliant as possible with the web standards.”

posted in CSS | Permalink | Comments Off

15th August 2005

The 10 Best Resources for CSS

“If you have been paying attention, you certainly have noticed an increasing number of websites that are employing CSS and an increasing number of resources talking about how great CSS is. If you have not yet jumped on the CSS bandwagon, you may want to consider doing so immediately.”

posted in CSS | Permalink | Comments Off

29th July 2005

CSS Image Maps - Flickr-like Technique?

“Below is a sample image map that’s built entirely using CSS and XHTML. While I’ve added support for Javascript (item titles are simply displayed beneath the image), I’ve disabled it in this example — I’ve run into a bit of a problem when JS is enabled and CSS is disabled…”

posted in CSS | Permalink | Comments Off

18th July 2005

Styled Form Controls

“To solve the javascript issue the styled form controls needed to be dynamically inserted into the page using a javascript. No javascript, no change. Original experiments with innerHTML and regExp failed miserably and proved inelegant. However I am still using innerHTML to produce the styled buttons in Internet Explorer. To solve the CSS problem the styled form controls needed to be invisible with CSS disabled, and likewise the unstyled controls needed to be visible.”

posted in CSS | Permalink | Comments Off

20th June 2005

Why a CSS website layout will make you money

“Although CSS layouts have been around for years, they haven’t become so commonplace until recently. This was basically due to limited browser support (especially from Netscape 4) - nowadays though, CSS 2.0 (which introduced positioning) is compatible with over 99% of browsers out there (check out the browser stats over at The Counter). So, why should you convert your website from its current table-based layout to a CSS layout? It’ll make you money. Simple really. And here’s four reasons to explain why…”

posted in CSS | Permalink | Comments Off

23rd May 2005

Learning CSS

“When you have been working with CSS for so long it becomes difficult to tell people the best methods for learning it because your methods aren’t always what works best for everyone. I definitely encountered my bumps and bruises and still seem to be going through some growing pains in my learning process (although I know a hell of a whole lot). The thing with me and CSS is that no matter how much I seem to know, I always feel like there is a better way to code it, which is probably true.”

posted in CSS | Permalink | Comments Off

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