WebKit-based browsers have an excellent built-in tool for webpage debugging, Web Inspector. Basically, it's an analog of Firebug, with its own strengths and weaknesses. I've been using Web Inspector more and more lately, though one drawback bothered me a lot: It doesn't show line numbers of the CSS rules.

( Read more )

They say that only amateurs justify text, and the reason is simple: huge gaps between words. Even if hyphenation is used, the result is still far from perfect:

( Read more )

Some high-end Philips TV sets have a cool feature, Ambilight. Basically, it is LED lighting that changes its color dynamically, depending on the television picture's color. It is such a pleasure to watch movies on an Ambilight-enabled TV!

There are some implementations of such lighting in Adobe Flash. Why can't we, web masters, do the same thing using scripts? It was another opportunity for me to check out what state-of-the-art web browsers can do, so I've made the following thing:

( Read more )

I've decided to use a trendy CSS property, content, for my web project, to make webpages more "lightweight" and to improve the flexibility of tuning their appearance. As the project was only intended for web developers, I didn't need to bother about supporting outdated browsers (IE 6 and 7). Alas, I was greatly disillusioned in that CSS property: though everything was displayed correctly, the end user's experience was far from perfect.

( Read more )

In the last years, it has been trendy to use contrast background in the headings. For example, it looks like this:



Though the task looks pretty simple, it is not: if you think that all you need is to add some padding, that doesn't work because the indent is added only in the beginning and in the end of the text, and the text wrap is ignored.

( Read more )

In this article I will share with you a technique for laying out stretchy websites (actually, I have found out that I cannot make non-stretchy ones), which I've been using for the last 2-3 years. This technique, which can be used for creating sophisticated modular grids, is easy to use but somewhat difficult to understand, and it does have some drawbacks. Basically, this article might be useful for web designers too, as website layout should be correctly designed before actual coding is done.

( Read more )

Make HTML/CSS faster with Zen coding

( Read more )

Once I needed to make tabs on the webpage. As it's a rather routine problem, I didn't want to reinvent the wheel, so I just googled a little bit to see how people solve it. All the solutions I found looked rather run of the mill, something like that:

( Read more )

I asked my readers to think out a technique for laying out blocks with rounded-off corners and shadows. Take a look at the solutions I received, and you will see that most of them are very much alike: four elements in the corners and a somewhat odd-looking result, though there are some differences in block placement. Let's take a detailed look at the way those techniques work and also find out why this article isn't simply titled "Creating rounded-off blocks with shadows."

( Read more )

This post describes some techniques that may help you optimize your PNG-images. These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We’ll start with some essentials about the PNG format and will then move to advanced optimization techniques.

( Read more )