Tuesday, September 16th 2008

Fun with CSS

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+:

Screenshot of my blogs title in Firefox 3.1 alpha 2

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:

Screenshot of my blog title 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.

4 Responses to this post:

  1. Execvator says:

    Blur it 0.45 “m” lengths… that’s quite a huge shadow ;)Really neat effect for almost no work att all, look’s like it’s actually part of the logo now.

  2. Execvator says:

    Well, the “N” in the background is still an image, I’ll maybe get to changing that some day as well.I just had to try my hands on this.DNaylor.htmThough, it only “works” in Fx 3.1 nightlies as far as I know.

  3. Felicia says:

    Really nice blog, and of course the design! I’m looking for something like this, thanks for the inspiration. Now I’m off to play around with photoshop!:)

  4. David Naylor says:

    Thanks for the compliments! Glad you liked it.