shapes and shadows
Aka why I got fed up with fiddling with the frontend part of this site. This one is not for the answers section - rather pretty much the opposite. Since It's a personal project and the other option would have been delayed shipping I let loose the standards I have for my code. This is a short description of where I wanted to go with the top-right-corner-menu design and which (bad) steps I took to bring it to life.
If you happen to know how to achieve the following with just neat and tidy html/css please do enlighten me :D.
The first image shows how far I got with minor hacks and the second one a photoshopped version (a lie, used gimp) of what I was aiming for (with smoother shadows around the outer-corners and a round inner-corner-on-the-outside).
If you are using a modern browser then with some luck you could also see something similar to my desired result on the top-right corner of this page (that is if you are reading this on-site and nothing has broken since I last took a look at it).
The space between
The goal was to make it feel like the buttons were on the same level as the main content section while casting a smooth shadow over the gaps... and not each other. Current solution uses wrapper div-s with hidden overflow on those sides where the shadows would otherwise creap over neighboring elements. As a drawback I get density differences near the cut edges of the shadow which also vary per browser.
That not-so-round corner?
6 words: I put an image on it.