I’m working on a secret project, and part of that secret project involves having a sidebar that can be hidden. a la Google Reader, Google Maps, the file manager in Gnome., or lots of other places. It got me to wondering how they did it. Google reader, for instance, has this fun little arrow icon.
But here’s the fun part: This is not actually an icon, it’s a box. It took me about 15 minutes meddling inside Firebug to figure out how they did it, and I shall explain it, so that I can fully understand it, so that I can use something eerily similar. To start, here is a box with a border of 15 pixels:
Now, let’s draw this same box, but let’s change all the border’s colours:
See how the borders miter? So what google has done, is shrink this box down so that the arrow reaches a point. They set the width and height to 0px, and all the borders miter in to a point:
Now, if I were to set all the borders to the background colour but one, I would get a similar arrow:
And if I were to make the border width a reasonable size, I would get:
The style on the final div is:
width: 0px;
height: 0px;
border: 5px solid;
border-color: #EEEEEE red #EEEEEE #EEEEEE;
How badass is this?
Totally badass.
ummmm as a non computer illiterate person who you’ve completely confused, I will base this solely on you…and yes you and that little red arrow triangle dealy are indeed super badass!
You’ll be glad to hear the guy who did that is glad you noticed: http://friendfeed.com/mihai/fd585445/google-big-brains-makes-my-normal-sized-one-hurt
Well, a 5×10 image of a red triangle exactly like the one on the page (4-bit color, grey background) compressed as a PNG is 129 bytes. The CSS style you mention above is 87 bytes. So, it’s a cute trick, but it’s not like it saves the size of the whole image…
My reasoning for posting this wasn’t about transfer sizes, I just thought it was a really interesting way of doing it. If you’re worried about transfer, you would also need 3 other images to replicate what Google Reader is doing: a hover image pointing left which is essentially a negative image of the one I drew, and mirror images pointing right, so in the long run, using CSS may indeed be a little bit better. By less than a kilobyte, which for sites like mine makes absolutely no difference, but for sites like Google, every little improvement in performance matters.
Very cool. That’s something I’ve always just taken for granted; I bet little things like this really add up for a site like Google. I wonder what other little things are hidden in their code.
A very elegant solution, Mihal.
Very neat, Shan – it also guarantees that it’s centered on your screen no matter what resolution you’re running… kind of handy!