additions…

…web design…

unobtrusive CSS…

That should be "unobtrusive javascript" shouldn't it?   No, it is all about CSS this time, so the headline is correct.

I'm playing around with some background-images and CSS-hackery, and it is vital that such trickery won't disturb if the "wrong" image shows up in the background. It may not even be any visible image on some screens—and in some browsers, so it really shouldn't matter whether my hacks are working or not. That's the unobtrusive approach with CSS.

Below are some semi-transparent images I have made in PhotoShop, and they all rely on the old form of GIF-transparency. They have completely transparent and completely non-transparent pixels in a pattern, and are colored so they should blend in with the real background.

I happen to like that old "pattern-transparency" method, as it gives a "frosty" appearance that isn't easily achieved by using normal PNG-transparency. I think the effect is just right for my pages, so I've given my preferred browsers some "frosty" icons to display as "watermarks".

Opera…

I made this one first, on the basis of a huge “wallpaper” downloaded from Opera's site. Opera has a unique and easily recogniseable icon, and it blends in just fine without getting lost, even when given a high degree of transparency.

Opera's icon has a distinct 3D appearance even though it is one of the flattest browser-icons I've seen. I think I've managed to preserve that 3D appearance well as a relief.

I updated it with the arrival of version 10 alpha 1, so now I have this and a few older versions available.

Firefox…

A lot more details, so it has to float on top with less transparency than the others. All those details may easily run together and become a mess, and it should at least be possible to make out what icon it is when displayed on a good screen.

I landed on a compromise, where enough details show up on a good screen. Don't think I can do more out of it if it shall remain in the background. That is after all the main thing here.

Safari…

This one was easy and blends in well without getting lost, although I didn't make it more transparent than I had to. I would recognise this compas-shaped icon anywhere, even though round-shaped icons are everywhere.

Safari's icon also has a distinct 3D appearance that survived well when I transformed it into a watermark.

Konqueror…

Created back in 2005, but I couldn't enjoy it in the right browser until the autumn of 2008. That's how long it took me to include a PC with the right Operating System in my workstation.

I like Konqueror's icon, although the globe is quite common in browser-icons. I like this version of it also, as it shows up just fine and in enough details on my screens.

Internet Explorer..?

No IE icon here, and I may never create one either since IE6 can't handle them. What a surprise…
What you may see here is an example of artistic freedom. Couldn't just waste the space once it became available.

Internet Explorer inability to handle fixed positioning means that that browser can't show these images correctly floating on top of their background, as it should. Everything becomes static in that browser, and IE6 can't position these images at all on normal pages.

be nice to IE7…

They added just enough CSS support in IE7 to get its icon up in the background. Not bad, all things concidered.

It's the same, old, logo that we've seen “for ages” now, but that's alright with me. After all, it is the same, old, browser that's being improved upon. Even the logo has been improved upon, ever so slightly, but that's not all that apparent in a colorless, transparent, version.

unobtrusive web carpentry…

As mentioned; these icons in watermark-versions are not intended to show off all that much. They are minor design-details that I like to add to otherwise completely styled web pages.

The balance is most important in web design—in my opinion, and I rather “understyle” than “overstyle” a web page. This particular page is about as “light” as they get though.

sincerely  georg; sign

Hageland 12.apr.2005
last rev: 08.dec.2008

additions…

quotes:

unobtrusive:
- inconspicuous: not conspicuous, blatant, or assertive.
— msn Encarta

icon: (here)
- recognizable symbol: a picture or symbol that is universally recognized to be representative of something.
— msn Encarta


about…
…2005 - 2008