Posts Tagged ‘iphone’

Apple text emboss

Back in the days of OS X 10.1 I wasn’t a really big fan of the striped backgrounds, overblown transparency, and over-the-top animations Apple was using to show off their new desktop. However, in the last few releases they’ve tightened up the look of their OS, made it much more consistent, and have ended up with a really nice design that I find very inspiring. The OS X aesthetic has of course translated over to the iPhone, where it’s even more elegant.

One of the little touches that I really like is that label-style text on a gradient or colored background has a slight emboss effect that really makes it pop off the background and gives everything a nice 3D physicality without being too overt. You can see examples on the iPhone, in button and header text as well as the icons on the top bar:

iPhone button emboss

I fiddled around in Fireworks for a while trying to replicate the effect, but I couldn’t quite get it right until I asked a friend at work, who quickly pointed out that it’s really just a simple drop shadow, not any sort of emboss effect. I guess my eye had seen a more complex effect than what what actually there. Anyway, it’s pretty simple: you add a drop shadow with no fuzz, 50% opacity. If you have light text, you add a black shadow that is cast straight up, and if you have dark text, a white shadow that’s cast straight down. That’s all there is to it!

shadow

I went ahead and applied this effect to the “BRH.numbera.com” text on the top of my site, and I really like the way it makes the text pop off of the background.

Now that I knew how to do it, I decided that the low-contrast menu text on my site could also benefit from such an effect, but I wasn’t going to go and replace every bit of text in the menu with images. So instead, I used a CSS3 property that’s supported in Safari 3, Opera 9.5, and the upcoming Firefox 3.1: text-shadow. I’d already used text-shadow to put some soft drop shadows on the links across the top of my site and the section header, so it wasn’t too hard to add them to the links. All that was required is:

text-shadow: 0 1px 0 #C9DFF3;

So that says to make a shadow straight down (0px right, 1px down), 0 fuzz, and the color #C9DFF3. I had to pick that color because text-shadow doesn’t have an opacity property built in. Of course, using another CSS3 feature, HSLA colors, I can make a shadow that works on any background:

text-shadow: 0 1px 0 rgba(255, 255, 255, .5);

And for light-colored text:

text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);

I ended up keeping the hand-chosen background color in addition to the HSLA version since Opera supports text-shadow but not HSLA. So now I have a cute little enhancement to my site that users of cutting-edge browsers will get to enjoy.

Comparison of Apple Text in different browsers

Note that Google Chrome, despite being based on the same WebKit core as Safari, doesn’t support text-shadow since Google had to provide their own rendering layer (Apple uses their own proprietary renderer).

Posts I haven’t written

I haven’t been updating this blog too much recently. I never meant for this blog to run on a schedule, but I did intend to post more frequently than this. My original idea was that the blog would serve two major purposes. First, it is a place for me to announce new projects or updates to software and websites I’ve already released. It’s done that quite well, though I haven’t had much to announce recently. My job has been taking the majority of my development time, and most of the projects I’ve been working on at home are either private or haven’t been released in the form I’d like to because my employer hasn’t approved them for release yet.

The second major purpose for my blog is as a place for me to record the solution to problems I run across while developing software, so that others won’t have to spend hours Googling or using trial and error to come to the same conclusion. I didn’t intend to rehash things that were easily found or that had already been discussed – only to post when I felt it was something that added value to the internet that hadn’t been there before. So a lot of the blog posts are not really a narrative or running commentary – they’re not meant to be subscribed to, but found individually. It’s for this reason that my most popular posts tend to include the exact text of error messages. This type of post has suffered both because I haven’t been doing as much development, because I can’t discuss a lot of what I’ve learned due to the nature of the projects I’m working on, and because I’ve been learning new stuff (like Ruby on Rails) and haven’t done enough to have solved problems others haven’t already posted solutions for.

The third reason I have this blog is to occasionally talk about my thoughts on different technical topics, from web development to video games. Again, I don’t like to make a post unless I think I’m adding something new, and most of the topics I’ve wanted to talk about have already been covered. I had a lot of draft posts sitting around about web development, web standards, and the evolution of browsers, but then I discovered Alex Russell’s blog and it turns out he’s already said most of what I wanted to say, and better than I could. Other stuff, like my impressions of Windows Vista, critique of stackoverflow.com and suggestions for the Xbox Live Arcade lineup, have been covered to my satisfaction in plenty of places. Maybe some of them will end up posted, but probably not.

Another part of the reason I haven’t posted much is the sheer weight of unfinished posts I have. Right now I have 64 drafts and only 52 real posts! So I’m going to attempt to clear things out by writing a little about what I haven’t posted. A lot of this stuff wasn’t posted because it fell under that third point above, but some of it I was just too lazy to flesh out into real posts. Some of it’s just random stuff. So here’s what’s been happening in the last year:

(more…)