David Naylor: Blog

A few days ago I sat down and played around a bit with CSS text-shadows on my blog.

Here’s what I ended up with. It will be visible if you’re using Safari 3+, Opera 9.5+ or Firefox 3.1+:

Here’s the code I used to get this effect:

text-shadow: 0 0 0.45em #fff;

… Which can be interpreted as… Create a shadow 0 distance to the right and 0 distance below the text. Blur it 0.45 m lengths and make it white.

Now, if this had been 1998, I would have applied several shadows (yes, that’s possible too, for some crazy reason) to all the text. It would have looked cool, for about six seconds, at which point you would begin to feel sick.

Since this is 2008 and I’d prefer to keep the few readers I have, I’ll just leave it at the white glow effect on the title.

Writing this post, I also decided to ditch the semi-transparent PNG image I have used for the hovered links. Instead I replaced it with a semi-transparent CSS3 colour:

background-color: rgba(255,255,255,0.30);

… Which means … Make the background colour white, but make it only 30% visible.

This is what the title looks like in Safari 3 and Firefox 3 when hovered:

No images, just some simple CSS code, er, baby! (Well, the N in the background is still an image, I’ll maybe get to changing that some day as well.)

You can read more about transparent colours here. And about text shadows here.

Edit: Well, as you may have worked out, I have also set a border radius for the light hover background:

-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;

Since the standard isn’t finalized, the browsers have their own prefixes for this setting.

Rounded corners look best in Firefox 3 (smooth!) but also work in Safari 3. Read more here.

If you’ve been here before you might have noticed the new design. I got inspired yesterday and thought I should have one if those hip dark wallpaper pattern inspired blog designs.

If you still see my old default design, the Tech Blue, just click Dark Pattern at the top of the page.

I started off by finding a suitable pattern for the background. I found this one:

… at theinspirationgallery.com, inverted it and used curves to make the pattern a dark grey.

To increase the readability I added a see-through (40 % opaque) black to the main section using the following CSS3 declaration:

This is what it should look like:

So far, only Firefox 3 and Safari 3 have support for semi-transparent colours (RGBA/HSLA), but I think the text is fairly readable even if you don’t get the darker background. Hopefully the number of Firefox 3 users will increase to about 20 % when it is released this summer, thanks to the auto-update feature of Firefox 2.

I’ve also changed the font to Lucida Sans Unicode (Lucida Grande on the mac), inspired by John Lilly’s blog. I decided to use it for both titles and text.

And here’s what a quote looks like:

I may not have gone where I intended to go, but I think I have ended up where I needed to be.

Douglas Adams

Overall I’m really pleased with the new look. Do shout if you find any annoying bugs.