CategoryWeb Design

iPhone icon gloss overlay in pure CSS

As part of a Not Very Secret Project, I’ve been poking around at how the iPhone picks and generates icons for sites that you bookmark to your home screen (I only learned about Apple touch icons earlier this afternoon). Apparently, unless you specify otherwise, it applies a glossy overlay to that icon when it gets clipped out.

A lot of people seem to hate that gloss, but there are some ways out there to replicate it, mostly using a PNG overlay. I thought it might be interesting to try and get the same effect using pure CSS (note that this probably won’t work if you’re reading this post via syndication; click through to the original to see it). I am indebted to Neven Mrgan’s PSD replication, which I used for comparison purposes.

So here’s a plain 57×57 touch icon:

And here it is with the gloss, which is put together with Webkit and Mozilla border-radius and CSS gradients:

It’s not perfect–browsers don’t let you specify blending modes for shadows and highlights, and the antialiasing on gradients is still a little wonky–but it works at least as well as an image overlay, and now I get to feel superior for doing it with code instead of sprites.

The CSS in question:

 #glossy-icon {
	width: 57px;
	height: 57px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	background-image: -webkit-gradient(radial, 28.5 -47, 0, 28.5 0, 700, 
		from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
		color-stop(10%, rgba(255,255,255,0.2)),
		color-stop(10.5%, rgba(140,140,140,0.2)),
		color-stop(13%, rgba(140,140,140,0)),
		color-stop(13.7%, rgba(255,255,255,0)),
		color-stop(17%, rgba(255,255,255,1))), url(;
	background-image: -moz-radial-gradient(28.5px -47px 45deg, circle farthest-side, 
		rgba(255,255,255,1) 0%, 
		rgba(255,255,255,0.2) 72%, 
		rgba(140,140,140,0.3) 74.5%, 
		rgba(140,140,140,0) 85%,
		rgba(255,255,255,0) 95%,
		rgba(255,255,255,1) 160%), url(;

I realized later I should have made them say “BAD” and “ASSSSSS”


This is my current setup at work–since starting there last October, I’ve gradually advanced from working solely on my battered white Macbook to a laptop-and-monitor setup, then to a Mac Mini-and-monitor when my laptop got stolen, and now at last to the glorious panopticon you see above. I’m trying the portrait screen for my email client, SQL client, terminal and (mostly) IDE, and so far I really like it. I got the idea from some interview about a high-ranking Google engineer’s setup that I can’t be bothered to find now. Ben (the boss) said he thinks it originated with Flight Simulator junkies.

You can just barely see my tiny, mighty computer and a box of rejected business cards peeking out from under the right monitor stand; on the left are various plastic utensils, half a bag of snack chips, and a ceramic dish Kara gave me for reheating leftovers in the work microwave. The latter contains the Magical Neverending Napkin Supply. I never request or grab napkins from lunch places anymore, I just take whatever they throw in the carryout bag and put the unused ones in there. At this rate, I will never exhaust it.

The headphones are the stupidly expensive ones I bought from a DJ supply shop down the street, where the DJ supplier looked at me askance when I explained that I would be using them for web development. Like all headphones, they still annoy me with trapped ear-heat and weight, but they provide good isolation and I can stand them a lot longer than anything I’d tried before. I would have paid the whole price just to have the padded cups that go around (as opposed to pressing directly on) my ears.

Uh, what else can you see in there? Venerable iPod sitting on the Mini waiting to be plugged in, sexy aluminum keyboard that likes to shock me if I scuff my feet too much, expensive Logitech mouse with the click-and-lock free-scrolling mouse wheel that is fun but not actually that much of a productivity enhancer. Don’t tell Ben, he paid for that too. The little gray wrist cushion doubles as a stress ball / fidget toy. The books in the right corner are copies of the Ruby Cookbook and Mastering Regular Expressions, both of which I will go to great lengths to avoid cracking open. The shadow on the left is my hat.

Google’s making their own browser! Golly! Neat! Another goddamn rendering engine for me to test my CSS in!


(I’ll probably like it.)

Tech Tip!® Minute

Remember, dear reader and also future Brendan, an attribute that’s hyphenated in CSS is camelCapped in Javascript! So background-image becomes style.backgroundImage. For no real reason except psychotic, alias-hating adherence to meaningless language conventions.

While I’m at it, ROLLOVER HIGHLIGHT IMAGES ARE GODDAMN POINTLESS. Nobody cares about them except graphic designers who have never written a web page, and even they ignore them on every site but the ones they themselves mocked up.

(Yes, I know rollovers need not make use of Javascript. These two blurts are only sort of related.)

Punch line!

I don’t even LIKE jeans

Yesterday, for my job, I implemented some web-marketing stuff that included me actually typing out the following text, which... well, I don't want to reproduce it for fear of google, but I've rot13ed it below; click the button to read it.

Where was I entering this marketing text, you ask?

A MySpace page.

It's not like I was pretending I hadn't sold my soul long ago. I just hadn't realized it was going so cheap.

This is just so my grandmother doesn’t have to see the word “fuck” as soon as she opens my journal page. Wait! Fuck!

So I opened Facebook and saw this much of an ad on my screen:

Jennifer Aniston's face, over the text 'Help Save Her Life.'

And I was like, “What, does she need emergency reverse liposuction? I mean, obviously she DOES, but is that going to save her–oh.” Because by this point I had copied the image out and could see the first frame of the animated gif, to which it apparently never resets:

Little bald Madelyn is fighting CANCER.  ASS.

Hi! St. Jude? Call me. We need to talk about this concept called “above the fold.”

“Say hello to Bono and Sandra Day O’Connor!”

All right, I freaking live with The Surrealists, it’s about time I memed it up, right?

Presenting Dr. O’Callaghan’s Scientific Fist Names Generator.

Wanna get past me? First you’ll have to get past

This is all 30 Rock’s fault really, even if they didn’t invent the gag. I love 30 Rock.

I’m a twit now. I have an extremely small justification for this, as follows.

Part of the Anacrusis FAQ says “I’ll get to long-form when I’m ready for it,” and I’m ready for it, so I’m writing long-form–specifically, the South book. I hate it when people announce on their blogs that they are Writing A Novel, with slight exception for that one thing in November. But the fact is that my only successful projects are done a) with at least the appearance of rigorous scheduling and b) in the public eye, so I’m going to start microposting my daily page count. With luck this will keep me from going back and polishing the first chapter over and over. Seriously, guys, the first chapter is really good.

The twi–ugh, microblog is now a sidebar on the main NFD page, and it’s got its own feed, of course.

I never remember that when I need to apply a style to a server-side generated element, I don’t have to dig ten stupid lib files deep into the PHP or whatever and add a class attribute, I can just put it in a span (or div) and style all the elements of type x within that. So in case you forget the easy way to style server-side generated elements: put them in a span or div and style all the elements of type x within that!

Okay, hi. Working a lot.

Maria visited last week, and alleviated any potential self-absorbed silliness just by being here. But we also went to Brighton and the Tower of London (pictures soon), and played lots of games, including some with Leonard and Sumana. London had changed its mind and decided to be cold, but at least it didn’t start snowing until she was on her way home. I am still not doing my fair share of the cooking.

Canonical first public mention of Dogpool

Dear my web developer friends: Hi. I’m building an AJAX application and I have some Javascript questions. Yes, if I were an earlier version of myself I’d stop reading now too.

The application is intended for use by small groups of people–say, two to ten–collaboratively, for a few hours at a time. There may be many small groups working simultaneously, but activity won’t overlap among groups, only among members of a given group.

Say Alice, Esha and Mallory are using the application, which means having the page open in a tab or window. Each of them has a panel on that page showing what the other two are up to. Alice has five heads-up tokens, and she flips two of them over; I want Esha and Mallory to see that her tokens now consist of three heads and two tails within a few seconds of her doing so. This should not require any activity on Esha’s or Mallory’s parts except having the application page open.

I’m building this with Javascript and PHP/MySQL, no Java applets or anything. Is there any way to accomplish what I want that doesn’t involve polling–that is, using setTimeOut(XMLHttpRequest(…)) to refresh the activity panels every five seconds? setTimeOut is nonblocking on the client side, but that’s a huge number of requests per time period and it scales horribly.

I’m considering the obvious optimizations (having the client side taper off in request frequency during periods of inactivity, and writing the activity data to static files so I don’t have to hit PHP and MySQL with every request). Like most optimizations, though, they don’t address the central problem of nonscalable methodology. Is there anything in Javascript that would let the client accept pings from the server side when the data updates? I don’t think there is, but I’m hoping I’m wrong.

© 2021 not falling down

Theme by Anders NorénUp ↑