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.
Full-text blog feed
